/* ==========================================================================
   c-article-header — Figma: sec-article-header（記事詳細の見出しエリア。PC/13_ColumnDetail 25610:44882）
   PC: 上下 80px・要素間 32px・公開日 renewal/JP/Label/16/Medium（text/muted）→ 16px → タイトル renewal/JP/44/Bold
   SP: 上下 64px・左右 16px・要素間 24px・公開日 renewal/EN/Label/14/Regular・タイトル renewal/JP/32/Bold（公開日との間 8px）
   カテゴリには c-category-list（カテゴリ一覧へのリンク）、__share には c-share を入れる
   ========================================================================== */

.c-article-header {
  padding-block: var(--space-80);
  background-color: var(--color-bg-base);
}

.c-article-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  max-width: calc(var(--layout-container-max) + var(--layout-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.c-article-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-article-header__date {
  color: var(--color-text-muted);
}

.c-article-header__title {
  color: var(--color-text-base);
}

.c-article-header__share {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1023px) {

  .c-article-header {
    padding-block: var(--space-64);
  }

  .c-article-header__inner {
    gap: var(--space-24);
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }

  .c-article-header__content {
    gap: var(--space-8);
  }

  .c-article-header__date {
    font-size: 0.875rem; /* SP: renewal/EN/Label/14/Regular（tokens.css .t-en-label-14-regular）。日付は数字のみのため書体は PC のまま */
    line-height: calc(20 / 14);
    font-weight: var(--font-weight-regular);
  }

  .c-article-header__title {
    font-size: 2rem; /* SP: renewal/JP/32/Bold（tokens.css .t-jp-32-bold） */
    line-height: calc(48 / 32);
  }
}