/* ===========================================================
   Object / Project / Conditions（TOPページ：対応疾患 セクション）
   - 背景：var(--color-yellow-50)（クリーム色）
   - 10枚の疾患カード（SP：1列 横並び、PC：5列×2行 縦並び）
   - カードのタイトル色は2系統（navy-500 / pink-500）
     矢印は currentColor 継承でタイトル色と連動
   - 末尾に波SVG（wave-condition-to-consult.svg）
   =========================================================== */

/* .p-conditions（外枠）には背景色を敷かない。
   背景色は .p-conditions__body（フル幅の body ラッパー）に持たせて、
   波SVGの透過部分が背景色で塗りつぶされないようにする。
   （p-features と同じパターン） */
.p-conditions {
	color: var(--color-navy-500);
	/* 上の波（wave-first-to-condition）とぴったり繋ぐため padding-top:0 + 負margin */
	padding-top: 0;
	margin-top: -2px;
	position: relative;
}

.p-conditions__body {
	position: relative;
	z-index: 1; /* 波SVG（z-index 0）より前面 */
	background-color: var(--color-yellow-50);
}

/* ===========================
   見出しエリア
   - イラストはタイトル真上に中央配置
   =========================== */

.p-conditions__header {
	text-align: center;
	margin-bottom: 24px;
	padding-top: 32px;
}

@media (min-width: 768px) {
	.p-conditions__header {
		margin-bottom: 32px;
		padding-top: 56px;
	}
}

.p-conditions__header-illust {
	display: block;
	width: 72px;
	height: auto;
	margin: 0 auto 8px;
}

@media (min-width: 768px) {
	.p-conditions__header-illust {
		width: 88px;
		margin-bottom: 8px;
	}
}

.p-conditions__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-navy-500);
	letter-spacing: 0.04em;
	line-height: 1.3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	margin: 0;
}

.p-conditions__title::before,
.p-conditions__title::after {
	content: "・・・";
	color: var(--color-pink-500);
	font-weight: 400;
	font-size: 0.5em;
	letter-spacing: -0.18em;
	line-height: 1;
}

@media (min-width: 768px) {
	.p-conditions__title {
		font-size: 28px;
		gap: 10px;
	}
}

.p-conditions__subtitle {
	font-size: 13px;
	color: var(--color-pink-500);
	letter-spacing: 0.08em;
	font-weight: 500;
	margin: 2px 0 0;
}

@media (min-width: 768px) {
	.p-conditions__subtitle {
		font-size: 14px;
	}
}

/* ===========================
   リード文
   =========================== */

.p-conditions__lead {
	text-align: center;
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-black);
	margin: 16px 0 32px;
}

@media (min-width: 768px) {
	.p-conditions__lead {
		font-size: 18px;
		margin: 16px 0 48px;
	}
}

/* ===========================
   疾患カードグリッド
   - SP：1列 縦並び
   - PC：5列 × 2行
   =========================== */

.p-conditions__grid {
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.p-conditions__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 16px;
		margin-bottom: 56px;
	}
}

.p-conditions__item {
	margin: 0;
}

/* ===========================
   疾患カード（aタグ全体がリンク）
   - color プロパティでタイトル色を設定
     → 症状名 と 矢印（mask + currentColor）に継承される
   - 既定は navy-500、--pink modifier で pink-500 に
   =========================== */

.p-conditions__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: 16px;
	/* SP：右側に矢印用の余白を確保（arrow:right 16px + width 24px + 内側16px） */
	padding: 16px 56px 16px 16px;
	color: var(--color-navy-500); /* default: 矢印・タイトルがこの色 */
	text-decoration: none;
	transition: var(--transition-base, all 0.3s ease);
	height: 100%;
}

.p-conditions__card--pink {
	color: var(--color-pink-500);
}

/* hover：タイトル色は基本色（navy/pink）の系統で 700 に変化。
   PC マウス環境のみ発動（hover: hover AND min-width: 768px）。 */
@media (hover: hover) and (min-width: 768px) {
	.p-conditions__card:hover {
		color: var(--color-navy-700);
		transform: translateY(-2px);
		box-shadow: var(--shadow-sm);
	}

	.p-conditions__card--pink:hover {
		color: var(--color-pink-700);
	}
}

@media (min-width: 768px) {
	.p-conditions__card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
		padding: 16px 24px;
	}
}

/* ----- アイコン ----- */

