/**
 * Editorial Split Wide — same flip-card + hero_shots content model as
 * Editorial Split, different image-sizing rule.
 *
 * Pairs with templates/editorial-split-wide.php + editorial-split-wide.js.
 * Enqueued by the Neve child theme's functions.php only when a `project`
 * post's Template is explicitly set to Editorial Split Wide.
 *
 * Design tokens duplicated (not @import-ed) from editorial-split.css, per
 * this codebase's existing per-template convention, so this file works
 * standalone. Font dependency ('Noto Sans', 'Inter') is enqueued
 * site-wide by functions.php, not by this file.
 *
 * SIZING RULE, v5 (2026-09-12): four earlier attempts are worth knowing
 * about before touching this again.
 *
 * v1 tried `grid-template-columns: auto 1fr` with the image at
 * `height: 100%; width: auto` — the image's width was meant to be
 * *derived from* the row's final height. That's circular: Grid sizes an
 * `auto` column from each item's content contribution before the row's
 * final height is known, so the browser fell back to the image's raw
 * intrinsic pixel width to size the column. Whenever the card pushed the
 * row taller than that locked-in width could proportionally support, the
 * image stretched vertically without growing wider — visible distortion.
 *
 * v2 fixed the circularity (`grid-template-columns: 1fr 480px`, both
 * definite, neither sized from the other) but boxed the image into that
 * fixed `1fr` track with `object-fit: cover`, cropping it to exactly fill
 * the box — not what was wanted at the time.
 *
 * v3 took the image out of Grid's sizing algorithm entirely (still true
 * below) and right-anchored it at `.media`'s own right edge with
 * `height: 100%; width: auto` — free to grow left as far as its own
 * aspect ratio took it, cropped by the viewport if that ran past the
 * page edge. Joe found that cropping unacceptable on Auto Loan Future's
 * hero images (2026-09-12) and asked for a different priority: never
 * crop, even if that means the image no longer fills the card's full
 * height.
 *
 * v4 kept v3's right-anchored-at-the-gutter positioning but capped both
 * axes (`max-width`/`max-height` on the `<img>`, both `width`/`height`
 * left `auto`) so the image never crops — whichever cap bound first just
 * won, no `object-fit` needed. That fixed cropping, but it also revealed
 * a second problem once Joe saw it live on Auto Loan Future (2026-09-12):
 * the CARD stayed pinned to a fixed 480px column at a fixed position
 * inside a `max-width: 1200px` grid, while the image was free to bleed
 * left of that grid entirely — so the grid box itself measured as
 * correctly centered (confirmed live, matching the header's own center
 * to the pixel), but the *visual ensemble* (image + card together) did
 * not look centered, because how far the image actually bled left varied
 * per image and had no relationship to the grid's own centering. A wide
 * image and a narrow image both left the card in the exact same spot,
 * with only the image's left edge moving — reading as off-balance either
 * way.
 *
 * v5's mechanism: stop pinning the card to a fixed-position column
 * inside a fixed-width box, and stop right-anchoring the image to a
 * gutter at all. Instead, `.editorial-split-wide__grid` is a `flex` row
 * with `justify-content: center` and no `max-width` of its own — image
 * and card both size to their own natural widths, and the *pair*,
 * together with the gap between them, centers as one group under the
 * header. This is why the image went from `position: absolute` (v3/v4)
 * back to a normal, in-flow `<img>`: an absolutely-positioned element
 * contributes nothing to its parent's layout size, which was exactly
 * the point when the goal was "pin the card, let the image bleed
 * independently" — but it's precisely what breaks "the image's actual
 * rendered width should count toward centering the group." A plain flex
 * item's width naturally does count.
 *
 * That change also simplifies the never-crop mechanism: v4 needed a
 * `max-width` formula derived from the grid's own fixed geometry
 * (column split, gap, padding) specifically because the image's
 * position was anchored to that geometry. With the image no longer
 * anchored to anything but its own natural size, the cap is just
 * `max-width: calc(80vw - 544px)` on the `<img>` directly — 544px being
 * `64px` gap + `480px` card, so the *ensemble* (image + gap + card)
 * never exceeds 80% of the viewport, leaving a symmetric ~10% margin on
 * both sides now that both sides move together as a centered group
 * (previously the 10% margin applied to the image's free left edge only,
 * since the card's own edge was fixed independently).
 *
 * The `max-height` side of the cap is where this gets interesting: CSS
 * has no way to size one flex item to match a *sibling's*
 * content-driven height on its own (confirmed the hard way — an
 * `aspect-ratio` declared directly on `.media`, the wrapper div, doesn't
 * reliably combine with `max-width`/`max-height` the way it does on a
 * real replaced element like `<img>`; tested in isolation and it
 * resolved to `0×0` or fell back to the image's raw intrinsic pixels
 * instead of the intended capped size). Putting the same
 * `max-width`/`max-height`/`auto`/`auto` cap technique directly on the
 * `<img>` itself — the same replaced-element sizing algorithm v3/v4
 * already relied on, just no longer absolutely positioned — resolved
 * correctly and predictably in every case tested. The one piece that
 * technique still can't get natively is *what* max-height to use, since
 * that has to equal the card's own rendered height, and CSS genuinely
 * has no sibling-height reference — `editorial-split-wide.js` measures
 * `.card-face--front`'s real height and writes it to a `--card-height`
 * custom property (with a `640px` fallback if JS never runs) that
 * `max-height: var(--card-height, 640px)` reads. All of this — the
 * `justify-content: center` grouping, the `80vw` ensemble cap, and the
 * `--card-height` measurement — was confirmed live via Claude in Chrome
 * against Auto Loan Future's actual hero image and card before writing
 * it here, including deliberately testing a much narrower forced
 * `max-width` to confirm both axes shrink together in lockstep (no
 * distortion) when that cap binds instead of the height cap.
 *
 * `overflow-x: clip` (with `overflow-y: visible` alongside it, since
 * setting only one axis otherwise forces the other to `auto` per spec)
 * on `.editorial-split-wide` is no longer load-bearing the way it was in
 * v3 — nothing is deliberately bled past the reading column anymore —
 * but it's left in place as a harmless safety net.
 *
 * Flip-card mechanism is pure CSS (hidden checkbox + <label>, see
 * templates/editorial-split-wide.php) — no JS involved, works with JS
 * disabled. editorial-split-wide.js runs on every post with a hero image
 * (the `--card-height` sync above) — its hard-swap timer half only
 * activates when hero_shots has 2+ images.
 */

