/* ==========================================================================
   Showroom detail

   A local SEO landing page first and a brand page second. Someone arriving
   from "furniture store corinth ms" — on a phone, possibly in a car — has to
   see where it is, whether it is open, and how to reach a person without
   scrolling. Everything above the fold is sized and ordered for that.

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

   Motion: this component animates nothing of its own. The only transitions on
   the page are the shared button's, which theme.json's global stylesheet
   already stands down under prefers-reduced-motion.
   ========================================================================== */

/* WordPress gives every flow container's children a blockGap top margin. These
   containers are laid out here instead, so that second rhythm has to come off
   or it stacks on top of the spacing declared below. */
.tfs-showroom > *,
.tfs-showroom__hero > *,
.tfs-showroom__intro > *,
.tfs-showroom__fold > *,
.tfs-showroom__where > * {
	margin-block-start: 0;
}

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

/* --------------------------------------------------------------------------
   Hero — identity, address, status, actions, photograph
   -------------------------------------------------------------------------- */

.tfs-showroom__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.tfs-showroom__intro {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

@media (min-width: 782px) {
	.tfs-showroom__hero {
		/* Roughly 46/54 in the photograph's favour. Fractional units rather
		   than percentages so the column gap comes out of the track sizes
		   instead of overflowing them. */
		grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
		gap: var(--wp--preset--spacing--50);
	}
}

/* display-large (44px), not display-hero — this is an interior page and the
   60px hero size belongs to the homepage. */
.tfs-showroom-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-large);
	line-height: var(--wp--custom--line-height--display);
}

/* --------------------------------------------------------------------------
   Address and today
   -------------------------------------------------------------------------- */

.tfs-showroom-today {
	display: grid;
	gap: var(--wp--custom--step--8);
}

.tfs-showroom-today__address {
	display: grid;
	gap: var(--wp--custom--step--4);
	margin: 0;
	font-style: normal;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink);
}

/*
 * The status reuses the availability indicator's dot — filled for open, hollow
 * for closed — but not its 12px utility face. This is the one line on the page
 * a driver reads at arm's length, so it is set at sub and in sentence case. A
 * deliberate override of a shared component, kept here rather than in
 * availability.css because nothing else on the site wants it.
 */
.tfs-showroom-today__status {
	margin: var(--wp--custom--step--8) 0 0;
	font-size: var(--wp--preset--font-size--sub);
	text-transform: none;
	letter-spacing: 0;
	line-height: var(--wp--custom--line-height--tight);
}

.tfs-showroom-today__hours,
.tfs-showroom-today__raw {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   Call / text / directions
   -------------------------------------------------------------------------- */

.tfs-showroom-actions {
	display: grid;
	gap: var(--wp--custom--step--12);
}

/* Full-width stacked targets on a phone; a row once there is width for one.
   .tfs-btn already carries the WCAG minimum height. */
@media (min-width: 600px) {
	.tfs-showroom-actions {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Lead photograph
   -------------------------------------------------------------------------- */

.tfs-showroom-photo {
	margin: 0;
	min-width: 0;
}

.tfs-showroom-photo__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);
}

/* --------------------------------------------------------------------------
   Below the fold
   -------------------------------------------------------------------------- */

.tfs-showroom__fold {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

.tfs-showroom__copy {
	max-width: 62ch;
}

.tfs-showroom__copy > :first-child {
	margin-top: 0;
}

.tfs-showroom__copy > :last-child {
	margin-bottom: 0;
}

.tfs-showroom__where {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (min-width: 782px) {
	.tfs-showroom__where {
		grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
		gap: var(--wp--preset--spacing--50);
	}
}

.tfs-showroom-hours__heading,
.tfs-showroom-map__heading,
.tfs-showroom-gallery__heading,
.tfs-showroom-floor__heading,
.tfs-showroom-cross-link__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--display-small);
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 782px) {
	.tfs-showroom-gallery__heading,
	.tfs-showroom-floor__heading,
	.tfs-showroom-cross-link__heading {
		font-size: var(--wp--preset--font-size--display-medium);
	}
}

/* --------------------------------------------------------------------------
   Weekly hours
   -------------------------------------------------------------------------- */

/*
 * The day column is sized once, on the list, and every row borrows it through
 * subgrid. Sizing it per row — which is what a plain grid on .__row does —
 * gives each day its own column width, and seven times ragged is what the
 * table looks like. max-content across the whole list means the widest day
 * name sets the column and every time lines up under the last.
 *
 * Without subgrid the rows stack day over time, which is legible rather than
 * wrong; nothing here depends on the two-column form.
 */
.tfs-showroom-hours__list {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	margin: 0;
}

.tfs-showroom-hours__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--custom--step--12);
	border-top: var(--wp--custom--hairline);
}

