/* ============================================================
   Front-page hero — brand_index_landing.png

   Loaded on this view only (inc/assets.php picks up
   assets/css/templates/<template>.css by convention).

   The angled cut is the brand's signature device: "hero photos and dark
   bands meet content on a 12–18° diagonal". It is drawn with clip-path on
   the WHITE panel, which sits above the photo — so the photo needs no
   masking and stays a plain <img> the browser can prioritise.
   ============================================================ */

.ar-hero-split {
	position: relative;
	display: grid;
	background: var(--ar-bg);
	isolation: isolate;
	overflow: hidden;   /* clips the skewed panel's overshoot */
}

/* ---------- the photograph ---------- */

.ar-hero-split__media {
	grid-area: 1 / 1;
	position: relative;
	--ar-hero-h: clamp(26rem, 38vw, 36.875rem);   /* 590px cap = the photo's native height */
	min-height: 26rem;
	height: var(--ar-hero-h);
	overflow: hidden;
}
/* The supplied photograph is only 756x590. Spanning the full 1536 hero means a
   2x upscale AND cropping away ~half the frame vertically — which buried the
   mechanic's face and the engine bay, the two things the shot is of.
   Starting the media at 30% keeps the upscale near 1.4x and holds ~70% of the
   frame, and the panel's diagonal (52%→37%) always sits over it, so no gap
   opens between the cut and the photo. */
.ar-hero-split__media { margin-inline-start: 30%; }

/* Absolute, or the image's intrinsic height sizes the grid row and the hero
   grows to ~1200px tall. height:100% on a row sized BY the image is circular. */
.ar-hero-split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The "CALL US TODAY / <phone>" panel is baked into the bottom of the plate,
	   so the crop is anchored low enough to keep all of it. 42% cut it in half. */
	object-position: 50% 88%;
	display: block;
}

/* ---------- the white panel, cut on the diagonal ---------- */

.ar-hero-split__panel {
	grid-area: 1 / 1;
	z-index: 1;
	position: relative;
	isolation: isolate;
	background: none;            /* the panel fill lives on ::before */
	display: flex;
	align-items: center;
}

/* The cut is drawn by a SKEWED PSEUDO-ELEMENT, not clip-path.
   clip-path had to derive its horizontal run from an assumed height, and the
   panel actually stretches to the grid row (592px, not the 532px the token
   resolved to) — so the rendered angle came out 14.45°, not 16°. A skew is
   exact by construction at any height.

   The box overshoots top/bottom and far past the left edge so the parallelogram
   never exposes a corner inside the band; `.ar-hero-split` clips the overflow.
   `right` sets where the cut crosses the mid-height. */
.ar-hero-split__panel::before {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -60%;
	right: 57%;
	z-index: -1;
	background: var(--ar-bg);
	transform: skewX(calc(var(--ar-oblique) * -1));
}

.ar-hero-split__inner {
	/* The copy column MUST clear the diagonal. The cut sits at 37% of the hero
	   width along the panel's bottom edge (≈563px at 1536), and the feature row
	   and buttons are the widest things in the column — so the box, padding
	   included, has to finish inside that. box-sizing is border-box here so the
	   cap covers the padding rather than sitting under it. */
	box-sizing: border-box;
	width: 100%;
	max-width: 34rem;
	padding-block: var(--wp--preset--spacing--md);
	padding-inline: clamp(1.25rem, 3.5vw, 3.5rem) var(--wp--preset--spacing--xs);
}

/* ---------- type ---------- */

.ar-hero-split__title {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--ar-text);
	margin: 0 0 var(--wp--preset--spacing--sm);
	text-wrap: balance;
}
.ar-accent { color: var(--ar-accent); }

.ar-hero-split__sub {
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.9vw, 1.5rem);
	line-height: 1.25;
	color: var(--ar-text);
	margin: 0 0 var(--wp--preset--spacing--lg);
}

.ar-hero-split__lead {
	color: var(--ar-text-2);
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 var(--wp--preset--spacing--sm);
	max-width: 24rem;
}

/* ---------- four feature tiles ---------- */

.ar-features {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--md);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xs);
}
.ar-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	text-align: center;
}
.ar-features__item .ar-icon { color: var(--ar-accent); }
.ar-features__label {
	font-family: var(--ar-font-display);
	font-weight: 600;
	font-size: 0.6875rem;
	line-height: 1.25;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ar-text);
}

/* ---------- call panel over the photo ---------- */

.ar-callout {
	position: absolute;
	right: clamp(1rem, 4vw, 3.5rem);
	bottom: clamp(1rem, 4vw, 3rem);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	z-index: 2;
}
/* Filled icons appear only inside solid red medallions — iconography guideline. */
.ar-callout__medallion {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
	flex: none;
	box-shadow: var(--wp--preset--shadow--red);
}
.ar-callout__text { display: grid; gap: 0.15rem; }
.ar-callout__eyebrow {
	font-family: var(--ar-font-display);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ar-on-accent);
}
.ar-callout__number {
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1;
	color: var(--ar-on-accent);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.ar-callout__tag {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--ar-on-accent);
}
/* The callout sits on photography, so its colours are FIXED — they must not
   follow the colour mode or the text disappears against the image. */
.ar-callout .ar-accent { color: var(--ar-fixed-accent-photo); }

/* ---------- closing red bar ---------- */

.ar-ctabar {
	background: var(--ar-btn-bg);
	color: var(--ar-on-accent);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 0;
	position: relative;
	overflow: hidden;
	min-height: var(--ar-ctabar-h);
	--ar-ctabar-h: 5.25rem;
}
.ar-ctabar__area,
.ar-ctabar__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding-inline: var(--wp--preset--spacing--md);
}
.ar-ctabar__area { font-weight: 500; }
.ar-ctabar__area .ar-icon { flex: none; }

