/* ==========================================================================
   Location pages — single-fox_location.php, archive-fox_location.php,
   parts/locations/*.php.
   Builds on the v2.2 kit in style.css (docs/COMPONENTS.md): tones, page head,
   section head, band, cards, buttons, badges. Only what the kit does not
   cover lives here; every class is prefixed .fox-loc so nothing leaks.
   Look (MOCKUP.md 3 "Lounge page"): 16:9 photo above a dark head band, then
   light #FCFCFC sections (Visit, About, Gallery, Events, Specials, Reviews),
   a dark split band for private events, a light "other lounges" section.
   Colour comes from --tone-* only; no hex, no legacy --color-* names.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Anchors: the homepage lounge cards link to #gallery, #events, #reviews
   (the event page to #fox-loc-visit, the coming-soon head to #fox-loc-updates). The
   header is sticky; html { scroll-padding-top } in style.css already leaves
   room for it, so these sections need no scroll-margin of their own.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Head band extras: today's hours, status, address (inside .fox-pagehead)
   -------------------------------------------------------------------------- */

.fox-loc-today { display: grid; gap: 8px; justify-items: start; margin-top: 16px; }
.fox-loc-today p { margin: 0; }
.fox-loc-today__line {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
	font-size: var(--fs-body); line-height: 1.5; color: var(--tone-text);
}
.fox-loc-today__line svg { width: 18px; height: 18px; flex: none; color: var(--tone-icon); }
.fox-loc-today__label { font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tone-accent); }
.fox-loc-today__tz { color: var(--tone-muted); }
/* "Open now · until 2 AM" / "Closed now · opens at 4 PM" (fox_loc_tpl_hours_now). */
.fox-loc-today__status-line { font-weight: 600; color: var(--tone-heading); }
.fox-loc-today__line.has-status { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; }
.fox-loc-today__line.has-status .fox-loc-today__hours { grid-column: 2; }
.fox-loc-today__tz::before { content: "· "; }
/* The one sample marker under a centred section head: close to the head, clear of the content. */
.fox-loc .fox-head + .fox-sample-note { margin: -12px 0 24px; }
.fox-loc-announce { padding-top: var(--section-pad); }
.fox-loc-announce .fox-notice { margin: 0; }

/* Coming soon: the head aside holds only the two buttons; the shared 460px cap
   wrapped each label onto two lines at 1440. */
@media (min-width: 1000px) {
	.fox-loc--coming-soon .fox-pagehead--split .fox-pagehead__aside { max-width: none; }
	.fox-loc--coming-soon .fox-pagehead--split .fox-pagehead__aside .fox-btn { white-space: nowrap; }
}

/* Phones: "On this page" jumps under the head band (single-fox_location.php). */
.fox-loc-jump { display: none; }
@media (max-width: 699px) {
	.fox-loc-jump { display: block; border-bottom: 1px solid var(--tone-border); background: var(--tone-bg); }
	.fox-loc-jump ul { display: flex; justify-content: space-between; gap: 4px; margin: 0; padding: 0; list-style: none; }
	.fox-loc-jump li { margin: 0; }
	.fox-loc-jump a {
		display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px;
		font: 500 var(--fs-small)/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
		color: var(--tone-heading); text-decoration: none;
	}
	.fox-loc-jump a:hover { text-decoration: underline; text-underline-offset: .25em; }
}

/* --------------------------------------------------------------------------
   2. Visit panel (address, phone, hours, notes, map)
   -------------------------------------------------------------------------- */

.fox-loc-visit__panel { padding: 20px; }
@media (min-width: 1000px) { .fox-loc-visit__panel { padding: 32px; } }
/* Only the hours to show: the panel fits them rather than leaving half empty. */
.fox-loc-visit__panel.is-hours-only { max-width: 600px; margin-inline: auto; }
.fox-loc-visit__panel.is-hours-only > .fox-loc-visit__cols.fox-loc-visit__cols { grid-template-columns: minmax(0, 1fr); } /* beats the is-thin-where column rules below */
.fox-loc-visit__panel.is-hours-only .fox-loc-hours { max-width: none; }
.fox-loc-hours__note + .fox-loc-hours__note { margin-top: 6px; }

