/*
 * STORY — MEDIAWORLD. Red on white.
 *
 * Loads on one URL, on top of blog.css and story.css. story.css carries the bar, the facts row,
 * the copy stream, the value rows and the closing band; this file is the paint and the three
 * things only this page draws — the red fold, the four-up outcome grid and the two extension
 * cards.
 *
 * ── THE RED IS DECLARED ONCE ────────────────────────────────────────────────
 *
 * #E2001A appears in exactly one place, as --st-accent on the wrapper. Everything else reads
 * it. The point is not brevity: it is that this page's accent is MediaWorld's brand colour,
 * and the day it is wrong there is one line to change rather than nineteen.
 *
 * ── WHY THE LITERALS ARE LITERALS ───────────────────────────────────────────
 *
 * 260px cells, 520px figures, 48/40 cell padding, 20px grid gaps and the four clamp() ramps are
 * the design's own numbers and there is no token that means any of them. Where a token DOES mean
 * the thing — the gutters, the 120/72 section rhythm, the weights, the hairline — the token is
 * used. Inventing --mdw-cell-height for one use would be worse than the number.
 *
 * Breakpoints are @container page, never @media. See the head of story.css.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SURFACE
 * White, on the BODY. It cannot go on .fc-page: .fc-shell is capped at --canvas (1920), so a
 * ground painted inside it leaves the theme's bone showing down both sides of a wider monitor.
 * fc-story-mdw is added by fluent_commerce_story_body_class() to this post and nothing else.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds.fc-story-mdw {
	background: #ffffff;
}

body.fc-ds .fc-mdw {
	--st-accent: #e2001a;
	--st-ink: #121212;
	--st-copy: rgba(18, 18, 18, 0.88);
	--st-muted: rgba(18, 18, 18, 0.7);
	--st-hair: rgba(18, 18, 18, 0.18);
	--st-mark: "\2192";
	--st-bar-bg: rgba(255, 255, 255, 0.94);
	--st-band-bg: #121212;
	--st-band-on: #ffffff;
	--st-band-muted: rgba(255, 255, 255, 0.6);
	--st-h2: 34px;
	--mdw-band: var(--sp-120);
	background: #ffffff;
	color: var(--st-ink);
	font-family: var(--font-core);
}

/* The bar's back button: outlined in ink, filling red on hover. */
body.fc-ds .fc-mdw .fc-story-back {
	--fc-btn-bg: transparent;
	--fc-btn-on: var(--st-ink);
	--fc-btn-edge: var(--st-ink);
}

