/*!
 * Advanced Paragraph — Cards (content-role styles)
 *
 * Loaded only when one of the styles below appears on the page
 * (see inc/class-block-styles.php :: maybe_enqueue).
 *
 * Styles: step_box, step_box_horizontal, pull_quote, pros_box, cons_box,
 *         faq_box_q, faq_box_a
 *
 * Design rationale:
 *   既存カテゴリは「装飾の手法」軸（背景模様 / 線 / アイコン etc）。
 *   本ファイルはそれと直交する「コンテンツの役割」軸 ―
 *   手順・引用・比較・Q&A など、本文中で意味のある単位を切り出すスタイル群。
 *
 * Step Box (timeline UI):
 *   - step_box           : 縦タイムライン（左にせり出した円バッジ＋下方向の縦線）
 *   - step_box_horizontal: 横タイムライン（上中央のバッジ＋右方向の横線）
 *   両 slug は `ap-step` カウンタを共有、連続する step 同士に接続線を引き、
 *   末尾には引かない（:has() 利用）。
 *
 * Counter scope:
 *   - 基本リセット: .entry-content / article.wp-block-post-content / main
 *   - 横タイムラインがある Columns / Group(flex) 内ではローカルに再リセット
 *     → 横タイムラインは縦と独立した連番が振れる
 *
 * Customization variables (theme.json / Additional CSS で上書き可):
 *   --ap-step-badge-color   : バッジ背景色                       (default: var(--ap-mint))
 *   --ap-step-line-color    : 接続線の色                         (default: mint 50% 透過)
 *   --ap-step-badge-size    : バッジ直径                         (default: 44px)
 *   --ap-step-badge-gap     : バッジ ↔ card 本体の隙間            (default: 16px)
 *   --ap-step-cards-gap     : card 同士の間隔 (vertical 用)       (default: 1.5em)
 *   --ap-step-line-thickness: 接続線の太さ                       (default: 2px)
 *
 * Layout model (R1 + outside-card):
 *   バッジ＋接続線は card の完全に左外 (vertical) / 上外 (horizontal) に置く。
 *   card 本体は margin-left (vertical) / margin-top (horizontal) で
 *   `badge_size + badge_gap` 分シフトし、badge と重ならない領域を作る。
 *
 * Browser requirement: CSS `:has()` (Chrome 105+ / Firefox 121+ / Safari 15.4+).
 */

