/*
 * case-narrative.css — component family "ad/case-narrative" v1.0.1 (Wave 0.3 follow-on,
 * 2026-08-23, Lane 4 / CC-AD-PLATFORM).
 *
 * Built for DESIGN-01-C (article-01, job 1's worked-example visual): a 5-stage annotated
 * evidence timeline showing the abstract Diagnose→Prioritize→Test→Learn→Scale loop (DESIGN-01-A)
 * running on one concrete case, plus a 6th, visually-distinct "carried-forward signal" card that
 * seeds the NEXT loop's Diagnose rather than being a sixth stage of this pass.
 *
 * REUSE_DECISION per the brief: NEW_FAMILY. Not an extension of ad/triage-disclosure (a flat
 * single-entry fan-out into N independent, unordered causes) or ad/decision-flow (a sequential
 * binary Q&A tree) — this is a fixed-length (always 5), ordered, evidence-annotated narrative
 * sequence with one additional out-of-band consequence card. Different data shape and different
 * narrative semantics from both existing families, so a real new family, following the same
 * structural template (static-by-default, STATIC_FALLBACK always present, namespaced selectors
 * only) established by triage-disclosure.css and decision-flow.css.
 *
 * Structure (all static, all visible without JS -- AEO/GEO crawlability requirement):
 *   .ad-case-narrative                        -- root, sits inside .ad-fnd-shell[data-ad-fnd-width="breakout"]
 *     .ad-case-narrative__framing               -- the case-framing sentence, real text (never
 *                                                   baked into the SVG)
 *     .ad-case-narrative__canvas                -- the dark system-canvas panel (navy-deep bg,
 *                                                   navy-border) that holds the visual timeline
 *       .ad-case-narrative__timeline             -- position:relative wrapper
 *         svg.ad-case-narrative__connector--row   -- decorative (aria-hidden) horizontal connector,
 *                                                     shown tablet+desktop only; its <path> carries
 *                                                     data-ad-draw for the theme's existing
 *                                                     scroll-build mechanism (site.js initCurveDraw)
 *         svg.ad-case-narrative__connector--col   -- decorative (aria-hidden) vertical connector,
 *                                                     shown mobile only; same data-ad-draw mechanism
 *         ol.ad-case-narrative__stages            -- the SAME 5 <li> stages for every breakpoint;
 *                                                     CSS alone reflows row-of-5 (desktop/tablet) to
 *                                                     a top-to-bottom stack (mobile) -- no duplicated
 *                                                     markup, matching triage-disclosure's
 *                                                     single-DOM-reflows-via-CSS convention
 *           .ad-case-narrative__stage               -- one stage: eyebrow (mono/teal), headline
 *                                                       (display/white), evidence <details> (see
 *                                                       tablet-truncation note below)
 *         .ad-case-narrative__signal-connector    -- decorative (aria-hidden) warm branching
 *                                                     connector into the 6th card, data-ad-draw
 *         .ad-case-narrative__signal               -- the 6th, visually distinct carried-forward
 *                                                     card -- warm (#C8521F) accent border/eyebrow,
 *                                                     never same weight/color as the 5 stages
 *     .ad-case-narrative__fallback               -- plain HTML <ol> (5 stages + 1 labeled
 *                                                    carried-forward item), always present, never
 *                                                    display:none -- the STATIC_FALLBACK / AEO
 *                                                    crawlable text source, matching
 *                                                    triage-disclosure.css's real convention of
 *                                                    an always-visible fallback with no
 *                                                    enhanced-state hiding rule currently wired up
 *
 * TABLET-TRUNCATION TRADEOFF (documented per DESIGN-01-C's TABLET_BEHAVIOR):
 * The brief asks for full evidence text open-by-default on desktop AND mobile, with only the
 * ~781px tablet band collapsing it to first-line + tap-to-expand. Native <details> cannot express
 * three different default-open states across breakpoints in pure CSS -- the `open` attribute is a
 * fixed HTML default, not something a media query can flip. Rather than duplicate the evidence
 * text into two parallel DOM trees (a real AEO/duplicate-content risk) or invent JS this component
 * doesn't own, every stage's evidence ships as ONE <details> element, closed by default at every
 * breakpoint. This is a deliberate simplification: the same accessible, real, native-semantics,
 * zero-JS disclosure behaves identically everywhere (one tap/Enter/Space reveals the full text),
 * and the always-visible .ad-case-narrative__fallback <ol> below already guarantees the full
 * evidence text is unconditionally present and crawlable regardless of any <details> state -- so
 * "collapsed-by-default, one tap away" costs nothing on the AEO/comprehension front while being
 * far more robust than a breakpoint-conditional hack.
 *
 * Namespacing rule: every selector starts with `.ad-case-narrative` or targets its own
 * `[data-ad-case-*]` attributes. Zero bare element selectors, zero global overrides.
 */