.fox-loc-visit__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 760px) { .fox-loc-visit__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fox-loc-visit__cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; } }
/* Only a city stored: the where-column is thin, so the hours take the room (F10). */
@media (min-width: 760px) { .fox-loc-visit__cols.is-thin-where { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
@media (min-width: 1100px) { .fox-loc-visit__cols.is-thin-where { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); } }
/* No parking / accessibility notes: two columns, no empty third track. */
@media (min-width: 1100px) { .fox-loc-visit__cols.is-thin-where.has-no-notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.fox-loc-visit__col { min-width: 0; }
.fox-loc-visit__col + .fox-loc-visit__col { padding-top: 28px; border-top: 1px solid var(--tone-border); }
@media (min-width: 760px) { .fox-loc-visit__col + .fox-loc-visit__col { padding-top: 0; border-top: 0; } }

.fox-loc-visit__label {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 12px;
	font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
	color: var(--tone-heading);
	text-align: left;
}
.fox-loc-visit__label svg { width: 18px; height: 18px; flex: none; color: var(--tone-icon); }
.fox-loc-visit__where .fox-loc-visit__label:not(:first-child) { margin-top: 24px; }
.fox-loc-visit__notes .fox-loc-visit__label:not(:first-child) { margin-top: 20px; }
.fox-loc-visit__address { display: grid; font-style: normal; font-size: var(--fs-h4); font-weight: 500; line-height: 1.35; color: var(--tone-heading); }
.fox-loc-visit__dir { margin-top: 16px; margin-right: 8px; }
.fox-loc-visit__next { display: grid; justify-items: start; gap: 8px; margin-top: 16px; }
.fox-loc-visit__next .fox-fine { margin: 0; color: var(--tone-text); }
.fox-loc-visit__value { margin: 0; font-size: var(--fs-body); color: var(--tone-heading); }
.fox-loc-visit__value a { color: var(--tone-link); text-decoration: underline; text-decoration-color: var(--tone-border-strong); text-underline-offset: .2em; }
.fox-loc-visit__value a:hover { color: var(--tone-link-hover); text-decoration-color: currentColor; }
.fox-loc-visit__text p { margin: 0 0 .6em; font-size: var(--fs-small); line-height: 1.65; color: var(--tone-text); }
.fox-loc-visit__pending p { max-width: 60ch; margin: 0; color: var(--tone-text); }
.fox-loc-visit__pending .fox-actions { margin-top: 20px; }

.fox-loc-hours { width: 100%; max-width: 520px; margin: 0; border: 0; border-collapse: collapse; font-size: var(--fs-body); background: none; }
.fox-loc-hours caption { caption-side: top; padding: 0; border: 0; }
.fox-loc-hours tr, .fox-loc-hours tbody { border: 0; background: none; }
.fox-loc-hours__tz { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tone-muted); white-space: nowrap; }
/* On a phone "HOURS (Arizona time)" is wider than the column: the caption
   wraps and the zone drops to its own line rather than running past the edge. */
@media (max-width: 480px) {
	.fox-loc-hours caption { display: block; }
	.fox-loc-hours__tz { display: block; margin-left: 26px; white-space: normal; }
}
.fox-loc-hours th, .fox-loc-hours td {
	padding: 9px 0;
	border: 0;
	border-bottom: 1px solid var(--tone-border);
	background: none;
	text-align: left;
	vertical-align: baseline;
}
.fox-loc-hours th { font-weight: 400; color: var(--tone-text); padding-right: 16px; white-space: nowrap; }
.fox-loc-hours td { color: var(--tone-heading); text-align: right; white-space: nowrap; }
@media (max-width: 400px) {
	/* nowrap times must still fit a 320px panel: fixed columns, smaller
	   gutter; the day name and its TODAY pill may wrap, the times never do. */
	.fox-loc-hours { table-layout: fixed; }
	.fox-loc-hours th { width: 46%; padding-right: 8px; white-space: normal; }
}
.fox-loc-hours tr.is-today th, .fox-loc-hours tr.is-today td { font-weight: 700; color: var(--tone-heading); }
/* The happy hour sits under the opening hours, with air between the two tables
   so the second caption reads as a new heading and not as another row. */
.fox-loc-hours--happy { margin-top: var(--space-5); }
.fox-loc-hours--happy caption { margin-bottom: 2px; }
/* A day the offer is not on: said, not left blank, and quieter than a time. */
.fox-loc-hours__off { color: var(--tone-muted); }
.fox-loc-hours--happy tr.is-today .fox-loc-hours__off { font-weight: 400; }
.fox-loc-hours__today {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border: 1px solid var(--tone-chip-border);
	border-radius: var(--radius-pill);
	background: var(--tone-chip-fill);
	/* 12px, not 11: below 12 Google counts text as illegible on a phone, and
	   this was the only text on the site under that bar (mobile audit,
	   2026-10-20). Uppercase at .08em tracking, so 12px reads smaller than it
	   measures and the row is unchanged in height. */
	font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
	vertical-align: 1px;
}
.fox-loc-hours__note { margin-top: 12px; color: var(--tone-muted); }
@media (max-width: 400px) { .fox-loc-hours__today { margin-left: 4px; padding-inline: 6px; letter-spacing: .06em; } }

/* With a map the panel is two columns from 1000px: the details and the opening
   times on the left, the map beside them on the right (MOCKUP / client example
   2026-10-15). Below that it stacks and the map sits under the times. */
@media (min-width: 1000px) {
	.fox-loc-visit__panel.has-map {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}
	.fox-loc-visit__panel.has-map > .fox-loc-visit__cols.fox-loc-visit__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.fox-loc-visit__panel.has-map > .fox-loc-visit__mapwrap { align-self: stretch; display: grid; grid-template-rows: 1fr auto; gap: 12px; }
	.fox-loc-visit__panel.has-map .fox-loc-visit__map {
		margin-top: 0;
		aspect-ratio: auto;
		max-height: none;
		align-self: stretch;
		min-height: 420px;
		height: 100%;
	}
}

.fox-loc-visit__mapwrap { display: grid; gap: 12px; }
/* The rating under the map: a link, because a number nobody can check is not
   worth printing. */
.fox-loc-rating {
	display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 10px 14px;
	border: 1px solid var(--tone-border); border-radius: var(--radius-img);
	color: var(--tone-heading); text-decoration: none; font-size: var(--fs-small);
}
.fox-loc-rating:hover, .fox-loc-rating:focus-visible { border-color: var(--tone-border-strong); }
.fox-loc-rating__count { color: var(--tone-text); }

.fox-loc-visit__map {
	margin-top: 28px;
	aspect-ratio: 16 / 9;
	max-height: 440px;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--tone-border);
	border-radius: var(--radius-img);
	background: var(--tone-media);
}
.fox-loc-visit__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   3. About + highlights
   -------------------------------------------------------------------------- */

