/*「支援事例」や「お役立ち資料」のカードcomponent*/
/*CMSで管理者画面から内容は設定*/

/*カードを並べる親要素*/
.c-card-list {
	display: flex;
	gap: 30px;
	margin-bottom: 50px;
	width: 100%;
	align-items: stretch;
  flex-wrap: wrap;
}

.c-card-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--white);
	border: 1px solid #eee;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s;
}

/* カード全体をリンクにするための設定 */
.c-card-item__link {
    text-decoration: none;
    color: inherit;
    display: flex;
		flex-direction: column;
		height: 100%;
}

.c-card-item__thumbnail {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 15px;
	background-color: var(--wp--preset--color--white); /* 背景は常に白 */
	padding: 15px;          /* 画像が枠に触れないよう少し余白を */
	display: flex;
	align-items: center;
	justify-content: center;
}

.c-card-item__thumbnail img {
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

/* ホバー時の演出（お好みで） */
.c-card-item:hover .c-card-item__thumbnail img {
  transform: scale(1.05);
}

/*テキストエリア：枠の内側に余白を作る*/
.c-card-item__body {
  padding: 0 20px 20px; /*左右と下に20pxの余白*/
  display: flex;
  flex-direction: column;
  flex: 1;              /* これで中身を下に押し広げる */
}

/*タイトル文*/
.c-card-item__title {
  font-size: 16px;
	font-weight: bold;
	line-height: 1.6;
  margin-bottom: 0;
  display: -webkit-box;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 3.2em;
  transition: color 0.3s ease;
  margin: 16px 0;
}

.c-card-item:hover .c-card-item__title {
    color: var(--wp--preset--color--main-color) !important;
}

@media (max-width: 768px) {
  /* 1. カードを縦1列に並べる */
  .c-card-list {
    flex-direction: column;
    gap: 40px; /* カード同士の間隔を広めに取る */
    margin-bottom: 40px;
  }

  .c-card-item {
    width: 100%;
    background-color: var(--wp--preset--color--white);
    border: 1px solid #eee;
  }

  /* 2. サムネイルの調整 */
  .c-card-item__thumbnail {
    padding: 15px; /* スマホでは画像を横いっぱいに見せる */
    background-color: var(--wp--preset--color--white);
  }

  /* 3. テキストエリアの調整 */
  .c-card-item__body {
    padding: 5px 20px; /* カードの背景を透過させたので、パディングも不要に */
  }

  /* タイトル（3行制限を維持しつつサイズ調整） */
  .c-card-item__title {
    font-size: 18px; /* スマホで見やすいサイズにアップ */
    height: auto;    /* スマホでは高さ固定を解除して全文見せる */
    line-clamp: none;
    -webkit-line-clamp: none;
    margin: 18px;
  }
}