/* =========================================================
   FOOTER (чайлд-тема) — копия футера Cart Launch
   ========================================================= */
.gc-footer {
	background-color: #000;
	color: #ffffff;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	/* Brand-red accent line to separate the footer from preceding dark sections */
	border-top: 3px solid var(--cl-red);
}

.gc-footer a {
	color: #ffffff;
	text-decoration: none;
	transition: color .2s ease;
}

.gc-footer a:hover {
	color: var(--cl-red);
}

/*
 * 2026-08-03 (owner: "reduce the height of the footer and the padding between
 * the two sections ... its too tall with too much padding right now on
 * desktop"). Measured on a 1440 desktop before this pass: the footer stood at
 * 1074px on a 900px viewport, so it was taller than the screen it sat under.
 * 104px of that was nothing at all — the 40px foot of this section plus the
 * 64px head of the band below it, stacking into a dead band between the last
 * Quick Link and the Visit Us pill. That gap is the one the owner could see.
 * The bottom padding drops hardest here because the band's own top padding
 * already opens the space underneath it; two sections do not each need to pay
 * full price for the same seam.
 */
.gc-footer__inner {
	/* 2026-08-11 (owner: "way too much padding... more like 50-100px on each
	   side"): the 1240px page-width cap centered the footer and left 100-300px
	   of empty margin on big screens, which read as padding. No cap now — the
	   footer runs the full window minus a fixed 72px gutter each side, so the
	   edge gap is 72px at EVERY desktop width. <=900px steps to 36px,
	   <=600px to 20px (below). */
	max-width: none;
	margin: 0 auto;
	padding: 44px 72px 26px;
	display: grid;
	grid-template-columns: .8fr .7fr 2.2fr;
	gap: 40px;
}

/* --- Колонка About --- */
.gc-footer__logo {
	width: 140px;
	height: auto;
	margin-bottom: 20px;
}

.gc-footer__about-text {
	font-size: 16px !important;
	line-height: 22px;
	color: #cfcfcf;
	max-width: 280px;
}

/* --- Заголовки --- */
.gc-footer__title {
	color: #ffffff;
	font-size: 30px;
	margin: 0 0 14px;
}

.gc-footer__location-title {
	color: #ffffff;
	font-size: 18px;
	margin: 0 0 14px;
}

/* --- Разделитель --- */
.gc-footer__divider {
	display: block;
	width: 40px;
	height: 3px;
	background-color: var(--cl-red);
	margin: 0 0 20px;
}

/* --- Списки ссылок --- */
.gc-footer__menu {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.gc-footer__menu li {
	margin-bottom: 12px;
}

.gc-footer__menu--contact a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #cfcfcf;
	font-size: 18px;
}

.gc-footer__menu--contact i {
	color: var(--cl-red);
	margin-top: 4px;
}

/* --- Соцсети --- */
.gc-footer__follow {
	font-weight: 700 !important;
	margin: 0 0 14px !important;
}

.gc-footer__socials {
	display: flex;
	gap: 12px;
}

.gc-footer__socials a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--cl-red);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 17px;
}

.gc-footer__socials a:hover {
	background-color: #ffffff;
	color: #000;
}

/* --- Локации --- */
.gc-footer__locations {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

/* --- Кнопка Contact Us --- */
.gc-footer__btn {
	position: relative;
	z-index: 2;
	display: inline-block;
	background-color: var(--cl-red);
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	padding: 10px 22px;
	border-radius: 4px;
	margin-bottom: 18px;
}

.gc-footer__btn:hover {
	background-color: #ffffff;
	color: #000 !important;
}

/* --- Карты --- */
.gc-footer__map iframe {
	width: 100%;
	max-height: 220px;
	border: 0;
	border-radius: 6px;
	display: block;
}

/* --- Single location: info on the left, map on the right --- */
/*
 * 2026-08-04, third pass (owner: "if a line was drawn across from side to
 * side, it would fit in with the rest of the footer elements. Right now,
 * it's too low"). The map used to start level with the location title and
 * run 340px DOWN from there, so its midpoint sat well below the midpoint of
 * the columns beside it. The column now stretches to the footer row's full
 * height (flex), the location grid fills it, and the map — a fixed-height
 * block — floats vertically CENTERED in that grid while the info rows stay
 * pinned to the top under the heading. A line across the middle of the
 * footer now crosses the middle of the map.
 */
.gc-footer:not(.gc-footer--band) .gc-footer__col--locations {
	display: flex;
	flex-direction: column;
	/* Positioning context for the absolutely-centered map (third pass). */
	position: relative;
}
/* The inline tap-fix functions.php prints sets .gc-footer__location
   {position:relative}, which would hijack the map's containing block and
   re-center it 34px too low (against the grid instead of the column box).
   Desktop only — the tap-fix's mobile stacking stays untouched, and the
   buttons carry their own position:relative for z-index (2026-08-04). */
@media (min-width: 901px) {
	.gc-footer:not(.gc-footer--band) .gc-footer__location:only-child { position: static !important; }
}
.gc-footer:not(.gc-footer--band) .gc-footer__col--locations > .gc-footer__locations {
	flex: 1 1 auto;
}
.gc-footer__locations:has(.gc-footer__location:only-child) {
	grid-template-columns: 1fr;
}
.gc-footer__location:only-child {
	display: grid;
	/* Same split as the reference build (factorydirectgolfcart.com): info
	   ~.9fr, map 1.4fr running to the column's right edge (2026-08-04). */
	grid-template-columns: minmax(200px, .9fr) 1.4fr;
	/*
	 * 2026-08-04, second pass (owner: "there is a huge gap between our
	 * location and garner nc and the map still isnt centered horizontally").
	 * The first pass centered the info block vertically against the tall map,
	 * which opened a spacer ABOVE the location title — that was the gap. The
	 * info rows (1–3) now hug the top again, and ONE bottom spacer row
	 * absorbs the grid's 340px floor instead, so the rows stay content-sized
	 * (no stretched gaps) while the map still gets its full height. The map
	 * is also capped and centered HORIZONTALLY in its column (see below), so
	 * it sits balanced in the space beside the info instead of pinned to the
	 * footer's right edge.
	 */
	grid-template-rows: auto auto auto minmax(0, 1fr);
	min-height: 230px;
	height: 100%; /* fill the stretched column so the map can center in it (third pass) */
	column-gap: 34px;
	align-items: start;
}
.gc-footer__location:only-child > .gc-footer__location-title { grid-column: 1; grid-row: 1; }
.gc-footer__location:only-child > .gc-footer__menu { grid-column: 1; grid-row: 2; }
.gc-footer__location:only-child > .gc-footer__btn { grid-column: 1; grid-row: 3; align-self: start; }
/*
 * 2026-08-04 (owner: "the map on the single location isnt centered with the
 * rest of the stuff"). The iframe's 230px minimum used to SIZE the spanned
 * tracks: the three rows beside it (title + address/phone + button ≈ 200px
 * of content) were stretched apart to absorb the difference and the map
 * still ran ~30px past the Contact Us button. The map wrapper is now empty
 * as far as track sizing is concerned (the iframe is absolutely positioned
 * inside it), so the rows size to the dealer's actual text, the wrapper
 * stretches over exactly that height, and the iframe fills it — map top on
 * the location title, map bottom on the button, whatever the content height
 * comes to. min-height on the WRAPPER keeps a short-content footer from
 * producing a letterbox map.
 */
/*
 * 2026-08-04, final pass (owner: "if a line was drawn across from side to
 * side, it would fit in with the rest of the footer elements. Right now it's
 * too low" + "look at factorydirectgolfcart.com — this is a site where it is
 * correct"). Measured off that reference: map 230px tall, running to the
 * footer's right edge, midpoint on the COLUMN box's midpoint. Centering
 * inside the location grid could never guarantee that (the grid starts below
 * the "Our Location" heading, so its middle sits lower than the row's), so
 * the map now positions absolutely against the column box itself: top 50%,
 * translated up half its own height — dead centre of the footer row at any
 * content height. Its width is column 2's share of the .9fr/1.4fr split the
 * info grid still uses, so it occupies exactly the cell it used to.
 */
.gc-footer__location:only-child > .gc-footer__map {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	height: 230px;
	width: calc((100% - 34px) * 1.4 / 2.3); /* col2 of [.9fr 34px 1.4fr] */
	margin: 0;
	min-height: 0;
}
.gc-footer__location:only-child > .gc-footer__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
}
@media (max-width: 900px) {
	.gc-footer__location:only-child {
		grid-template-columns: 1fr;
		/* Stacked layout: no spacer rows, no floor — and the explicit row
		   numbers below go back to auto so DOM order decides (title, info,
		   button, map). Without this the auto-placed map would land in the
		   old spacer row ABOVE the title (2026-08-04, same pass as above). */
		grid-template-rows: none;
		min-height: 0;
	}
	.gc-footer__location:only-child > .gc-footer__location-title,
	.gc-footer__location:only-child > .gc-footer__menu,
	.gc-footer__location:only-child > .gc-footer__btn { grid-row: auto; }
	.gc-footer__location:only-child > .gc-footer__map {
		/* Stacked layout: back to normal flow under the button — undo the
		   desktop absolute centering (final pass). */
		position: static;
		transform: none;
		width: auto;
		height: auto;
		grid-column: 1;
		grid-row: auto;
		margin-top: 14px;
		min-height: 0;
	}
	/* Stacked layout: back to normal flow — an absolute iframe would collapse
	   the now-empty wrapper to 0 height (2026-08-04, same pass as above). */
	.gc-footer__location:only-child > .gc-footer__map iframe {
		position: static;
		height: auto;
		min-height: 200px;
	}
}