.tfs-showroom-hours__row:last-child {
	border-bottom: var(--wp--custom--hairline);
}

.tfs-showroom-hours__day {
	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);
	/* Aligns the label's cap height with the value's, which sits on a taller
	   line box. */
	padding-top: var(--wp--custom--step--4);
}

.tfs-showroom-hours__time {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	font-variant-numeric: tabular-nums;
}

.tfs-showroom-hours__time--closed {
	color: var(--wp--preset--color--muted);
}

/* Today is the row a visitor is looking for. Weight it with ink and a rule
   rather than with colour — accent is for interactive elements only. */
.tfs-showroom-hours__row--today .tfs-showroom-hours__day,
.tfs-showroom-hours__row--today .tfs-showroom-hours__time {
	color: var(--wp--preset--color--ink);
}

.tfs-showroom-hours__row--today {
	border-top: var(--wp--custom--rule-strong);
}

.tfs-showroom-hours__raw {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */

.tfs-showroom-map__frame {
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	background-color: var(--wp--preset--color--placeholder);
}

.tfs-showroom-map__embed {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wp--custom--aspect--room);
	border: 0;
}

.tfs-showroom-map__address {
	display: grid;
	gap: var(--wp--custom--step--4);
	margin: 0;
	font-style: normal;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.tfs-showroom-map__directions {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
}

.tfs-showroom-map__directions-link {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent);
	/* A small target on a touch screen needs to be a real one without turning
	   the line into a button. */
	padding-block: var(--wp--custom--step--8);
}

.tfs-showroom-map__directions-link:hover {
	color: var(--wp--preset--color--accent-hover);
	border-bottom-color: var(--wp--preset--color--accent-hover);
	text-decoration: none;
}

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

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

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

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

.tfs-showroom-gallery__item {
	margin: 0;
	min-width: 0;
}

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

/* --------------------------------------------------------------------------
   On the floor
   -------------------------------------------------------------------------- */

.tfs-showroom-floor__more {
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* --------------------------------------------------------------------------
   The other showrooms
   -------------------------------------------------------------------------- */

.tfs-showroom-cross-link {
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline);
}

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

/* However many other showrooms there are, they share the row. auto-flow rather
   than a fixed column count so a third location needs no change here. */
@media (min-width: 782px) {
	.tfs-showroom-cross-link__list {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

.tfs-showroom-cross-link__item {
	display: grid;
	justify-items: start;
	/* A city, two address lines, and a link do not want 1320px. The same
	   measure the rest of the site caps prose at. */
	max-width: 62ch;
	gap: var(--wp--custom--step--8);
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--surface);
}

.tfs-showroom-cross-link__city {
	margin: 0;
	font-size: var(--wp--preset--font-size--sub);
	line-height: var(--wp--custom--line-height--tight);
}

.tfs-showroom-cross-link__address {
	display: grid;
	gap: var(--wp--custom--step--4);
	margin: 0;
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--muted);
}

.tfs-showroom-cross-link__link {
	margin-top: var(--wp--custom--step--4);
	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;
	border-bottom: 1px solid var(--wp--preset--color--accent);
	padding-block: var(--wp--custom--step--8);
}

.tfs-showroom-cross-link__link:hover {
	color: var(--wp--preset--color--accent-hover);
	border-bottom-color: var(--wp--preset--color--accent-hover);
	text-decoration: none;
}

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