/*
 * 2026 design system — the Knowledge Hub's shared furniture.
 *
 * Loaded on the three Hub templates only, on top of tokens.css, layout.css, chrome.css and
 * pages.css, and declared as a dependency of pages.css rather than trusted to source
 * order. Each page's own stylesheet then declares a dependency on THIS file, so the chain
 * is pages → knowledge → page. See inc/ds.php.
 *
 * ── WHAT IS IN HERE AND WHY IT IS NOT IN layout.css ─────────────────────────
 *
 * Seven compositions, each of them used by all three Hub pages and by nothing else on the
 * site:
 *
 *   .fc-kb-hero      the split hero every Hub page opens on
 *   .fc-kb-notice    the white bar under it
 *   .fc-ask          a sentence and a button on one line, 4fr to 1fr
 *   .fc-kb-split     a heading against a much longer body, 1fr 2fr
 *   .fc-kb-prose     the design's measure for running prose
 *   .fc-kb-head      a centred heading and its narrower standfirst
 *   .fc-matrix       a hairline comparison table in a scrollable frame
 *
 * The theme's rule for promoting something to layout.css is that a second page asks for
 * it, and by that rule all six qualify — .fc-matrix in particular was flagged for the move
 * the day the Buyer's Guide shipped. They stop here rather than going the whole way for
 * one reason: layout.css is in the critical path of EVERY composed page, and the Hub is
 * three pages of it. If a fourth non-Hub page ever wants the matrix, that is the day it
 * moves up.
 *
 * What is NOT in here, deliberately: the ruled column (.fc-ruled, layout.css), the seams
 * between sections (.fc-seam, layout.css), the Q&A accordion itself (.fc-faq, pages.css)
 * and every type role these pages use. The Hub adds no primitives.
 *
 * @package Fluent_Commerce
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * THE HERO
 * Build-11 gave all three Hub pages the hero they did not have: title left, a
 * photograph right, bleeding into the gutter behind a hairline.
 *
 * .fc-contact-hero's construction, which is .fc-trust-hero's construction, to the
 * pixel. This is the third copy and the note over the second one says a third page
 * drawing this shape is the moment to lift it into layout.css. It has not moved
 * because moving it means editing the Trust Center and the Contact page in the
 * same change, and it earns nothing here: this file loads on exactly the three
 * pages that want it, which is the same argument that keeps .fc-matrix out of
 * layout.css. The long version of every value below is over THE HERO in
 * security.css.
 *
 * The wrapper is .fc-split, like both of the others. The design's .fc-hero-split
 * puts the seam at a true 50% of the viewport by paying back half the gutter the
 * section gives up; .fc-split puts it half a gutter to the left of that. Matching
 * the two heroes already on the site is worth more than the difference — all four
 * are the same component, and if the seam moves it should move on all of them.
 *
 * Note .fc-split is safe here even though this file narrows a split to 1fr 2fr
 * above 1100: that override is on .fc-kb-split, not on the primitive.
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * The section gives up its horizontal padding so the artwork can run to the RIGHT
 * rule; the copy column pays the ruled inset itself, and the vertical padding
 * moves there too because the picture is full-bleed top and bottom and the copy is
 * what sets the height.
 *
 * Written .fc-section.fc-kb-hero to match the specificity of the ruled padding it
 * overrides.
 */
body.fc-ds .fc-section.fc-kb-hero {
	padding: 0 var(--gutter-page) 0 0;
}

/* No gap: the seam between the two columns is a hairline, not a space. */
body.fc-ds .fc-kb-hero__split {
	gap: 0;
	align-items: stretch;
}

body.fc-ds .fc-kb-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sp-24);
	padding: var(--sp-54) var(--sp-54) var(--sp-54) calc(var(--gutter-page) + 40px);
}

/*
 * The artwork's column. min-height is the floor for the whole hero, since the grid
 * stretches both columns to the taller of the two and on a wide screen the copy is
 * the shorter one. border-left is the seam — the design calls this .fc-seam-col —
 * and it becomes a border-top when the columns stack, because a rule between two
 * things has to be on the side they actually meet.
 */
body.fc-ds .fc-kb-hero__figure {
	position: relative;
	min-height: 360px;
	border-left: var(--stroke-1) solid var(--fc-ink-a20);
}

/* Absolute, so the picture takes the column's height from the copy beside it
   rather than giving it a height of its own. */
body.fc-ds .fc-kb-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * .fc-display-hero carries the face, the size and the ramp; the title's own line
 * break and its violet second line are in the markup, and the only thing left here
 * is the colour and a measure. 1000px is the design's, and it is wider than the
 * column ever gets — it only matters if a page's title is longer than these three.
 */
body.fc-ds .fc-kb-hero__title {
	max-width: 1000px;
	color: var(--text-on-light);
}

