/*
 * CL location pages — /locations/{slug}/ and /inventory/{slug}/
 * ---------------------------------------------------------------------------
 * 2026-08-03. Owner report: "the individual location pages are broken or
 * unstyled completely go look."
 *
 * He was right and the reason was simple: no stylesheet for these pages had
 * ever been written. The two templates emit a full set of cl-loc-* class names
 * and NOTHING in the theme matched a single one of them. What held the page
 * together was a handful of inline style="" attributes added while the
 * templates were being built, which covered the review cards and nothing else,
 * so the page rendered as a bare stack of browser-default headings with legacy
 * .button styling landing wherever it happened to land. The listing cards
 * looked right only because they come from the shared archive card part, which
 * has its own sheet.
 *
 * So this file is the missing sheet, not a restyle. The inline attributes came
 * out of both templates at the same time this landed, so there is now one place
 * that describes how a showroom page looks, and it is this one.
 *
 * The palette is the site's, not a new one: #332C2B headings, #54606e body,
 * #e6ecf3 hairlines, #f5f8fc panels, and the header's own
 * 0 6px 22px -12px rgba(13,27,42,.16) shadow. Brand comes in through --cl-red
 * for fills and --cl-red-onlight for anything a customer has to READ, which is
 * the token that steps a too-pale brand far enough off white to be legible.
 * Buttons copy the homepage .mgc-hp-btn geometry (uppercase, 13px, 700, 1.5px
 * tracking, 4px radius) so a visitor moving from the homepage to a showroom
 * page is looking at the same site.
 */

/* ── Page frame ───────────────────────────────────────────────────────────── */
/*
 * The h1 used to start hard against the header with nothing above it. These
 * pages sit inside the legacy .container, so the width is already handled and
 * all that was missing was room to breathe and a reading measure.
 */
/*
 * The brand pages (/inventory/make/{x}/) ride along on every shared rule here.
 * They were written from location-inventory.php and reuse its hero, intro and
 * empty-state markup, so they had exactly the same nothing holding them up.
 * Wherever a rule below is about the page chrome rather than a showroom, the
 * .cl-brand-inventory wrapper is on it too.
 */
.page-content.cl-loc-landing,
.page-content.cl-loc-inventory,
.page-content.cl-brand-inventory {
	padding: 34px 0 64px;
	color: #54606e;
	font-size: 16px;
	line-height: 1.6;
}

/*
 * 2026-08-03. The 34px above was the room the page needed when it opened on a
 * breadcrumb line sitting under the header. All three pages now open on the hero
 * band instead, which ends on white and carries 82px of its own padding, so that
 * top gap became a second helping of the same space. The h1 rule that used to
 * live here went out with it: there is no longer an h1 inside the content
 * wrapper on any of these pages, the hero holds it.
 */
.page-content.cl-loc-landing.cl-loc-has-hero,
.page-content.cl-loc-inventory.cl-loc-has-hero,
.page-content.cl-brand-inventory.cl-loc-has-hero {
	padding-top: 8px;
}

.cl-loc-landing h2,
.cl-loc-inventory h2,
.cl-brand-inventory h2 {
	margin: 34px 0 12px;
	color: #332C2B;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
}

/* The first heading inside a column should not push the column off its
   neighbour's top edge. */
.cl-loc-info > h2:first-child,
.cl-loc-contact > h2:first-child {
	margin-top: 0;
}

.cl-loc-landing p,
.cl-loc-inventory p,
.cl-brand-inventory p {
	margin: 0 0 12px;
}

/* ── Page hero ────────────────────────────────────────────────────────────── */
/*
 * 2026-08-03 (owner: "Remove the breadcrumbs at the top of the page and style it
 * based on existing pages"). The breadcrumb rules that used to sit here are gone
 * along with the markup. Nothing else on the site carries breadcrumbs, which is
 * the short version of why they came out rather than being restyled.
 *
 * What replaced them is the opening every other interior page uses: a full width
 * band with a pill eyebrow, a title in two weights and a subline, with the
 * showroom photo in a card beside it. This is a rebuild of that design under its
 * own class names, not a reuse of it, and the reason is written out in full at
 * the top of cl-templates/parts/loc-hero.php: the light skin half of the
 * original lives in an inline block gated on is_page(), and these pages are
 * virtual, so is_page() is false on them and they can never match it. The values
 * below are taken from that block so the two render the same to a visitor.
 *
 * The band is included before the .container wrapper opens, so it is already
 * full width and needs no negative margin to break out of anything.
 */