/* The wedge now spans the full band height, so the diagonal is the boundary
   between red and dark rather than a shape floating on top of the red. */
.ar-ctabar__slogan {
	margin: 0;
	background: var(--ar-fixed-dark);
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	display: grid;
	place-items: center;
	padding-inline: clamp(2.5rem, 6vw, 5rem);
	/* Run derived from the band height, not eyeballed — same 16° as the hero. */
	clip-path: polygon(
		calc(var(--ar-ctabar-h) * var(--ar-oblique-tan)) 0,
		100% 0,
		calc(100% - (var(--ar-ctabar-h) * var(--ar-oblique-tan))) 100%,
		0 100%
	);
	text-align: center;
	white-space: nowrap;
}

.ar-ctabar__phone {
	justify-self: end;
	text-decoration: none;
	align-self: center;
}
/* Dark chip on the red band, same 8px corner as the header call button so the
   two read as one control language rather than two. */
.ar-ctabar__phone > span {
	display: inline-flex;
	align-items: center;
	background: var(--ar-fixed-dark);
	color: var(--ar-on-accent);
	border-radius: var(--ar-radius-lg);
	padding: 0.7rem 1.25rem;
	font-family: var(--ar-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	transition: var(--ar-ease);
}
.ar-ctabar__phone .ar-icon { margin-inline-end: 0.5rem; flex: none; }
.ar-ctabar__phone:hover > span,
.ar-ctabar__phone:focus-visible > span { background: var(--ar-fixed-darker); }

/* ---------- responsive: a diagonal cannot survive a single column ---------- */

@media (max-width: 62rem) {
	.ar-hero-split { display: block; }
	/* `clip-path: none` was for the ORIGINAL clip-path cut, kept in case any
	   browser still matches that selector.

	   `transform: none` (a previous fix, WRONG on its own) assumed un-skewing
	   the box was enough to make it harmless — it isn't. The box's un-skewed
	   footprint is `left:-60% right:57% top:-20% bottom:-20%` of the PANEL,
	   which is already a huge rectangle before any transform is applied; the
	   skew only shears its edges, it never shrinks it. Removing just the skew
	   traded an invisible-by-coincidence parallelogram for an equally huge,
	   fully visible plain rectangle — confirmed in DevTools: the element's own
	   box model covers nearly the entire panel, and its `bottom:-20%` lets it
	   extend past the panel's own bottom edge into the photo below, since
	   nothing here clips it (only the outer `.ar-hero-split` does, and its
	   overflow:hidden bound is the whole hero, not the panel).

	   The whole device only makes sense in DESKTOP overlay mode, where panel
	   and media share one grid cell and the box's shape carves a visible split
	   across that shared area. On mobile, `.ar-hero-split` is `display:block`
	   — panel and media are separate stacked boxes, not overlaid — so there is
	   nothing for a diagonal to cut across. `content: none` removes the
	   pseudo-element from rendering entirely, rather than trying to resize or
	   reposition a box that has no job here. The panel's own `background:none`
	   (it normally relies on this ::before for its fill) then falls through to
	   `.ar-hero-split`'s own `background: var(--ar-bg)`, already correct at the
	   unconditional base rule — no new background rule needed here. */
	.ar-hero-split__panel { clip-path: none; }
	.ar-hero-split__panel::before { content: none; }
	.ar-hero-split__inner { max-width: none; padding-inline: var(--wp--preset--spacing--md); }
	.ar-hero-split__media { min-height: 18rem; height: auto; margin-inline-start: 0; }
	.ar-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ar-ctabar { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.ar-ctabar__slogan { clip-path: none; }
	.ar-ctabar__phone { justify-self: center; }
}

/* At 320px the CTA bar's own children measured 348px wide and were being CLIPPED
   by the band's `overflow: hidden` — the slogan's `white-space: nowrap` plus
   2.5rem of inline padding cannot fit, so "Keep your car running at its best."
   lost its last 28px. The page showed no horizontal scrollbar, which is exactly
   what made it easy to miss: overflow:hidden hides the symptom, not the cause. */
@media (max-width: 26rem) {
	.ar-ctabar__slogan {
		white-space: normal;
		padding-inline: var(--wp--preset--spacing--sm);
		text-wrap: balance;
	}
	.ar-ctabar__area,
	.ar-ctabar__phone { padding-inline: var(--wp--preset--spacing--sm); }
}

/* Narrow-desktop clearance (found 2026-08-08, verified by direct measurement
   at 993/1100/1200/1300px, not by re-deriving the skew formula): the diagonal's
   `right: 57%` boundary and the copy column's fixed 34rem width were tuned
   together at the design's ~1536px reference. That margin holds down to about
   1300px. Below it — still ABOVE the 62rem mobile breakpoint, so still in grid
   overlay mode — the fixed-width column runs past the diagonal's actual
   (skewed) edge and sits directly on the visible photo: confirmed by
   screenshot at 993 and 1100, where the fourth feature icon rendered on top of
   bare photo instead of the dark panel. Narrowing the column only in this band
   leaves both the mobile layout (<=62rem) and the verified-good wide desktop
   hero (>80rem, still 34rem) untouched. */
@media (min-width: 62.01rem) and (max-width: 80rem) {
	.ar-hero-split__inner { max-width: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ar-btn { transition: none; }
	.ar-btn--solid:hover { transform: none; }
}