/* ==========================================================================
   How It's Built

   The page that makes "built in Corinth" concrete. Every competitor in the
   region resells the same catalogue SKUs as every other dealer; this page is
   the evidence that we sell from the factory itself, as Corinthian's outlet, so the photographs are the argument and the
   copy is the caption.

   It is assembled from patterns rather than fixed in the template — see
   patterns/factory-*.php — so the sections can be reordered, dropped, or
   repeated from the page editor. Nothing in this file assumes an order, and
   the rhythm between sections is set on the post content's children rather
   than on any one section, so a new pattern inherits it for free.

   THE MEASURE. Core's constrained layout sets `margin-inline: auto !important`
   on every direct child of the post content, so a block narrower than the
   column is centred in it and there is no overriding that without an
   `!important` of our own. Two blocks with different max-widths therefore have
   different left edges. Everything that reads as body copy is given the same
   `--wp--custom--measure` for exactly that reason: one width, one left edge,
   a single reading column with the photography running full width around it.
   The measure is in `rem` and not `ch` because `ch` resolves in the element's
   own font — 62ch on a 32px display heading is 300px wider than 62ch on a 17px
   paragraph, which is the ragged edge this rule exists to prevent.

   The design reference carries no factory page, so this file is built from
   theme.json's own scale rather than converted from an export. No value in it
   is hardcoded, and the one value that had no token — the reading measure —
   was added to theme.json rather than written here.
   ========================================================================== */

/*
 * The full-bleed hero is the one element on this site that leaves the content
 * width, and on a platform with classic scrollbars a 100vw-wide child of a
 * narrower document is 15px of horizontal scroll. Clipping the site wrapper
 * takes that away. `clip` and not `hidden` on purpose: clip creates no scroll
 * container, so nothing inside loses its scrollport — and this file is only
 * enqueued on this template, so no other page is touched.
 */
.wp-site-blocks {
	overflow-x: clip;
}

