/**
 * treatments — p-treatments-*（診療案内 一覧ページ）
 *
 * 仕様: docs/build-specs/treatments-index.md / DECISIONS.md
 * - 本文幅は .l-inner（--container 1234px）。診療ページの p-treatment-inner（1080px）は使わない
 * - 縦リズム: SP 3rem / PC 5rem。⑤のみ PC 上余白 7.5rem（§7-11）
 * - 背景: ①cream → ②③白 → ④cream → ⑤白。波は cream→白 の2境界のみ（§6）
 * - カード（c-treatment-card）・帯（c-feature-band）・CTA（c-closing-cta）・関連（c-related-card）は
 *   components.css の共通部品。ここではページ内の配置（グリッド・余白）のみ
 */

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

.p-treatments-specialty,
.p-treatments-grid,
.p-treatments-cost,
.p-treatments-closing {
	position: relative;
	padding-block: 3rem;
}

.p-treatments-specialty,
.p-treatments-grid,
.p-treatments-closing {
	background: var(--color-base);
}

.p-treatments-cost {
	background: var(--color-bg-cream);
}

/* 波は下側セクションの上端に重ねる */
.p-treatments-wave {
	top: 0;
}

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

@media (min-width: 1000px) {
	.p-treatments-specialty,
	.p-treatments-grid,
	.p-treatments-cost,
	.p-treatments-closing {
		padding-block: 5rem;
	}

	.p-treatments-closing {
		padding-block: 7.5rem 5rem; /* ⑤のみ上 120px（カンプ・§7-11） */
	}

	.p-treatments-grid > .l-inner,
	.p-treatments-cost > .l-inner,
	.p-treatments-closing > .l-inner {
		gap: 2rem;
	}
}

/* --- ② p-treatments-specialty（専門治療ピックアップ） --------
   見出しのみ .l-inner の内側。帯は全幅フルブリードのため外に置く */

.p-treatments-specialty__bands {
	display: grid;
	gap: 2rem; /* 帯と帯の間 32px */
	margin-top: 1.5rem;
}

/* 帯内の導線（カンプに無いため追加・§7-4）。矢印リンクはオレンジ（DECISIONS home #12） */
.p-treatments-specialty__more {
	justify-self: start;
	margin-top: 0.5rem;
	align-items: center;
}

@media (min-width: 1000px) {
	.p-treatments-specialty__bands {
		margin-top: 2rem;
	}
}

/* --- ③ p-treatments-grid（診療内容一覧・c-treatment-card ×12） */

.p-treatments-grid__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-treatments-grid__list > li {
	display: grid; /* カードを行高いっぱいに */
}

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

@media (min-width: 1000px) {
	.p-treatments-grid__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* --- ④ p-treatments-cost（費用・保険について） --------------- */

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

.p-treatments-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-treatments-cost__more {
	margin: 0;
}

/* 副次ボタンは SP でも内容幅（DECISIONS その他 #5） */
.p-treatments-cost__btn {
	background: transparent; /* cream 地に乗せるため白面にしない */
}

/* --- ⑤ p-treatments-closing（クロージング＋CTA＋関連ページ） --
   CTAは c-closing-cta、カードは c-related-card。ここは配置のみ */

/* 主CTAは SP 全幅・タブレット以上は内容幅（DECISIONS その他 #5） */
@media (min-width: 600px) {
	.p-treatments-closing .c-closing-cta .c-btn--full {
		width: auto;
	}
}