/**
 * Medical Section Redesign (診療内容セクション)
 * ---------------------------------------------------
 * 現行：写真＋暗オーバーレイ＋白文字（4列グリッド、最終行3つで右側空白）
 * 新　：写真の下に白背景＋濃色テキスト（4+3中央寄せ）
 *
 * ・main.css の既存スタイルを上書きする差分CSS
 * ・元に戻したい場合は functions.php の医院サイト追加CSS
 *   読み込み行（wp_enqueue_style( 'medical-redesign', ... )）を
 *   削除またはコメントアウトするだけでOK
 * ---------------------------------------------------
 */

/* レイアウト：grid → flex に切替え、最終行を中央寄せ */
.medical-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

/* カード：aspect-ratio は解除し、photo + text-below の構造に */
.medical-item {
	flex: 0 0 calc((100% - 1.5rem * 3) / 4); /* 4列：gap 3つ分を引いて等分 */
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: auto;                      /* 元の 4/3 強制を解除 */
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: #fff;
	border: 1px solid var(--border-color);
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.medical-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(235, 71, 115, 0.16);
}

/* 写真部：カード上部に通常配置、比率 4:3 を維持 */
.medical-item-photo {
	position: relative;
	inset: auto;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.medical-item-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* テキスト部：写真の下に配置（絶対配置を解除・白背景・濃色文字） */
.medical-item-overlay {
	position: static;                        /* 元の absolute を解除 */
	inset: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.1rem 1rem 1.3rem;
	background: #fff;                        /* 元の黒オーバーレイ解除 */
	color: var(--text-heading);
}

/* 英文ラベル：ミュートグレーに */
.medical-item-en {
	font-size: 0.72rem;
	letter-spacing: 0.3em;
	color: var(--text-muted);
	opacity: 1;
	margin: 0 0 0.45rem;
	text-transform: uppercase;
	text-shadow: none;
}

/* 日本語タイトル：濃色見出しに、サイズを整える */
.medical-item-title {
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--text-heading);
	line-height: 1.4;
	letter-spacing: 0.06em;
	margin: 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	text-shadow: none;
}

/* 「ほんだ式口臭治療 →」：ピル型は使わず、ピンクのテキストリンク風に */
/* 写真に被らないよう、テキスト部の通常フローに配置する */
.medical-item-sublabel {
	display: inline-block;
	align-self: center;
	margin-top: 0.5rem;
	padding: 0;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	background: transparent;
	border: none;
	border-radius: 0;
	line-height: 1.5;
	white-space: nowrap;
	text-shadow: none;
}
.medical-item-sublabel::after {
	content: ' →';
	display: inline;
	margin-left: 0.1em;
}

/* -------------------- レスポンシブ -------------------- */

/* タブレット：3列 → 7項目は 3+3+1、最終1個が中央寄せになる */
@media (max-width: 1023px) {
	.medical-item {
		flex: 0 0 calc((100% - 1.5rem * 2) / 3);
	}
}

/* スマホ：写真をカード全体の背景に敷き、白いベールを重ねる            */
/* ・カードの枠は外し、写真は背景・文字はカードの中央に配置             */
/* ・口臭治療カードは「ほんだ式口臭治療 →」をタイトル下に表示          */
@media (max-width: 640px) {
	.medical-list {
		gap: 0.6rem;
	}
	.medical-item {
		flex: 0 0 100%;                 /* 1列 */
		flex-direction: column;         /* テキストを中央積みに */
		align-items: stretch;
		justify-content: center;
		position: relative;             /* 写真と擬似要素の基準 */
		overflow: hidden;
		border: none;
		border-radius: var(--radius-md);
		background-color: transparent;
		min-height: 7.5rem;             /* 縦幅を確保 */
		padding: 1.6rem 1rem;
	}
	.medical-item:hover {
		transform: none;
		box-shadow: none;
	}
	/* 写真をカード全体の背景に */
	.medical-item-photo {
		position: absolute;
		inset: 0;
		flex: none;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;             /* 比率指定を解除し全面に */
		margin: 0;
		z-index: 0;
		/* スマホレイアウト用のフェードを解除 */
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.medical-item-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* 白いベール（写真の上に重ねて文字を読みやすく） */
	.medical-item::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.7);
		z-index: 1;
		pointer-events: none;
	}
	/* テキスト：ベールより上に・カード中央に配置 */
	.medical-item-overlay {
		position: relative;
		z-index: 2;
		flex: none;
		align-items: center;            /* 横中央 */
		justify-content: center;        /* 縦中央 */
		text-align: center;
		padding: 0;
		background: transparent;
	}
	.medical-item-title {
		font-size: 1.2rem;
		letter-spacing: 0.06em;
	}
	.medical-item-en {
		font-size: 0.55rem;
		letter-spacing: 0.22em;
		margin-bottom: 0.3rem;
		opacity: 0.75;
	}
	.medical-item-sublabel {
		align-self: center;
		margin-top: 0.5rem;
		font-size: 0.7rem;
		letter-spacing: 0.04em;
	}
}

/* ===================================================================== */
/* Philosophy Section（私たちのこだわり）の細かな調整                    */
/* ・タイトルの <br class="br-pc"> をスマホでも有効化（句読点で改行）    */
/* ・本文中の <strong> の太字を解除（PC・SP共通）                        */
/* ===================================================================== */

/* 本文中の強調（<strong>）を太字にしない */
.philosophy-text strong {
	font-weight: inherit;
}

@media (max-width: 767px) {
	/* 句読点位置の改行を有効化（main.css の display:none を上書き） */
	.philosophy-title br {
		display: inline;
	}

	/* 院内ギャラリーの「院内をもっと見る」ボタン                           */
	/* と理事長挨拶の「スタッフ紹介を見る」ボタンを                         */
	/* ホワイトニングCTAボタン（.wt-cta-btn）と同じスマホ表示に揃える       */
	.gallery-more-btn,
	.director-staff-btn {
		display: block;
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
		padding: 0.75rem 1rem;
		font-size: 0.78rem;
		letter-spacing: 0.05em;
		text-align: center;
	}
	/* director-staff-btn は元々 margin-top があるので維持しつつ中央寄せ */
	.director-staff-btn {
		margin-top: 2rem;
	}
}