/**
 * provider.charterspace.io homepage rebuild (brand-audit F1/rec-brand-2) — CSS for
 * [cs_capacity_estimator]/[cs_vehicle_showcase] (provider-home-widgets.php) and the generic
 * scroll-reveal utility (scroll-reveal.js). A new file rather than an addition to
 * divi-child/style.css: several other agents are actively editing that file's shared gauge/route-
 * visual sections in this same session, and this component's CSS surface is large enough that
 * appending to it risks a real merge collision. Built entirely on the existing `--cs-*` token system
 * (docs/38) — no new colours, spacing values, radii, or breakpoints are introduced. Whoever finishes
 * wiring this page can fold this file into style.css in one later, uncontested pass if consolidation
 * is wanted; nothing here depends on staying a separate file.
 *
 * Enqueued from divi-child/functions.php, unconditional + self-guarding like every script in
 * divi-child/assets/ (a no-op page pays only an empty stylesheet fetch, not a broken layout).
 */

/* -----------------------------------------------------------------------------
   Generic scroll-reveal (scroll-reveal.js's [data-cs-reveal] contract).
   `.cs-reveal-pending`/`.cs-reveal-visible` are only ever added by that script, and only after it has
   confirmed both IntersectionObserver support and prefers-reduced-motion is NOT set — this rule is
   still wrapped in its own `(prefers-reduced-motion: no-preference)` guard as defence in depth, same
   posture divi-child/style.css already takes elsewhere (its own two prefers-reduced-motion blocks).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.cs-reveal-pending {
		opacity: 0;
		transform: translateY(1rem);
		transition: opacity 420ms ease, transform 420ms ease;
	}

	.cs-reveal-pending.cs-reveal-visible {
		opacity: 1;
		transform: none;
	}
}

/* -----------------------------------------------------------------------------
   provider.charterspace.io homepage sections (wp-cli/content/provider-home.html). No max-width/
   centering rule here, matching every other shortcode-rendered section in this codebase
   (.cs-vehicle-specs, .cs-vehicle-legs, etc.) — the Divi page/row wrapper this content is provisioned
   into (wp-cli/17-provider-home-page.php) already constrains and centres it; a second max-width here
   would just be a second, possibly-disagreeing number to keep in sync with Divi's own row width.
   -------------------------------------------------------------------------- */
.cs-provider-hero,
.cs-provider-cost,
.cs-provider-how,
.cs-provider-estimator-wrap,
.cs-provider-fleet-wrap,
.cs-provider-boundaries,
.cs-provider-access {
	padding: var(--cs-space-2xl) 0;
}

.cs-provider-hero {
	padding-top: var(--cs-space-3xl);
	padding-bottom: var(--cs-space-3xl);
}

.cs-provider-hero__eyebrow {
	margin: 0 0 var(--cs-space-sm);
	color: var(--cs-brand-400);
	font-family: var(--cs-font-mono);
	font-size: var(--cs-text-sm);
	font-weight: 600;
	letter-spacing: var(--cs-tracking-label);
	text-transform: uppercase;
}

.cs-provider-hero h1 {
	max-width: 20ch;
	margin: 0 0 var(--cs-space-md);
	color: var(--cs-text-strong);
	font-size: var(--cs-text-3xl);
	line-height: var(--cs-leading-tight);
	letter-spacing: var(--cs-tracking-tight);
}

.cs-provider-hero__subhead {
	max-width: 62ch;
	margin: 0 0 var(--cs-space-lg);
	color: var(--cs-text-muted);
	font-size: var(--cs-text-md);
	line-height: var(--cs-leading-normal);
}

.cs-provider-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-space-sm);
}

/* Reuses .cs-button/.cs-button--secondary's fill/border/focus-ring rules (style.css) via the class
   pairing below rather than restating any of them — these two classes only carry the naming this
   page's content authors already used (wp-cli/content/provider-home.html). */
.cs-provider-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs-space-2xs);
	min-height: var(--cs-tap-target);
	padding: var(--cs-space-2xs) var(--cs-space-md);
	border: 1px solid var(--cs-brand-500);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-brand-500);
	color: var(--cs-on-brand);
	font-size: var(--cs-text-base);
	font-weight: 600;
	line-height: var(--cs-leading-snug);
	text-decoration: none;
	transition: background-color var(--cs-transition), border-color var(--cs-transition), color var(--cs-transition);
}

.cs-provider-hero__cta:hover,
.cs-provider-hero__cta:focus {
	background: var(--cs-brand-600);
	border-color: var(--cs-brand-500);
	color: var(--cs-on-brand);
}