/* The design's measure for the sentence under the title. */
body.fc-ds .fc-kb-hero__lead {
	max-width: 700px;
}

/*
 * Stacked at 1100, where every other split stacks, and the same three things move
 * as on the Contact page: the seam becomes the top edge of the picture; the copy
 * column pays the inset on both sides now that it is the full width — 40px on the
 * right rather than the inset again, since the section is already indented by the
 * gutter on that side; and the picture is pulled in off the left rule, which
 * .fc-ruled::before paints before the section's content and a full-bleed image
 * would bury.
 */
@container page (max-width: 1100px) {
	body.fc-ds .fc-kb-hero__copy {
		padding: var(--sp-54) 40px var(--sp-54) calc(var(--gutter-page) + 40px);
	}

	body.fc-ds .fc-kb-hero__figure {
		margin-left: calc(var(--gutter-page) + var(--stroke-1));
		border-left: 0;
		border-top: var(--stroke-1) solid var(--fc-ink-a20);
	}
}

/* The 40px inset halves at 820, the same as every other ruled section's. */
@container page (max-width: 820px) {
	body.fc-ds .fc-kb-hero__copy {
		padding: var(--sp-54) 20px var(--sp-54) calc(var(--gutter-page) + 20px);
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE NOTICE
 * A bar above the page rather than a section of it, so it takes a third of the
 * section ramp instead of all of it. Block axis only: the inline padding is
 * .fc-section's gutter plus .fc-ruled's 40, and the notice sits inside the same
 * column as everything else.
 *
 * White on all three pages, and stated here rather than as an inline block style
 * so a section's ground is one line in one file.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-kb-notice {
	background: var(--fc-white);
	padding-block: calc(var(--pad-section) * 0.32);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE ASK-US ROW
 * Every Hub page's conversion.
 *
 * 4fr 1fr and not "1fr auto", which is what it looks like it wants. The design
 * fixes the button's column at a fifth of the row so two instances on one page
 * line up with each other even though their sentences are different lengths —
 * with an auto track the shorter sentence would push its button inward and the
 * pair would read as two different components.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-ask {
	display: grid;
	grid-template-columns: 4fr 1fr;
	gap: var(--sp-32);
	align-items: center;
}

body.fc-ds .fc-ask > .fc-btn {
	justify-self: start;
}

/*
 * The one instance that is not a row. Build-11 recomposes the Buyer's Guide's closing
 * Ask-us as a centred column — the sentence over the button, both centred on the measure —
 * which is a different arrangement of the same two things, so it is a modifier and not a
 * second component.
 */
body.fc-ds .fc-ask--center {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

body.fc-ds .fc-ask--center > .fc-btn {
	justify-self: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE SPLITS
 * Most Hub sections are a heading against a much longer body, so 1fr 2fr rather
 * than the primitive's 1fr 1fr.
 *
 * Written inside a min-width query, which is the whole trick and the reason this
 * is four lines rather than one: layout.css stacks .fc-split to a single column
 * in @container page (max-width: 1100px), and this file loads AFTER it. An
 * unconditional grid-template-columns here would win on source order and the
 * split would stay two columns on a phone. So the override is confined to the
 * width where the split is two columns in the first place.
 *
 * THIS IS NOW A DUPLICATE, AND DELIBERATELY LEFT AS ONE. The header of this file says a
 * fourth non-Hub caller is the day the 1fr 2fr split moves up; the About page was that
 * caller, so it is in layout.css as .fc-split-13 — the export's own name for it — with the
 * same min-width query and the same reasoning. This rule stays because the three Hub pages
 * carry .fc-kb-split in their stored post_content, and collapsing it means re-seeding all
 * three to re-class markup that looks identical either way. Do it on the next re-seed those
 * pages need for a reason of their own: delete this block, and swap fc-kb-split for
 * fc-split-13 in inc/ds-buyers-guide.php, inc/ds-ai-agentic.php and inc/ds-legacy-oms.php.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (min-width: 1101px) {
	body.fc-ds .fc-kb-split {
		grid-template-columns: 1fr 2fr;
	}
}

/*
 * The design's measure for running prose. A column, not a paragraph: put it on the wrapper
 * and every paragraph inside it shares the measure.
 */
body.fc-ds .fc-kb-prose {
	max-width: 720px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE CENTRED HEAD
 * Two measures, because the design gives the heading room to break where it
 * wants and holds the line under it much narrower so it reads as an aside rather
 * than as a standfirst.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-kb-head__title {
	max-width: 900px;
}

body.fc-ds .fc-kb-head__sub {
	max-width: 620px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE MATRIX
 * A comparison table: vendor approaches by two questions, legacy against modern,
 * before against after. Real <table>s, for the reason in inc/ds-knowledge.php.
 *
 * THE HAIRLINES. The design draws each cell with a 1px white gutter around it and
 * a box-shadow on its right and bottom edges, which nets out to: a line between
 * every pair of cells, a line down the right edge and along the bottom, and NO
 * line above the first row or left of the first column. That is a border-right
 * and a border-bottom on every cell, which is what this does — one declaration
 * instead of a gap, a background and a two-part shadow.
 *
 * border-collapse stays separate with zero spacing. Collapsed borders would merge
 * the outer edges into the section's own hairlines at some zoom levels; separate
 * borders each stay 1px wherever they land.
 *
 * THE TWO CUSTOM PROPERTIES are how a page states its own table without a
 * selector per table. --matrix-min is the floor below which the frame scrolls
 * instead of shrinking; a table with no floor shrinks to the column, which is
 * right for two columns and wrong for seven. --matrix-pad is the cell padding,
 * which the design widens as the columns get fewer.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-matrix {
	--matrix-min: 0;
	--matrix-pad: 20px;

	overflow-x: auto;
}

/*
 * The frame is focusable, because a region that only a mouse can scroll is a region a
 * keyboard cannot read. tabindex is in the markup; this is the ring, drawn outside the
 * frame so it is not clipped by the frame's own overflow.
 */
body.fc-ds .fc-matrix:focus-visible {
	outline: 2px solid var(--fc-violet);
	outline-offset: 4px;
}

body.fc-ds .fc-matrix__table {
	width: 100%;
	min-width: var(--matrix-min);
	border-collapse: separate;
	border-spacing: 0;
	/*
	 * Fixed, so the columns are the ones the design specifies rather than the ones the
	 * longest sentence negotiates. It is also what makes a <colgroup>'s stated width hold
	 * where the first cell of the first row is empty and has no width of its own to
	 * contribute.
	 */
	table-layout: fixed;
	text-align: left;
}

body.fc-ds .fc-matrix__table th,
body.fc-ds .fc-matrix__table td {
	padding: var(--matrix-pad);
	vertical-align: top;
	text-align: left;
	border-right: var(--stroke-1) solid var(--fc-ink-a20);
	border-bottom: var(--stroke-1) solid var(--fc-ink-a20);
}

/* The column heads: bold grotesk at body size, which the design sets and no type role carries. */
body.fc-ds .fc-matrix__head {
	font-family: var(--font-core);
	font-weight: var(--fw-bold);
	font-size: var(--type-body-18);
	line-height: var(--lh-body);
	color: var(--text-on-light);
}

/*
 * A column head's second line — "Stay, Pay More, Fall Behind" under "Before Legacy OMS
 * Modernization". The design sets it as a block-level <em> at the same weight as the head
 * above it, which is a strange pairing on paper and correct on screen: it is the same
 * statement continued, not a caption under it.
 */
body.fc-ds .fc-matrix__head-sub {
	display: block;
	font-style: normal;
	font-weight: var(--fw-bold);
}

/* The row heads are .fc-eyebrow, which brings the size, the weight and the tracking. */
body.fc-ds .fc-matrix__label {
	color: var(--text-on-light);
}

body.fc-ds .fc-matrix__col--label {
	width: 132px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE Q&A'S ONE ADDITION
 * .fc-faq is in pages.css and needs nothing here except this: several answers
 * across the three pages are a bulleted list, and the accordion had never had a
 * list in it before the Hub.
 *
 * The markers stay — see the note in inc/ds-knowledge.php. A margin between the
 * items gets the design's 12px rhythm and keeps the list a list.
 *
 * The margins mirror .fc-faq__a's own: 24 to whatever follows inside one answer,
 * 32 from the last part of an answer to the next question's rule.
 * ────────────────────────────────────────────────────────────────────────── */
body.fc-ds .fc-kb-faq__list {
	max-width: 640px;
	margin: 0 0 var(--sp-24);
	padding-left: var(--sp-24);
	list-style: disc;
}

body.fc-ds .fc-kb-faq__list:last-child {
	margin-bottom: var(--sp-32);
}

body.fc-ds .fc-kb-faq__list > li + li {
	margin-top: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * RESPONSIVE
 * The design ships desktop only. Container queries against `page`, at the theme's
 * own breakpoints — see THE SHELL in layout.css.
 *
 * The tables are deliberately not in here: they scroll, which is what the design
 * does and the only honest answer for a seven-column comparison. Everything else
 * in this file is already fluid.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 820px) {
	/*
	 * The Ask-us row stacks. Below this the button's fifth of the row is narrower than the
	 * button, so the grid would either overflow or squeeze the label.
	 */
	body.fc-ds .fc-ask {
		grid-template-columns: 1fr;
		gap: var(--sp-24);
	}
}