/* CTA セクション (クロージング) — v2
 * 旧実装の複数同時アニメ (回転 / pulse / particles / textGlow / titleBackGlow)
 * は撤去。動的演出は背景の静的ラジアル光 1 つだけ残す。
 * フォント太さで重みを出し、紺基調 × 1 点ゴールド (eyebrow) で締める。 */

.cta {
  position: relative;
  text-align: center;
  padding: var(--space-5xl, 128px) var(--space-md, 24px);
  /* ダーク拍 canonical 最深色に統一 (design.md L3 / KG-2): #08111f → #0b1322 */
  background: radial-gradient(ellipse at top, var(--surface-dark) 0%, var(--surface-dark-900) 65%, var(--surface-dark-950) 100%);
  overflow: hidden;
  isolation: isolate;
  cursor: default;
}

.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 75%, rgba(59, 130, 246, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 25%, rgba(147, 197, 253, 0.10) 0%, transparent 40%);
  z-index: 0;
  pointer-events: none;
}

.cta .container {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
}

/* メインタイトル — グロー / アニメーションを撤去し、weight で重みを出す */
.cta h2 {
  /* section heading は critical.css の global h2 トークンに統一 (44px@desktop) */
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-dark);
  margin-bottom: 1.25rem;
  letter-spacing: -0.025em;
  /* 日本語の末尾 1 文字折り返し防止 (「ゼロ / に」「最大 / に」回避) */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cta h2 br {
  display: block;
  content: "";
  margin-top: 0.25em;
}

/* デフォルトサブテキスト */
.cta p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(241, 245, 249, 0.85);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

/* エピローグ用ブランドコピー (ゴールドはここに集中) */
.cta p.cta-eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent-gold, #d8a849); /* Issue #25: fallback を token 実値に統一 (#d4a960 表記ゆれ解消) */
  margin: 0 0 1.5rem;
}

/* サブテキスト (h2 直下) */
.cta p.cta-sub {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(241, 245, 249, 0.85);
  margin: 0 auto 2.5rem;
  max-width: 600px;
  font-weight: 500;
  word-break: auto-phrase; /* 文節折返し (critical.css の表示コピー規律と同宣言) */
}

/* CTAボタンコンテナ — ボタン本体 (色 / 立体 / 状態) は共有コンポーネント
   src/shared/CtaButton.astro が担当し、ここはレイアウトのみ */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* レスポンシブ */
@media (max-width: 768px) {
  /* KG-5: 128 の 2:1 = 64 */
  .cta {
    padding: var(--space-2xl, 64px) 1.5rem;
  }

  .cta h2 {
    /* 9 文字 (「記録の時間をゼロに」「対話の時間を最大に」) が 375px viewport で
     * 1 行に収まる font-size を確保。1.625rem ≈ 26px → 9*26 ≈ 234px で余裕 */
    font-size: clamp(1.625rem, 5.6vw, 2.25rem);
    letter-spacing: -0.03em;
  }

  .cta p,
  .cta p.cta-sub {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  /* ボタンは CtaButton の scope なので要素セレクタで幅だけ当てる */
  .cta-buttons a {
    width: 100%;
    max-width: 360px;
  }
}

@media (max-width: 480px) {
  .cta {
    padding: 4rem 1.25rem;
  }

  .cta p.cta-eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
  }
}

/* ハイコントラストモード (ボタン側の対応は CtaButton.astro が持つ) */
@media (prefers-contrast: high) {
  .cta {
    background: #000033;
  }
}