.cs-provider-hero__cta--secondary {
	background: transparent;
	color: var(--cs-brand-400);
}

.cs-provider-hero__cta--secondary:hover,
.cs-provider-hero__cta--secondary:focus {
	background: var(--cs-surface-accent);
	border-color: var(--cs-brand-400);
	color: var(--cs-text-on-accent);
}

.cs-provider-hero__cta:focus-visible {
	outline: 3px solid var(--cs-link);
	outline-offset: 2px;
}

.cs-provider-cost h2,
.cs-provider-how h2,
.cs-provider-boundaries h2,
.cs-provider-access h2,
.cs-provider-fleet-wrap h2 {
	margin: 0 0 var(--cs-space-sm);
	color: var(--cs-text-strong);
	font-size: var(--cs-text-2xl);
	line-height: var(--cs-leading-snug);
}

.cs-provider-cost p,
.cs-provider-how li,
.cs-provider-boundaries p,
.cs-provider-access p,
.cs-provider-fleet-wrap > p {
	max-width: 68ch;
	color: var(--cs-text);
	line-height: var(--cs-leading-normal);
}

.cs-provider-how ul {
	display: grid;
	gap: var(--cs-space-sm);
	max-width: 68ch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-provider-how li {
	max-width: none;
	padding-left: var(--cs-space-md);
	border-left: 3px solid var(--cs-brand-400);
}

.cs-provider-estimator-wrap {
	max-width: 48rem;
}

.cs-provider-fleet-wrap > p {
	margin: 0 0 var(--cs-space-lg);
	color: var(--cs-text-muted);
}

/* -----------------------------------------------------------------------------
   #cs-provider-hero's decorative orbit ring (wp-cli/content/provider-home.html). Purely decorative
   (`aria-hidden`, no content, `pointer-events: none`) — never a signal, never load-bearing for
   comprehension, matching docs/49 §49.7's "one sci-fi flourish the system allows itself" precedent
   (the card top-edge gradient) rather than inventing a second one. Desktop-only: at narrower widths
   the hero's own text needs the room this ring would otherwise sit behind, and a decorative element
   competing with the hero's actual message is a worse trade on a small screen than just not showing it.
   -------------------------------------------------------------------------- */
.cs-provider-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.cs-provider-hero__orbit {
	display: none;
	position: absolute;
	top: 50%;
	right: -12rem;
	width: 34rem;
	height: 34rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0%,
		var(--cs-brand-500) 6%,
		transparent 18%,
		transparent 74%,
		var(--cs-accent-400) 84%,
		transparent 96%
	);
	opacity: 0.16;
	filter: blur(1px);
	z-index: -1;
	pointer-events: none;
}

@media (min-width: 61.25em) {
	.cs-provider-hero__orbit {
		display: block;
	}
}

@media (min-width: 61.25em) and (prefers-reduced-motion: no-preference) {
	.cs-provider-hero__orbit {
		animation: cs-provider-hero-orbit-spin 90s linear infinite;
	}
}

@keyframes cs-provider-hero-orbit-spin {
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

/* -----------------------------------------------------------------------------
   [cs_capacity_estimator] — reuses .cs-leg-detail__specs / .cs-leg-detail__specs-bar-cell /
   .cs-leg-detail__capacity-bar-fill / .cs-leg-detail__specs-bar-text / .cs-leg-detail__disclosure /
   .cs-button as-is (style.css); only the parts genuinely new to this component are styled here.
   -------------------------------------------------------------------------- */
/* qa-2 finding (2026-08-24, Playwright measurement at 320px): the fixed-width
   .cs-capacity-estimator__range-row number input overflows under content-box sizing (~146px
   computed instead of the intended 120px, once its own padding/border are added in rather than
   consumed by it). Scoped border-box, matching the exact established pattern this codebase already
   uses for the same reason (divi-child/style.css ~L615-625, `.cs-leg-card *` / `.cs-leg-summary *` /
   `.cs-transport-request *`) rather than assuming Divi core's own reset reaches this component. */
.cs-capacity-estimator,
.cs-capacity-estimator * {
	box-sizing: border-box;
}

.cs-capacity-estimator {
	padding: var(--cs-space-lg) var(--cs-space-md);
	border: 1px solid var(--cs-border-surface);
	border-radius: var(--cs-radius-md);
	background: var(--cs-surface);
}

.cs-capacity-estimator__heading {
	margin: 0 0 var(--cs-space-2xs);
	color: var(--cs-text-strong);
	font-size: var(--cs-text-2xl);
	line-height: var(--cs-leading-snug);
}

.cs-capacity-estimator__intro {
	max-width: 62ch;
	margin: 0 0 var(--cs-space-lg);
	color: var(--cs-text-muted);
	line-height: var(--cs-leading-normal);
}

.cs-capacity-estimator__controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cs-space-md);
	margin-bottom: var(--cs-space-lg);
}

