/* ==========================================================================
   Collections — the single page and the index

   A collection is a family of pieces built together in Corinth, and this is
   the page where the factory-direct argument stops being a claim and becomes
   specific. So the story gets a section with real space around it rather than
   a caption above a grid, and the specification the family shares is stated
   once here instead of repeated on eight tiles.

   The design reference carries no collection page, so this is built from
   theme.json's own scale rather than converted from an export. No value in it
   is hardcoded and none of it needed a new token.

   THE LEFT EDGE, for the fifth time in this build. Core sets
   `margin-inline: auto !important` on every direct child of a constrained
   container, so a section capped at the reading measure is centred in it and
   the page ends up with two left edges. Every section here therefore fills the
   column and the measure is applied to the type inside it — the same answer
   the article body and the 404 both arrived at.
   ========================================================================== */

.tfs-collection,
.tfs-collection-archive {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

@media (min-width: 782px) {
	.tfs-collection,
	.tfs-collection-archive {
		gap: var(--wp--preset--spacing--70);
	}
}

/*
 * A constrained section on a grid container needs an explicit width. Core's
 * auto margins absorb free space on a grid item instead of letting it stretch,
 * so without this every section collapses to the width of its own contents and
 * the page comes out ragged. home.css and room.css both carry these two lines
 * for the same reason.
 */
.tfs-collection > *,
.tfs-collection-archive > * {
	width: 100%;
}

.tfs-collection > *,
.tfs-collection-archive > *,
.tfs-collection-hero > *,
.tfs-collection-story > *,
.tfs-collection-specs > *,
.tfs-collection-pieces > *,
.tfs-collection-routes > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Hero — photograph, then the name

   The heading sits beneath the picture, not over it: the room landing and Our
   Factory both make that call, and the front page is the one exception that
   earns an overlay with a measured gradient. A collection does not need one.
   -------------------------------------------------------------------------- */

.tfs-collection-hero {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.tfs-collection-hero__figure {
	margin: 0;
	min-width: 0;
}

.tfs-collection-hero__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--aspect--room);
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--placeholder);
}

.tfs-collection-hero__text {
	display: grid;
	gap: var(--wp--custom--step--12);
	/* A name and two short lines. None of it wants 1320px of measure. */
	max-width: 34ch;
}

/*
 * `saddle-text`, not `saddle`. CLAUDE.md reserves that colour for provenance
 * and collection tags, and this is the second of the two — but it is 12px
 * type, where the decorative value is 3.53:1 on ground and fails AA. The
 * darkened one is 4.61:1.
 */
.tfs-collection-hero__eyebrow {
	margin: 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--saddle-text);
}

/* display-large, the H1 size every interior page uses. The 60px step is the
   homepage's alone. */
.tfs-collection-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-large);
	line-height: var(--wp--custom--line-height--display);
}

/*
 * Body face, not display. It sits directly under the H1 and display type
 * floors at 28px, which would put it in an argument with the heading above —
 * the same correction the room landing's intro line takes.
 */
.tfs-collection-hero__count {
	margin: 0;
	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);
}

/* With no photograph the page opens on type alone, given a rule to sit under
   rather than a placeholder to fill the space a picture would have taken. */
.tfs-collection-hero--type-led {
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--rule-strong);
}

/* --------------------------------------------------------------------------
   The story

   The section the page exists for, so it gets the space a page of prose wants
   and the measure a reader needs.
   -------------------------------------------------------------------------- */