.fox-loc-about__grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fox-loc-about__grid:not(.has-room) { justify-items: center; }
.fox-loc-about__grid:not(.has-room) > * { width: 100%; max-width: var(--reading-max); }
@media (min-width: 900px) {
	.fox-loc-about__grid.has-room { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr); gap: clamp(32px, 5vw, 80px); }
}
.fox-loc-about__prose { color: var(--tone-text); }
.fox-loc-about__room { padding: 24px; }
.fox-loc-about__room > h3 { margin: 0 0 16px; font-size: var(--fs-h4); }

.fox-loc-amenities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	gap: 10px 20px;
	margin: 0; padding: 0; list-style: none;
}
.fox-loc-amenities li { position: relative; padding-left: 18px; font-size: var(--fs-small); line-height: 1.45; color: var(--tone-heading); }
.fox-loc-amenities li::before {
	/* small round dot: the list ornament (no gold on light) */
	content: "";
	position: absolute; left: 0; top: .55em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--tone-icon);
}

.fox-loc-highlights { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--tone-border); }
@media (min-width: 760px) { .fox-loc-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; } }
.fox-loc-highlight h3 { margin: 0 0 10px; }
.fox-loc-highlight__text p { margin: 0 0 .8em; color: var(--tone-text); }

/* --------------------------------------------------------------------------
   4. Gallery: rounded 4:3 tiles, existing lightbox ([data-fox-lightbox])
   -------------------------------------------------------------------------- */

.fox-loc-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0; padding: 0; list-style: none;
}
@media (min-width: 700px) {
	.fox-loc-gallery__grid { gap: 16px; }
	.fox-loc-gallery__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Four tiles stay a 2 x 2 block until a single row of four is wide enough to read. */
@media (min-width: 900px) { .fox-loc-gallery__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fox-loc-gallery__item { min-width: 0; margin: 0; }
.fox-loc-gallery__figure { margin: 0; }
.fox-loc-gallery__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-img);
	background: var(--tone-media);
}
.fox-loc-gallery__link > img,
.fox-loc-gallery__link > .fox-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fox-loc-gallery__link img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-premium); }
.fox-loc-gallery__link::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(20, 20, 20, .16);
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-premium);
	pointer-events: none;
}
/* Hover = keyboard focus (D5); the focus ring itself is the site's. */
.fox-loc-gallery__link:hover::after,
.fox-loc-gallery__link:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.fox-loc-gallery__link:hover img,
	.fox-loc-gallery__link:focus-visible img { transform: scale(1.03); }
}
.fox-loc-gallery__play {
	position: absolute; z-index: 2; left: 50%; top: 50%;
	display: grid; place-items: center;
	width: 56px; height: 56px;
	transform: translate(-50%, -50%);
	background: rgba(20, 20, 20, .66);
	border: 1px solid var(--c-warm-white);
	border-radius: 50%;
	color: var(--c-warm-white);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fox-loc-gallery__play svg { width: 20px; height: 20px; margin-left: 3px; }
.fox-loc-gallery__caption { margin-top: 8px; font-size: var(--fs-small); line-height: 1.5; color: var(--tone-text); }

/* --------------------------------------------------------------------------
   5. Events / specials: shared cards in .fox-grid--3up. Empty states and
   sample notes come from the kit.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Reviews (honest: stars and counts only from live data)
   -------------------------------------------------------------------------- */

.fox-loc-reviews__none { margin: 0; color: var(--tone-text); }
.fox-loc-reviews__body { display: grid; gap: 16px; justify-items: start; }
.fox-loc-reviews__attr { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--tone-text); }
.fox-loc-reviews__attr svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--tone-icon); }
.fox-loc-reviews__excerpts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; margin: 8px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .fox-loc-reviews__excerpts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fox-loc-reviews__excerpts li { padding: 20px; border-radius: var(--radius-img); background: var(--tone-surface); }
/* The Google reviews: up to five, so they wrap to two rows on a wide screen
   instead of being squeezed into three columns. Each carries its own stars
   above the quote, since they are not all the same rating. */
