/* ==========================================================================
   c-page-header — Figma: sec-page-header（一覧ページ上部のページ見出し。例: PC/12_ColumnIndex 24381:7491）
   PC: 上下 80px・見出し行 → 絞り込み 32px・タイトル renewal/JP/38/Bold + リード renewal/JP/16/Regular（間 16px）
   SP: 上下 64px・左右 16px・要素間 24px・タイトル renewal/JP/32/Bold（リードとの間 8px）
   --subtle: Figma PageTitle（25298:42991）用。背景 color/bg/subtle（リードは HTML 側で .t-jp-18-regular を付ける）
   __filter には c-category-list などを入れる
   ========================================================================== */

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

.c-page-header--subtle {
  background-color: var(--color-bg-subtle);
}

.c-page-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-page-header__title-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--color-text-base);
}

.c-page-header__title-row--tight {
  gap: var(--space-8); /* Figma: PC/05_CaseIndex（24381:6745）はタイトル → リード 8px */
}

.c-page-header__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

@media (max-width: 1023px) {

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

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

  .c-page-header__title-row {
    gap: var(--space-8);
  }

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

  /* SP のリードは PC の大きさ（16 / 18）に関係なく renewal/JP/16/Regular（静的HTML の c-page-title__lead と同じ） */
  .c-page-header__lead {
    font-size: 1rem;
    line-height: calc(28 / 16);
  }
}