/**
 * The customer story card, as a shared component.
 *
 * ── WHY THIS FILE EXISTS ────────────────────────────────────────────────────
 *
 * All of this was in customers.css until 2026-08-27, when the pricing page's quote
 * carousel was replaced with eight of the Customers page's cards. That made the card a
 * component with two callers, and a component with two callers cannot live in one page's
 * sheet — the pricing page would either not be styled or would be styled by a file named
 * after a different page.
 *
 * THREE PLACES IT COULD HAVE GONE, and why here:
 *
 *   · pages.css, which is where the story carousel went when this same thing happened to
 *     it and pricing became its second caller. That is the closest precedent and it was
 *     rejected on weight: pages.css loads on seventeen DS pages and this is 300 lines for
 *     a component that two of them use. security.css exists for exactly that reason.
 *   · left in customers.css, enqueued on both templates. Rejected because the pricing page
 *     would then also download the fold, the stat band, the view toggle, the industry pill
 *     and the nineteen-row list view, none of which it has any markup for.
 *   · here. The card and the grid it sits in, and nothing else. Both templates ask for it
 *     by name, so what each page loads says what each page draws.
 *
 * THE COST, stated because it is real: the Customers page now has two blocking
 * stylesheets where it had one. They are both small, both cached after the first view, and
 * HTTP/2 sends them together — but it is one more request than before and it is the price
 * of not shipping this to fifteen pages that do not draw a card.
 *
 * ── WHAT IS NOT IN HERE ─────────────────────────────────────────────────────
 *
 * The list view, the Grid/List radios, the industry pill, the fold and the stat band all
 * stayed in customers.css. They are that page's, not the card's. The pill is the near
 * miss: Build-18 took it off the card and it now belongs to the list's Industry column
 * only, so it stayed — if it ever goes back on the card it moves here with it.
 *
 * @see inc/ds-customers.php  the markup, and fluent_commerce_ds_customers_grid()
 * @see assets/ds/customers.css  the rest of the Customers page
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE GRID
 *
 * Three columns. On the Customers page that is nineteen cards spanning 1+1+1, 1+2,
 * 1+1+1, 1+2, 1+1+1, 1+2, 3, 1+2, 3 — twenty-seven, which is nine flush rows. On the
 * pricing page it is eight cards spanning 1+1+1, 1+2, 1+1+1 — nine, which is three flush
 * rows, and that is not a coincidence: the cut was chosen to land on one.
 *
 * The spans are classes rather than inline styles because they are the composition and not
 * a per-card value, and because they have to change at two breakpoints, which an inline
 * style could not do.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-storygrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-32);
	margin-top: var(--sp-54);
}

body.fc-ds .fc-storycard--span1 {
	grid-column: span 1;
}

body.fc-ds .fc-storycard--span2 {
	grid-column: span 2;
}

body.fc-ds .fc-storycard--span3 {
	grid-column: span 3;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CARD
 *
 * White, hairlined, and two boxes: a body that stacks its copy from the top, and a bar
 * ruled off along the bottom edge holding the mark and the arrow. The body takes flex:1,
 * so the bar sits on the card's bottom edge whether the copy above it is ALDO's eight
 * words or Screwfix's five lines.
 *
 * White and not bone, which is the design's call and the reason the bitmap marks work at
 * all: several of them are opaque white-background grabs rather than transparent
 * artwork, and they read correctly on this surface and nowhere else on the page. Worth
 * knowing on the pricing page, where the section around them is bone as well.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-storycard {
	display: flex;
	flex-direction: column;
	min-height: 340px;
	background: var(--surface-lightest);
	border: var(--stroke-1) solid var(--border-on-light);
	color: var(--text-on-light);
	text-decoration: none;
}

/* A single-column card is shorter in the design, by six pixels of nothing much. */
body.fc-ds .fc-storycard--span1 {
	min-height: 320px;
}

/*
 * No align-items: the default stretch is what the export relies on, and it is what keeps
 * a quote wrapping at the card's width rather than at its own fit-content width.
 */