.tfs-factory {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

/*
 * The rhythm between sections, set once on whatever the editor has stacked
 * rather than on the sections themselves. Core's flow spacing is one preset
 * step; this page wants the room a photograph needs around it.
 */
.tfs-factory .wp-block-post-content > * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.tfs-factory .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

@media (min-width: 782px) {
	.tfs-factory .wp-block-post-content > * {
		margin-block-start: var(--wp--preset--spacing--70);
	}
}

/* --------------------------------------------------------------------------
   Reading copy

   Everything an editor types at the top level of the page — the hero's
   headline and its line, a section heading, a paragraph, a list — shares one
   measure so it shares one left edge. Section headings get more air above them
   than a paragraph does; a paragraph directly under a heading gets less,
   because it is that heading's first line rather than the next section.
   -------------------------------------------------------------------------- */

.tfs-factory .wp-block-post-content > h1,
.tfs-factory .wp-block-post-content > h2,
.tfs-factory .wp-block-post-content > h3,
.tfs-factory .wp-block-post-content > p,
.tfs-factory .wp-block-post-content > ul,
.tfs-factory .wp-block-post-content > ol,
.tfs-factory .wp-block-post-content > .tfs-factory-quote,
.tfs-factory .wp-block-post-content > .tfs-factory-outro {
	max-width: var(--wp--custom--measure);
}

.tfs-factory .wp-block-post-content > h2 {
	font-size: var(--wp--preset--font-size--display-small);
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 782px) {
	.tfs-factory .wp-block-post-content > h2 {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

.tfs-factory .wp-block-post-content > p,
.tfs-factory .wp-block-post-content > ul,
.tfs-factory .wp-block-post-content > ol {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.tfs-factory .wp-block-post-content > ul,
.tfs-factory .wp-block-post-content > ol {
	padding-inline-start: var(--wp--preset--spacing--30);
}

.tfs-factory .wp-block-post-content > h2 + p,
.tfs-factory .wp-block-post-content > h3 + p {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   Hero

   Full-bleed photograph with the headline beneath it, not over it. Same
   reasoning as the room landing and the front page: an overlay needs a scrim
   to hold AA contrast over whatever an editor uploads, and a scrim is a depth
   device on a site that has none.

   The image is left at its own aspect ratio. A full-bleed frame is the one
   place a fixed ratio does real damage — 3:2 across a 1920px window is a
   1280px-tall photograph nobody scrolls past — and the crop is a decision the
   editor is making anyway when they choose the picture.
   -------------------------------------------------------------------------- */

/*
 * Core gives an .alignfull child of a global-padding container enough negative
 * margin to clear that container's own padding. That is not the whole inset
 * here: theme.json also pads the body at the desktop gutter, and above the
 * content width there is centring slack on top of both. Measuring against the
 * viewport instead clears all three at once and needs to know none of them.
 */
.tfs-factory .tfs-factory-hero.alignfull {
	margin-inline: calc(50% - 50vw);
}

.tfs-factory-hero img {
	display: block;
	width: 100%;
	height: auto;
	/* A 2px radius on an edge that runs off the screen is a rounded corner
	   nobody can see, on three corners that are not there. */
	border-radius: 0;
	background-color: var(--wp--preset--color--placeholder);
}

/* The headline belongs to the photograph above it, not to the next section. */
.tfs-factory .wp-block-post-content > .tfs-factory-hero + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * display-large on a phone, display-hero from the tablet breakpoint up — the
 * same step-down the front page's hero makes, and for the same reason: 60px at
 * 360px costs three lines before the reader has seen a word of the story.
 */
.tfs-factory-hero__title {
	font-size: var(--wp--preset--font-size--display-large);
	line-height: 1.02;
}

@media (min-width: 782px) {
	.tfs-factory-hero__title {
		font-size: var(--wp--preset--font-size--display-hero);
	}
}

/* Body face, not display. Display type on this site floors at 28px, which
   would put this line in an argument with the H1 directly above it. */
.tfs-factory .wp-block-post-content > .tfs-factory-hero__standfirst {
	margin-block-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sub);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   Alternating process sections

   Two core columns, so an editor can drag blocks between them. The image
   column is given the larger share by flex-grow rather than by a width, which
   would put a `flex-basis` inline style in the pattern markup.

   Below 782px core stacks them in source order, which is why the two patterns
   are separate files rather than one with a modifier: image-left reads
   picture-then-copy on a phone and image-right reads copy-then-picture. Both
   are honest reading orders, and neither reorders anything visually away from
   where a keyboard finds it.
   -------------------------------------------------------------------------- */

.tfs-factory-section__media {
	min-width: 0;
}

@media (min-width: 782px) {
	.tfs-factory-section__media {
		flex-grow: 1.25;
	}
}

.tfs-factory-section__media figure {
	margin: 0;
}

.tfs-factory-section__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--placeholder);
}

.tfs-factory-section__text {
	min-width: 0;
}

.tfs-factory-section__text > * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.tfs-factory-section__text > :first-child {
	margin-block-start: 0;
}

.tfs-factory-section__eyebrow {
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-factory-section__heading {
	font-size: var(--wp--preset--font-size--display-small);
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 782px) {
	.tfs-factory-section__heading {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

/* A column is already about a measure wide; this is the cap for the case where
   it is not — a section standing alone on a wide screen. */
.tfs-factory-section__copy {
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

/* --------------------------------------------------------------------------
   Pull quote

   theme.json already dresses core/quote in the display face at
   display-medium, so this only gives it room and a rule to sit against. It is
   deliberately not stepped down to `lead` on a phone: 24px is below the 28px
   floor display type is held to, and the face is what makes a pull quote read
   as one.
   -------------------------------------------------------------------------- */

.tfs-factory-quote {
	padding-block: var(--wp--preset--spacing--30);
	border-block: var(--wp--custom--hairline);
	text-align: center;
}

.tfs-factory-quote p {
	margin-block: 0;
}

.tfs-factory-quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--utility);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   Stat band

   Four facts on a surface panel between rules, which is the same weight the
   front page gives its factory strip. Two up at 360px rather than four
   stacked: a stat is a glance, and a column of four is a list.

   The band is not capped at the reading measure. It is not reading — it is
   four things you take in at once, and at a measure's width the four would
   stack into a column.
   -------------------------------------------------------------------------- */

.tfs-factory-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--surface);
	border-block: var(--wp--custom--rule-strong);
}

@media (min-width: 782px) {
	.tfs-factory-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}

/* Core's flow layout puts a preset step above every child; the grid's own gap
   is the spacing here, so that second rhythm has to come off. */
.tfs-factory-stats > .tfs-factory-stat {
	margin-block-start: 0;
	min-width: 0;
}

/*
 * The body face on a display step. The face is reserved for H1 and H2 and a
 * stat figure is neither, but 17px is not a statistic — the slugs name a step
 * in the scale, not a typeface, and the room landing's intro heading already
 * sits on one this way.
 */
.tfs-factory-stat__figure {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lead);
	font-variant-numeric: tabular-nums;
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--ink);
}

@media (min-width: 782px) {
	.tfs-factory-stat__figure {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

.tfs-factory-stat__label {
	margin: var(--wp--custom--step--8) 0 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   The way out — into the listing, and to the two showrooms
   -------------------------------------------------------------------------- */

.tfs-factory-outro {
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

.tfs-factory-outro > * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.tfs-factory-outro > :first-child {
	margin-block-start: 0;
}

.tfs-factory-outro__heading {
	font-size: var(--wp--preset--font-size--display-small);
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 782px) {
	.tfs-factory-outro__heading {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

.tfs-factory-outro__copy {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}