/* ==========================================================================
   c-card-column — Figma: Card/Column（コラム・レポートカード） (24570:22837)
   白地・枠線 border/default・影 Box-Dropshadow・内側 16px。サムネイル 312×176（16:9 相当）
   ========================================================================== */

.c-card-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  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-column:hover {
  box-shadow: var(--shadow-select); /* ホバー: Dropshadow-select（カード共通） */
}

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

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

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

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

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

.c-card-column__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-column-list__articles .c-card-column__title {
    font-size: 1rem;
    line-height: calc(28 / 16);
  }

  .p-column-list__articles .c-card-column__meta {
    font-size: 0.75rem;
    line-height: calc(22 / 12);
  }
}