/**
 * first — p-first-*（はじめての方へ）
 *
 * 仕様: docs/build-specs/first-visit.md / DECISIONS.md（残り4ページ裁定 #1〜#9）
 * - 本文幅は .l-inner（--container 1234px）。診療ページの p-treatment-inner は使わない
 * - 縦リズム: SP 3rem / PC 5rem（⑦のみ PC 上 7.5rem）。背景は ①cream → ②白 → ③cream →
 *   ④白 → ⑤cream → ⑥白 → ⑦cream の完全交互
 * - 波: ②③④⑤⑥⑦ の各上端に置き、常に境界（top:0 もしくは bottom:100%）へ揃える
 *   （カンプの ②→③ +41px オフセットは採用しない・DECISIONS #4）
 * - STEP行（c-step--rail）／確認カード（c-stage-card）／FAQ（c-faq）／CTA（c-closing-cta）／
 *   関連カード（c-related-card）は components.css の共通部品。ここではページ内の配置と
 *   ページ固有の上書きのみを書く
 */

/* --- セクション共通（縦リズム・波の基準位置・背景の交互） ---- */

.p-first-reserve,
.p-first-flow,
.p-first-before,
.p-first-cost,
.p-first-faq,
.p-first-closing {
	position: relative;
	padding-block: 3rem;
}

.p-first-reserve,
.p-first-before,
.p-first-faq {
	background: var(--color-base);
}

.p-first-flow,
.p-first-cost,
.p-first-closing {
	background: var(--color-bg-cream);
}

/* 下側セクションの上端に重ねる波（c-wave--top のものは components.css 側で bottom:100%） */
.p-first-wave {
	top: 0;
}

/* セクション内の縦グリッド（見出しと中身の gap 24px → PC 32px） */
.p-first-reserve > .l-inner,
.p-first-flow > .l-inner,
.p-first-before > .l-inner,
.p-first-cost > .l-inner,
.p-first-faq > .l-inner,
.p-first-closing > .l-inner {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 1000px) {
	.p-first-reserve,
	.p-first-flow,
	.p-first-before,
	.p-first-cost,
	.p-first-faq,
	.p-first-closing {
		padding-block: 5rem;
	}

	.p-first-closing {
		padding-block: 7.5rem 5rem; /* ⑦のみ上 120px（カンプ・first-visit.md §10-11） */
	}

	.p-first-reserve > .l-inner,
	.p-first-flow > .l-inner,
	.p-first-before > .l-inner,
	.p-first-cost > .l-inner,
	.p-first-faq > .l-inner,
	.p-first-closing > .l-inner {
		gap: 2rem;
	}
}

/* --- 本文段落（②⑤で共通の見え） ---------------------------- */

.p-first-reserve__body,
.p-first-cost__body {
	display: grid;
	gap: 1.125rem; /* 段落間 18px */
}

.p-first-reserve__body p,
.p-first-cost__body p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

/* 本文中の電話番号リンク（矢印リンクと同じオレンジ文字） */
.p-first-reserve__body a {
	color: var(--color-text-accent);
	text-decoration: underline;
}

/* --- ② p-first-reserve（ご予約について） -------------------- */

/* SPは縦積みで各ボタン全幅（c-btn--full）。tablet 以上は横並び・内容幅 */
.p-first-reserve__actions {
	display: grid;
	gap: 1rem;
}

@media (min-width: 600px) {
	.p-first-reserve__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.p-first-reserve__actions .c-btn--full {
		width: auto;
		min-width: 10.5rem; /* 168px（カンプの電話ボタン幅を下限に） */
	}
}

/* --- ③ p-first-flow（初診の流れ・c-step--rail ×6） ----------
   行の面は白。地が cream なので白い帯として見える（first-visit.md §3）。
   回数タグは c-step__count を出力していないため自動的に非表示 */

.p-first-flow__list {
	gap: 0.75rem; /* STEP行の間隔 12px */
}

/* cream地に白帯が並ぶ見えなので角丸を付ける（first-visit.md §10-8・DECISIONS #2 の二択のうち --radius） */
.p-first-flow .c-step--rail {
	padding-inline: 1.125rem;
	border-radius: var(--radius);
}

@media (min-width: 1000px) {
	.p-first-flow .c-step--rail {
		padding: 0.5rem 1.5rem;
	}
}

/* --- ④ p-first-before（ご来院前のご確認・c-stage-card ×3） --- */

.p-first-before__cards {
	display: grid;
	gap: 1.5rem;
}

/* ラベルは和文。Josefin Sans（英字 eyebrow 専用）を使わず --font-heading の小さめ級数に
   （DECISIONS 残り4ページ #6 / first-visit.md §10-4）。フォント・色は c-stage-card の既定を継承 */
.p-first-before .c-stage-card__label {
	font-size: var(--fs-caption);
	letter-spacing: 0.04em;
}

@media (min-width: 1000px) {
	.p-first-before__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- ⑤ p-first-cost（初診費用の目安） ------------------------
   副次ボタンは SP でも内容幅（DECISIONS 残り4ページ #5） */

.p-first-cost__actions {
	display: flex;
}

/* --- ⑦ p-first-closing（クロージング＋CTA＋関連ページ） ------
   c-closing-cta は診療ページと共有のため、全幅指定は first スコープで戻す */

@media (min-width: 600px) {
	.p-first-closing .c-closing-cta .c-btn--full {
		width: auto;
	}
}