@media (min-width: 900px) { .fox-loc-reviews__google { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.fox-loc-reviews__google .fox-loc-reviews__stars { display: block; margin-bottom: 10px; }
.fox-loc-reviews__google blockquote { margin: 0; }
.fox-loc-reviews__google blockquote p { margin: 0; text-wrap: pretty; }
.fox-loc-reviews__google li > .fox-fine { margin: 10px 0 0; color: var(--tone-muted); }
.fox-loc-reviews__excerpts blockquote { margin: 0 0 12px; font-size: var(--fs-body); line-height: 1.55; color: var(--tone-heading); }
.fox-loc-reviews__excerpts blockquote p { margin: 0; }
.fox-loc-reviews__excerpts .fox-fine { margin: 0; color: var(--tone-text); }

/* --------------------------------------------------------------------------
   7. Private events: the dark split band (parts/band.php, class
   .fox-loc-private). Without a photo the band runs as one text column.
   -------------------------------------------------------------------------- */

.fox-loc-private .fox-band__inner:not(:has(.fox-band__media)) { grid-template-columns: minmax(0, 1fr); }
.fox-loc-private__copy p { margin: 0 0 .7em; max-width: 60ch; color: var(--tone-text); }
.fox-loc-private .fox-band__body > p:has(.fox-badge) { margin-bottom: 12px; }
.fox-loc-private .fox-actions { margin-top: 16px; }

/* --------------------------------------------------------------------------
   8. Instagram highlights: 4 x 2 instead of the homepage's 8 x 2
   -------------------------------------------------------------------------- */

.fox-insta-grid.fox-loc-insta__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 559px) { .fox-insta-grid.fox-loc-insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fox-loc-insta .fox-insta-tile__overlay svg { width: 26px; height: 26px; }
.fox-loc-insta div.fox-insta-tile { cursor: default; }

/* --------------------------------------------------------------------------
   9. Coming Spring 2028: centred signup, the only email field on the page
   -------------------------------------------------------------------------- */

.fox-loc-soon__desc { max-width: var(--reading-max); margin: 0 auto 24px; }
.fox-loc-soon__announce { max-width: var(--reading-max); margin: 0 auto 24px; }
.fox-loc-soon__form { max-width: 560px; margin: 0 auto; padding: 24px; }
@media (min-width: 700px) { .fox-loc-soon__form { padding: 32px; } }
.fox-loc-soon__form > h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
.fox-loc-soon__form > .fox-fine { margin: 0 0 20px; color: var(--tone-text); }
.fox-loc-soon__list {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
	max-width: 860px; margin: 40px auto 0; padding: 28px 0 0;
	border-top: 1px solid var(--tone-border);
	list-style: none; text-align: center;
}
@media (min-width: 800px) { .fox-loc-soon__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.fox-loc-soon__list li { line-height: 1.5; color: var(--tone-text); }
.fox-loc-hiring__copy { max-width: 60ch; margin-inline: auto; }
.fox-loc-hiring__copy p { margin: 0 0 .7em; color: var(--tone-text); }

/* --------------------------------------------------------------------------
   10. Archive: /locations/ — the home grid pattern (.fox-grid--2up cards)
   -------------------------------------------------------------------------- */

.fox-loc-archive { padding-top: clamp(24px, 3vw, 40px); }

/* Reduced motion: the global block in style.css zeroes transitions; nothing
   here animates on its own. */

/* Tablets (700–899px): three cards in the 2-up grid left one alone on its own
   row (events, specials, other lounges). Exactly three go three across. */
@media (min-width: 700px) and (max-width: 899px) {
	.fox-loc .fox-grid--3up:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-4); }
}