/**
 * core/image のブロックスタイル（LP 用）
 * - 「板つき」 is-style-board … 画像の後ろに、LP のアクセント色のグラデーションの板を右下にずらして敷く
 * - 「モニター枠＋板」 is-style-monitor-board … 上の板に加えて、画像の外側を黒いふち（モニターのベゼル）で囲む（3つのポイントの画像）
 *     ブロックスタイルは1つしか選べないので、枠と板を1つのスタイルにまとめた（第11段階）。
 *     ふちの色は theme.json の contrast（#222。FV の実績画像のふちと同じ色）。太さは画像の幅の約1%（FV の実績画像と同じ割合）で、
 *     画像の幅に合わせて変わる（PC 約6px・SP 約3px。最小 3px・最大 8px）。脚（台）は付けない
 *
 * 画像は切らずに全体を表示する（CEO決定 2026-10-06）：縦横比・切り抜きは指定せず、画像そのままの比率。板は画像（figure）の大きさに追従する。
 * 角丸は画像ブロックのパネル（角丸）で決める。擬似要素（板）が要るので CSS を1枚持つ。
 */
.wp-block-image:is(.is-style-board, .is-style-monitor-board) {
	position: relative;
	margin: 0;
}

/* 板は画像の後ろ（z-index:-1）。重ねる範囲を外の箱（カラム）の中に閉じる */
:has(> .wp-block-image:is(.is-style-board, .is-style-monitor-board)) {
	isolation: isolate;
}

.wp-block-image:is(.is-style-board, .is-style-monitor-board)::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: var(--wp--preset--border-radius--l);
	background: var(--wp--preset--gradient--lp-accent);
	transform: translate(28px, 28px);
}

.wp-block-image:is(.is-style-board, .is-style-monitor-board) img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- モニター枠 ----
   ふちは画像の外側（figure の枠線）に付ける。画像の上には重ねないので、画像は四辺とも全部見える（第11段階で修正：CEO 指示）。
   太さは画像の幅の約1%（cqi はカラムの幅の1%。最小 3px・最大 8px）。角丸はふちの外側にプリセット M、画像の角は四角のまま */
:has(> .wp-block-image.is-style-monitor-board) {
	container-type: inline-size;
}

.wp-block-image.is-style-monitor-board {
	--hpcode-bezel: clamp(3px, 1cqi, 8px);
	border: var(--hpcode-bezel) solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--preset--border-radius--m);
	background-color: var(--wp--preset--color--contrast);
}

/* 後ろの板は、ふちの外側に合わせる（擬似要素の基準は枠線の内側なので、ふちの分だけ外へ広げる） */
.wp-block-image.is-style-monitor-board::before {
	inset: calc(var(--hpcode-bezel) * -1);
	border-radius: var(--wp--preset--border-radius--m);
}

/* 画像が左にあるカラム（カラムのスタイル「画像を左に」）では、板を左下にずらす */
.wp-block-columns.is-style-media-left .wp-block-image:is(.is-style-board, .is-style-monitor-board)::before {
	transform: translate(-28px, 28px);
}

@media (max-width: 767px) {
	.wp-block-image:is(.is-style-board, .is-style-monitor-board) { margin-right: 14px; }
	.wp-block-image:is(.is-style-board, .is-style-monitor-board)::before,
	.wp-block-columns.is-style-media-left .wp-block-image:is(.is-style-board, .is-style-monitor-board)::before { transform: translate(14px, 14px); }
}

/* ---------- 「影（形に沿う）」 is-style-drop-shadow／「影（形に沿う・強め）」 is-style-drop-shadow-strong（無料診断LP・2026-10-07）----------
   背景が透明の画像（窓の形・紙の形に切り抜いたキャプチャ）に、形に沿った影を付ける。影は画像に入れず CSS で持つ（CEO 2026-10-07）。
   パネルの影（box-shadow）は四角い箱に付くので、形に沿う filter: drop-shadow() は CSS。影の値は theme.json の影のプリセット */
.wp-block-image.is-style-drop-shadow img {
	filter: drop-shadow(var(--wp--preset--shadow--card));
}

.wp-block-image.is-style-drop-shadow-strong img {
	filter: drop-shadow(var(--wp--preset--shadow--card-strong));
}