body.fc-ds .fc-storycard__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--sp-24);
	padding: var(--sp-32);
	min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE QUOTE
 *
 * ONE SIZE, ON EVERY CARD. The export looks like it has three quote sizes and it has
 * one: the --type-display-48 branch needs a card wider than one column AND a quote under
 * 70 characters, and the shortest multi-column quote on the page is Primark's at 94, so
 * it never fires. Both arms of the ternary underneath it are --type-quote-32.
 *
 * Which means Build-18 has no single-column quote size. Build-12 set those to 24px, and
 * that rule and its 820px counterpart are GONE rather than kept: at a third of the grid
 * ALDO's eight words now set at 32px, which the clamp in --type-quote-32 brings down to
 * 24 on a narrow container anyway. If a single-column quote reads too large on the
 * three-up grid, that is the value to bring back, and it is one rule.
 *
 * .fc-storycard__accent is the marked phrase in the three split quotes, and it carries
 * nothing on purpose: the export resolves its fill to transparent and its colour to the
 * ink the paragraph already has, so it renders exactly like the words around it. The span
 * is emitted so turning it on is one declaration here. The export contradicts itself
 * about what that declaration should be — see fluent_commerce_ds_customers_quote().
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-storycard__quote {
	margin: 0;
	font-family: var(--font-quote);
	font-weight: var(--fw-regular);
	font-size: var(--type-quote-32);
	line-height: var(--lh-title);
	letter-spacing: var(--ls-quote);
	color: var(--text-on-light);
	text-wrap: pretty;
}

/* ── THE FIGURES ─────────────────────────────────────────────────────────── */
body.fc-ds .fc-storycard__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-32) var(--sp-54);
}

body.fc-ds .fc-storycard__figure {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	flex: 1 1 180px;
	min-width: 0;
}

/*
 * THREE SIZES, AND THEY ARE THE EXPORT'S ARITHMETIC RATHER THAN THREE TOKENS. The
 * numeral is scaled off the 48px ramp so it stays in step when that ramp moves, and the
 * multiplier depends on how long the figure is: "24" wants to be big, "1000 → 6" wants
 * to fit on one line. The default is 1.5 and the two modifiers step down from it.
 *
 * white-space:nowrap is the point of the whole mechanism. A figure that wraps stops
 * being a figure, so the size gives way instead of the line.
 *
 * Ink here, unlike the stat band's violet. Fourteen figures over nineteen cards is not
 * the "one accent" violet is for.
 */