.editorial-split-wide {
	--color-bg-site: #0a0e1a;
	--color-bg-recessed: #05070d;
	--color-bg-surface: #111827;
	--color-accent-primary: #00e5ff;
	--color-accent-secondary: #a855f7;
	--color-text-heading: #f8fafc;
	--color-text-body: #e2e8f0;
	--color-text-muted: #ffffff;

	background-color: var(--color-bg-site);
	color: var(--color-text-body);
	font-family: var(--font-body);
	overflow-x: clip;
	overflow-y: visible;
}

.editorial-split-wide__empty {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 24px 120px;
	font-family: var(--font-body);
	font-size: 18px;
	color: var(--color-text-body);
	opacity: 0.7;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
   Grid: a centered flex row, not a fixed-width box — image and card
   both size to their own natural width, and `justify-content: center`
   centers the pair (plus the gap between them) as one group. See this
   file's header (SIZING RULE, v5) for why this replaced the old
   `grid-template-columns: 1fr 480px` + fixed `max-width: 1200px` box.
   ------------------------------------------------------------------ */

.editorial-split-wide__grid {
	display: flex;
	justify-content: center;
	/* center, not flex-start: when the image's width cap binds first
	   (SIZING RULE v5 below) it ends up shorter than the card, and
	   centering the leftover vertical space matches v4's original
	   vertical-centering intent for that case. When the height cap binds
	   instead -- the common case -- image and card are the same height,
	   so this has no visible effect either way. */
	align-items: center;
	gap: 64px;
	padding: 96px 24px;
}

/* hero_shots empty: card renders alone, centered, no image column.
   justify-content: center on the row above already centers a single
   child; this just keeps the lone card from reading as too wide. */
.editorial-split-wide__grid--card-only {
	max-width: 640px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Hero media: `.media` is a plain wrapper with no sizing of its own —
   it shrink-wraps to the `<img>` inside via ordinary flex-item content
   sizing, which is what lets the image's actual rendered width count
   toward the grid's centering above. The image is scaled to the
   largest size that fits within both the ensemble's shared width
   budget and the card's own height without ever cropping. See this
   file's header (SIZING RULE, v5) for the full reasoning, including why
   this needed to move off `position: absolute` and why `max-height`
   reads a JS-supplied custom property.
   ------------------------------------------------------------------ */

.editorial-split-wide__media {
	position: relative;
	flex-shrink: 0;
}

.editorial-split-wide__hero-image {
	display: block;
	width: auto;
	height: auto;
	/* 544px = 64px gap + 480px card, so the ensemble (image + gap + card)
	   never exceeds 80% of the viewport -- a symmetric ~10% margin on
	   each side now that both sides move together as a centered group.
	   See this file's header for why this replaced v4's fixed-geometry
	   formula. */
	max-width: calc(80vw - 544px);
	/* --card-height is written by editorial-split-wide.js from the
	   card's actual rendered height -- CSS has no way to reference a
	   sibling's content-driven size on its own. 640px is a reasonable
	   static fallback if JS never runs. */
	max-height: var(--card-height, 640px);
	border-radius: 0;
}

/* The `hidden` attribute's browser-default `display: none` loses to the
   plain-class `display: block` rule above (equal specificity, source
   order breaks the tie in the class rule's favor) — without this,
   editorial-split-wide.js's hidden-attribute toggle has zero visual
   effect and every hero_shots image renders stacked at once instead of
   hard-swapping. */
.editorial-split-wide__hero-image[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------
   Flip-card: front = headline/subhead, back = psr + clip. Pure CSS flip
   via a hidden checkbox + <label> (no JS) — see
   templates/editorial-split-wide.php. Identical to Editorial Split's own
   card — only the image-sizing rules above differ in this template.
   ------------------------------------------------------------------ */

.editorial-split-wide__card-wrap {
	width: 100%;
	max-width: 480px;
}

.editorial-split-wide__card-scene {
	display: block;
	width: 100%;
	perspective: 1600px;
	cursor: pointer;
}

.editorial-split-wide__card {
	position: relative;
	width: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}

/* Negative rotation (not +180deg) — matches the "Chassis Prototype"
   reference artifact's already-approved flip direction: the front's
   folded corner (bottom-right) sweeps like a book page turning
   left-to-right into the back face's mirrored corner (bottom-left).
   +180deg span the same start/end angles but rotates through the
   mirror-image arc, reading as the opposite (right-to-left) turn. */
.editorial-split-wide__flip-toggle:checked ~ .editorial-split-wide__card-scene .editorial-split-wide__card {
	transform: rotateY(-180deg);
}

.editorial-split-wide__card-face {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.editorial-split-wide__card-face--front {
	position: relative;
	width: 100%;
}

.editorial-split-wide__card-face--back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
}

/* The actual styled/clipped box, one level in from `.card-face` — kept
   separate so the fold-corner + dot below (siblings of this, inside
   `.card-face`) sit UNCLIPPED on top of the notch this cuts away,
   instead of being clipped away themselves. */
.editorial-split-wide__card-face-inner {
	background-color: var(--color-bg-surface);
	border: 1px solid rgba(0, 229, 255, 0.15);
	box-sizing: border-box;
	height: 100%;
	padding: 40px;
}

.editorial-split-wide__card-face-inner--front {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
	padding-right: 56px;
}

.editorial-split-wide__card-face-inner--back {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 44px 100%, 0 calc(100% - 44px));
	padding-left: 56px;
	display: flex;
	flex-direction: column;
}

/* Folded-corner affordance, replacing the old "Tap to flip" text label —
   a page-turn dog-ear sitting exactly in the notch the clip-path above
   cuts away, plus a small dot near its tip. Front = bottom-right (matches
   the reference artifact); back = bottom-left, mirrored to match where
   its own clip-path cuts.

   A `filter: drop-shadow()` per face was tried here (2026-09-12) to sell
   more of a lifted-paper look, but didn't read against this card's dark
   background — pulled 2026-09-13, worth revisiting against a lighter
   surface in a future pass. */
.editorial-split-wide__fold-corner {
	position: absolute;
	bottom: 0;
	width: 44px;
	height: 44px;
	pointer-events: none;
}

.editorial-split-wide__fold-corner--front {
	right: 0;
	background: linear-gradient(135deg, rgba(0, 229, 255, 0.15) 50%, transparent 50%);
}

.editorial-split-wide__fold-corner--back {
	left: 0;
	background: linear-gradient(225deg, rgba(0, 229, 255, 0.15) 50%, transparent 50%);
}

.editorial-split-wide__fold-dot {
	position: absolute;
	bottom: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-accent-primary);
	opacity: 0.5;
	pointer-events: none;
}

.editorial-split-wide__fold-dot--front {
	right: 8px;
}

.editorial-split-wide__fold-dot--back {
	left: 8px;
}

.editorial-split-wide__eyebrow {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent-secondary);
	margin: 0 0 12px;
}

