/**
 * doctor — p-doctor-*（院長紹介ページ）
 *
 * 仕様: docs/build-specs/doctor.md / DECISIONS.md（残り4ページ裁定 #12〜#17・その他 #1〜#11）
 * - 本文幅は .l-inner（--container 1234px）をそのまま使う（doctor.md「コンテンツ幅」）
 * - 縦リズム: SP 3rem / PC 5rem。背景は ①cream → ②白 → ③cream → ④白 → ⑤cream → ⑥白
 * - 波: 下側セクションの上端に重ねる（p-doctor-wave）。④→⑤ のみ上向き cream 波を
 *       c-wave--top で上のセクション側へ持ち上げる
 * - カード（c-point-card --white）・チェックリスト（c-checklist）・CTA（c-closing-cta）・
 *   関連（c-related-card / c-related-list）は components.css の共通部品。ここでは配置のみ
 * - 資格カードは本ページのみの使用のため p-doctor-credential（DECISIONS #12）
 */

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

.p-doctor-greeting,
.p-doctor-career,
.p-doctor-credentials,
.p-doctor-values,
.p-doctor-closing {
	position: relative;
	padding-block: 3rem;
}

.p-doctor-greeting,
.p-doctor-credentials,
.p-doctor-closing {
	background: var(--color-base);
}

.p-doctor-career,
.p-doctor-values {
	background: var(--color-bg-cream);
}

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

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

@media (min-width: 1000px) {
	.p-doctor-greeting,
	.p-doctor-career,
	.p-doctor-credentials,
	.p-doctor-values,
	.p-doctor-closing {
		padding-block: 5rem;
	}

	.p-doctor-greeting {
		padding-block: 7.5rem 2.5rem; /* ②のみ 上120px / 下40px（カンプ） */
	}

	.p-doctor-closing {
		padding-block: 7.5rem 5rem; /* ⑥ 上120px / 下80px（カンプ） */
	}

	.p-doctor-career > .l-inner,
	.p-doctor-credentials > .l-inner,
	.p-doctor-values > .l-inner,
	.p-doctor-closing > .l-inner {
		gap: 2rem;
	}
}

/* --- 医師へのページ内リンク（p-doctor-nav・2026-10-02 矯正担当医追加） -----
   見た目はタブだが、#director / #ortho へのページ内リンク。
   表示中の医師は site.js が aria-current="true" を付けてハイライトする */

/* 波＋上余白（固定しない部分） */
.p-doctor-nav-lead {
	position: relative;
	height: 3rem;
	background: var(--color-base);
}

/* ページ内リンク本体（ページ内の通常位置） */
.p-doctor-nav {
	background: var(--color-base);
}

/* ヘッダー直下の帯（site.js がページ内リンクを複製して #site-header に入れる）。
   CSS sticky を2段重ねると iOS Safari のスクロール中に上下にちらつくため、
   ヘッダーの子として absolute で出し、ヘッダーと一体で動かす */
.p-doctor-subnav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* ヘッダー（layout.css の .l-header）と同じ半透明の白＋ぼかし・下線で一体に見せる */
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-line);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem);
	transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s linear 150ms;
}

/* 帯では全幅の下線（.p-doctor-subnav）を使うため、リスト側の罫線は消す */
.p-doctor-subnav .p-doctor-nav__list {
	border-bottom: 0;
}

.p-doctor-subnav.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 150ms ease-out, transform 150ms ease-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.p-doctor-subnav,
	.p-doctor-subnav.is-shown {
		transition: none;
		transform: none;
	}
}

/* ヘッダー直下の帯の分だけ着地位置を下げる（--doctor-nav-h は site.js が実測して上書き） */
.p-doctor-person {
	scroll-margin-top: calc(3.75rem + var(--doctor-nav-h, 4.5rem));
}

.p-doctor-nav__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--color-line);
}