body.fc-ds .fc-storycard__value {
	font-family: var(--font-quote);
	font-weight: var(--fw-semibold);
	font-size: calc(var(--type-numeral-48) * 1.5);
	line-height: var(--lh-flush);
	letter-spacing: var(--ls-quote);
	color: var(--text-on-light);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Five or six characters in a single column: "€3.8m", "5 wks", "12 wks". */
body.fc-ds .fc-storycard__value--tight {
	font-size: calc(var(--type-numeral-48) * 1.15);
}

/* Seven or more: "42 days", "1000 → 6". */
body.fc-ds .fc-storycard__value--tightest {
	font-size: calc(var(--type-numeral-48) * 0.8);
}

body.fc-ds .fc-storycard__label {
	font-size: var(--type-body-16);
	font-weight: var(--fw-medium);
	line-height: var(--lh-body);
	color: var(--text-on-light-muted);
	text-wrap: pretty;
}

/* ── THE PERSON ──────────────────────────────────────────────────────────── */
body.fc-ds .fc-storycard__person {
	display: flex;
	align-items: center;
	gap: var(--sp-16);
}

/* Primark names a person with no headshot supplied, so this is not on every person. */
body.fc-ds .fc-storycard__face {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-image: var(--face);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

body.fc-ds .fc-storycard__who {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

body.fc-ds .fc-storycard__name {
	font-size: var(--type-body-16);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-title);
	color: var(--text-on-light);
}

/*
 * The export sets this at 0.77 × the body size, which is 13.9px, and tokens.css calls
 * --type-body-15 "the smallest body size the brand allows". So this is that token
 * instead: 17px at desktop, 15px at the clamp's floor. The step down from the 18px
 * name is smaller than the design's, and weight and tint carry the rest of it — a
 * SemiBold ink name over a Medium 60% role reads as two levels at any size.
 */
body.fc-ds .fc-storycard__role {
	font-size: var(--type-body-15);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	color: var(--fc-ink-a60);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE BAR
 *
 * Build-18's replacement for the old card head and foot both: an 88px-tall strip ruled
 * off the body, with the mark in a cell that takes what width is left and the arrow in
 * an 88 x 88 cell after it. One border between them and no plate, no radius.
 *
 * align-items:stretch, so the border-left between the two cells runs the full 88px
 * rather than the height of an 18px glyph.
 *
 * On an unlinked card there is no arrow cell at all, so the mark cell takes the whole
 * bar — which is why the width is flex:1 and not a calc against 88px.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-storycard__bar {
	display: flex;
	align-items: stretch;
	border-top: var(--stroke-1) solid var(--border-on-light);
}

body.fc-ds .fc-storycard__markcell {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	height: 88px;
	padding: 0 var(--sp-16);
}

/*
 * The mark. Same --mark contract as the proof wall's tile and the flat logo row
 * (inc/ds-blocks.php), with a --mark-w as well as a --mark-h because these marks are
 * boxed rather than normalised: every one is fitted inside 250 x 44 and contain does the
 * rest, so a 7:1 wordmark and a square badge both sit correctly without nineteen logos
 * having to be brought to one optical weight by eye. THE MARK BOX in
 * inc/ds-customers.php has the rule.
 *
 * max-width:100% and not a media query: a 250px mark in the mark cell of a phone-width
 * card is wider than the cell, and this makes the box's width a ceiling rather than a
 * size. contain keeps the ratio, so it letterboxes inside the 44px height instead of
 * overflowing. The export writes the same pair for the same reason.
 */
body.fc-ds .fc-storycard__mark {
	flex: 0 1 auto;
	width: var(--mark-w);
	max-width: 100%;
	height: var(--mark-h);
	background-image: var(--mark);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
}

/*
 * No story has been without a mark since Build-18 gave Barbeques Galore one, so this is
 * the documented fallback rather than a live rule: the company name set as type in the
 * mark's slot, at the export's own 18px semibold with label tracking.
 */
body.fc-ds .fc-storycard__wordmark {
	font-size: var(--type-body-16);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-title);
	letter-spacing: var(--ls-label);
	color: var(--text-on-light);
	text-wrap: balance;
}

/* The arrow's own cell. Square, and ruled off the mark beside it. */
body.fc-ds .fc-storycard__arrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-left: var(--stroke-1) solid var(--border-on-light);
	color: var(--text-on-light);
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/*
 * The whole card is the hover target, and the arrow cell is what shows it. The export
 * writes this as a global :hover rule in the page's <style> block for the same reason:
 * the cell cannot be hovered on its own, because an 88px corner is not where anyone aims
 * at a 340px card.
 *
 * a:hover only. The unlinked cards carry the identical class list and must not light up —
 * the whole point of them being a <div> is that :hover is the one thing that tells them
 * apart. Nine of the nineteen on the Customers page, one of the eight on pricing.
 */
body.fc-ds a.fc-storycard:hover .fc-storycard__arrow {
	background: var(--text-on-light);
	border-color: var(--text-on-light);
	color: var(--surface-lightest);
}

body.fc-ds a.fc-storycard:focus-visible {
	outline: var(--stroke-1) solid var(--fc-violet);
	outline-offset: 4px;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 *
 * The design ships desktop only, so all three breakpoints are this theme's. Container
 * queries on `page`, matching every other DS sheet — which is what makes this component
 * portable in the first place: it reads the page shell's width, not the viewport's, so it
 * behaves the same in the Customers grid and inside the pricing page's ruled column.
 *
 * The grid loses a column at a time and the spans clamp with it. At two columns the
 * Customers page's nineteen cards no longer pack flush: with every span capped at 2,
 * Hibbett is a single that Primark's two cannot sit beside, so there is one empty
 * half-row late in that grid. The pricing page's eight are 1+1, 1+1, 2, 1+1 and stay
 * flush at two columns as well. At one column it is moot for both.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 1100 ── the three-up grid loses its third column. */
@container page (max-width: 1100px) {
	body.fc-ds .fc-storygrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * A three-wide card in a two-column grid overflows its own track, so both the
	 * two- and three-wide cards become two. Written as one rule rather than two,
	 * because at this width they are the same thing: full width.
	 */
	body.fc-ds .fc-storycard--span2,
	body.fc-ds .fc-storycard--span3 {
		grid-column: span 2;
	}
}

/* ── 820 ── one card at a time. */
@container page (max-width: 820px) {
	body.fc-ds .fc-storygrid {
		grid-template-columns: minmax(0, 1fr);
	}

	body.fc-ds .fc-storycard--span1,
	body.fc-ds .fc-storycard--span2,
	body.fc-ds .fc-storycard--span3 {
		grid-column: span 1;
	}

	/* The floors were set against a three-column grid and only pad a full-width card. */
	body.fc-ds .fc-storycard,
	body.fc-ds .fc-storycard--span1 {
		min-height: 0;
	}
}

/* ── 440 ── phone. The card body's padding comes in a step. */
@container page (max-width: 440px) {
	body.fc-ds .fc-storycard__body {
		padding: var(--sp-24);
	}

	/*
	 * The bar does not stack: a mark cell and an 88px arrow still fit across 350px, and
	 * the mark's own max-width:100% takes care of the widest of them. Only the figures
	 * need help — two of them side by side at 1 1 180px would each be under 100px.
	 */
	body.fc-ds .fc-storycard__metrics {
		gap: var(--sp-24);
	}
}