/* --- Нижняя полоса --- */
.gc-footer__bottom {
	background-color: #332C2B;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.gc-footer__bottom-inner {
	max-width: none;
	margin: 0 auto;
	/* Fixed 72px gutter (2026-08-11 owner ask); stepped down below 900/600px. */
	padding: 20px 72px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.gc-footer__copyright {
	font-size: 13px;
	color: #cfcfcf;
}

.gc-footer__bottom-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	font-size: 13px;
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
	.gc-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
	.gc-footer__col--locations {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.gc-footer__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.gc-footer__divider {
		margin-left: auto;
		margin-right: auto;
	}
	.gc-footer__about-text {
		margin-left: auto;
		margin-right: auto;
	}
	.gc-footer__socials {
		justify-content: center;
	}
	.gc-footer__locations {
		grid-template-columns: 1fr;
	}
	.gc-footer__menu--contact a {
		justify-content: center;
	}
	.gc-footer__bottom-inner {
		flex-direction: column;
		text-align: center;
	}
}
/* Single-location footer: keep Contact Us button sized to its text (not stretched).
   margin-bottom 0 (2026-08-04): the button's trailing 18px was the last thing
   propping its grid row open past the button itself, leaving the map hanging
   below it — the stacked phone layout spaces the map with its own margin-top. */
.gc-footer__location:only-child > .gc-footer__btn{ justify-self:start; align-self:start; width:auto; max-width:max-content; margin-bottom:0; }

/* Center the Contact Us button in the footer on mobile. */
@media (max-width: 600px) {
	.gc-footer__location:only-child > .gc-footer__btn,
	.gc-footer__location > .gc-footer__btn {
		justify-self: center;
		align-self: center;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   MULTI-LOCATION SHOWROOM BAND

   1 location: the classic column + big map above stays untouched.
   2-6 locations: the locations column is skipped and this full-width band
   renders between the footer columns and the bottom bar.

   2026-08-03 (owner: "in the footer for the locations it's so bland right
   now, how can you make it stand out, should you add a map to it, put it in
   a container, it's just so bland and not well designed. I like the
   cleanness but dealers like it to look cool as fuck").

   What changed and why. The band was hairline-ruled columns on white, sat
   under white columns, above a white bottom bar. Every part of it was
   correct and none of it was doing any work: three white things stacked on
   white read as one long white page and the locations, which are the whole
   reason a shopper scrolls to the footer, were the quietest thing on it.

   Now the showrooms are real cards in their own strip. The strip is a soft
   grey-blue, the cards on it are white and lifted, so the section separates
   from the footer above it by depth rather than by going dark.

   2026-08-03, second pass (owner: "I dont want it black I still want it
   light themed but with a similar design on the boxes"). The first build did
   this with a near-black strip and dark cards. It stood out, which was the
   ask, but it stood out by breaking the light theme the rest of the site is
   built on, and the footer read white, black, white. The cards were the part
   worth keeping, so the layout, the pin chip, the street texture, the corner
   numeral, the card lift and the rules all survive exactly as drawn and only
   the palette flipped. Separation now comes from the strip tint, the white
   card sitting on it, and the shadow under that card, which is how the rest
   of the site already separates things (see the header shadow) and holds up
   next to the light header instead of arguing with it.

   On maps: not embedded here, deliberately. Six Google iframes ran the
   footer to about 1,600px on desktop and 3,800px on a phone, they each cost
   a third-party request on every single page of the site, and a dealer who
   has not pasted an embed gets a frame of nothing. Each card instead carries
   a faint street-grid texture and a pin chip, which is drawn in CSS, costs
   nothing, and reads as a map at a glance, with Get Directions doing the
   real job. The single-location footer above keeps its one real map, where
   one embed on one card is worth the weight.

   Colors are EXPLICIT: the base .gc-footer rules further up still say
   black/white from the legacy skin, and the live light skin is an inline
   override in functions.php that only recolors the classic selectors, so
   these classes must not lean on either. That inline override sets
   .gc-footer__title with !important, which is why the band title answers it
   in kind.
   ═════════════════════════════════════════════════════════════════════════ */

.gc-footer--band .gc-footer__inner {
	/* Band mode top row: brand/About · Quick Links · Connect With Us.
	   2026-08-10 (owner: "I want it to be 3 evenly spaced columns"): the old
	   minmax(0,400px) auto auto + space-between made the GAPS equal but the
	   columns unequal (measured 400/191/276 at 1440). Three true 1fr tracks
	   now — identical column widths, uniform gap. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(48px, 6vw, 100px);
	/*
	 * 2026-08-04 (owner: "remove the spacing in the footer between the two
	 * sections when there are 2+ locations"). The 2026-08-03 pass took the
	 * seam from 104px to 64px of padding; measured in the sandbox it still
	 * stood at ~80px on screen once the columns' own trailing margins joined
	 * in. Band mode only: this section's foot drops to 8px and the band's
	 * head (below) to 14px — the gradient means there is no edge to protect,
	 * so the two sections can sit close enough to read as one surface.
	 * The single-location footer keeps the base 26px foot: its next-door
	 * neighbour is the bottom bar, which needs the room.
	 */
	padding-bottom: 8px;
}
.gc-footer__col--connect .gc-footer__socials { margin: 4px 0 26px; }
/* 2026-08-10 (owner picked "centered blocks" from the two-look comparison):
   with three equal 1fr tracks, a narrow content block anchored to its track's
   left edge leaves all its spare room on ONE side, so the void before
   Connect With Us read wider than the gap after About. Centering the two
   narrower blocks inside their tracks makes the whitespace symmetric; text
   inside each block stays left-aligned. Desktop only — the <=1024px stacks
   place these columns on their own rows where centering would look adrift. */
@media (min-width: 1025px) {
	.gc-footer--band .gc-footer__col--links,
	.gc-footer--band .gc-footer__col--connect { justify-self: center; }
}
.gc-footer__connect-btn { align-self: flex-start; }
@media (max-width: 1024px) {
	/* Tablet: About spans the top, Links + Connect share the second row. */
	.gc-footer--band .gc-footer__inner { grid-template-columns: 1fr 1fr; }
	.gc-footer--band .gc-footer__col--about { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.gc-footer--band .gc-footer__inner { grid-template-columns: 1fr; }
	.gc-footer--band .gc-footer__col--about { grid-column: auto; }
	.gc-footer__col--connect .gc-footer__socials { justify-content: center; }
	.gc-footer__connect-btn { align-self: center; }
}

/* ── The gradient ──────────────────────────────────────────────────────── */
/*
 * 2026-08-03, third pass (owner: "How can I make it blend into the other part
 * of the footer better? Instead of it being solding white to this cool
 * gradient?" then "Can the whole thing be a cool gradient?").
 *
 * The second pass gave the showroom strip its own flat tint with a hairline
 * above it. That was still a panel: it separated correctly but it announced
 * where it started, so the footer read as a white part and then a grey part
 * bolted under it. A gradient down the WHOLE footer removes the seam entirely.
 * There is no edge to notice because there is no edge: the footer simply gets
 * heavier toward the bottom of the page, the showrooms sit in the heavy end,
 * and the white cards separate from it more the further down they are.
 *
 * It goes on .gc-footer rather than on the band so it spans the columns, the
 * showroom strip and the bottom bar as one surface, which is the whole point.
 * Painted as background-IMAGE deliberately: functions.php prints an inline
 * light-skin override that sets background-color on .gc-footer with
 * !important, and an image layers over the color rather than competing with
 * it, so the two coexist and the flat white stays as the fallback underneath
 * for any browser that cannot resolve the color-mix in the last stop.
 *
 * The last stop carries a 5% wash of the dealer's brand, so the bottom of the
 * page picks up their color instead of everybody's footer fading to the same
 * grey. 5% because it has to survive a yellow as well as a navy: high enough
 * to read as intent on a large area, low enough that no brand turns it into a
 * colored panel. The stops are weighted so the tint arrives BEFORE the cards
 * do, which is what keeps a white card reading as a card rather than
 * dissolving into a background that is still almost white where it sits.
 */
.gc-footer {
	background-image: linear-gradient(
		180deg,
		#ffffff 0%,
		#fafcfe 22%,
		#f1f5fa 52%,
		#eaf0f7 78%,
		color-mix(in srgb, var(--cl-red, #DD0000) 5%, #e7eef6) 100%
	);
}
.gc-footer__band {
	position: relative;
	/* No fill and no rules. The band is now just a position on the gradient,
	   not a panel drawn on top of it. */
	background: transparent;
	overflow: hidden;
}
/*
 * The band used to carry a radial wash of the dealer's brand color in its top
 * left corner, to keep the flat strip from being a flat strip. The gradient
 * above does that job now for the whole footer and carries the brand in its
 * last stop, so the radial is gone rather than left to fight it: a soft circle
 * of brand laid over a vertical brand gradient reads as a blotch, which is
 * exactly the kind of seam this pass exists to remove. One idea, not two.
 */

/* The bottom bar has to stop being white or it clips the bottom off the
   gradient, which is the darkest and most brand-tinted part of it. The inline
   light-skin override in functions.php paints it #ffffff with !important, so
   this answers in kind. The divider above the copyright stays, because that
   row is a different KIND of content and still wants separating, but it drops
   to a faint ink so it reads as a hairline on the gradient instead of the hard
   edge the panel used to have. */
.gc-footer__bottom {
	background-color: transparent !important;
	border-top: 1px solid rgba(13, 27, 42, .07) !important;
}
/* See the note on .gc-footer__inner. The 64px head is the other half of the
   dead band between the two sections, and the 72px foot was the single largest
   piece of padding anywhere in the footer, sitting between the last card and a
   bottom bar that already carries its own 20px. Together with the section
   above, the seam between the two halves goes from 104px to 64px. */
.gc-footer__band-inner {
	position: relative;
	max-width: none;
	margin: 0 auto;
	/* Top 38 -> 14: the other half of the 2026-08-04 seam removal above.
	   Sides: fixed 72px gutter (2026-08-11 owner ask), stepped down on small
	   screens by the media blocks below. */
	padding: 14px 72px 42px;
}

/* ── Header: eyebrow / title / derived subline ─────────────────────────── */
/* 2026-08-11 (owner picked centered from the comparison): with the footer
   full-width, the left-anchored header sat stranded far from the cards'
   centerline; centered matches every other section header on the site.
   (Mobile already centered this - the 1248 media rule is now redundant but
   harmless.) */
.gc-footer__band-head { margin: 0 0 22px; text-align: center; }
.gc-footer__band-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 10px;
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	background: var(--cl-red, #DD0000);
}
.gc-footer__band-title.gc-footer__title {
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	/* #332C2B is the site heading color, and the !important answers the inline
	   light-skin override in functions.php, which paints every
	   .gc-footer__title the same way. Same value now, still stated, because
	   the two are set in different files and only one of them is this one. */
	color: #332C2B !important;
	margin: 0 0 8px;
}
.gc-footer__band-sub {
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 15.5px;
	color: #54606e;
	margin: 0;
}

/* ── The cards ─────────────────────────────────────────────────────────── */
.gc-footer__ledger {
	display: grid;
	gap: 18px;
}
.gc-footer__ledger--n2 { grid-template-columns: repeat(2, 1fr); }
.gc-footer__ledger--n3,
.gc-footer__ledger--n5,
.gc-footer__ledger--n6 { grid-template-columns: repeat(3, 1fr); }
.gc-footer__ledger--n4 { grid-template-columns: repeat(4, 1fr); }

/* The card measured 273px tall, and roughly a fifth of that was the air
   between its own five stacked pieces rather than the pieces. Every step below
   comes down a few pixels together, which keeps the rhythm of the card intact
   and takes it to about 250px. With four showrooms in a row that is the
   difference between a band that fits under the fold and one that does not. */
.gc-footer__locitem {
	position: relative;
	min-width: 0;
	padding: 22px 24px 20px;
	border: 1px solid #e6ecf3;
	border-radius: 16px;
	background: #ffffff;
	/* The header's own shadow, reused. On a dark strip the card separated by
	   being lighter than what it sat on; on a light strip it has to separate
	   by sitting ON it, and that is depth, not color. */
	box-shadow: 0 6px 22px -12px rgba(13, 27, 42, .16);
	overflow: hidden;
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
/*
 * The street grid. Two repeating-linear-gradients crossed over each other,
 * fading out down the card so it never fights the address text. This is the
 * "map" in the card: no request, no API key, no dealer setup, and it still
 * says at a glance what the card is about.
 */
.gc-footer__locitem::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg, rgba(13, 27, 42, .055) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(90deg, rgba(13, 27, 42, .055) 0 1px, transparent 1px 46px);
	-webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 62%);
	mask-image: linear-gradient(160deg, #000 0%, transparent 62%);
	pointer-events: none;
}
.gc-footer__locitem:hover {
	transform: translateY(-4px);
	/* The card is already white, so the hover cannot get lighter the way it
	   did on the dark build. It gets a deeper shadow and a brand-tinted edge
	   instead: the card lifts further off the strip rather than changing
	   color under the cursor. */
	border-color: color-mix(in srgb, var(--cl-red, #DD0000) 45%, #e6ecf3);
	box-shadow: 0 18px 40px -20px rgba(13, 27, 42, .28);
}
/* Everything real sits above the grid texture. */
.gc-footer__locitem > * { position: relative; z-index: 1; }

/* Ghost numeral, top right. Big enough to give the card a corner, faint
   enough that nobody reads it before the city name. */
.gc-footer__locnum {
	position: absolute;
	top: 14px;
	right: 20px;
	z-index: 1;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: rgba(13, 27, 42, .07);
	transition: color .22s ease;
}
/* The hover numeral takes --cl-red-onlight for the same reason the chip below
   does: at 42% of a pale brand over a white card it came back paler than the
   .07 ink it replaced, so hovering a yellow dealer's card made the numeral
   fade out instead of come up. On a mid or dark brand the token is the brand
   color and nothing about this changes. */
.gc-footer__locitem:hover .gc-footer__locnum {
	color: color-mix(in srgb, var(--cl-red-onlight, var(--cl-red, #DD0000)) 42%, transparent);
}

/*
 * The chip has to survive any brand color a dealer picks. On the dark build
 * that meant the dark greens and navies that vanished into a near-black card;
 * on a white card the danger inverts exactly, and it is the pale yellows and
 * light oranges that disappear. Same structure either way: the fill is mixed
 * toward the card colour rather than toward transparent (a predictable tint
 * instead of whatever the card happens to be behind it), the ring draws the
 * square, and the glyph carries the shape.
 *
 * All three read from --cl-red-onlight rather than the raw brand color. The
 * dark build learned this the hard way: the first pass used the raw color for
 * the fill and ring and only lifted the glyph, which tested fine on the green
 * and red brands and then produced a chip on a navy dealer that measured 1.01
 * against the card behind it, three invisible layers around one legible glyph.
 * The mistake would repeat here with the colors swapped, so the token drives
 * all three. It only moves colors that cannot be read on this surface, so a
 * red or navy dealer still gets their exact hex and the tint, ring and glyph
 * keep the relationship they were drawn with.
 *
 * The fill drops 26% -> 14% and the ring 48% -> 40% with the flip. A tint that
 * read as a faint wash over #161b22 reads as a solid swatch over #ffffff, and
 * the chip has to stay a chip holding a glyph rather than become a colored
 * button.
 */
.gc-footer__locpin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0 0 12px;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--cl-red-onlight, var(--cl-red, #DD0000)) 40%, transparent);
	background: color-mix(in srgb, var(--cl-red-onlight, var(--cl-red, #DD0000)) 14%, #ffffff);
	color: var(--cl-red-onlight, var(--cl-red, #DD0000));
}
.gc-footer__locpin svg { width: 17px; height: 17px; }

.gc-footer__locname {
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.2;
	color: #332C2B !important;
	margin: 0 0 6px;
	padding-right: 44px; /* clears the numeral on a long city name */
}
.gc-footer__locaddr {
	font-size: 14.5px;
	line-height: 1.6;
	color: #54606e;
	margin: 6px 0 12px;
}
.gc-footer__locphone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #332C2B !important;
	margin: 0 0 14px;
	transition: color .18s ease;
}
/*
 * --cl-red-onlight, not --cl-red, everywhere the accent has to be READ on the
 * band. Same color for a red, a green or a navy dealer; darkened just enough
 * to be legible for the pale yellows and light oranges that would otherwise
 * disappear into the white card. The hover border above keeps the raw brand
 * color, since that is a shape rather than text.
 */
.gc-footer__locphone svg { width: 14px; height: 14px; color: var(--cl-red-onlight, var(--cl-red, #DD0000)); flex: 0 0 auto; }
.gc-footer__locphone:hover { color: var(--cl-red-onlight, var(--cl-red, #DD0000)) !important; }

/* A rule above the two links, so the card has a head and a foot. */
.gc-footer__locactions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 13px;
	border-top: 1px solid #e6ecf3;
}
.gc-footer__loclink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: color .18s ease;
}
.gc-footer__loclink svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	transition: transform .18s ease;
}
.gc-footer__loclink--dir { color: var(--cl-red-onlight, var(--cl-red, #DD0000)) !important; }
.gc-footer__loclink--dir:hover svg { transform: translateX(3px); }
.gc-footer__loclink--contact { color: #6b7787 !important; }
.gc-footer__loclink--contact:hover { color: #332C2B !important; }

/* ══ The map rail ═══════════════════════════════════════════════════════════
 *
 * 2026-08-06 (owner): "add the maps back into the multiple location cards in
 * the footer in whichever way will look the best and not make the footer huge
 * and tall."
 *
 * The note at the top of footer-view.php has the full reasoning. The short
 * version is the only thing that matters here: the map is ABSOLUTELY POSITIONED
 * and stretched top to bottom of the card it sits in. An element pinned to both
 * edges of a box is exactly as tall as that box, so it cannot push the box
 * taller no matter what is inside it. The reason the first version of these
 * maps had to be pulled was never the maps, it was giving each one its own row
 * in the card's flow; a rail has no row.
 *
 * The card pays for it in WIDTH instead, which is the trade that works: a
 * showroom card is a name, three short lines of address, a phone number and two
 * links, and none of that needs 450px. It needed the air.
 */
.gc-footer__locitem--map {
	/*
	 * One number drives the whole thing: the rail's width and the gutter the
	 * card's text has to keep clear of it.
	 *
	 * 2026-08-06, second pass. The first pass was clamp(96px, 28%, 150px) and it
	 * was too small to read — which was the owner's word for it, and he was
	 * right. 28% was not chosen, it was forced: a flat percentage has to satisfy
	 * the NARROWEST card in the range, and at 1100px the cards are 341px wide, so
	 * anything above 28% wrapped the city names there. That then held the map
	 * down to 127px on a 1440 desktop where 210px was measured to be free. The
	 * whole range was paying the narrowest card's bill.
	 *
	 * The measurement that fixed it: across six card widths from 341px to 483px,
	 * the card breaks at the same place every time, when the TEXT COLUMN drops
	 * under about 195-200px. It is not a proportion at all. A city name and a
	 * two-line address need a roughly fixed number of pixels, and everything past
	 * that is free for the map. So the rail is now sized as "whatever is left
	 * after the text has had its 200px" rather than as a share of the card, which
	 * is why it can be 96px on a cramped card and 200px on a roomy one off the
	 * same one-line rule.
	 *
	 * 2026-08-06, THIRD pass, and the important part of this file's history. The
	 * owner looked at the second pass and said "extend it a little left so it's
	 * around half the size of the card". The second pass could not do that, and
	 * the reason it could not turned out to be a bug rather than a limit.
	 *
	 * The second pass recorded "measured safe maxima" of roughly 1280 150, 1366
	 * 178, 1440 210, and said the constraint was the city name wrapping. It was
	 * not. What was actually breaking at those values was the ACTIONS ROW, which
	 * carried a negative margin written as
	 * calc(-1 * (var(--cl-locmap-w) + 20px)) to cancel the card's padding-right.
	 * A custom property is substituted as raw tokens and the percentage inside it
	 * is then resolved in the USING element's context. On the card, 100% is about
	 * the card's width, which is what the formula assumes. On the actions row,
	 * 100% is the card's CONTENT box, which is the card width minus 24px of left
	 * padding minus the padding-right that this very variable produced. Different
	 * base, so the margin never cancelled the padding it was written to cancel,
	 * and it got further wrong as the rail got wider until the two links wrapped
	 * to a second row and grew the card. That looked exactly like text wrapping in
	 * the sweep, because the card got taller. It was not.
	 *
	 * The tell was that the height growth was the SAME NUMBER at every viewport
	 * width. A constant that does not move when the thing you are changing moves
	 * is a fact about the mechanism, not about what you are measuring. Dumping the
	 * per-element geometry showed the actions row going from 345x32 to 183x70.
	 *
	 * The fix is below the map rule: the actions row is absolutely positioned
	 * against the card's padding box, so there is no percentage in it at all. That
	 * also repairs a cosmetic defect nobody had reported. The rule under the two
	 * links was never symmetric: it sat 25px from the left at every width and
	 * 105px from the right at 1600, 95px at 1440, 41px at 1280 and 1px at 1100. It
	 * is 25px on both sides at every width now.
	 *
	 * With the actions row out of flow, the text really is the only constraint,
	 * and it is a long way further out than the old numbers claimed. Re-measured
	 * ceilings: card 475 takes ~235, card 455 ~225, card 430 ~205, card 483
	 * (tablet) over 240, card 421 ~190, card 398 ~175, card 358 ~135, card 343
	 * ~125, card 328 ~105.
	 *
	 * 250px = the card's 24px left padding + the rail's 20px gutter + ~185px of
	 * text + margin. Rail before and after: 1600 200->225, 1440 188->205, 1366
	 * 163->180, 1280 134->151, 1180 101->118, 1024 200->225, 900 154->175, 820
	 * 114->135, 700 200->225, 430 152->166, 390 112->126, 375 100->111. Not one
	 * width goes down. 10 to 25px of headroom against the ceilings above is left
	 * on the table on purpose: the seed set is six real Texas cities and a dealer
	 * will eventually have a longer name than any of them.
	 *
	 * The 225px cap is taste, not layout. The old comment argued for 200px on the
	 * grounds that the rail is ~190px tall and 200px makes it square, and that
	 * past square the card reads as a map with a caption. At 225 the rail is
	 * landscape, 225 wide by ~190 tall, and that is the change the owner asked
	 * for: on the widest cards the map is about half the card, which is what he
	 * meant by bigger. A landscape map beside an address still reads as an address
	 * card. A portrait one would not, which is why the cap is a cap.
	 *
	 * On the percentage the rail itself still uses: 100% resolves against the
	 * containing block for the padding and against the card's padding box for the
	 * absolutely positioned rail's width. The card has a 1px border, so those two
	 * boxes differ by 2px, which is inside the headroom above and does not matter.
	 * The previous version of this comment claimed the card had no border and
	 * warned that adding one would break the line. The border was already there.
	 */
	--cl-locmap-w: clamp(96px, calc(100% - 250px), 225px);
	padding-right: calc(var(--cl-locmap-w) + 20px);
	/* The two numbers the absolutely positioned actions row below needs. They live
	   on the card because they are the card's own padding, and the tablet and
	   phone blocks change the card's padding; declaring them here means those
	   blocks restate two values instead of repeating the whole rule. */
	--cl-locact-x: 24px;
	--cl-locact-b: 20px;
	/* The actions row is out of flow, so the card has to hold its own room open.
	   32px is the row measured: 13px of padding-top, a 1px rule and an ~18px
	   line. */
	padding-bottom: calc(var(--cl-locact-b) + 32px);
}
/*
 * The drawn street grid the card has carried since the redesign is switched OFF
 * on a card that has a real map in it. It was standing in for a map; with a map
 * present it is a second, fainter, differently-angled grid crossing the first,
 * and the card reads as a texture sample rather than a location. One idea, not
 * two.
 */
.gc-footer__locitem--map::before { display: none; }
/* Nothing to clear on the right any more: the numeral has moved onto the map. */
.gc-footer__locitem--map .gc-footer__locname { padding-right: 0; }
/*
 * The actions row is the one part of the card that keeps the full width, and
 * the rail stops above it. This was measured, not chosen. Get Directions and
 * Contact Us sit side by side in 12px uppercase with wide tracking and need
 * about 245px between them; a card with a rail in it leaves that much only on a
 * wide desktop. Everywhere else, from a 1280 laptop down, they wrapped onto a
 * second row and put ~38px back on every card, which on six showrooms is 76px
 * on the desktop footer and 192px on a phone. The whole saving, undone by two
 * links.
 *
 * Pulling the row back out to full width and ending the map above it costs
 * nothing and reads as deliberate: the rule under the map spans the card, the
 * map becomes a banner in the top right corner, and the height is identical to
 * a card with no map in it at every width that was measured.
 *
 * 58px clears a one-line actions row (13px of padding, a 1px rule, a ~15px line
 * and the card's own 20-22px foot, so 50-52px in practice) with room to spare.
 * The error is one-sided on purpose: too high only shortens the map a little,
 * too low would run it into the links.
 *
 * HOW the row gets its full width is the part that changed on 2026-08-06. It
 * used to be a negative right margin cancelling the card's padding, and that
 * never worked, for the reason written out at length in the map rule above: the
 * percentage inside the shared custom property resolves against a different box
 * on this element than it does on the card. The row is absolutely positioned
 * instead. The card is already position:relative, so the containing block is the
 * card's padding box, and left and right set to the card's own side padding put
 * the rule exactly under the text with no percentage anywhere in the chain.
 *
 * Two consequences worth knowing before touching this. The card now has to
 * reserve the row's height as padding-bottom, so the two must move together.
 * And the two breakpoints that REMOVE the rail (four across on desktop, and
 * 340px and under) have to put the row back in flow and give the padding back,
 * because at 320 the row wraps to two lines and measures 64px, which a 52px
 * reserve would clip.
 */
.gc-footer__locitem--map .gc-footer__locactions {
	position: absolute;
	left: var(--cl-locact-x);
	right: var(--cl-locact-x);
	bottom: var(--cl-locact-b);
	margin: 0;
}
/*
 * The card becomes a flex column ONLY in map mode, and only to pin the actions
 * row to its foot. The ledger is a grid, so every card in a row is stretched to
 * the tallest one, and in a block layout that slack piles up UNDER the last
 * element. That put the actions row anywhere from 20px to 45px off the bottom
 * depending on how much taller its neighbours were, which meant the rail's
 * fixed 58px stopping point sometimes ended level with the links instead of
 * above them. Measured on a four-showroom footer at 1440: 25px of slack and the
 * map sitting 18px over the top of Get Directions.
 *
 * With the actions row pinned, the slack moves above it instead and the gap
 * under it is always the card's own 20px foot. The rail clears it at every card
 * height, and the links line up across a row, which is what a row of cards
 * should do anyway.
 *
 * 2026-08-06: the actions row is absolutely positioned now, so the flex column
 * is no longer what pins it. The column STAYS anyway, and not out of caution.
 * Margins do not collapse between flex items, so the card's measured height
 * depends on it: the zeroed top margin on the address three rules down exists
 * only because of this column, and pulling the column out would change every
 * card height in the footer to fix nothing.
 */
.gc-footer__locitem--map {
	display: flex;
	flex-direction: column;
}
/* Two inline-flex pieces that would otherwise stretch to the full column. */
.gc-footer__locitem--map .gc-footer__locpin,
.gc-footer__locitem--map .gc-footer__locphone { align-self: flex-start; }
/* Margins do not collapse between flex items, so the 6px under the name and the
   6px over the address stop overlapping and start adding. Zeroing the top one
   keeps map cards exactly the height of the cards beside them. */
.gc-footer__locitem--map .gc-footer__locaddr { margin-top: 0; }

/*
 * The selector is deliberately heavy. Two rules already in play are more
 * specific than a bare class and both would break the rail: the card sets
 * `.gc-footer__locitem > * { position: relative }` to lift its own contents
 * above the drawn grid, and the footer sets `position: relative` on every <a>
 * inside it. Either one turns the rail back into an in-flow box, which measures
 * zero tall because everything inside it is absolute. That was the first
 * version of this build: six rails, all 118 x 0.
 */
.gc-footer__locitem > a.gc-footer__locmap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 58px; /* see the actions-row note above */
	width: var(--cl-locmap-w);
	z-index: 1;
	overflow: hidden;
	background: #eaeff4;
	display: block;
	/* The card already clips to its own 16px radius, so the rail needs no
	   radius of its own and gets the two right corners for free. */
}
/*
 * The drawn tile. It is painted underneath the map and never removed, so it is
 * what a visitor sees when the embed does not arrive: no connection, a frame
 * blocked by an extension or a corporate proxy, an address Google cannot place,
 * or data saver on. A tile that looks like a map beats a white hole, and it
 * beats a spinner that spins forever.
 */
.gc-footer__locmap-tile {
	position: absolute;
	inset: 0;
	background-color: #e9eef4;
	background-image:
		/* one wider road running across the block, so it reads as a place
		   rather than as graph paper */
		linear-gradient(118deg, transparent 0 42%, #f7fafd 42% 52%, transparent 52% 100%),
		repeating-linear-gradient(0deg, rgba(13, 27, 42, .085) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(90deg, rgba(13, 27, 42, .085) 0 1px, transparent 1px 34px);
	transition: opacity .35s ease;
}
.gc-footer__locmap-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	color: var(--cl-red-onlight, var(--cl-red, #DD0000));
	opacity: .55;
}
/* Grown with the rail. The pin is the only thing on the drawn tile that reads as
   an object rather than as texture, so if it stays at its old 26px while the
   tile around it goes from 127px wide to 200px, the fallback stops looking like
   a map of somewhere and starts looking like a lot of graph paper. */
.gc-footer__locmap-pin svg { width: 34px; height: 34px; display: block; }

/*
 * The embed, cropped. Google's frame draws its own controls and a "View larger
 * map" link in the corners, and at rail size those cover most of the picture,
 * so the frame is rendered large and centred and the card clips the edges off.
 * What is left in the middle is streets and the marker, which is the only part
 * of a map this small can usefully say.
 *
 * pointer-events are off so the whole rail stays one click target that opens
 * driving directions. A pannable 140px map inside a footer is a scroll trap on
 * a phone, and it is not what anyone is trying to do down here anyway.
 */
.gc-footer__locmap iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 430px;
	height: 430px;
	/*
	 * 2026-08-06: the scale(.8) that used to be here came out. It was shrinking
	 * the map to 80% to push Google's corner furniture further outside the crop,
	 * and it was costing a fifth of the size of every street name in the picture
	 * for a margin that was never in danger. The crop window is the rail, and at
	 * its widest the rail shows 200 of the frame's 430px, so the nearest control
	 * is still 115px outside the visible area. At the phone floor it is 165px
	 * outside. There was nothing to buy.
	 *
	 * Dropping it is a straight 25% increase in the size of everything in the
	 * map, and unlike stretching it up past 1 it costs no sharpness, because the
	 * frame is still being rendered at its natural resolution rather than
	 * rasterised and blown up. The other 100% came from the zoom going 14 -> 15
	 * in footer-view.php. Between them the map reads about two and a half times
	 * bigger than it did, in exactly the same number of pixels of footer.
	 */
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
	opacity: 0;
	filter: saturate(.9);
	transition: opacity .35s ease;
}
.gc-footer__locmap.is-cl-mapped iframe { opacity: 1; }
/* The tile stays in the DOM as the permanent fallback; once the real map has
   painted it just stops showing through. */
.gc-footer__locmap.is-cl-mapped .gc-footer__locmap-tile { opacity: 0; }
/*
 * A white fade down the rail's left edge so the map dissolves into the card
 * instead of sitting in it behind a hard vertical seam. Same trick as the mask
 * on the drawn grid: the card should look like one object.
 */
.gc-footer__locmap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .55) 16%, rgba(255, 255, 255, 0) 42%);
	pointer-events: none;
}

/*
 * The numeral moves onto the map and becomes solid. In the flow layout it was a
 * ghost sitting in the card's own top-right air; that air is now the rail, and
 * a 7%-ink numeral over a satellite of streets is unreadable and looks like a
 * printing fault. As a small filled chip in the corner of the map it does the
 * job it always did, marks which showroom you are looking at, and it reads on
 * whatever the map happens to be showing underneath it.
 */
.gc-footer__locitem--map .gc-footer__locnum {
	top: 10px;
	right: 10px;
	z-index: 2;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: .04em;
	padding: 6px 8px;
	border-radius: 8px;
	color: #ffffff;
	background: var(--cl-red-onlight, var(--cl-red, #DD0000));
	box-shadow: 0 2px 8px -2px rgba(13, 27, 42, .45);
}
/* The ghost-numeral hover belongs to the ghost numeral. A white-on-brand chip
   fading to a tint on hover would just make it unreadable. */
.gc-footer__locitem--map:hover .gc-footer__locnum { color: #ffffff; }

/*
 * ── The one layout that cannot carry a map: four across ────────────────────
 *
 * A card needs about 245px of text column before a map can sit beside it. That
 * is not a taste number, it is the width of Get Directions and Contact Us side
 * by side, and it is also about where a city name stops wrapping. Add the 96px
 * floor on the rail and the card's own padding and a map-ready card is roughly
 * 385px wide.
 *
 * Every layout clears that except one. Two showrooms give 611-691px cards,
 * three give 401-455, five and six run three across at 401-455, and the tablet
 * and phone layouts are 355-483. Four showrooms is the only count that puts
 * four cards across a desktop, and those cards are 260-337px. Measured with the
 * rail in, that layout wrapped the city names, wrapped the two links onto a
 * second row, and at 1100 the links ran up under the map.
 *
 * So four across keeps the drawn street grid it has always had and the maps
 * appear on tablet and phone, where the same four showrooms get a card wide
 * enough to hold one. Squeezing a 96px map into a 260px card would have cost
 * about 90px of footer height to show a map too small to read, which is the
 * exact trade this whole build exists to refuse.
 */
@media (min-width: 1081px) {
	.gc-footer__ledger--n4 .gc-footer__locitem > a.gc-footer__locmap { display: none; }
	.gc-footer__ledger--n4 .gc-footer__locitem--map {
		display: block;
		padding-right: 24px;
		/* The rail is gone here, so the actions row goes back into the flow two
		   rules down and the card gives back the room it was holding open for it.
		   Back to the base card's own 20px foot. */
		padding-bottom: 20px;
	}
	.gc-footer__ledger--n4 .gc-footer__locitem--map::before { display: block; }
	.gc-footer__ledger--n4 .gc-footer__locitem--map .gc-footer__locname { padding-right: 44px; }
	.gc-footer__ledger--n4 .gc-footer__locitem--map .gc-footer__locaddr { margin-top: 6px; }
	.gc-footer__ledger--n4 .gc-footer__locitem--map .gc-footer__locactions {
		position: static;
		margin: 0;
	}
	/* The numeral goes back to being the ghost in the card's own corner, since
	   there is no map under it any more to need a solid chip. */
	.gc-footer__ledger--n4 .gc-footer__locitem--map .gc-footer__locnum {
		top: 14px;
		right: 20px;
		font-size: 34px;
		letter-spacing: -.02em;
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: rgba(13, 27, 42, .07);
	}
	.gc-footer__ledger--n4 .gc-footer__locitem--map:hover .gc-footer__locnum {
		color: color-mix(in srgb, var(--cl-red-onlight, var(--cl-red, #DD0000)) 42%, transparent);
	}
}

/* ── Tablet: two cards a row whatever the count ────────────────────────── */
@media (max-width: 1080px) and (min-width: 701px) {
	.gc-footer__ledger { grid-template-columns: repeat(2, 1fr) !important; }
	.gc-footer__locitem { padding: 24px 22px 22px !important; }
	/* The padding shorthand above is !important, so the rail's gutter has to be
	   re-stated at the same weight or the text runs under the map. */
	.gc-footer__locitem--map {
		/*
		 * Same formula as desktop, but the floor comes up from 96px to 112px.
		 * The tablet card carries 22px of side padding and an 18px gutter where
		 * desktop carries 24 and 20, so it has 4px more room than the desktop
		 * rule assumes, and at 768 that is the difference between the formula's
		 * 96px and the 112px this breakpoint has been shipping and measuring
		 * clean since the first build. Without the floor this change would have
		 * been an improvement everywhere except a 768 tablet, where it would
		 * have quietly taken 16px OFF the map. A rewrite that makes one width
		 * worse is not a rewrite, it is a trade, and there was no need to make
		 * one here.
		 *
		 * What it buys at the wide end is the real story: a 1024 tablet card is
		 * 483px, wider than a 1280 desktop card, and it was being handed the
		 * same 112px map as a 768. It now gets the full 200px.
		 */
		--cl-locmap-w: clamp(112px, calc(100% - 246px), 225px);
		padding-right: calc(var(--cl-locmap-w) + 18px) !important;
		/* The tablet card's own side padding and foot, for the absolutely
		   positioned actions row. Both !important for the same reason the gutter
		   above is: the card's padding shorthand in this block is !important, so
		   an ordinary longhand after it loses. */
		--cl-locact-x: 22px;
		--cl-locact-b: 22px;
		padding-bottom: calc(var(--cl-locact-b) + 32px) !important;
	}
}

/* ── Phone: one card a row ─────────────────────────────────────────────── */
@media (max-width: 700px) {
	.gc-footer--band .gc-footer__inner { grid-template-columns: 1fr; }
	/* Top 46 -> 22 on phones: same 2026-08-04 seam removal, kept a touch
	   roomier than desktop because the stacked columns end in a centred
	   social row that needs a little air before the Visit Us pill. */
	.gc-footer__band-inner { padding: 22px 16px 54px; }
	/*
	 * Centred on a phone, left aligned everywhere else. On desktop the head
	 * lines up with the left edge of the first card and the column above it,
	 * so left is the only thing that reads. On a phone the cards go full
	 * width and there is no column edge left to line up with, so a left set
	 * eyebrow, title and subline just sit off to one side of a screen they
	 * are the full width of. The eyebrow is an inline-flex pill, so it
	 * centres off the parent alignment rather than needing its own rule.
	 * The cards below stay left aligned: addresses and phone numbers are
	 * read down the left edge, not from the middle.
	 */
	.gc-footer__band-head { margin-bottom: 24px; text-align: center; }
	.gc-footer__ledger { grid-template-columns: 1fr !important; gap: 14px; }
	.gc-footer__locitem { padding: 22px 20px 20px !important; }
	.gc-footer__locnum { font-size: 28px; top: 12px; right: 16px; }
	.gc-footer__locname { font-size: 19px; }
	/*
	 * The phone rail was a flat 112px, and flat was the wrong shape for it. A
	 * card on a phone is the whole screen, so its width swings further here than
	 * anywhere else in the layout: 398px on a 430 phone down to 328px on a 360.
	 * One number across that range means the big phone is rationed to what the
	 * small phone can stand, and 430 is the commonest phone width in the fleet's
	 * analytics.
	 *
	 * Same "the text keeps what it needs, the map gets the rest" rule as desktop,
	 * with a smaller subtrahend because the phone card's side padding is 20px and
	 * its gutter 16px rather than 24 and 20.
	 *
	 * 2026-08-06, third pass. 244 was the shipped subtrahend and it was chosen
	 * against ceilings that were really the actions row wrapping rather than the
	 * text wrapping, which is written out in full in the desktop rule. With the
	 * actions row absolutely positioned the real phone ceilings are card 398 ~175,
	 * card 358 ~135, card 343 ~125 and card 328 ~105. 232 asks for 166 / 126 / 111
	 * / 100 against those, so 9 to 14px of headroom at every width and every one
	 * of them ahead of what was shipping. The 375 case is the tightest and was
	 * measured rather than assumed, which is the habit that saved the previous
	 * pass from shipping a comment that said 112 over code that did 110.
	 *
	 * The 100px floor is doing real work at the bottom of the range and is the
	 * same value the old max-width:380 block set by hand. That block now only
	 * carries the name's font-size, which is the thing that actually buys a 360
	 * its room.
	 */
	.gc-footer__locitem--map {
		--cl-locmap-w: clamp(100px, calc(100% - 232px), 225px);
		padding-right: calc(var(--cl-locmap-w) + 16px) !important;
		/* The phone card's own side padding and foot, for the absolutely
		   positioned actions row. !important on the reserve because the card's
		   padding shorthand in this block is !important. */
		--cl-locact-x: 20px;
		--cl-locact-b: 20px;
		padding-bottom: calc(var(--cl-locact-b) + 32px) !important;
	}
	.gc-footer__locitem--map .gc-footer__locnum { font-size: 11.5px; top: 9px; right: 9px; padding: 5px 7px; }
	.gc-footer__locmap-pin svg { width: 26px; height: 26px; }
	/*
	 * The one place the card changes shape on a phone: the two links go
	 * full width and stack, because 12px uppercase text side by side is a
	 * pair of targets a thumb has to aim between.
	 */
	.gc-footer__locactions { gap: 14px; }
}

/*
 * ── Small phones ───────────────────────────────────────────────────────────
 * A 360px screen is still a common one, and it is 30px narrower than the 390
 * the cards were tuned on. Measured there with the rail in: five of the six
 * showrooms were untouched and the sixth, Corpus Christi, wrapped both its name
 * and its address and grew 46px. A city name is the one thing on the card that
 * cannot be allowed to wrap, so the rail gives back 12px and the name comes
 * down a point, which is enough for the longest city name in the seed set with
 * room left over. Nothing else about the card changes.
 */
@media (max-width: 380px) {
	/* The hand-set 100px rail that used to be here is gone: the clamp above
	   floors at exactly 100px and reaches it on its own at any screen 350px or
	   narrower, so this was a second copy of the same number waiting to disagree
	   with the first. The name's font-size is the part that mattered anyway. */
	.gc-footer__locitem--map .gc-footer__locname { font-size: 18px; }
}

/*
 * ── The floor: 340px and under, the rail comes out ──────────────────────────
 *
 * Measured across 430, 414, 390, 375 and 360: every card holds its name on one
 * line and its address on two, with the rail in. 320 is the first width where
 * that stops being true, and it does not fail gently — at 320 the text column
 * is down to about 130px, so Corpus Christi wrapped its name to two lines AND
 * its address to four, and San Antonio and Lakeway wrapped too. That is the
 * card falling apart to keep a 100px picture, which is the wrong way round.
 *
 * So the rail comes out and the card goes back to exactly what it was before
 * this build: drawn street grid, ghost numeral in the corner, links stacked
 * full width. Same call as the four-across desktop case above and for the same
 * reason — when there is not room for both, the address wins, because the
 * address is the thing the customer actually came to the footer for.
 *
 * 340px rather than 359px so a 360 device that reports a hair under its nominal
 * width (browser chrome, a zoom setting) still keeps its map.
 */
@media (max-width: 340px) {
	.gc-footer__locitem > a.gc-footer__locmap { display: none; }
	.gc-footer__locitem--map {
		display: block;
		/* !important because the max-width:700 block above sets this gutter at
		   !important weight (it has to, the card's padding shorthand is itself
		   !important there). Without matching that weight the rail disappears
		   but its 116px gutter stays, and every card gets narrower text and a
		   column of white where the map used to be — which measured 46px TALLER
		   per card than just leaving the map in. */
		padding-right: 20px !important;
		/* The reserve the card was holding open for the absolutely positioned
		   actions row comes back off, because the row goes back into the flow
		   three rules down. This matters more here than at the four-across
		   desktop case: at 320 the two links wrap to two lines and the row
		   measures 64px, so the 52px reserve would have clipped it. */
		padding-bottom: 20px !important;
	}
	.gc-footer__locitem--map::before { display: block; }
	.gc-footer__locitem--map .gc-footer__locname {
		padding-right: 44px;
		font-size: 19px;
	}
	.gc-footer__locitem--map .gc-footer__locaddr { margin-top: 6px; }
	.gc-footer__locitem--map .gc-footer__locactions {
		position: static;
		margin: 0;
	}
	/* Back to the ghost numeral: with no map beneath it there is nothing for a
	   solid chip to sit on, and it would just be a loud badge on a white card. */
	.gc-footer__locitem--map .gc-footer__locnum {
		top: 12px;
		right: 16px;
		font-size: 28px;
		letter-spacing: -.02em;
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: rgba(13, 27, 42, .07);
	}
	.gc-footer__locitem--map:hover .gc-footer__locnum { color: rgba(13, 27, 42, .07); }
}

/*
 * No hover on a touch screen, so the lift and the color change would only
 * ever fire as a stuck state after a tap. The card keeps its resting look
 * and the links do the work.
 */
@media (hover: none) {
	.gc-footer__locitem:hover {
		transform: none;
		background: #ffffff;
		border-color: #e6ecf3;
		/* The resting shadow, not none: on a light strip the shadow is what
		   makes the card a card, so removing it on tap would flatten the card
		   into the strip instead of just cancelling the lift. */
		box-shadow: 0 6px 22px -12px rgba(13, 27, 42, .16);
	}
	.gc-footer__locitem:hover .gc-footer__locnum { color: rgba(13, 27, 42, .07); }
	/* ...except on a map card, where the numeral is a solid chip and the rule
	   above would paint white text as 7% ink over the map. */
	.gc-footer__locitem--map:hover .gc-footer__locnum { color: #ffffff; }
}

/* ── Black-header sites: a plate behind the footer logo (owner ask,
   2026-08-08). A dealer picks the black header BECAUSE their logo is the
   light/reverse version — and the footer runs the light skin
   (functions.php inline: white background), so that same logo dissolves
   down there. When the header is black (body class from
   cl_brand_header_style), the footer logo automatically sits on a rounded
   plate in the header's own black. No new setting: it follows the one
   choice the dealer already made. Light-header sites are untouched. */
body.cl-header--black .gc-footer__logo-link {
	display: inline-block;
	background: #141414;
	border-radius: 12px;
	padding: 16px 20px;
	line-height: 0;
	margin-bottom: 20px;
}
body.cl-header--black .gc-footer__logo-link .gc-footer__logo {
	display: block;
	/* the plate carries the spacing to the about text now */
	margin-bottom: 0;
}

/* ── Footer hours (batch78, owner: "I want the hours listed on the footer").
   Grouped week rows from cl_location_hours_ranges(). Two homes: the
   single-location column (light skin) and the multi-location band cards. */
.gc-footer__hours {
	margin: 2px 0 16px;
}
/*
 * 2026-08-08 (owner: "the hours are messed up in the footer on a single
 * location"). The single-location footer is an explicit grid: title row 1,
 * address/phone row 2, Contact Us row 3, all in column 1, with the map
 * absolutely positioned over column 2. The hours block (added batch78)
 * carried NO placement, so auto-placement dropped it into column 2 row 1 —
 * on top of the map area — and stretched row 1, which is what opened the
 * gap between the showroom name and the address. Hours now sit where they
 * were designed to: column 1, directly under the phone, with Contact Us
 * moving down a row.
 */
.gc-footer__location:only-child { grid-template-rows: auto auto auto auto minmax(0, 1fr); }
.gc-footer__location:only-child > .gc-footer__hours { grid-column: 1; grid-row: 3; margin: 0 0 18px; }
.gc-footer__location:only-child > .gc-footer__btn { grid-row: 4; }
@media (max-width: 900px) {
	.gc-footer__location:only-child > .gc-footer__hours,
	.gc-footer__location:only-child > .gc-footer__btn { grid-row: auto; }
}
.gc-footer__hours-head {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #332C2B;
	margin-bottom: 6px;
}
.gc-footer__hours-head .fa-clock {
	color: var(--cl-red-onlight, var(--cl-red, #DD0000));
	margin-right: 4px;
}
.gc-footer__hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 280px;
}
.gc-footer__hours-list li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 14px;
	line-height: 1.7;
}
.gc-footer__hours-days {
	color: #332C2B;
	font-weight: 600;
	white-space: nowrap;
}
.gc-footer__hours-time {
	color: #54606e;
	text-align: right;
}

/* Band cards: same rows, tighter — they sit between the phone and the
   action links, in the card's own type scale. */
.gc-footer__lochours {
	list-style: none;
	margin: 2px 0 12px;
	padding: 0;
}
.gc-footer__lochours li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	line-height: 1.65;
}
.gc-footer__lochours-days {
	color: #332C2B;
	font-weight: 600;
	white-space: nowrap;
}
.gc-footer__lochours-time {
	color: #54606e;
	text-align: right;
}
/* The map-rail cards keep their right rail clear of the hours rows the same
   way the address stays clear: the rail is absolute on the right edge, and
   the card's existing right padding already reserves that lane. */

/* 2026-08-09 (owner, phone screenshot of STC local: "On the single location
   footer can you center the hours on mobile too"). The stacked single-
   location footer centers everything except the hours list, which hugged
   the left edge with its day/time split spanning the column. The head was
   already centered by the stacked layout; the LIST now centers as a block,
   keeping its aligned day/time columns inside the same 280px it uses on
   desktop. Multi-location band cards are untouched. */
@media (max-width: 900px) {
	.gc-footer__location:only-child > .gc-footer__hours { text-align: center; }
	.gc-footer__location:only-child .gc-footer__hours-list { margin-left: auto; margin-right: auto; }
}

/* 2026-08-10 (owner: "add some padding to the left and right hand side of the
   footer its almost touching the edge"): the three footer containers go from
   20px to 48px side gutters above. On phones 48px eats too much of a 390px
   screen, so small viewports return to the original tight gutter — which the
   owner measured as fine there. */
@media (max-width: 900px) {
	.gc-footer__inner { padding-left: 36px; padding-right: 36px; }
	.gc-footer__band-inner { padding-left: 36px; padding-right: 36px; }
	.gc-footer__bottom-inner { padding-left: 36px; padding-right: 36px; }
}
@media (max-width: 600px) {
	.gc-footer__inner { padding-left: 20px; padding-right: 20px; }
	.gc-footer__band-inner { padding-left: 20px; padding-right: 20px; }
	.gc-footer__bottom-inner { padding-left: 20px; padding-right: 20px; }
}