@layer advanced-paragraph {

	/* Counter reset — base: 記事本文単位
	 * core/post-content ブロックの出力は <div class="entry-content wp-block-post-content">
	 * (Ollie / vip2026 含む標準) なので、両方の class を OR で受ける。`article` 修飾は
	 * 外す (ラッパーが div の場合にも一致させるため)。 */
	:where(.entry-content, .wp-block-post-content, main) {
		counter-reset: ap-step;
	}
	/* Counter reset — 横タイムラインを含むレイアウトコンテナ内ではローカル再リセット */
	:where(
		.wp-block-columns:has(.is-style-step_box_horizontal),
		.wp-block-group.is-layout-flex:has(.is-style-step_box_horizontal)
	) {
		counter-reset: ap-step;
	}

	:where(
		.is-style-step_box,
		.is-style-step_box_horizontal,
		.is-style-pull_quote,
		.is-style-pros_box,
		.is-style-cons_box,
		.is-style-faq_box_q,
		.is-style-faq_box_a
	) {
		/* Palette */
		--ap-mint:     #3d8b6e;
		--ap-coral:    #ff6e3a;
		--ap-sky:      #5fc8ff;
		--ap-amber:    #ffa64d;
		--ap-sepia:    #b08864;
		--ap-lilac:    #b59cff;
		--ap-lemon:    #fff250;
		--ap-rose:     #ff6fb5;
		--ap-lime:     #ccff66;
		--ap-aqua:     #5af0d6;
		--ap-graphite: #2c3e50;
		--ap-stone:    #cbd5e1;
		--ap-paper:    #fafaf7;

		/* Shape */
		--ap-radius:      var(--wp--preset--border-radius--md,    .625rem);
		--ap-radius-sm:   var(--wp--preset--border-radius--xs,    .25rem);
		--ap-radius-lg:   var(--wp--preset--border-radius--lg,    .875rem);
		--ap-radius-full: var(--wp--preset--border-radius--full,  999px);

		--ap-px: var(--wp--preset--spacing--small, 1.5em);
		--ap-py: var(--wp--preset--spacing--small, 1.25em);

		--ap-shadow-soft:  var(--wp--preset--shadow--small-light,  0 1px 2px rgb(15 23 42 / .04), 0 2px 8px rgb(15 23 42 / .06));
		--ap-shadow-inset: var(--wp--preset--shadow--shadow-inner, inset 0 1px 3px rgb(15 23 42 / .08), inset 0 -1px 0 rgb(255 255 255 / .6));

		--ap-border:        2px;
		--ap-border-accent: 4px;

		/* === Clean modern SaaS icon palette ===
		 * icons-small.css / icons-big.css と同期。Pros/Cons チップなどで参照。 */
		--ap-icon-green-strong: #10b981; /* emerald-500 — pros */
		--ap-icon-red-strong:   #dc3545; /* Bootstrap red — cons */

		box-sizing: border-box;
		position: relative;
		margin-block: 1.25em;
	}

	/* =====================================================================
	 * Step Box — タイムライン UI（縦 / 横）
	 *
	 * 共有: 両 slug で `ap-step` カウンタを共有し、`--ap-step-*` 変数を継承。
	 * 縦版: 左外にせり出した円形バッジ + 下方向の縦接続線。
	 * 横版: 上中央のバッジ + 右方向の横接続線。Group(flex) / Row / Columns 内で動作。
	 * 接続線は :has() で「次が同型 step」のときだけ描画 → 末尾は線なし。
	 * ===================================================================== */
	:where(.is-style-step_box, .is-style-step_box_horizontal) {
		--ap-step-badge-color:   var(--ap-mint);
		/* 接続線色はバッジ色から派生 → block 単位で --ap-step-badge-color を
		 * 上書きすれば線色も自動連動。明示的に --ap-step-line-color を
		 * 個別指定したい場合は inline style で上書き可能。 */
		--ap-step-line-color:    color-mix(in oklab, var(--ap-step-badge-color) 50%, transparent);
		--ap-step-badge-size:    44px;
		--ap-step-badge-gap:     16px;
		--ap-step-cards-gap:     1.5em;
		--ap-step-line-thickness: 2px;
		counter-increment: ap-step;
	}

	/* --- Vertical (step_box) ---
	 * card 本体を `badge_size + badge_gap` だけ右に margin-shift し、
	 * バッジ＋接続線を card の完全左外に配置する outside-card レイアウト。
	 * :not() chain で hybrid class state 時に他の左装飾スタイルと競合しないよう自己抑制。 */
	.is-style-step_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="pros_box"]):not([class*="cons_box"]) {
		margin-left: calc(var(--ap-step-badge-size) + var(--ap-step-badge-gap));
		margin-block: var(--ap-step-cards-gap);
		padding: 1.3em 1.4em;
		background: color-mix(in oklab, var(--ap-step-badge-color) 6%, white);
		border: var(--ap-border) solid color-mix(in oklab, var(--ap-step-badge-color) 35%, transparent);
		border-radius: var(--ap-radius);
	}
	/* Badge: card の左外側にアンカー (top edge 揃え)
	 * content: data-step-prefix / data-step-suffix 属性で番号の前後に
	 * 文字列を差し込める (例: "Step 1 番目")。属性無しなら attr() は
	 * 空文字を返し、番号のみが表示される (従来通り)。 */
	.is-style-step_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="pros_box"]):not([class*="cons_box"])::before {
		content: attr(data-step-prefix) counter(ap-step) attr(data-step-suffix);
		position: absolute;
		left: calc(-1 * (var(--ap-step-badge-size) + var(--ap-step-badge-gap)));
		top: 0;
		width: var(--ap-step-badge-size);
		height: var(--ap-step-badge-size);
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--ap-step-badge-color);
		color: #fff;
		border-radius: var(--ap-radius-full);
		box-shadow: 0 2px 6px rgb(15 23 42 / .15);
		font-weight: 700;
		font-size: 1.15em;
		line-height: 1;
		font-variant-numeric: tabular-nums;
		z-index: 1;
	}
	/* Connector — 次が同型 step のときだけ、badge 中心の X 軸に縦線を描画
	 * left:   -(badge_size/2 + badge_gap) → badge 中心の X 座標
	 * top:    バッジ直下 (size + 2px)
	 * bottom: -(cards_gap + 4px) → cards-gap (margin-collapse 後の隙間) + 両端 border (4px) で
	 *         次 card の padding-box top edge = 次バッジ top edge と一致 */
	.is-style-step_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="pros_box"]):not([class*="cons_box"]):has(+ .is-style-step_box)::after {
		content: '';
		position: absolute;
		left: calc(-1 * (var(--ap-step-badge-size) / 2 + var(--ap-step-badge-gap)));
		top: calc(var(--ap-step-badge-size) + 2px);
		bottom: calc(-1 * var(--ap-step-cards-gap) - 4px);
		width: var(--ap-step-line-thickness);
		background: var(--ap-step-line-color);
		transform: translateX(-50%);
		z-index: 0;
	}

	/* Column 内利用に関する注意:
	 *   .wp-block-column 内に step_box を置くと、badge は base rule のとおり
	 *   card の完全外側左にせり出す (outside-card layout 統一)。column 幅が
	 *   狭いと badge がカラム境界の左に出るので、column 親側で
	 *   `padding-left: calc(var(--ap-step-badge-size) + var(--ap-step-badge-gap))`
	 *   程度を確保するか、columns の gap を広めに取って隣接 column と衝突
	 *   させない設計にする。 */

	/* --- Horizontal (step_box_horizontal) ---
	 * card 本体を `badge_size + badge_gap` だけ下に margin-shift し、
	 * バッジ＋接続線を card の完全上外に配置する outside-card レイアウト。 */
	.is-style-step_box_horizontal {
		margin-top: calc(var(--ap-step-badge-size) + var(--ap-step-badge-gap));
		padding: 1.3em 1.4em;
		background: color-mix(in oklab, var(--ap-step-badge-color) 6%, white);
		border: var(--ap-border) solid color-mix(in oklab, var(--ap-step-badge-color) 35%, transparent);
		border-radius: var(--ap-radius);
		text-align: center;
		flex: 1; /* Group(flex) / Row 内で均等幅に伸ばす */
	}
	/* Badge: card の完全上外側にアンカー (top-center)
	 * content: 縦版と同じく data-step-prefix / data-step-suffix で前後文字
	 * 追加可。属性無しなら番号のみ。 */
	.is-style-step_box_horizontal::before {
		content: attr(data-step-prefix) counter(ap-step) attr(data-step-suffix);
		position: absolute;
		top: calc(-1 * (var(--ap-step-badge-size) + var(--ap-step-badge-gap)));
		left: 50%;
		transform: translateX(-50%);
		width: var(--ap-step-badge-size);
		height: var(--ap-step-badge-size);
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--ap-step-badge-color);
		color: #fff;
		border-radius: var(--ap-radius-full);
		box-shadow: 0 2px 6px rgb(15 23 42 / .15);
		font-weight: 700;
		font-size: 1.15em;
		line-height: 1;
		font-variant-numeric: tabular-nums;
		z-index: 1;
	}
	/* Connector — 直接兄弟ケース (Row / Group flex / 同一 column 内)
	 * 線は badge 中心の Y 軸 (= -(size/2 + gap)) を貫く水平線。
	 *   left:  自バッジ right + 2px (= 50% + size/2 + 2)
	 *   width: 100% + block-gap - badge_size - 4px
	 *          → 線右端 = 100% + gap + 50% - 24 = 次バッジ left - 2
	 *   前提:  兄弟が等幅 (flex:1 ないし等幅カラム) → 50%(self) == 50%(next)
	 * セレクタ:
	 *   flex/columns 親限定 — entry-content 直下に flat 並べした場合は
	 *   横方向に隣接していないので線を引かない (引くと自カード幅の 1.5 倍まで
	 *   伸びて viewport を貫通し、ページに水平スクロールが出る)。 */
	:where(.wp-block-group.is-layout-flex, .wp-block-columns > .wp-block-column)
	  > .is-style-step_box_horizontal:has(+ .is-style-step_box_horizontal)::after {
		content: '';
		position: absolute;
		top: calc(-1 * (var(--ap-step-badge-size) / 2 + var(--ap-step-badge-gap)));
		left: calc(50% + var(--ap-step-badge-size) / 2 + 2px);
		width: calc(100% + var(--wp--style--block-gap, 2em) - var(--ap-step-badge-size) - 4px);
		height: var(--ap-step-line-thickness);
		background: var(--ap-step-line-color);
		transform: translateY(-50%);
		z-index: 0;
	}
	/* Connector — Columns ラッパー越し (厳密 :has():
	 * 「自分の column に step_box_horizontal があり」かつ
	 * 「次の column にも step_box_horizontal がある」ときだけ右方向の線を描画。
	 * ジオメトリは Group(flex) ケースと同一 (等幅前提)。 */
	.wp-block-columns
	  > .wp-block-column:has(.is-style-step_box_horizontal):has(+ .wp-block-column:has(.is-style-step_box_horizontal))
	  .is-style-step_box_horizontal::after {
		content: '';
		position: absolute;
		top: calc(-1 * (var(--ap-step-badge-size) / 2 + var(--ap-step-badge-gap)));
		left: calc(50% + var(--ap-step-badge-size) / 2 + 2px);
		width: calc(100% + var(--wp--style--block-gap, 2em) - var(--ap-step-badge-size) - 4px);
		height: var(--ap-step-line-thickness);
		background: var(--ap-step-line-color);
		transform: translateY(-50%);
		z-index: 0;
	}

	/* =====================================================================
	 * Pull Quote — 大きな引用符付き引用
	 * 上に巨大な " (U+201C)、本文中央寄せ、下に細い区切り線。
	 * 著名人引用・読者レビュー・印象的な一節の抜き出しに。
	 * ===================================================================== */
	.is-style-pull_quote {
		padding: 1.6em var(--ap-px) 1.4em;
		text-align: center;
		color: var(--ap-graphite);
		border-bottom: 1px solid color-mix(in oklab, var(--ap-graphite) 25%, transparent);
		margin-block: 1.6em;
	}
	.is-style-pull_quote::before {
		content: "\201C";
		display: block;
		font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
		font-size: 3.6em;
		line-height: 0.6;
		color: color-mix(in oklab, var(--ap-sepia) 60%, transparent);
		margin-bottom: 0.15em;
	}

	/* =====================================================================
	 * Pros / Cons — メリット・デメリット対カード
	 * 上端にチップ状の "Pros" / "Cons" ラベル。
	 * 同じ記事内で隣接配置されることを想定。
	 * ===================================================================== */
	/* :is() で specificity を 1 class 分稼ぎ、:not() chain で他の左装飾スタイルとの
	 * hybrid class state を抑制。 */
	:is(.is-style-pros_box, .is-style-cons_box):not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="step_box"]) {
		padding: 1.8em var(--ap-px) 1.2em;
		border-radius: var(--ap-radius);
	}
	:is(.is-style-pros_box, .is-style-cons_box):not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="step_box"])::before {
		position: absolute;
		top: -0.8em;
		left: 1em;
		padding: 0.2em 0.85em;
		color: #fff;
		border-radius: var(--ap-radius-full);
		font-weight: 700;
		font-size: 0.78em;
		letter-spacing: 0.05em;
		line-height: 1.4;
		box-shadow: 0 1px 3px rgb(15 23 42 / .12);
	}
	/* Pros / Cons — チップ色は --ap-chip-color (instance override) → デフォルトは
	 * pros = mint-strong / cons = coral-strong。tint は 12% mix で自動算出。
	 * 後続の JS 拡張 (案 P) で data-chip-color または style="--ap-chip-color: ..."
	 * をブロック単位で上書きする想定。 */
	/* slug-specific 色 + content。:not() chain で他の左装飾スタイルとの hybrid 競合を抑制。 */
	.is-style-pros_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="step_box"]) {
		--ap-chip-color: var(--ap-icon-green-strong);
		background: color-mix(in oklab, var(--ap-chip-color) 10%, white);
		border: var(--ap-border) solid var(--ap-chip-color);
	}
	.is-style-pros_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="step_box"])::before {
		content: "✓ " attr(data-chip-label);
		background: var(--ap-chip-color);
	}
	.is-style-pros_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="step_box"]):not([data-chip-label])::before {
		content: "✓ Pros"; /* data 属性が無いときの fallback (CSS Values 4 互換) */
	}
	.is-style-cons_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="step_box"]) {
		--ap-chip-color: var(--ap-icon-red-strong);
		background: color-mix(in oklab, var(--ap-chip-color) 10%, white);
		border: var(--ap-border) solid var(--ap-chip-color);
	}
	.is-style-cons_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="step_box"])::before {
		content: "✗ " attr(data-chip-label);
		background: var(--ap-chip-color);
	}
	.is-style-cons_box:not([class*="is-style-icon_"]):not([class*="faq_box"]):not([class*="step_box"]):not([data-chip-label])::before {
		content: "✗ Cons"; /* data 属性が無いときの fallback */
	}

	/* =====================================================================
	 * FAQ Q / A — 質問・回答対
	 * 左に Q (sky) / A (graphite薄) の円バッジ。Q は太字、A は通常テキスト。
	 * 連続して並べることで Q&A セクションを構成。
	 * ===================================================================== */
	/* :is() で specificity を 1 class 分稼ぎ、:not() chain で他の左装飾スタイルとの
	 * hybrid class state を抑制。 */
	:is(.is-style-faq_box_q, .is-style-faq_box_a):not([class*="is-style-icon_"]):not([class*="pros_box"]):not([class*="cons_box"]):not([class*="step_box"]) {
		padding: 1em 1.1em 1em 3.4em;
		border-radius: var(--ap-radius);
	}
	:is(.is-style-faq_box_q, .is-style-faq_box_a):not([class*="is-style-icon_"]):not([class*="pros_box"]):not([class*="cons_box"]):not([class*="step_box"])::before {
		position: absolute;
		left: 0.6em;
		top: 0.85em;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: var(--ap-radius-full);
		font-weight: 700;
		font-size: 1.05em;
		line-height: 1;
		font-family: Georgia, "Times New Roman", serif;
	}
	.is-style-faq_box_q:not([class*="is-style-icon_"]):not([class*="pros_box"]):not([class*="cons_box"]):not([class*="step_box"]) {
		background: color-mix(in oklab, var(--ap-sky) 8%, white);
		border-left: var(--ap-border-accent) solid var(--ap-sky);
	}
	.is-style-faq_box_q:not([class*="is-style-icon_"]):not([class*="pros_box"]):not([class*="cons_box"]):not([class*="step_box"])::before {
		content: "Q";
		background: var(--ap-sky);
	}
	.is-style-faq_box_a:not([class*="is-style-icon_"]):not([class*="pros_box"]):not([class*="cons_box"]):not([class*="step_box"]) {
		background: var(--ap-paper);
		border-left: var(--ap-border-accent) solid color-mix(in oklab, var(--ap-graphite) 30%, transparent);
	}
	.is-style-faq_box_a:not([class*="is-style-icon_"]):not([class*="pros_box"]):not([class*="cons_box"]):not([class*="step_box"])::before {
		content: "A";
		background: color-mix(in oklab, var(--ap-graphite) 55%, transparent);
	}

	/* =====================================================================
	 * Mobile (<=640px)
	 * ===================================================================== */
	@media (max-width: 640px) {
		:where(
			.is-style-step_box,
			.is-style-step_box_horizontal,
			.is-style-pull_quote,
			.is-style-pros_box,
			.is-style-cons_box,
			.is-style-faq_box_q,
			.is-style-faq_box_a
		) {
			--ap-px: 1.1em;
			--ap-py: 1em;
		}
		/* Step badges shrink on small screens.
		 * margin-left / margin-top は変数連動で自動的に 32 + 10 = 42px に縮む。
		 * 旧モデルの padding-left:2.8em / padding-top:2.6em 上書きは不要 (outside-card 化済)。 */
		:where(.is-style-step_box, .is-style-step_box_horizontal) {
			--ap-step-badge-size: 32px;
			--ap-step-badge-gap:  10px;
		}
		.is-style-step_box::before,
		.is-style-step_box_horizontal::before {
			font-size: 0.95em;
		}
		/* 横タイムラインの接続線はモバイルで非表示
		 * (Group(flex) が wrap で縦組みに折り返した時、線が斜めに伸びる/途切れる
		 * 現象を回避。縦組み化された後はバッジ＋本文だけで十分視認できる) */
		:where(.wp-block-group.is-layout-flex, .wp-block-columns > .wp-block-column)
		  > .is-style-step_box_horizontal:has(+ .is-style-step_box_horizontal)::after,
		.wp-block-columns
		  > .wp-block-column:has(.is-style-step_box_horizontal):has(+ .wp-block-column:has(.is-style-step_box_horizontal))
		  .is-style-step_box_horizontal::after {
			display: none;
		}
		.is-style-pull_quote::before {
			font-size: 2.8em;
		}
		.is-style-faq_box_q,
		.is-style-faq_box_a {
			padding-left: 2.8em;
		}
		.is-style-faq_box_q::before,
		.is-style-faq_box_a::before {
			width: 26px;
			height: 26px;
			font-size: 0.9em;
			top: 0.75em;
		}
	}
}