/*
 * Home scenario switcher — accordion on phones, tabs from 64rem.
 *
 * Kept out of home.css deliberately: that file carries the FROZEN highlighted
 * products grid and its chapter spacing, and a new section of this size has no
 * business landing in the middle of it. One more stylesheet on one route is a
 * cheaper price than an edit to a frozen file.
 *
 * Mobile-first, as everywhere: the accordion is the unconditional default and
 * the tab strip arrives at 64rem. Every value is a theme.json token.
 *
 * THE STAGES CARRY REAL PRODUCT VISUALS. All five are shown whole: every stage
 * ratio is its file's own ratio, so object-fit has nothing to cut off. The
 * optimised set of 21 September 2026 is cropped and sized in the pixels, which
 * is why no stage crops at render time. The portrait pair are capped in width
 * rather than stretched to the column, because a phone screen blown up to 650px
 * is not more convincing, only blurrier.
 *
 * Loaded on the front page only; see foodyx_enqueue_styles().
 */

.fx-sc {
	margin-block-start: var(--wp--preset--spacing--100);
}

/* ---- Intro --------------------------------------------------------------- */

.fx-sc__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
	text-wrap: balance;
}

.fx-sc__lede {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: 58ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}

/* ---- Accordion (default) ------------------------------------------------- */

