/* section-header.css — セクション見出し
   Figma: Section_header_EN (node 1012:9201) / Section_header_JP (node 1012:9211)

   Figma実測：幅1200px・左右padding 120px（＝テキストの実効幅は960px）。
   .l-inner（1200px幅・センタリング）とは別物なので、ここで幅と余白を持つ。 */

.c-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
  max-width: var(--layout-content-width);
  margin-inline: auto;
  padding-inline: var(--space-120);
  /* 色はハードコードせず親から継承する（暗い背景のセクションで明色に反転できるように）。
     既定は body の --color-text（濃い文字）。l-section--green 等の中では明色を継承する。 */
  color: inherit;
}

.c-section-header__heading {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  line-height: var(--line-height-body);
  text-align: center;
  word-break: break-word;
}

/* 英語の小見出し（ENバリアントのみ） */
.c-section-header__en {
  flex-shrink: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
}

.c-section-header__title {
  flex-shrink: 0;
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
}

/* ENバリアントの日本語タイトルのみ字間を付ける（JPバリアントは字間なし＝Figma実測）。
   Figma実測はセクションにより3%/5%が混在するが、feature/service/station/message など
   多数派が5%のため wider(5%) に統一する。 */
.c-section-header--en .c-section-header__title {
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
}

.c-section-header__body {
  flex-shrink: 0;
  width: 100%;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-loose);
  text-align: center;
  word-break: break-word;
}

/* ==========================================================================
   SP（767px以下）— 左右パディングを縮め、見出しの折り返しを許可
   ========================================================================== */
@media (max-width: 767px) {
  /* ガターは親（l-section__inner や各セクションのinner）が一元管理する */
  .c-section-header { padding-inline: 0; }

  .c-section-header__en,
  .c-section-header--en .c-section-header__title { white-space: normal; }

  /* SPでは1段階ずつ縮める（h1-sm はSPトークンで h1 と同値のため h2 を使う） */
  .c-section-header__en { font-size: var(--font-size-h3); }
  .c-section-header__title { font-size: var(--font-size-h2); }

  /* EN⇔タイトルの間隔を詰める（gapよりも行間の寄与が大きい） */
  .c-section-header__heading {
    gap: 0;
    line-height: var(--line-height-tight);
  }

  /* 本文はSPでは左揃え */
  .c-section-header__body { text-align: left; }
}