.tfs-collection-story {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

.tfs-collection-story__heading,
.tfs-collection-specs__heading,
.tfs-collection-pieces__heading,
.tfs-collection-routes__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-small);
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 782px) {
	.tfs-collection-story__heading,
	.tfs-collection-specs__heading,
	.tfs-collection-pieces__heading,
	.tfs-collection-routes__heading {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

/* The measure is on the prose, not on the section — a section capped here
   would be centred by core's auto margins and lose the page's left edge. */
.tfs-collection-story__body {
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

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

.tfs-collection-story__body > :first-child {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Shared specification

   Stated once for the family. Set like the Spec Ticket's rows — utility face,
   uppercase muted labels, mono values — because it is the same kind of
   information, without being the ticket itself: no border, no perforation.
   -------------------------------------------------------------------------- */

.tfs-collection-specs {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

.tfs-collection-specs__rows {
	display: grid;
	gap: var(--wp--custom--step--12) var(--wp--preset--spacing--40);
	margin: 0;
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--utility);
	line-height: 1.4;
}

@media (min-width: 600px) {
	.tfs-collection-specs__rows {
		grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	}
}

.tfs-collection-specs__label {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--muted);
}

.tfs-collection-specs__value {
	margin: 0;
	min-width: 0;
	font-family: var(--wp--preset--font-family--mono);
	/* The mono face does the aligning; utility tracking would fight it. */
	letter-spacing: normal;
	color: var(--wp--preset--color--ink);
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   The pieces
   -------------------------------------------------------------------------- */

.tfs-collection-pieces {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

/* The count is the heading's eyebrow, so it comes first in the source and
   sits above it. */
.tfs-collection-pieces__count {
	margin: 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);
}

.tfs-collection-pieces__items {
	margin-block-start: var(--wp--preset--spacing--20);
}

.tfs-collection-pieces__empty {
	margin: 0;
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--sub);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

.tfs-collection-pieces__empty-action,
.tfs-collection-index__empty-action {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Where to see it

   Availability as a proportion rather than a dot alone: a family is rarely
   wholly on one floor, and "four of five pieces" is the answer a dot would
   have to round away.
   -------------------------------------------------------------------------- */

.tfs-collection-routes {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

.tfs-collection-routes__floors {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.tfs-collection-routes__floors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tfs-collection-routes__floor {
	display: grid;
	gap: var(--wp--custom--step--8);
	justify-items: start;
	margin: 0;
	min-width: 0;
}

/*
 * The status lifts .tfs-avail's 12px utility face to `sub` in sentence case —
 * the same override showroom.css and the front page's showroom card both make,
 * and for the same reason: this is a line somebody reads at arm's length
 * rather than a spec label.
 */
.tfs-collection-routes__status {
	margin: 0;
	font-size: var(--wp--preset--font-size--sub);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
}

.tfs-collection-routes__phone {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--control--tap-target-minimum);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.tfs-collection-routes__phone:hover {
	color: var(--wp--preset--color--accent-hover);
}

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

.tfs-collection-routes__room {
	margin: 0;
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--hairline);
}

.tfs-collection-routes__room-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--control--tap-target-minimum);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.tfs-collection-routes__room-link:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

.tfs-collection-routes__room-link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* --------------------------------------------------------------------------
   The index

   Not the product tile: a collection has no price, no save state and no
   per-piece availability, so reusing that card would have left three
   components' worth of markup standing empty. The same call the room landing's
   category tile makes.
   -------------------------------------------------------------------------- */

.tfs-collection-archive__head {
	display: grid;
	gap: var(--wp--custom--step--16);
}

.tfs-collection-archive__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-large);
	line-height: var(--wp--custom--line-height--display);
}

.tfs-collection-archive__lede {
	margin: 0;
	max-width: var(--wp--custom--measure);
	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);
}

.tfs-collection-index__items {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.tfs-collection-index__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60);
	}
}

.tfs-collection-index__item {
	margin: 0;
	min-width: 0;
}

.tfs-collection-index__empty {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--sub);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

.tfs-collection-card {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.tfs-collection-card__media {
	min-width: 0;
}

.tfs-collection-card__image,
.tfs-collection-card__empty-media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--aspect--room);
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--placeholder);
}

.tfs-collection-card__body {
	display: grid;
	gap: var(--wp--custom--step--4);
	min-width: 0;
}

/*
 * The display face on an H2, which is exactly where CLAUDE.md puts it — and at
 * `display-small`, the 28px floor, so a grid of two does not weigh as much as
 * the page's own H1.
 */
.tfs-collection-card__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-small);
	letter-spacing: var(--wp--custom--tracking--display);
	line-height: var(--wp--custom--line-height--tight);
}

/* A name is not a link affordance, so it does not take link colour — the same
   call the product tile and the post card both make. */
.tfs-collection-card__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tfs-collection-card__link:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/* One tab stop per card. The card is positioned and the body is not, so this
   resolves against the card and covers the photograph too. */
.tfs-collection-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The ring goes round the whole card: what is focused should look like what
   activating it will open. */
.tfs-collection-card:has(.tfs-collection-card__link:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Where :has() is unsupported the name rings itself, so a keyboard is never
   left without an indicator. */
@supports not selector(:has(*)) {
	.tfs-collection-card__link:focus-visible {
		outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
		outline-offset: var(--wp--custom--focus--offset);
	}
}

.tfs-collection-card__count {
	margin: 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);
}

.tfs-collection-card__summary {
	margin-block-start: var(--wp--custom--step--8);
	margin-block-end: 0;
	max-width: var(--wp--custom--measure);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}