/* ==========================================================================
   c-card-news — Figma: Card/News（お知らせカード） (24550:104058)
   白地・枠線 border/default・影 Box-Dropshadow・内側 16px。サムネイル 312×176（16:9 相当）
   ========================================================================== */

.c-card-news {
  display: flex;
  flex-direction: column;
  gap: var(--space-16); /* Card/News はサムネイル → 本文が 16px */
  height: 100%;
  padding: var(--space-16);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-base);
  box-shadow: var(--shadow-box);
  color: var(--color-text-base);
  transition: box-shadow 0.2s ease;
}

.c-card-news:hover {
  box-shadow: var(--shadow-select); /* ホバー: Dropshadow-select（カード共通） */
}

.c-card-news__thumb {
  overflow: hidden;
  background-color: var(--color-bg-base);
}

.c-card-news__image {
  width: 100%;
  aspect-ratio: 312 / 176; /* Figma 固有寸法 */
  object-fit: cover;
}

.c-card-news__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.c-card-news__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Figma: タイトルは 3 行まで表示 */
}

/* ホバー: タイトルは text/brand（下線なし） */
.c-card-news:hover .c-card-news__title,
.c-card-news:focus-visible .c-card-news__title {
  color: var(--color-text-brand);
}

.c-card-news__meta {
  color: var(--color-text-muted);
}

/* SP: お知らせ一覧・お知らせ詳細の関連記事は文字を一回り小さくする（静的HTML の c-card-media--sp-small。
   タイトル renewal/JP/16/Bold・日付 renewal/JP/12/Regular。他のページのカードは PC と同じ大きさ） */
@media (max-width: 1023px) {

  .p-news-list-section .c-card-news__title,
  .single-news .c-card-news__title {
    font-size: 1rem;
    line-height: calc(28 / 16);
  }

  .p-news-list-section .c-card-news__meta,
  .single-news .c-card-news__meta {
    font-size: 0.75rem;
    line-height: calc(22 / 12);
  }
}