.p-doctor-nav__link {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.125rem;
	min-height: var(--tap-min);
	margin-bottom: -1px; /* 下線をリストの罫線に重ねる */
	padding: 0.75rem 0.5rem;
	border-bottom: 3px solid transparent;
	font-family: var(--font-body);
	color: var(--color-text-muted);
	text-align: center;
	text-decoration: none;
	transition: color 150ms ease-out, border-color 150ms ease-out;
}

.p-doctor-nav__link[aria-current="true"] {
	border-bottom-color: var(--color-primary);
	color: var(--color-text);
}

.p-doctor-nav__link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -2px;
	border-radius: var(--radius) var(--radius) 0 0;
}

@media (hover: hover) {
	.p-doctor-nav__link:not([aria-current="true"]):hover {
		color: var(--color-text);
		border-bottom-color: var(--color-line);
	}
}

.p-doctor-nav__role {
	font-size: var(--fs-caption);
	line-height: 1.4;
}

.p-doctor-nav__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title-s);
	line-height: 1.5;
}

.p-doctor-nav__link[aria-current="true"] .p-doctor-nav__role {
	color: var(--color-text-accent);
}

@media (min-width: 1000px) {
	.p-doctor-nav-lead {
		height: 5rem;
	}

	.p-doctor-nav__list {
		grid-template-columns: repeat(2, minmax(0, 17.5rem));
		justify-content: center;
	}
}

@media (min-width: 1280px) {
	.p-doctor-person {
		scroll-margin-top: calc(5.125rem + var(--doctor-nav-h, 4.5rem));
	}
}

/* 矯正担当医のブロックは地色を反転（あいさつ cream → 経歴 白）して院長と区切る */
.p-doctor-greeting--cream {
	background: var(--color-bg-cream);
}

.p-doctor-greeting--cream .p-doctor-greeting__photo::before {
	background: var(--color-base);
}

.p-doctor-career--white {
	background: var(--color-base);
}

.p-doctor-greeting__more {
	margin: 0;
	text-align: right;
}

/* --- ② p-doctor-greeting（院長あいさつ） -------------------- */

.p-doctor-greeting__inner {
	display: grid;
	gap: 1.5rem;
}

.p-doctor-greeting__photo {
	position: relative;
	isolation: isolate;
	margin: 0 1.5rem 1.5rem 0;
}

.p-doctor-greeting__photo::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	transform: translate(1.5rem, 1.5rem);
	border-radius: var(--radius);
	background: var(--color-bg-cream);
}

.p-doctor-greeting__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1; /* SP 342×342 */
	object-fit: cover;
	object-position: center top;
	border-radius: var(--radius); /* カンプ 0 → 画像面は --radius に統一（doctor.md §9-12） */
}

.p-doctor-greeting__text {
	display: grid;
	align-content: start;
	gap: 1rem;
}

.p-doctor-greeting__name {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.p-doctor-greeting__body {
	display: grid;
	gap: 1rem; /* 段落の区切り（カンプは空行1つ） */
}

.p-doctor-greeting__body p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	letter-spacing: 0.02em;
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

.p-doctor-greeting__body strong {
	font-weight: 700;
	color: var(--color-text); /* トップ §5 と同じ強調（doctor.md §9-10） */
}

/* 経歴サマリ: SP は全幅・左寄せ、PC は右寄せ（地色・枠線なし） */
.p-doctor-greeting__sign {
	display: grid;
	gap: 0.375rem;
	padding: 1rem 1.25rem;
}

.p-doctor-greeting__sign p {
	margin: 0;
}

.p-doctor-greeting__sign-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title-s); /* カンプ17px → 18px（DECISIONS #3） */
	line-height: 1.6;
	color: var(--color-text);
}

.p-doctor-greeting__sign-role {
	font-family: var(--font-body);
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-muted);
}

