/* ============================================================
   typography.css
   見出し階層 + デフォルト装飾 + バリエーション
   設計事務所トーン: 大見出しは明朝、中以下はゴシック
   ============================================================ */

@layer typography {
  /* ===== 階層: サイズ × 太さ × フォントファミリー ===== */

  h1 {
    font-family: var(--ff-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-heading);
    color: var(--c-text);
    margin: 0 0 var(--sp-5);
  }

  h2 {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-heading);
    color: var(--c-text);
    /* デフォルト装飾: 左縦線(bar) */
    position: relative;
    padding-left: 0.9em;
    margin: var(--sp-7) 0 var(--sp-5);
  }
  h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.25em;
    width: 3px;
    background: var(--c-accent);
  }

  h3 {
    font-family: var(--ff-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-heading);
    color: var(--c-text);
    /* デフォルト装飾: 小四角(square) */
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin: var(--sp-6) 0 var(--sp-4);
  }
  h3::before {
    content: "";
    display: block;
    width: 0.45em;
    height: 0.45em;
    background: var(--c-accent);
    flex-shrink: 0;
  }

  h4 {
    font-family: var(--ff-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-heading);
    color: var(--c-text);
    padding-left: 0.7em;
    border-left: 2px solid var(--c-accent);
    margin: var(--sp-5) 0 var(--sp-3);
  }

  /* 最初の子は上マージン0 */
  :where(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
  }

  /* flex/gap で制御している箇所では margin を解除 */
  .l-section__header > :where(h1, h2, h3, h4),
  .l-stack > :where(h1, h2, h3, h4) {
    margin: 0;
  }

  /* ===== 段落 ===== */
  p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    color: var(--c-text);
    margin: 0 0 var(--sp-4);
  }
  p:last-child { margin-bottom: 0; }

  /* ===== Eyebrow(セクション小ラベル) ===== */
  .t-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    font-family: var(--ff-sans);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-eyebrow);
    color: var(--c-accent);
    text-transform: uppercase;
  }
  .t-eyebrow::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--c-accent);
  }
  /* 中央寄せ版(両側に線) */
  .t-eyebrow--center {
    justify-content: center;
  }
  .t-eyebrow--center::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--c-accent);
  }

  /* ===== Lead(リード文) ===== */
  .t-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    letter-spacing: var(--tr-body);
    color: var(--c-text-muted);
    max-width: 60ch;
  }

  /* ===== Small text ===== */
  .t-small {
    font-size: var(--fs-small);
    color: var(--c-text-muted);
  }
  .t-caption {
    font-size: var(--fs-caption);
    color: var(--c-text-subtle);
  }

  /* ===== 見出し装飾バリエーション =====
     使い分けの原則:
     - h2.t-heading--centered: TOPなど中央寄せヒーロー見出し
     - h2.t-heading--number:   ステップ・プロセス見出し
     - h2.t-heading--underline: 控えめな区切り
     - h2.t-heading--plain:     装飾を完全に外す
  */

  h2.t-heading--centered {
    text-align: center;
    padding-left: 0;
    padding-bottom: 0.75em;
  }
  h2.t-heading--centered::before {
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 2.5em;
    height: 1px;
  }

  h2.t-heading--number {
    display: flex;
    align-items: baseline;
    gap: 0.85em;
    padding-left: 0;
  }
  h2.t-heading--number::before {
    content: attr(data-number);
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    font-family: var(--ff-num);
    font-size: 0.5em;
    font-weight: var(--fw-medium);
    color: var(--c-accent);
    letter-spacing: 0.15em;
  }

  h2.t-heading--underline {
    padding-left: 0;
    padding-bottom: 0.65em;
  }
  h2.t-heading--underline::before {
    left: 0;
    top: auto;
    bottom: 0;
    width: 2.5em;
    height: 2px;
  }

  h2.t-heading--plain {
    padding-left: 0;
  }
  h2.t-heading--plain::before {
    display: none;
  }

  /* h3 罫線パターン */
  h3.t-heading--rule {
    display: block;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--c-line);
  }
  h3.t-heading--rule::before {
    display: none;
  }

  /* ===== Display(ヒーロー大見出し) ===== */
  .t-display {
    font-family: var(--ff-display);
    font-size: var(--fs-display);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-display);
    color: var(--c-text);
  }

  /* ===== リンク(本文内) ===== */
  a {
    color: var(--c-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity var(--dur) var(--ease);
  }
  a:hover {
    opacity: 0.7;
  }

  /* ナビ等装飾なしリンク用 */
  a.t-link-plain,
  .t-link-plain a {
    color: inherit;
    text-decoration: none;
  }

  /* ===== SP用改行クラス ===== */
  .sp-br { display: none; }
  @media (max-width: 768px) {
    .sp-br { display: inline; }
  }
}