.ad-case-narrative {
	--ad-case-connector: var(--wp--preset--color--accent, #2353d4);
	--ad-case-signal: #c8521f; /* warm / "results signal" — reserved for the carried-forward card only */
	--ad-case-evidence: rgba(255, 255, 255, 0.62); /* verified >= 4.5:1 against #0B1220 at 0.9375rem — see CSS note below */
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ad-case-narrative__framing {
	font-family: var(--wp--preset--font-family--body, "Hanken Grotesk", sans-serif);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 42.5rem;
	margin: 0;
}

/* Dark system canvas — navy-deep bg / navy-border, per Global Contract §15's per-story test:
   this visual reinforces DESIGN-01-A's "mechanism in action," so it deliberately pairs canvases. */
.ad-case-narrative__canvas {
	background: #0b1220;
	border: 1px solid #262c36;
	border-radius: 20px;
	padding: 2.25rem 2.5rem 2rem;
}

.ad-case-narrative__timeline {
	position: relative;
}

/* Decorative connectors are aria-hidden and carry no text content — safe to have two (row/col)
   present in the DOM, since only one is ever visually shown per breakpoint and neither is a
   crawlable content source (the STATIC_FALLBACK / stage markup carries all real text). */
.ad-case-narrative__connector {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.ad-case-narrative__connector--row path,
.ad-case-narrative__connector--col path {
	fill: none;
	stroke: var(--ad-case-connector);
	stroke-width: 2px;
	stroke-linecap: round;
}

.ad-case-narrative__connector--row {
	display: none;
}
.ad-case-narrative__connector--col {
	display: block;
}

/* 2026-09-05 render-leak-guard fix: each connector <svg> is now wrapped in a <figure
   class="ad-figure"> (kit/guards/check_editor_safe_embed.py requires every inline SVG in a post
   body to sit inside a <!-- wp:html --> block matching this exact canonical shape -- no exception
   for aria-hidden/decorative SVGs). Sitewide `.ad-figure svg { width:100%; height:auto; }` and
   `.ad-figure { margin:0; }` (theme.css) now apply to these connectors and must be neutralized
   here with higher specificity so their established absolute-overlay sizing and row/col toggle
   are unaffected -- these two-class selectors (0,2,0) beat both `.ad-figure svg` (0,1,1) and the
   base `.ad-case-narrative__connector[--row|--col]` rules above (0,1,0). No visual change from
   before this fix; the figure wrapper itself has no box (there was never a figcaption to keep
   visible, so it's hidden, not omitted -- the guard requires a real, non-empty figcaption). */
.ad-case-narrative__timeline .ad-figure.ad-case-narrative__connector--row,
.ad-case-narrative__timeline .ad-figure.ad-case-narrative__connector--col {
	margin: 0;
	display: contents;
}
.ad-case-narrative__timeline .ad-case-narrative__connector.ad-case-narrative__connector--row {
	display: none;
}
.ad-case-narrative__timeline .ad-case-narrative__connector.ad-case-narrative__connector--col {
	display: block;
	width: 100%;
	height: 100%;
}
.ad-case-narrative__timeline .ad-figure .ad-figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ad-case-narrative__stages {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.ad-case-narrative__stage {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-left: 1.75rem;
	border-left: 2px solid #262c36;
}

.ad-case-narrative__stage-eyebrow {
	font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", monospace);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2dd4bf;
}

.ad-case-narrative__stage-headline {
	font-family: var(--wp--preset--font-family--display, "Schibsted Grotesk", sans-serif);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: #ffffff;
	margin: 0;
}

.ad-case-narrative__stage-evidence {
	margin: 0;
}

.ad-case-narrative__stage-evidence-summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", monospace);
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.45);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.ad-case-narrative__stage-evidence-summary::-webkit-details-marker {
	display: none;
}
.ad-case-narrative__stage-evidence-summary::before {
	content: "+";
	display: inline-block;
	width: 1em;
}
.ad-case-narrative__stage-evidence[open] > .ad-case-narrative__stage-evidence-summary::before {
	content: "\2212"; /* minus sign */
}

.ad-case-narrative__stage-evidence-full {
	font-family: var(--wp--preset--font-family--body, "Hanken Grotesk", sans-serif);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ad-case-evidence);
	margin: 0.5rem 0 0;
	max-width: 34rem;
}

/* Carried-forward signal — the 6th element. Always visually distinct: warm border/eyebrow instead
   of the main sequence's blue/teal, offset from the stage list, explicit "next cycle" label. Per
   DO_NOT_CHANGE_IN_IMPLEMENTATION this must never match Stage 5's weight or be folded into it. */
.ad-case-narrative__signal-connector path {
	fill: none;
	stroke: var(--ad-case-signal);
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-dasharray: 4 5;
}

/* 2026-09-05 render-leak-guard fix (see the row/col connector comment above for the full
   explanation): this SVG is now wrapped in a <figure class="ad-figure">, so sitewide
   `.ad-figure svg { width:100%; height:auto; }` would otherwise stretch it to its container's
   full width -- previously nothing in CSS sized this element at all (browser default replaced-
   element sizing from its own viewBox). Pinned explicitly to its own viewBox dimensions so the
   fix introduces no visual change. */
.ad-case-narrative__timeline .ad-figure.ad-case-narrative__signal-connector-figure {
	display: contents;
}
.ad-case-narrative__timeline .ad-case-narrative__signal-connector {
	width: 60px;
	height: 40px;
	display: inline-block;
}

.ad-case-narrative__signal {
	margin-top: 0.5rem;
	margin-left: 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--ad-case-signal);
	border-left: 3px solid var(--ad-case-signal);
	border-radius: 12px;
	background: rgba(200, 82, 31, 0.08);
	max-width: 34rem;
}

.ad-case-narrative__signal-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", monospace);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ad-case-signal);
	margin-bottom: 0.5rem;
}

