/* Fleet: vehicle cards, the pinned rail, the grid with filters and compare, specs and gallery. */

/* ---------- Vehicle card ---------- */
.azb-vcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); background: var(--azb-raised); border: 1px solid var(--azb-line); }
.azb-vcard__media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--azb-surface); }
.azb-vcard__media img { width: 100%; height: 100%; object-fit: cover; }
.azb-vcard__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, color-mix(in srgb, var(--azb-bg) 75%, transparent) 100%); pointer-events: none; }
.azb-vcard__body { display: grid; gap: var(--s-4); padding: var(--s-6); align-content: start; flex: 1; }
.azb-vcard__class { margin: 0; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--azb-accent); }
.azb-vcard__name { margin: 0; font: 800 1.5rem/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.azb-vcard__name a { color: var(--azb-ink) !important; text-decoration: none; }
.azb-vcard__name a::after { content: ""; position: absolute; inset: 0; }
.azb-vcard { position: relative; }
.azb-vcard__similar { display: inline-block; font: 400 var(--fs-small)/1 var(--font-body); letter-spacing: 0; color: var(--azb-muted); }
.azb-vcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-2); }
.azb-vcard__foot .azb-btn, .azb-vcard__compare { position: relative; z-index: 2; }
.azb-vcard__compare { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-size: var(--fs-small); color: var(--azb-muted); cursor: pointer; }
.azb-vcard__compare input { width: 18px; height: 18px; accent-color: var(--azb-accent); }
@media (hover: hover) and (pointer: fine) {
	.azb-vcard { transition: border-color var(--dur-ui) var(--ease-out); }
	.azb-vcard:hover { border-color: color-mix(in srgb, var(--azb-accent) 45%, transparent); }
}

/* ---------- Rail ---------- */
.azb-rail { display: grid; gap: var(--s-8); }
.azb-rail__intro { display: grid; gap: var(--s-4); align-content: center; max-width: 30rem; }
.azb-rail__title { margin: 0; font: 800 var(--fs-h2)/1.04 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.azb-rail__lead { margin: 0; color: var(--azb-muted); }
.azb-rail__nav { display: flex; gap: var(--s-2); }
.azb-rail__btn { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--azb-ink); box-shadow: inset 0 0 0 1px var(--azb-line); cursor: pointer; }
.azb-rail__btn:hover { box-shadow: inset 0 0 0 1px var(--azb-ink); }
.azb-rail__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.azb-rail__viewport::-webkit-scrollbar { display: none; }
.azb-rail__track { display: flex; gap: var(--s-5); width: max-content; padding-bottom: var(--s-2); }
.azb-rail .azb-vcard { width: min(82vw, 380px); scroll-snap-align: start; }
@media (min-width: 1024px) {
	.azb-rail { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: center; gap: var(--s-12); }
	.azb-rail .azb-vcard { width: 400px; }
	/* When pinned, GSAP drives the track; native scrolling is switched off. */
	.azb-rail.is-pinned { min-height: calc(100dvh - var(--header-h)); overflow-x: clip; }
	.azb-rail.is-pinned .azb-rail__viewport { overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
	.azb-rail.is-pinned .azb-rail__nav { display: none; }
}

/* ---------- Grid with filters ---------- */
.azb-fgrid { display: grid; gap: var(--s-8); }
.azb-fgrid__filters { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); align-items: flex-end; justify-content: space-between; }
.azb-fgrid__pax { display: grid; gap: var(--s-2); min-width: 200px; font-size: var(--fs-small); color: var(--azb-muted); }
.azb-fgrid__list { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
.azb-fgrid__list .azb-vcard[hidden] { display: none; }
@media (min-width: 768px) { .azb-fgrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.azb-fgrid__empty, .azb-fgrid__partner { margin: 0; color: var(--azb-muted); }
.azb-fgrid__partner { padding-top: var(--s-5); border-top: 1px solid var(--azb-line); }

/* Compare drawer: slides up in 240ms, closes faster. */
.azb-compare { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; }
.azb-has-mbar .azb-compare { bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .azb-has-mbar .azb-compare { bottom: 0; } }
.azb-compare__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); max-width: var(--container); margin: 0 auto var(--s-4); padding: var(--s-3) var(--s-4); background: var(--azb-raised); border: 1px solid var(--azb-line); border-radius: var(--radius-card); box-shadow: var(--azb-shadow); width: calc(100% - 2 * var(--gutter)); }
.azb-compare__count { margin: 0 auto 0 0; font-size: var(--fs-small); color: var(--azb-muted); }
.azb-compare__panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80dvh; overflow: auto; background: var(--azb-surface); border-top: 1px solid var(--azb-line); box-shadow: var(--azb-shadow); padding: var(--s-10) var(--gutter); transform: translateY(0); transition: transform 240ms var(--ease-out); }
.azb-compare__panel.is-closing { transform: translateY(100%); transition-duration: 180ms; }
.azb-compare__panel.is-entering { transform: translateY(100%); }
.azb-compare__close { position: absolute; top: var(--s-4); right: var(--s-4); width: var(--tap); height: var(--tap); display: grid; place-items: center; background: transparent; border: 0; color: var(--azb-ink); cursor: pointer; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--azb-line); }
.azb-compare__table { max-width: var(--container); margin-inline: auto; overflow-x: auto; }
.azb-compare__table table { min-width: 560px; font-size: var(--fs-small); }
.azb-compare__table th { color: var(--azb-muted); font-weight: 500; width: 160px; }
.azb-compare__table td { font-variant-numeric: tabular-nums; }

/* ---------- Vehicle specs ---------- */
.azb-vspec { display: grid; gap: var(--s-6); }
.azb-vspec__list { display: grid; gap: var(--s-3); margin: 0; }
.azb-vspec__list div { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--azb-raised); border-radius: var(--radius-card); }
.azb-vspec__list dt { display: flex; align-items: center; gap: var(--s-3); color: var(--azb-ink); }
.azb-vspec__list dt .azb-icon { color: var(--azb-accent); }
.azb-vspec__list dd { margin: 0; font: 500 1.375rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.azb-vspec__sub { margin: 0; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--azb-muted); }
.azb-vspec__amen { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.azb-vspec__amen li { display: flex; align-items: center; gap: var(--s-3); }
.azb-vspec__amen .azb-icon { color: var(--azb-accent); }
.azb-vspec__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--azb-line); }

/* ---------- Gallery ---------- */
.azb-gallery { display: grid; gap: var(--s-3); }
.azb-gallery__main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-card); scrollbar-width: none; background: var(--azb-surface); }
.azb-gallery__main::-webkit-scrollbar { display: none; }
.azb-gallery__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 16 / 10; }
.azb-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.azb-gallery__thumbs { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.azb-gallery__thumb { flex: 0 0 72px; height: 56px; padding: 0; border: 0; border-radius: var(--radius-input); overflow: hidden; cursor: pointer; opacity: 0.6; background: none; }
.azb-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.azb-gallery__thumb[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--azb-accent); }