@media (min-width: 1000px) {
	.p-doctor-greeting__inner {
		grid-template-columns: 23.75rem minmax(0, 1fr); /* 写真 380px ＋ 本文 */
		gap: 3rem;
		align-items: start;
	}

	.p-doctor-greeting__photo {
		margin-right: 0;
	}

	.p-doctor-greeting__photo img {
		aspect-ratio: 19 / 22; /* PC 380×440 */
	}

	.p-doctor-greeting__sign {
		justify-items: end;
		text-align: right;
	}
}

/* --- ③ p-doctor-career（経歴） ------------------------------ */

.p-doctor-career__table {
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

/* SP は縦積み（年 → 内容）。カンプの行内 gap 16px は行間（罫線＋padding）より
   広くなり年が前の行に寄って見えるため 8px に詰めている */
.p-doctor-career__row {
	display: grid;
	gap: 0.5rem;
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--color-line);
}

.p-doctor-career__year {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title-s);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.p-doctor-career__body {
	margin: 0; /* dd の既定インデントを解除 */
	font-family: var(--font-body);
	font-size: var(--fs-body);
	letter-spacing: 0.02em;
	line-height: var(--lh-body);
	color: var(--color-text);
}

.p-doctor-career__note {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	letter-spacing: 0.04em;
	line-height: 1.7;
	color: var(--color-text-muted);
}

@media (min-width: 1000px) {
	.p-doctor-career__row {
		grid-template-columns: 8.75rem minmax(0, 1fr); /* 年 140px 固定 ＋ 内容 */
		gap: 1.5rem;
		align-items: baseline;
	}
}

/* --- ④ p-doctor-credentials（所属学会・資格） ----------------
   ⚠️ 認定番号・取得年は出力しない（DECISIONS #15）。
   「認定証・表彰」ギャラリーは撮影後に有効化（doctor.md §9-7） */

.p-doctor-credentials__lead {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

.p-doctor-credentials__cards,
.p-doctor-credentials__panels {
	display: grid;
	gap: 1rem;
}

/* 資格カード（本ページ限定の部品・DECISIONS #12） */
.p-doctor-credential {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	height: 100%;
	padding: 1.5rem;
	background: var(--color-base);
	border: 1px solid var(--color-line); /* カンプ2px → 1px（DECISIONS #4） */
	border-radius: var(--radius);
	overflow: hidden;
}

/* 資格証の写真: 縦長の証書を切らずに見せるため contain＋淡色地 */
.p-doctor-credential__photo {
	margin: 0 0 0.25rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(var(--radius) * 0.6);
	background: var(--color-bg-icegray);
}

.p-doctor-credential__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.p-doctor-credential__society {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text-secondary);
}

.p-doctor-credential__name {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
	letter-spacing: -0.02em;
	color: var(--color-text);
}

/* カンプの区切り線（SVG画像）は本文側の border-top で表現 */
.p-doctor-credential__text {
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-line);
	font-family: var(--font-body);
	font-size: var(--fs-note);
	line-height: 1.7;
	color: var(--color-text);
}

.p-doctor-credential__link {
	margin: 0;
}

.p-doctor-credential__link .c-btn {
	font-size: var(--fs-note);
}

/* 一覧パネル（所属学会 / その他の資格・役職） */
.p-doctor-credentials__panel {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	height: 100%;
	padding: 1.5rem;
	background: var(--color-base);
	border: 1px solid var(--color-line); /* カンプ2px → 1px（DECISIONS #4） */
	border-radius: var(--radius);
}

.p-doctor-credentials__panel-title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-title-s);
	line-height: 1.6;
	color: var(--color-text);
}

.p-doctor-credentials__panel .c-checklist {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--color-text);
}

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

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

	.p-doctor-credentials__panels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* --- ⑤ p-doctor-values（診療で大切にしていること） -----------
   カードは c-point-card--white（cream地セクションと面色を反転） */

.p-doctor-values__grid {
	display: grid;
	gap: 1rem;
}

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

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

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

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