/**
 * Editorial Split template styles — flip-card + hero_shots device hero.
 *
 * Pairs with single-project.php (Gen-3, Editorial Split) + editorial-
 * split.js. Enqueued by the Neve child theme's functions.php only on
 * is_singular('project') when the post's Template is NOT Original-Stacked
 * — this file makes no theme_mod / Customizer / Site Option changes
 * itself.
 *
 * Design tokens duplicated (not @import-ed) from single-project.css, per
 * this story's Code Map, so this file works standalone. Font dependency
 * ('Noto Sans', 'Inter') is enqueued site-wide by functions.php, not
 * by this file.
 *
 * Flip-card mechanism is pure CSS (hidden checkbox + <label>, see
 * single-project.php) — no JS involved, works with JS disabled. The only
 * JS this template loads (editorial-split.js) is the hero_shots hard-swap
 * timer, and only runs at all when hero_shots has 2+ images — see that
 * file's own comment header.
 */

.editorial-split {
	--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);
}

.editorial-split__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;
}

/* Screen-reader-only, but still focusable/toggleable via keyboard — the
   checkbox itself drives the flip via :checked, it just shouldn't be
   visibly rendered as a checkbox. */
.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: 50/50 device hero · flip-card, both centered (Editorial Split —
   the only shipping desktop layout; see mockup-reference.md).
   ------------------------------------------------------------------ */

.editorial-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	justify-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 96px 24px;
}

/* hero_shots empty: card renders alone, centered, no second track. */
.editorial-split__grid--card-only {
	grid-template-columns: 1fr;
	max-width: 640px;
}

/* ---------------------------------------------------------------------
   Hero media: content-agnostic over hero_shots. Empty is simply absent
   from the markup (see single-project.php). One file renders as a plain
   static <img> (a GIF loops natively, no special-casing). 2+ files are
   all present in the markup; editorial-split.js toggles the `hidden`
   attribute on a timer to hard-swap, no cross-fade — Joe is responsible
   for pixel-identical chassis framing across a post's own set so the
   swap shows no flash.
   ------------------------------------------------------------------ */

.editorial-split__media {
	width: 100%;
	line-height: 0;
}

.editorial-split__hero-image {
	display: block;
	width: 100%;
	height: auto;
	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.js's hidden-attribute toggle has zero visual effect and
   every hero_shots image renders stacked at once instead of hard-swapping. */
.editorial-split__hero-image[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------
   Flip-card: front = headline/subhead, back = psr + clip. Pure CSS flip
   via a hidden checkbox + <label> (no JS) — see single-project.php.
   ------------------------------------------------------------------ */

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

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

.editorial-split__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__flip-toggle:checked ~ .editorial-split__card-scene .editorial-split__card {
	transform: rotateY(-180deg);
}

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

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

.editorial-split__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__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__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__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__fold-corner {
	position: absolute;
	bottom: 0;
	width: 44px;
	height: 44px;
	pointer-events: none;
}

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

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

.editorial-split__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__fold-dot--front {
	right: 8px;
}

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

.editorial-split__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__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__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__psr {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	flex: 1 0 auto;
}

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

.editorial-split__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__psr-value {
	display: block;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-body);
}

.editorial-split__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 — matches single-project.css's existing mobile scale.
   ------------------------------------------------------------------ */

@media (max-width: 768px) {
	.editorial-split__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 48px 16px 64px;
	}

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

	.editorial-split__card-wrap {
		max-width: none;
	}

	.editorial-split__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__card-face-inner {
		padding: 28px;
	}

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

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

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