@media (min-width: 48em) {
	.cs-capacity-estimator__controls {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cs-capacity-estimator__field--range {
		grid-column: 1 / -1;
	}
}

.cs-capacity-estimator__field {
	display: flex;
	flex-direction: column;
	gap: var(--cs-space-3xs);
}

.cs-capacity-estimator__field label {
	color: var(--cs-text-muted);
	font-size: var(--cs-text-sm);
	font-weight: 600;
}

.cs-capacity-estimator__field select,
.cs-capacity-estimator__field input[type="number"] {
	min-height: var(--cs-tap-target);
	padding: var(--cs-space-2xs) var(--cs-space-xs);
	border: 1px solid var(--cs-border-strong);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-surface-sunken);
	color: var(--cs-text-strong);
	font-family: var(--cs-font-mono);
	font-size: var(--cs-text-sm);
}

.cs-capacity-estimator__range-row {
	display: flex;
	align-items: center;
	gap: var(--cs-space-sm);
}

.cs-capacity-estimator__range-row input[type="range"] {
	flex: 1 1 auto;
	/* A native range track has no reliable cross-browser min-height, so the 44px tap target is given
	   as the whole element's box height rather than trying to inflate the track itself — qa-2
	   confirmed via Playwright (getBoundingClientRect()) this really does compute to a 44px-tall real
	   hit area, and browsers hit-test that whole box for drag/click, not just the visible thumb, so
	   no separate ::-webkit-slider-thumb/::-moz-range-thumb sizing rule is needed here. */
	min-height: var(--cs-tap-target);
	accent-color: var(--cs-brand-500);
	background: transparent;
}

.cs-capacity-estimator__range-row input[type="number"] {
	flex: 0 0 auto;
	width: 7.5rem;
}

.cs-capacity-estimator__field select:focus-visible,
.cs-capacity-estimator__field input:focus-visible {
	outline: 3px solid var(--cs-link);
	outline-offset: 2px;
}

.cs-capacity-estimator__result {
	padding-top: var(--cs-space-md);
	border-top: 1px solid var(--cs-border);
}

/* .cs-leg-detail__specs already provides the dt/dd grid at >=768px (style.css); below that it falls
   back to a plain stack, which reads fine for this component's single row. */
.cs-capacity-estimator__specs {
	margin: 0 0 var(--cs-space-sm);
}

.cs-capacity-estimator__gauge-row dt {
	color: var(--cs-text-muted);
	font-size: var(--cs-text-sm);
	font-weight: 600;
}

.cs-capacity-estimator__gauge-row dd {
	font-family: var(--cs-font-mono);
}

/* The estimator's fill width changes continuously as the visitor drags/types, unlike Leg Detail's
   static server-rendered gauge (which never needs a transition because its width never changes after
   render) — scoped to this component only, and gated on prefers-reduced-motion so a drag/keystroke
   never produces motion for a visitor who asked not to see any. */
@media (prefers-reduced-motion: no-preference) {
	.cs-capacity-estimator__gauge-row .cs-leg-detail__capacity-bar-fill {
		transition: width 150ms ease;
	}
}

.cs-capacity-estimator__disclosure {
	margin-bottom: var(--cs-space-md);
}

/* -----------------------------------------------------------------------------
   [cs_vehicle_showcase] — built on .cs-vehicle-index__list/__item/__link/__media/__name/
   __manufacturer (style.css) via the second class on each element (provider-home-widgets.php); only
   the badge/credit additions this card has and the index card doesn't are styled here.
   -------------------------------------------------------------------------- */
.cs-vehicle-showcase__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cs-space-2xs);
	/* .cs-vehicle-index__name carries its own top/side margin already — reset to 0 here so wrapping it
	   in this flex row doesn't double it. */
	margin: var(--cs-space-sm) var(--cs-space-sm) 0;
}

.cs-vehicle-showcase__title-row .cs-vehicle-index__name {
	margin: 0;
}

/* .cs-vehicle-hero__credit's own margin (var(--cs-space-lg) top) is calibrated for sitting inside a
   full-bleed hero scrim; inside this compact card that reads as too much air above a one-line credit. */
.cs-vehicle-showcase__item .cs-vehicle-hero__credit {
	margin: var(--cs-space-2xs) var(--cs-space-sm) var(--cs-space-sm);
}

.cs-vehicle-showcase__see-all {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cs-space-2xs);
	margin: var(--cs-space-lg) 0 0;
}