.cl-loc-hero {
	position: relative;
	padding: 74px 24px 82px;
	background: linear-gradient(180deg, #eef3f9 0%, #f7fafc 55%, #ffffff 100%);
	overflow: hidden;
}

/* Two very soft washes, brand in the top right and ink in the bottom left, which
   is what keeps the band from reading as a flat grey rectangle. Both sit far
   below the contrast threshold, so the text over them is unaffected. */
.cl-loc-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(55% 55% at 88% 12%, rgba(var(--cl-red-rgb, 221, 0, 0), .07), transparent 70%),
		radial-gradient(45% 50% at 6% 92%, rgba(13, 27, 42, .06), transparent 70%);
}

.cl-loc-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 52px;
	align-items: center;
	text-align: left;
}

/*
 * With no photo saved the copy would otherwise sit in a 1.05fr track with an
 * empty .95fr beside it, which reads as an image that failed to load. Centred on
 * a narrower measure instead, which is the same shape the interior heroes take
 * on a narrow screen. The brand pages always land here: there is no per brand
 * photo anywhere in the editor.
 */
.cl-loc-hero--solo .cl-loc-hero__inner {
	grid-template-columns: 1fr;
	max-width: 860px;
	text-align: center;
	justify-items: center;
}

.cl-loc-hero__eyebrow {
	display: inline-block;
	margin-bottom: 22px;
	padding: 9px 15px;
	border-radius: 999px;
	background: rgba(var(--cl-red-rgb, 221, 0, 0), .08);
	color: var(--cl-red-onlight, var(--cl-red, #DD0000));
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}

.cl-loc-hero__title {
	margin: 0 0 18px;
	color: #332C2B;
	font-weight: 700;
	letter-spacing: -.015em;
}

.cl-loc-hero__title-sm,
.cl-loc-hero__title-lg {
	display: block;
	text-transform: none;
}

.cl-loc-hero__title-sm {
	margin-bottom: 4px;
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 600;
	line-height: 1.2;
}

.cl-loc-hero__title-lg {
	font-size: clamp(34px, 5vw, 58px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.04;
}

.cl-loc-hero__sub {
	margin: 0 0 30px;
	max-width: 520px;
	color: #54606e;
	font-size: clamp(16px, 1.45vw, 19px);
	font-weight: 400;
	line-height: 1.62;
}

.cl-loc-hero--solo .cl-loc-hero__sub {
	margin-left: auto;
	margin-right: auto;
}

/* Nothing follows the button inside the copy column, so its own bottom margin
   would only add to the band's padding. */
.cl-loc-hero__sub:last-child {
	margin-bottom: 0;
}

/* Geometry copied from the homepage .mgc-hp-btn, so the first button a visitor
   meets on this page is the same object they were clicking on the homepage. */
.cl-loc-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: 4px;
	background: var(--cl-red, #DD0000);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: filter .15s ease;
}

.cl-loc-hero__btn:hover,
.cl-loc-hero__btn:focus {
	color: #ffffff;
	text-decoration: none;
	filter: brightness(.92);
}

/* Owner, on the same button shape in the header: "when I click it it gets a blue
   outline around the red button can you make that outline black". */
.cl-loc-hero__btn:focus-visible {
	outline: 2px solid #332C2B;
	outline-offset: 2px;
}

/*
 * The photo card. A fixed aspect with the image cropped to fill it, because a
 * dealer uploads whatever their phone took, and a four by three next to a
 * panorama makes the band change height from one showroom to the next.
 */
.cl-loc-hero__media {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #f5f8fc;
	box-shadow: 0 6px 22px -12px rgba(13, 27, 42, .16);
}

.cl-loc-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 880px) {
	.cl-loc-hero {
		padding: 46px 20px 50px;
	}

	.cl-loc-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
		justify-items: center;
	}

	.cl-loc-hero__eyebrow {
		margin-bottom: 16px;
	}

	.cl-loc-hero__sub {
		margin-left: auto;
		margin-right: auto;
	}

	/* Full width so the target is a thumb wide rather than a word wide, which is
	   the same call the action buttons further down the page take. */
	.cl-loc-hero__btn {
		width: 100%;
	}

	.cl-loc-hero__media {
		width: 100%;
	}
}

/* ── Intro + about ────────────────────────────────────────────────────────── */
/*
 * Capped at a reading measure rather than the full container. On a wide screen
 * an uncapped intro runs to 140 characters a line, which nobody reads.
 */
.cl-loc-intro {
	max-width: 74ch;
	color: #54606e;
	font-size: 17px;
	line-height: 1.6;
}

/*
 * 2026-08-03. On the two inventory pages the sentence that used to open this
 * paragraph is now the hero subline, so what is left is the pair of secondary
 * links on their own. At 17px a bare link row reads as a second heading, so it
 * steps down to the size of the small print it now is.
 */
.cl-loc-inventory.cl-loc-has-hero .cl-loc-intro,
.cl-brand-inventory.cl-loc-has-hero .cl-loc-intro {
	margin-bottom: 20px;
	font-size: 14px;
	letter-spacing: .2px;
}

.cl-loc-inventory .cl-loc-intro a,
.cl-brand-inventory .cl-loc-intro a {
	color: var(--cl-red-onlight, var(--cl-red, #DD0000));
	font-weight: 600;
	text-decoration: none;
}

.cl-loc-inventory .cl-loc-intro a:hover,
.cl-brand-inventory .cl-loc-intro a:hover {
	text-decoration: underline;
}

.cl-loc-about {
	max-width: 78ch;
	margin: 18px 0 0;
	color: #54606e;
}

.cl-loc-about p {
	margin: 0 0 14px;
}

/* ── The two-column body ──────────────────────────────────────────────────── */
/*
 * Grid rather than the flex the template used inline. Flex with
 * flex:1 1 320px let the two columns settle at whatever ratio the content
 * happened to produce, which is how the info column ended up narrow with a
 * wide empty gap beside it. A named two-track grid gives the same collapse
 * behaviour at a breakpoint that is chosen rather than emergent.
 */
.cl-loc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-top: 28px;
}

/* One column when the media side has nothing in it. A dealer with no showroom
   photo and no map embed saved should get a full-width info column, not a
   half-width one next to a hole. */
.cl-loc-grid:not(:has(.cl-loc-media)) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}

.cl-loc-address {
	margin: 0 0 16px;
	color: #332C2B;
	font-size: 17px;
	line-height: 1.55;
	font-weight: 500;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/*
 * The templates use the generic .button class, which on these pages was
 * picking up a legacy rule that centred it in its own block and let a two-word
 * label break mid-phone-number. Everything is restated here rather than
 * patched, because the legacy rule is not ours to reason about and a partial
 * override leaves the odd bits of it still in play.
 *
 * Two levels. Outline is the default, because a showroom page carries a lot of
 * actions at once (call, text, directions, service, parts) and five filled
 * brand buttons in a column is noise. Filled is reserved for the one action
 * that moves a visitor forward: the phone number, and the links into that
 * showroom's inventory.
 */
.cl-loc-landing .button,
.cl-loc-inventory .button,
.cl-brand-inventory .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	float: none;
	margin: 0;
	padding: 13px 24px;
	border: 2px solid #dbe3ec;
	border-radius: 4px;
	background: #ffffff;
	color: #332C2B;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cl-loc-landing .button:hover,
.cl-loc-inventory .button:hover,
.cl-brand-inventory .button:hover {
	border-color: var(--cl-red-onlight, var(--cl-red, #DD0000));
	color: var(--cl-red-onlight, var(--cl-red, #DD0000));
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -14px rgba(13, 27, 42, .5);
}

.cl-loc-landing .button:focus-visible,
.cl-loc-inventory .button:focus-visible,
.cl-brand-inventory .button:focus-visible {
	outline: 2px solid #332C2B;
	outline-offset: 2px;
}

/* The phone number fills wherever it appears, including the "no units at this
   showroom right now" panel, where calling is the only thing left to do. */
.cl-loc-landing .button-primary,
.cl-loc-inventory .button-primary,
.cl-brand-inventory .button-primary,
.cl-loc-ctas .button[href^="tel:"],
.cl-loc-empty .button[href^="tel:"] {
	border-color: transparent;
	background: var(--cl-red, #DD0000);
	color: #ffffff;
}

.cl-loc-landing .button-primary:hover,
.cl-loc-inventory .button-primary:hover,
.cl-brand-inventory .button-primary:hover,
.cl-loc-ctas .button[href^="tel:"]:hover,
.cl-loc-empty .button[href^="tel:"]:hover {
	border-color: transparent;
	background: var(--cl-red-dark, var(--cl-red, #DD0000));
	color: #ffffff;
	box-shadow: 0 8px 24px -12px rgba(13, 27, 42, .45);
}

/* A phone number is the one label allowed to wrap on a narrow phone rather
   than overflow its button. */
.cl-loc-ctas .button[href^="tel:"],
.cl-loc-empty .button[href^="tel:"] {
	white-space: normal;
}

/* Action rows. The template put buttons inside <p>, so the row is the
   paragraph. */
.cl-loc-ctas,
.cl-loc-info p:has(> .button),
.cl-loc-top-units p:has(> .button),
.cl-loc-empty p:has(> .button),
.cl-loc-reviews-section p:has(> .button) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}

/* ── Hours ────────────────────────────────────────────────────────────────── */
/*
 * office-hours.css already draws the rows; what was missing was a container
 * putting them on the page as a block of information rather than loose text.
 */
.cl-loc-info .cl-location-hours {
	margin: 0 0 8px;
	padding: 6px 18px;
	border: 1px solid #e6ecf3;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 6px 22px -12px rgba(13, 27, 42, .16);
}

.cl-loc-info .mgc-office-hours__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.cl-loc-info .mgc-office-hours__table tr + tr th,
.cl-loc-info .mgc-office-hours__table tr + tr td {
	border-top: 1px solid #eef2f7;
}

.cl-loc-info .mgc-office-hours__day {
	padding: 10px 0;
	color: #54606e;
	font-weight: 500;
	text-align: left;
}

.cl-loc-info .mgc-office-hours__hours {
	padding: 10px 0;
	color: #332C2B;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

/* ── Media column: photo + map ────────────────────────────────────────────── */
.cl-loc-media > p {
	margin: 0 0 18px;
}

.cl-loc-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 10px 30px -18px rgba(13, 27, 42, .35);
}

.cl-loc-map {
	overflow: hidden;
	border: 1px solid #e6ecf3;
	border-radius: 12px;
	background: #f5f8fc;
	box-shadow: 0 6px 22px -12px rgba(13, 27, 42, .16);
	line-height: 0;
}

/*
 * The saved embed is a raw Google iframe with width/height attributes on it,
 * so the size has to be taken back here or it renders at its authored 600x450
 * inside whatever space the column has.
 */
.cl-loc-map iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
}

/* ── Reviews ──────────────────────────────────────────────────────────────── */
.cl-loc-reviews-section {
	margin-top: 40px;
}

.cl-loc-reviews-headline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	color: #332C2B;
	font-size: 18px;
}

.cl-loc-reviews-headline strong {
	color: #332C2B;
	font-size: 20px;
}

.cl-loc-reviews-headline span:last-child {
	color: #54606e;
	font-size: 15px;
}

.cl-loc-reviews-stars,
.cl-loc-review-stars {
	color: #f5a623;
	letter-spacing: 2px;
}

.cl-loc-reviews-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 16px;
}

.cl-loc-review-card {
	padding: 18px;
	border: 1px solid #e6ecf3;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 10px 24px -18px rgba(13, 27, 42, .2);
}

.cl-loc-review-card blockquote {
	margin: 10px 0;
	padding: 0;
	border: 0;
	color: #3c4856;
	font-size: 15px;
	font-style: normal;
	line-height: 1.5;
}

.cl-loc-review-author {
	color: #332C2B;
	font-weight: 600;
}

.cl-loc-review-src {
	margin-top: 2px;
	color: #7a8694;
	font-size: 12px;
}

/* ── In stock now ─────────────────────────────────────────────────────────── */
.cl-loc-top-units {
	margin-top: 40px;
}

.cl-loc-top-units .cl-inventory--location {
	margin-bottom: 18px;
}

/* ── Empty state (location inventory with no units) ───────────────────────── */
.cl-loc-empty {
	margin: 24px 0 8px;
	padding: 24px 26px;
	border: 1px solid #e6ecf3;
	border-radius: 12px;
	background: #f5f8fc;
}

.cl-loc-empty p {
	margin: 0 0 14px;
	color: #54606e;
}

.cl-loc-empty strong {
	display: block;
	margin-bottom: 4px;
	color: #332C2B;
	font-size: 17px;
}

.cl-loc-empty p:last-child {
	margin-bottom: 0;
}

/* ── Contact ──────────────────────────────────────────────────────────────── */
.cl-loc-contact {
	max-width: 820px;
	margin-top: 48px;
	padding: 30px 32px 34px;
	border: 1px solid #e6ecf3;
	border-radius: 14px;
	background: #f5f8fc;
}

.cl-loc-contact > h2:first-child {
	margin-top: 0;
}

.cl-loc-contact-intro {
	margin: 6px 0 20px;
	color: #3c4856;
}

.cl-loc-contact-form input[type="text"],
.cl-loc-contact-form input[type="email"],
.cl-loc-contact-form input[type="tel"],
.cl-loc-contact-form select,
.cl-loc-contact-form textarea {
	background: #ffffff;
}

/* ── Tablet ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.cl-loc-reviews-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.cl-loc-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}
}

@media (max-width: 700px) {
	.page-content.cl-loc-landing,
	.page-content.cl-loc-inventory,
	.page-content.cl-brand-inventory {
		padding: 24px 0 48px;
	}

	.cl-loc-reviews-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.cl-loc-contact {
		padding: 24px 20px 26px;
		border-radius: 12px;
	}

	/*
	 * Full width actions on a phone. Side by side they were coming out at
	 * three different widths on one row, and a "Get Directions" tap target
	 * squeezed to a third of the screen is the one a thumb misses.
	 */
	.cl-loc-ctas .button,
	.cl-loc-info p:has(> .button) .button,
	.cl-loc-top-units p:has(> .button) .button,
	.cl-loc-empty p:has(> .button) .button {
		width: 100%;
	}

	.cl-loc-map iframe {
		height: 280px;
	}
}