.p-conditions__card-icon {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

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

@media (min-width: 768px) {
	.p-conditions__card-icon {
		width: 80px;
		height: 80px;
	}
}

/* ----- 本文ラッパー（症状名 + 説明文） ----- */

.p-conditions__card-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

@media (min-width: 768px) {
	.p-conditions__card-text {
		flex: none;
		width: 100%;
		align-items: center;
		gap: 8px;
		/* アイコンと症状名の間隔は 0px（spec） */
		margin-top: 0;
	}
}

/* ----- 症状名（color はカードから継承） ----- */

.p-conditions__card-name {
	font-size: 20px;
	font-weight: 700;
	color: inherit;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.p-conditions__card-name-sub {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: inherit;
}

@media (min-width: 768px) {
	.p-conditions__card-name {
		font-size: 20px;
	}
	.p-conditions__card-name-sub {
		display: block;
		font-size: 16px;
		margin-top: 2px;
	}
}

/* ----- 本文説明（タイトル色とは独立、常に黒） ----- */

.p-conditions__card-desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-black);
	margin: 0;
}

@media (min-width: 768px) {
	.p-conditions__card-desc {
		font-size: 16px;
	}
}

/* ----- 矢印 -----
   色違いSVG（icon-arrow-navy.svg / icon-arrow-pink.svg）を background-image で出力。
   modifier --pink でピンク版に切替。
   素材SVGは下向き（v）チェブロンのため、PCは無回転で下向き表示、
   SPは反時計回りに 90度回転して右向き表示。
   SP：絶対配置で右端から16px内側、PC：カード下部に静的配置 */

.p-conditions__card-arrow {
	position: absolute;
	top: 50%;
	right: 16px;
	/* 元画像が下向きのため、SPは -90deg で右向きに */
	transform: translateY(-50%) rotate(-90deg);
	/* SP：実機で見やすいサイズに調整（PCと同サイズ） */
	width: 24px;
	height: 24px;
	display: block;
	background-image: url("../../../images/svg/icon-arrow-navy.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

.p-conditions__card--pink .p-conditions__card-arrow {
	background-image: url("../../../images/svg/icon-arrow-pink.svg");
}

@media (min-width: 768px) {
	.p-conditions__card-arrow {
		position: static;
		top: auto;
		right: auto;
		/* PC：素材SVGがそのまま下向きなので回転なし */
		transform: none;
		margin-top: 8px;
	}
}

/* ===========================
   CTA
   =========================== */

.p-conditions__cta {
	display: flex;
	justify-content: center;
	padding-bottom: 40px;
}

@media (min-width: 768px) {
	.p-conditions__cta {
		padding-bottom: 64px;
	}
}

/* ===========================
   末尾の波SVG
   - 当院についてセクションの波と同じ実装パターン
   - 画面全幅、display: block で隙間なく配置
   =========================== */

/* ===========================================================
   修飾子: --bare（埋め込みモード）
   --------------------------------------------------------------
   診療案内ページ /menu/ の [conditions_grid] ショートコード経由で呼ばれたときだけ
   付与される（front-page.php の引数なし呼び出し＝TOP では付かない）。

   挙動:
     ・クリーム背景（yellow-50）を出さない（透明）
     ・末尾の波SVG（.p-conditions__wave-bottom）は PHP 側で出力しない
     ・wave 用に確保していた下余白も大きく残らないように body の bottom を
       小さめに詰める
     ・親 .l-page__inner（1280px ＋ content-padding clamp(16px,4vw,80px)）の
       中に入るため、ネストした .l-section__inner の max-width / padding-inline
       をスコープ限定で打ち消し、カードの左右端をパンくず・リード文と揃える
     ・上のwave連結用の負margin（-2px）は埋め込み時には不要なので解除

   スコープは .p-conditions--bare に限定。TOPの .p-conditions ルールは無変更。
   詳細度はベースの 1個（0,1,0）＋ 修飾子1個 で 0,2,0 → ベース 0,1,0 に勝つ。
   !important 不使用。子孫セレクタで __inner-container 対策維持。
   =========================================================== */
.p-conditions--bare {
	margin-top: 0;
}

.p-conditions--bare .p-conditions__body {
	background-color: transparent;
	padding-bottom: 24px;
}

@media (min-width: 768px) {
	.p-conditions--bare .p-conditions__body {
		padding-bottom: 32px;
	}
}

.p-conditions--bare .l-section__inner {
	max-width: none;
	padding-inline: 0;
}

.p-conditions__wave-bottom {
	display: block;
	position: relative;
	z-index: 0;
	/* 100vw はスクロールバー幅を含み右側にはみ出すため、親（section）の 100% を使う。
	   親 .p-conditions は block 要素でビューポート全幅に展開されるので 100% で十分。 */
	width: 100%;
	background-image: url("../../../images/svg/wave-condition-to-consult.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	height: clamp(140px, 14vw, 240px);
	pointer-events: none;
	margin-bottom: -1px; /* 次セクションとの隙間を打ち消す */
}