/* ==========================================================================
   固定ページ共通CTA（.mcta）

   - 対象は「訪問診療（/home-visit/）」と「診療科ページ（_medisapo_department_page）」の
     ページ末尾CTAのみ。inc/enqueue.php でその2条件のOR時だけ読み込む（全ページ読み込み禁止）。
   - **既存の .msv-cta / .mdp-cta は残したまま、`mcta` を追加付与して使う。**
     既存クラスのrenameはしない。ページ固有の余白・補助テキストは各ページのCSSが持ち続ける。
   - このファイルが持つのは「CTAのビジュアル」だけ：背景・オーバーレイ・文字色・内側余白・角丸。
     **margin は一切持たない。** 訪問診療は下48px、診療科ページは0で、値が異なるうえ
     診療科側はフッター余白の実測調整が入っている（department.css「ページ末尾の余白」参照）。

   【読み込み順】
   home-visit.css / department.css より後にenqueueする。.mcta と .msv-cta / .mdp-cta は
   ともに詳細度0-2-0のため、コンテナの背景・文字色は「後勝ち」でこのファイルが取る。
   一方、見出し・リード（.msv-cta-title 等）は0-2-0で個別に色が当たっているので、
   こちらは `.entry-body .mcta <要素>` の0-3-0で確実に上書きする（順序に依存させない）。

   【詳細度についての注意】
   WordPressコアは .is-layout-flow > * + * { margin-block-start: … } を詳細度0-1-0で出力し、
   その <style id="core-block-supports-inline-css"> はテーマCSSより後ろに置かれる。
   そのため本ファイルも全セレクターに .entry-body を前置している（外さないこと）。

   【背景画像】
   assets/images/cta/ にテーマ同梱する（サイト共通UI資産のためメディアライブラリへは置かない）。
   正本素材 … 1点の横位置写真（2172×724）。文字・ロゴ・ボタンは一切含まない。
     cta-bg-pc.jpg … 正本をリサイズのみ（トリミングなし）
     cta-bg-sp.jpg … 正本の右側（医療スタッフ側）を切り出したSP用。PCと同じ指定では
                     390px幅で中央の無地部分しか映らず、写真である意味がなくなるため分けている。
   ========================================================================== */

.entry-body .mcta {
	--mcta-ink: #2E2A22;          /* 見出し・本文の基本インク */
	--mcta-ink-soft: #4A4335;     /* リード文 */
	--mcta-radius: 14px;
	--mcta-veil: #FFF7EC;         /* 画像が読めなかった場合もこの色だけで文字が読める */

	position: relative;
	border-radius: var(--mcta-radius);
	padding: 44px 32px 40px;
	text-align: center;
	color: var(--mcta-ink);
	background-color: var(--mcta-veil);

	/* 上＝可読性オーバーレイ／下＝背景写真。写真をそのまま敷いて文字を載せることはしない。
	   中央（文字が乗る範囲）を濃く、左右端を薄くした楕円ベール。
	   こうすると左の机まわりと右の医療スタッフが背景として残りつつ、
	   中央のテキストは無地に近い下地の上に乗る。 */
	background-image:
		radial-gradient(
			ellipse 62% 115% at 50% 50%,
			rgba(255, 248, 238, 0.95) 0%,
			rgba(255, 248, 238, 0.90) 38%,
			rgba(255, 246, 234, 0.62) 74%,
			rgba(255, 243, 228, 0.44) 100%
		),
		url(../images/cta/cta-bg-pc.jpg);
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;

	/* 縦位置35%。中央合わせだと写真下端のオレンジの帯が文字の下に来てコントラストが落ち、
	   下端合わせ（center bottom）では実測で 3.96:1 まで落ちて基準を割った。 */
	background-position: center, center 35%;
}

/* 見出し・本文・リンク -----------------------------------------------------
   .msv-cta-title / .mdp-cta-title（白）、.msv-cta-lead / .mdp-cta-lead（#E8E2D2）は
   いずれも0-2-0。ここは0-3-0で確実に勝たせる。子要素へクラスを足す必要はない。 */
.entry-body .mcta .wp-block-heading {
	color: var(--mcta-ink);
}

.entry-body .mcta p {
	color: var(--mcta-ink-soft);
}

/* 補助テキスト内リンク（訪問診療の .msv-cta-back a は #fff・0-2-1）を0-3-1で上書き。
   色は #A85F10（他ページのオレンジ文字色）から濃くしてある。
   #A85F10 はベール越しの背景に対して実測 4.24:1（PC）／4.27:1（SP）で 4.5:1 を割ったため。 */
.entry-body .mcta p a {
	color: #8A4E0C;
	text-decoration: underline;
}

.entry-body .mcta p a:hover,
.entry-body .mcta p a:focus {
	color: #6E3D08;
}

/* ボタンは既存の .msv-btn / .mdp-btn（背景 #EF8F35 / 文字 #26190A）をそのまま使う。
   配色を二重管理しないため、このファイルでは色を再定義しない。
   背景が明るくなったぶん、ボタンの輪郭が沈まないよう影だけ締める。 */
.entry-body .mcta .wp-block-button__link {
	box-shadow: 0 4px 14px rgba(150, 84, 16, 0.28);
}

/* SP ----------------------------------------------------------------------
   390px幅ではCTAがほぼ正方形（実測 350×372〜413）になる。PCと同じ横位置写真を
   coverで敷くと中央の無地部分しか映らないため、SP専用の切り出しへ差し替える。
   テキストが面全体を覆うので、ベールはPCの楕円ではなく上下方向の均しにする。 */
@media (max-width: 600px) {
	.entry-body .mcta {
		padding: 32px 20px 28px;
		background-image:
			linear-gradient(
				180deg,
				rgba(255, 248, 238, 0.84) 0%,
				rgba(255, 247, 236, 0.92) 26%,
				rgba(255, 246, 234, 0.92) 74%,
				rgba(255, 242, 228, 0.80) 100%
			),
			url(../images/cta/cta-bg-sp.jpg);
		background-size: cover, cover;
		background-position: center, center;
	}
}