.ad-case-narrative__signal-text {
	font-family: var(--wp--preset--font-family--body, "Hanken Grotesk", sans-serif);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #ffffff;
	margin: 0;
}

/* ---- Tablet band (~641px-781px, Global Contract §2.3): horizontal row holds, evidence stays
   collapsed-by-default <details> (see the tradeoff note at the top of this file). ---- */
@media (min-width: 641px) and (max-width: 781px) {
	.ad-case-narrative__connector--row {
		display: block;
	}
	.ad-case-narrative__connector--col {
		display: none;
	}
	.ad-case-narrative__stages {
		flex-direction: row;
		gap: 1rem;
	}
	.ad-case-narrative__stage {
		flex: 1 1 0;
		border-left: none;
		border-top: 2px solid #262c36;
		padding-left: 0;
		padding-top: 1.5rem;
	}
	.ad-case-narrative__signal {
		margin-left: 0;
	}
}

/* ---- Desktop (>781px, Global Contract §2.2): full horizontal timeline. ---- */
@media (min-width: 782px) {
	.ad-case-narrative__connector--row {
		display: block;
	}
	.ad-case-narrative__connector--col {
		display: none;
	}
	.ad-case-narrative__stages {
		flex-direction: row;
		gap: 1.5rem;
	}
	.ad-case-narrative__stage {
		flex: 1 1 0;
		border-left: none;
		border-top: 2px solid #262c36;
		padding-left: 0;
		padding-top: 1.75rem;
	}
	.ad-case-narrative__signal {
		margin-left: 0;
	}
}

/* Focus visibility — reused verbatim from foundation-a11y.css:49-53, never a new/invented ring. */
[data-ad-fnd-focusable]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #2563eb);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Reduced motion: guarantee the fully-drawn static state even if the JS reduced-motion gate in
   site.js (initCurveDraw) somehow doesn't apply — same defensive pattern used across this
   component set. */
@media (prefers-reduced-motion: reduce) {
	.ad-case-narrative [data-ad-draw] {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}
}

/* Static fallback: always in the DOM, never display:none — meaningful with JS/CSS absent, and the
   unconditional AEO/crawlable text source per DESIGN-01-C's HTML_FALLBACK requirement. Matches
   triage-disclosure.css's real convention (no enhanced-state hiding rule is currently wired up
   there either — the fallback is simply always visible, de-emphasized only by being placed after
   the enhanced view). */
.ad-case-narrative__fallback {
	font-size: 0.9375rem;
	line-height: 1.55;
	padding-left: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--surface-alt, #d7dce3);
	padding-top: 1rem;
	margin: 0;
}
.ad-case-narrative__fallback li {
	margin: 0 0 0.75rem;
}
.ad-case-narrative__fallback li:last-child {
	font-style: italic;
}