.fx-sc__body {
	margin-block-start: var(--wp--preset--spacing--70);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.fx-sc__item {
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.fx-sc__head {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

/*
 * The control is a full-width row on phones and a tab at desktop. It is a real
 * <button> in both: the thing that changes is where it sits and what role it
 * carries, never whether it is operable.
 */
.fx-sc__control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	min-height: 56px;
	padding: var(--wp--preset--spacing--40) 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
}

/*
 * A chevron drawn from a rotated border — no icon file for a control that only
 * ever points two directions. It turns to point down when the panel is open.
 */
.fx-sc__control::after {
	content: "";
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin-inline-end: 0.2rem;
	border-right: var(--wp--custom--border--connector) solid var(--wp--preset--color--connector);
	border-bottom: var(--wp--custom--border--connector) solid var(--wp--preset--color--connector);
	rotate: -45deg;
	translate: 0 -0.15em;
}

.fx-sc__control[aria-expanded="true"] {
	color: var(--wp--preset--color--accent);
}

.fx-sc__control[aria-expanded="true"]::after {
	border-color: var(--wp--preset--color--accent);
	rotate: 45deg;
	translate: 0 -0.25em;
}

.fx-sc__control:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.fx-sc__panel {
	padding-block-end: var(--wp--preset--spacing--70);
}

/* ---- Panel content ------------------------------------------------------- */

.fx-sc__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

/*
 * A paragraph, not a heading. The accordion's h3 already names this scenario;
 * a second heading saying nearly the same thing would put ten entries in the
 * outline where five belong.
 */
.fx-sc__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

.fx-sc__body-text {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: 52ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

.fx-sc__benefits {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * A petrol rule on the leading edge instead of a bullet or a tick icon. Three
 * short claims do not need three pieces of decoration.
 */
.fx-sc__benefit {
	max-width: none;
	padding-inline-start: var(--wp--preset--spacing--50);
	border-inline-start: var(--wp--custom--border--connector) solid var(--wp--custom--surface--accent-soft);
}

.fx-sc__benefit-title {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.35;
}

.fx-sc__benefit-text {
	display: block;
	margin-block-start: 0.125rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.fx-sc__product {
	margin: var(--wp--preset--spacing--60) 0 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.4;
}

/* ---- The stage ----------------------------------------------------------- */

/*
 * The stage owns the aspect ratio, the surface and the rule. Its child owns
 * nothing but itself, so a placeholder and a real screenshot occupy exactly the
 * same box and the layout does not move when they are swapped.
 */
.fx-sc__stage {
	display: grid;
	/*
	 * stretch, not center: the image must fill the stage box so that object-fit
	 * decides what happens at the edges. Centred, it keeps its intrinsic ratio,
	 * overflows a stage whose ratio differs and is then trimmed top AND bottom
	 * by overflow:hidden — which quietly took the header off Inzicht.
	 */
	place-items: stretch;
	overflow: hidden;
	margin-block-start: var(--wp--preset--spacing--70);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--field);
}

/*
 * Ratios, taken from the files themselves rather than from a house grid.
 *
 * All five carry their source ratio exactly, so the whole picture is visible:
 * the kiosk's printer and payment terminal, the full phone screen from header
 * to basket bar, the webshop's category rail and order summary either side of
 * its product dialog, the KDS screen with its kitchen around it, and the
 * Analytics dashboard entire.
 */
.fx-sc__stage--kiosk  { aspect-ratio: 900 / 1125; }
.fx-sc__stage--qr     { aspect-ratio: 278 / 588; }
.fx-sc__stage--keuken { aspect-ratio: 1200 / 900; }

/*
 * Online keeps its approved 4:3 — the crop has simply moved from the render
 * into the file.
 *
 * The old asset was a 1920x1032 capture with roughly 270px of empty page
 * margin at each edge; shown whole the interface sat at a third of its size
 * and the product dialog could not be read, so the stage cropped 14% off each
 * side with object-fit: cover. The optimised asset is 1200x900 — that same
 * framing, already trimmed — so 4:3 is now the file's own ratio and there is
 * nothing left for cover to take. The declared ratio does not change; keep it
 * written as 4 / 3 rather than 1200 / 900 because it restates the approved
 * crop, not a number read off a file.
 */
.fx-sc__stage--online { aspect-ratio: 4 / 3; }

/*
 * Inzicht is NOT cropped, and must not be.
 *
 * It was, once: the first Analytics asset was a 1920x911 raw browser capture
 * with dead margin and an "INVALID DATE" build stamp, and it was cut to
 * 1478x832 to make the figures legible. The approved asset that replaced it on
 * 21 September 2026 is a composed 1444x1089 image — the dashboard sits in its
 * own rounded, padded frame on a soft field, and the old crop would have
 * sliced straight through that framing.
 *
 * It is also the only art-directed stage. Below 48rem the markup serves the
 * phone build of the dashboard, which is 941x1672 portrait — six cards in two
 * columns over a tab bar, not the desktop grid shrunk down. The stage takes
 * that file's ratio at the same breakpoint the <picture> switches on, so the
 * box and the file change together and neither letterboxes the other.
 *
 * Mobile-first: the portrait ratio is the unconditional default and the
 * landscape one arrives with the desktop file at 48rem.
 */
.fx-sc__stage--inzicht { aspect-ratio: 941 / 1672; }

@media (min-width: 48rem) {
	.fx-sc__stage--inzicht { aspect-ratio: 1444 / 1089; }
}

/*
 * The two portrait scenarios do not take the full column.
 *
 * Kiosk is capped at 28rem and is still the tallest and heaviest stage of the
 * five at every width — which is how it stays the hero now that it is no
 * longer the widest. QR is capped near its own 278px so the interface is read
 * at roughly life size instead of being upscaled into mush. Both centre in the
 * column; the stage stays snug around the picture, so neither sits in an empty
 * rectangle.
 */
.fx-sc__stage--kiosk,
.fx-sc__stage--qr {
	margin-inline: auto;
}

.fx-sc__stage--kiosk {
	max-inline-size: 28rem;
}

.fx-sc__stage--qr {
	max-inline-size: 15rem;
}

/*
 * The image takes the stage's ratio by inheriting it, and derives its height
 * from its own width.
 *
 * height:100% looks like the obvious way to fill the stage and is not: a
 * percentage height has nothing definite to resolve against when the parent's
 * height comes from aspect-ratio, so it falls back to auto, the image keeps its
 * intrinsic ratio, and on a stage whose ratio differs from its file it overflows
 * and is trimmed at BOTH ends by overflow:hidden instead of where intended.
 *
 * contain, not cover: every stage now carries its file's exact ratio, so
 * contain is the setting that cannot crop if a ratio is ever rounded or a
 * stage re-proportioned. Online's cover override went with the crop it
 * existed for — against a 1200x900 file in a 4:3 box the two fits are
 * identical, and contain is the one that fails safe.
 */
/*
 * The stage lays its child out as a grid item, and on Inzicht that child is a
 * <picture>, which is an inline box by default and would sit the image inside
 * a second box that does not stretch. display:contents takes the wrapper out
 * of the box tree entirely, so the <img> is the stage's grid item on all five
 * scenarios and every rule below applies unchanged.
 */
.fx-sc__stage picture {
	display: contents;

	/*
	 * And it must pass the ratio through. display:contents drops the box but
	 * NOT the inheritance link, so .fx-sc__shot's `aspect-ratio: inherit`
	 * inherits from this element, not from the stage — and a <picture> computes
	 * `auto`. Without this line the image silently falls back to its own
	 * intrinsic ratio, which is right only for as long as every stage ratio
	 * happens to equal its file's, and turns into a portrait image clipped
	 * inside a landscape stage the moment one does not.
	 */
	aspect-ratio: inherit;
}

.fx-sc__shot {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: inherit;
	object-fit: contain;
}


/* ---- 64rem: tabs --------------------------------------------------------- */

@media (min-width: 64rem) {
	/*
	 * scenarios.js has moved the controls into .fx-sc__tabs and the panels into
	 * .fx-sc__panels by now. Without the script none of these selectors match
	 * anything and the accordion above stays in force — which is the fallback,
	 * not a failure.
	 */
	.fx-sc__body {
		border-block-start: 0;
		margin-block-start: var(--wp--preset--spacing--80);
	}

	.fx-sc__item {
		border-block-end: 0;
	}

	.fx-sc__tabs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--60);
		border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	}

	/*
	 * The selected tab is marked by a petrol rule sitting on the strip's own
	 * hairline, not by a filled pill. The strip stays quiet and the panel below
	 * it does the talking.
	 */
	.fx-sc__control {
		width: auto;
		min-height: 0;
		padding: 0 0 var(--wp--preset--spacing--50);
		margin-block-end: calc(-1 * var(--wp--custom--border--hairline));
		border-block-end: var(--wp--custom--border--connector) solid transparent;
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--base);
	}

	.fx-sc__control::after {
		content: none;
	}

	.fx-sc__control:hover {
		color: var(--wp--preset--color--ink);
	}

	.fx-sc__control[aria-selected="true"] {
		border-block-end-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent);
	}

	/*
	 * All five panels share one grid cell, so the section is always as tall as
	 * its tallest scenario and switching tabs never moves the page under the
	 * reader. The inactive ones keep their space but leave the accessibility
	 * tree and the tab order — which is why [hidden] is overridden here rather
	 * than honoured.
	 */
	.fx-sc__panels {
		display: grid;
		margin-block-start: var(--wp--preset--spacing--80);
	}

	.fx-sc__panel {
		grid-area: 1 / 1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		align-items: center;
		column-gap: var(--wp--preset--spacing--90);
		padding-block-end: 0;
	}

	.fx-sc__panel[hidden] {
		display: grid;
		visibility: hidden;
	}

	.fx-sc__panel:focus-visible {
		outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
		outline-offset: var(--wp--custom--focus--offset);
	}

	/*
	 * The stage is the second column and the wider one. Kiosk's 4:3 in the
	 * larger track is what makes it read as a major product rather than a
	 * screenshot parked beside some text.
	 */
	.fx-sc__stage {
		margin-block-start: 0;
	}

	/*
	 * justify-self rather than margin-inline: the stage is a grid item here, so
	 * centring it inside the track is the track's job.
	 */
	.fx-sc__stage--kiosk,
	.fx-sc__stage--qr {
		justify-self: center;
		inline-size: 100%;
	}
}