body.fc-ds .fc-mdw .fc-story-back:hover {
	border-color: var(--st-accent);
	background: var(--st-accent);
	color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE FOLD
 * A red band holding the wordmark, the headline, four facts and the way to their site. It is
 * the whole of the first screen, so it is also where the LCP element is — the wordmark, which
 * is why that one image is eager.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-hero {
	/* On red, the kicker and the facts are white and the hairlines over them are white at 40%. */
	--st-kicker: #ffffff;
	--st-fact-on: #ffffff;
	--st-fact-hair: rgba(255, 255, 255, 0.4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-72);
	padding: var(--mdw-band) var(--gutter-page) var(--sp-72);
	background: var(--st-accent);
	color: #ffffff;
}

body.fc-ds .fc-mdw-hero__lockup {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

body.fc-ds .fc-mdw-logo {
	width: min(320px, 62%);
	height: auto;
}

body.fc-ds .fc-mdw-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
}

/*
 * Instrument Sans at 600, not the display serif tokens.css gives every h1. Same call blog.css
 * makes for in-article subheads and for the same reason: the serif is the site's voice, and
 * this page is wearing the customer's.
 *
 * clamp() and not a --type role, because none of them is this ramp — 38→78px is wider than any
 * of them and it is pinned to the design's own numbers.
 */
body.fc-ds .fc-mdw-title {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(38px, 4.6vw, 78px);
	line-height: 1;
	letter-spacing: -0.025em;
	max-width: 24ch;
	color: #ffffff;
	text-wrap: pretty;
}

/* White button on red, inverting on hover. The border stays white so the shape does not move. */
body.fc-ds .fc-mdw .fc-story-visit {
	--fc-btn-bg: #ffffff;
	--fc-btn-on: var(--st-accent);
	--fc-btn-edge: #ffffff;
}

body.fc-ds .fc-mdw .fc-story-visit:hover {
	background: var(--st-accent);
	color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STORE
 * Full bleed, no gutters, cropped to a band. 62vh capped at 600 is the design's measure: it
 * never takes more than two thirds of a laptop screen, and on a short window it is still a
 * photograph rather than a stripe.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-shot {
	height: min(62vh, 600px);
	overflow: hidden;
}

body.fc-ds .fc-mdw-shot .fc-story-photo {
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE OUTCOME GRID
 * Four white cells on a hairline ground, so the rules between them are the 1px gaps showing
 * through. No cell owns a border, which is what keeps the rules single where the grid wraps to
 * two rows — the failure mode of giving each cell a right and a bottom edge instead.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-outcome {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--stroke-1);
	background: var(--st-hair);
	border-bottom: var(--stroke-1) solid var(--st-hair);
}

body.fc-ds .fc-mdw-cell {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-32);
	min-height: 260px;
	padding: 48px 40px;
	background: #ffffff;
}

body.fc-ds .fc-mdw-cell__value {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: clamp(32px, 3.2vw, 56px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--st-accent);
}

body.fc-ds .fc-mdw-cell__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

body.fc-ds .fc-mdw-cell__label {
	font-size: var(--type-body-16);
	font-weight: var(--fw-semibold);
	line-height: 1.35;
	color: var(--st-ink);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE INTRODUCTION
 * The lede beside the store entrance, both centred on each other rather than aligned to the
 * top: the paragraph is shorter than the photograph is tall, and a top-aligned pair leaves the
 * sentence floating over white.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: var(--sp-72);
	align-items: center;
	padding: var(--mdw-band) var(--gutter-page);
}

body.fc-ds .fc-mdw-intro__box {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

body.fc-ds .fc-mdw-intro__box .fc-story-photo {
	height: 100%;
	object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE STORY
 * Heading in a narrow left column, copy in a wide right one. The heading column is 0.4fr
 * against 1fr, which at 1920 gives it about 400px — two lines of a 34px heading, which is what
 * the design's two titles need.
 *
 * The copy is capped at 70ch and NOT at the column width. A measure is a count of characters,
 * so it is stated as one; the column is whatever the grid gives it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-row {
	display: grid;
	grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
	gap: var(--sp-72);
	align-items: start;
	padding: 0 var(--gutter-page) var(--mdw-band);
}

body.fc-ds .fc-mdw-blocks {
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
	max-width: 70ch;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE PAIR
 * Two captioned photographs, 1.35fr against 1fr, cropped to the same 520px band so the two
 * captions start on the same line.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-pair-band {
	padding: 0 var(--gutter-page) var(--mdw-band);
}

body.fc-ds .fc-mdw-pair {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 20px;
}

body.fc-ds .fc-mdw-figure {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body.fc-ds .fc-mdw-figure__box {
	height: 520px;
	overflow: hidden;
}

body.fc-ds .fc-mdw-figure__box .fc-story-photo {
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * The store team is a portrait crop in a landscape box, and centring it takes the heads off.
 * 20% down keeps them, which is the design's own object-position for this one photograph.
 */
body.fc-ds .fc-mdw-figure:nth-child(2) .fc-story-photo {
	object-position: center 20%;
}

body.fc-ds .fc-mdw-figure__by {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE RESULTS
 * Eight rows in two columns. The heading is 14px and tracked out rather than a headline, which
 * is how the design draws it — still an h2, because it is the heading of the section either way
 * and its size is a treatment, not a demotion.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-results {
	display: flex;
	flex-direction: column;
	gap: var(--sp-54);
	padding: 0 var(--gutter-page) var(--mdw-band);
}

body.fc-ds .fc-mdw-results__title {
	font-family: var(--font-core);
	font-weight: var(--fw-semibold);
	font-size: 14px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--st-accent);
}

body.fc-ds .fc-mdw-rows {
	--st-rows: 2;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE EXTENSIONS
 * A heading, a sentence, and two bordered cards. The only bordered boxes on the page, which is
 * what makes them read as two examples rather than as more of the story.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-extend {
	display: flex;
	flex-direction: column;
	gap: var(--sp-54);
	padding: var(--mdw-band) var(--gutter-page);
}

body.fc-ds .fc-mdw-extend__head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
	max-width: 64ch;
}

body.fc-ds .fc-mdw-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

body.fc-ds .fc-mdw-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 48px;
	border: var(--stroke-1) solid var(--st-hair);
}

body.fc-ds .fc-mdw-card__title {
	font-family: var(--font-core);
	font-size: var(--type-h5-24);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	color: var(--st-ink);
	text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CLOSE
 * Red button on white, and the section's geometry is story.css's. What is stated here is the
 * colourway and its hover, because owning the resting colour means owning the hover — the
 * alternative is whichever .fc-btn variant looked closest deciding it.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-mdw-cta .fc-btn {
	--fc-btn-bg: var(--st-accent);
	--fc-btn-on: #ffffff;
	--fc-btn-edge: var(--st-accent);
}

body.fc-ds .fc-mdw-cta .fc-btn:hover {
	border-color: var(--st-ink);
	background: var(--st-ink);
	color: #ffffff;
}

body.fc-ds .fc-mdw-cta .fc-btn:focus-visible {
	outline-color: var(--st-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NARROWER
 * The export's own step is 1100. The two below it are what a phone needs and the export does
 * not say: the vertical scale, and the point at which a 260px cell four across stops being a
 * grid and becomes a column of stripes.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	body.fc-ds .fc-mdw-outcome {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.fc-ds .fc-mdw-intro,
	body.fc-ds .fc-mdw-row,
	body.fc-ds .fc-mdw-pair,
	body.fc-ds .fc-mdw-cards {
		grid-template-columns: 1fr;
	}

	body.fc-ds .fc-mdw-intro {
		gap: 40px;
	}

	body.fc-ds .fc-mdw-row {
		gap: var(--sp-32);
	}

	body.fc-ds .fc-mdw-figure__box {
		height: 380px;
	}
}

@container page (max-width: 820px) {
	body.fc-ds .fc-mdw {
		--mdw-band: var(--sp-72);
	}

	body.fc-ds .fc-mdw-hero {
		gap: 40px;
		padding-bottom: var(--sp-54);
	}

	body.fc-ds .fc-mdw-shot {
		height: min(42vh, 360px);
	}

	body.fc-ds .fc-mdw-cell {
		min-height: 0;
		padding: var(--sp-32) var(--sp-24);
	}

	body.fc-ds .fc-mdw-card {
		padding: var(--sp-32);
	}
}

@container page (max-width: 700px) {
	body.fc-ds .fc-mdw-outcome {
		grid-template-columns: 1fr;
	}

	body.fc-ds .fc-mdw-figure__box {
		height: 260px;
	}
}