/* ==========================================================================
   Room landing

   An editorial page sitting above the product listing. Someone arriving at
   /living-room/ is oriented — what we make for the room, what the categories
   are, which collections to look at — and then routed into the filtered grid.
   It is a browsing entry point, not a results page, so it holds no product
   tiles of its own.

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

   Motion: the only thing that moves is the category tile's photograph on
   hover, the same 150ms transform the product tile already uses. theme.json's
   global stylesheet stands every transition down under
   prefers-reduced-motion.
   ========================================================================== */

/*
 * Core sets `margin-inline: auto !important` on every constrained child. On a
 * grid item an auto margin absorbs the free space instead of the item
 * stretching into it, so each section collapsed to the width of its own
 * contents and the page came out ragged. The margins cannot be overridden, so
 * the width is given instead: with a definite `width: 100%` there is nothing
 * left for them to eat, core's own `max-width` caps the section at the content
 * size, and the auto margins go back to centring the remainder.
 */
.tfs-room > * {
	width: 100%;
}

/* WordPress gives every flow container's children a blockGap top margin. The
   sections below are spaced here instead, so that second rhythm has to come
   off or it stacks on top of the spacing declared in this file. */
.tfs-room > *,
.tfs-room-hero > *,
.tfs-room-categories > *,
.tfs-room-collections > *,
.tfs-room-listing > * {
	margin-block-start: 0;
}

.tfs-room {
	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-room {
		gap: var(--wp--preset--spacing--70);
	}
}

/* --------------------------------------------------------------------------
   Hero — photograph, room name, intro line
   -------------------------------------------------------------------------- */

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

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

.tfs-room-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-room-hero__text {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	/* The room name and one line under it. Neither wants 1320px of measure. */
	max-width: 34ch;
}

/* display-large (44px), not display-hero — the 60px step belongs to the
   homepage. An interior page opens one size down. */
.tfs-room-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-large);
	line-height: var(--wp--custom--line-height--display);
}

/*
 * The intro line is body face, not display. It is a paragraph rather than a
 * heading (see the render callback), and display type on this site floors at
 * 28px, which would put it in an argument with the H1 directly above it.
 */
.tfs-room-hero__standfirst {
	margin: 0;
	max-width: 42ch;
	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);
}

@media (min-width: 782px) {
	.tfs-room-hero__standfirst {
		font-size: var(--wp--preset--font-size--lead);
	}
}

/* With no photograph the hero is type alone, so it gets room to breathe rather
   than a placeholder to fill the space a photograph would have taken. */
.tfs-room-hero--type-led {
	padding-block: var(--wp--preset--spacing--40) 0;
	border-top: var(--wp--custom--rule-strong);
}

/* The way to the full index, under the three this room features. Same utility
   treatment the listing's own route links take. */
.tfs-room-collections__all {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.tfs-room-collections__all-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-room-collections__all-link:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

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

/* --------------------------------------------------------------------------
   Intro copy
   -------------------------------------------------------------------------- */

.tfs-room-intro {
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.tfs-room-intro > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.tfs-room-intro > :last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.tfs-room-categories__heading,
.tfs-room-collections__heading {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--display-small);
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 782px) {
	.tfs-room-categories__heading,
	.tfs-room-collections__heading {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

/* --------------------------------------------------------------------------
   Category tiles — the page's main navigation device
   -------------------------------------------------------------------------- */

.tfs-room-categories__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.tfs-room-categories__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	}
}

@media (min-width: 1024px) {
	.tfs-room-categories__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

.tfs-room-categories__item {
	margin: 0;
	min-width: 0;
}

/*
 * The name is the only link, which keeps one tab stop per tile and leaves the
 * heading a real heading. The whole tile is still clickable: the link's
 * ::after covers it. Nothing else inside is interactive, so there is nothing
 * for the overlay to swallow.
 */
.tfs-room-category {
	position: relative;
	display: grid;
	gap: var(--wp--custom--step--12);
	color: var(--wp--preset--color--ink);
}

.tfs-room-category__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--wp--custom--aspect--tile);
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius);
}

.tfs-room-category__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--wp--preset--color--placeholder);
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

/* Nothing in this category has been photographed yet. The frame holds the
   grid's rhythm; it does not pretend to be a picture. */
.tfs-room-category__media-empty {
	position: absolute;
	inset: 0;
	display: block;
	background-color: var(--wp--preset--color--placeholder);
}

.tfs-room-category:hover .tfs-room-category__image,
.tfs-room-category:focus-within .tfs-room-category__image {
	transform: scale(var(--wp--custom--motion--tile-scale));
}

/* theme.json's H3 is already the body face at `sub`; only the margin and the
   link colour need saying. */
.tfs-room-category__name {
	margin: 0;
}

.tfs-room-category__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tfs-room-category__link:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

/* Focus indicators are exempt from the no-shadow rule: outline, never shadow. */
.tfs-room-category__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* What makes the whole tile clickable. It sits above the media so the
   photograph is part of the target, and below nothing, because nothing else
   in the tile takes a click. */
.tfs-room-category__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tfs-room-category__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);
}

/* --------------------------------------------------------------------------
   Featured collections
   -------------------------------------------------------------------------- */

.tfs-room-collections {
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

.tfs-room-collections__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* However many were picked — the field allows at most three — they share the
   row. auto-flow rather than a fixed count, so one and three both look
   deliberate. */
@media (min-width: 782px) {
	.tfs-room-collections__items {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

.tfs-room-collections__item {
	margin: 0;
	min-width: 0;
}

.tfs-room-collection {
	position: relative;
	display: grid;
	gap: var(--wp--custom--step--12);
	/* A name and two lines of story do not want the full column on a phone. */
	max-width: 62ch;
	color: var(--wp--preset--color--ink);
}

.tfs-room-collection__figure {
	margin: 0;
	min-width: 0;
}

.tfs-room-collection__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-room-collection__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--tight);
}

.tfs-room-collection__link {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tfs-room-collection__link:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

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

/* Same stretched target as the category tile, for the same reason. */
.tfs-room-collection__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tfs-room-collection__summary {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   Into the listing
   -------------------------------------------------------------------------- */

.tfs-room-listing {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

/* Full width on a phone, where a centred pill next to nothing reads as an
   afterthought; sized to its text once there is a row to sit in. */
.tfs-room-listing__link {
	width: 100%;
}

@media (min-width: 600px) {
	.tfs-room-listing__link {
		width: auto;
	}
}

.tfs-room-listing__count {
	margin: 0;
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}