.editorial-split-wide__headline {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--color-text-heading);
	margin: 0 0 20px;
}

.editorial-split-wide__subhead {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin: 0;
}

.editorial-split-wide__psr {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	flex: 1 0 auto;
}

.editorial-split-wide__psr-row {
	margin: 0 0 16px;
}
.editorial-split-wide__psr-row:last-child {
	margin-bottom: 0;
}

.editorial-split-wide__psr-label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-accent-secondary);
	margin: 0 0 4px;
}

.editorial-split-wide__psr-value {
	display: block;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-body);
}

.editorial-split-wide__clip {
	font-family: var(--font-body);
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-text-muted);
	margin: 0 0 24px;
	padding: 0;
	border: none;
}

/* ---------------------------------------------------------------------
   Mobile — stacked, single column. The centered-ensemble flex row only
   makes sense side by side; there's no "pair" to center once the grid
   collapses, so this reverts to plain width-driven sizing, same
   treatment as Editorial Split's own mobile/only layout.
   ------------------------------------------------------------------ */

@media (max-width: 768px) {
	.editorial-split-wide__grid {
		flex-direction: column;
		gap: 40px;
		padding: 48px 16px 64px;
		align-items: normal;
	}

	.editorial-split-wide__grid--card-only {
		max-width: none;
	}

	.editorial-split-wide__media {
		width: 100%;
	}

	.editorial-split-wide__hero-image {
		width: 100%;
		height: auto;
		/* The desktop rule's max-width/max-height (SIZING RULE v5) are a
		   viewport-vw formula and a --card-height custom property meant
		   for the side-by-side centered-ensemble layout only — left
		   un-reset here, max-width would evaluate to well under 200px at
		   this breakpoint and badly clip the image, which is back in
		   normal flow at width:100% and needs no cap at all. */
		max-width: none;
		max-height: none;
	}

	.editorial-split-wide__card-wrap {
		max-width: none;
	}

	.editorial-split-wide__headline {
		font-size: 32px;
	}

	/* Retargeted to `-inner` (not the outer `.card-face`) -- this rule
	   predates the corner-fold refactor, which split padding/border/
	   background off `.card-face` onto a new inner box so the fold-
	   corner + dot (siblings of `-inner`, direct children of
	   `.card-face`) sit unclipped on top of the notch instead of inside
	   the padded content box. Left targeting the outer `.card-face`
	   directly, this rule was padding an element that's not supposed to
	   have any padding of its own -- inflating the outer box 56px
	   (28px top + 28px bottom) beyond `-inner`'s real content height,
	   which put the fold-corner (bottom:0 relative to that inflated
	   outer box) visibly detached below the card's actual visible
	   bottom edge at this breakpoint only. Corner-side padding still
	   gets extra clearance (28+16=44, same +16px delta as the desktop
	   rule's 40->56) so text doesn't run into the 44px fold-corner. */
	.editorial-split-wide__card-face-inner {
		padding: 28px;
	}

	.editorial-split-wide__card-face-inner--front {
		padding-right: 44px;
	}

	.editorial-split-wide__card-face-inner--back {
		padding-left: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.editorial-split-wide__card {
		transition: none;
	}
}