/* ==========================================================================
   vehicles.css
   /vehicles/ — 1:1 panel expand/collapse fleet (gtheimagineers mechanic).

   Pure-black void, hairline white strokes, heavy negative space. A single
   green accent knob drives every active state. Cars are horizontal flex
   panels that fill the viewport: equal columns by default, one grows to ~66%
   on click while the rest tuck into thin strips on both sides.

   The ONLY accent knob:
     --accent      vivid green for active states / ticks / numbers
   ========================================================================== */

/* Vendored display face for the brand wordmark (mirrors the homepage logo). */
@font-face {
  font-family: 'Plaster';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/plaster.woff2') format('woff2');
}

:root {
  --accent: #e5ff00;
  --strip-min: 56px;
  --panel-line: var(--color-line, rgba(0, 0, 0, 0.14));
  /* keep in sync with PANEL.FLEX_DURATION / PANEL.FLEX_EASE in vehicles.js */
  --flex-duration: 0.8s;
  --flex-ease: cubic-bezier(0.25, 1, 0.5, 1);

  /* LIGHT SURFACE OVERRIDE (page-scoped): this stylesheet loads after
     tokens.css, so re-pointing the neutral tokens here flips ONLY /vehicles/
     to a warm off-white (#f3f1ed) background with dark text. The canary-yellow accent
     stays. Global dark tokens (homepage/subpages) are untouched. */
  --color-bg: #f3f1ed;
  --color-text: #0d0d0d;
  --color-text-muted: #4a4a4a;
  --color-text-faint: #8a8a8a;
  --color-line: rgba(0, 0, 0, 0.14);
  --color-bg-raised: rgba(0, 0, 0, 0.05);
}

.vehicles {
  margin: 0;
  background: var(--color-bg, #000);
  color: var(--color-text, #f4f5f7);
  font-family: var(--font-sans);
  height: 100svh;
  overflow: hidden;                 /* fixed-viewport console */
  display: flex;
  flex-direction: column;
}

/* Keyboard skip target. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--accent);
  color: #000;
  padding: 0.5rem 0.9rem;
  font-weight: 700;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* ------------------------------------------------------------- top bar ----- */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  /* STANDARD BAR (site-wide): one exact size on every light page —
     --header-h (4.5rem) tall, --container-pad inline gutter; content
     centers inside the fixed band. box-sizing is pinned here because some of
     these pages set a global border-box reset and others don't — without it
     the same min-height + padding renders 72px on one page and 96px on
     another. Keep this block in sync across
     vehicles / bosnia-tours / vip-transport / faqs / about-listing. */
  box-sizing: border-box;
  min-height: var(--header-h);
  padding: var(--space-sm) var(--container-pad);
}

/* Mirror of the homepage HUD logo: Plaster "Listing" mark + bold "Rent A Car"
   sub on one baseline row (sub is tiger-flame here, not canary — light bg). */
.topbar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55ch;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text, #f4f5f7);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight, -0.01em);
  white-space: nowrap;
}
.topbar__brand strong {
  font-family: 'Plaster', var(--font-display, sans-serif);
  font-weight: 400; /* Plaster is single-weight */
  font-size: calc(var(--fs-400) * 1.2);
  text-transform: uppercase;
}
.topbar__brand span {
  font-size: calc(var(--fs-100) * 1.35);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps, 0.12em);
  text-transform: uppercase;
  /* Tiger-flame (the intro orange) instead of canary: on the light page
     background the canary sub-line has almost no contrast. */
  color: var(--color-accent-hi);
}

/* ------------------------------------------------- category pill --------- */
/* iOS-segmented-control-style filter: equal ICON segments on a bordered pill
   track; a canary thumb glides behind the active one on an Apple spring-ish
   curve (the same family as the panels' --flex-ease). A live status label in
   the topbar-eyebrow type style names the active category beside the pill.
   DOM is built by the page JS (renderFilter); the JS only writes the thumb's
   width/translateX — ALL motion lives here.
   KEEP IN SYNC with the identical block in bosnia-tours.css. */
.filterbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.catpill__status {
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-faint, #777);
  white-space: nowrap;
}
.catpill {
  position: relative;                /* thumb offsets resolve against this */
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-line, rgba(0, 0, 0, 0.14));
  border-radius: var(--radius-pill, 999px);
  background: var(--color-bg-raised, rgba(0, 0, 0, 0.05));
}
.catpill__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;                           /* JS: translateX(activeBtn.offsetLeft) */
  width: 0;                          /* JS: activeBtn.offsetWidth */
  border-radius: var(--radius-pill, 999px);
  background: var(--accent);
  box-shadow: 0 2px 10px rgba(13, 13, 13, 0.18);
  will-change: transform;
  transition:
    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
    width     0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.catpill__seg {
  position: relative;
  z-index: 1;                        /* icons ride above the thumb */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;                    /* equal segments — thumb math is exact */
  height: 2.25rem;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: var(--radius-pill, 999px);
  color: var(--color-text-faint, #777);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease, transform 0.18s ease;
}
.catpill__seg:hover { color: var(--color-text, #0d0d0d); }
.catpill__seg:active { transform: scale(0.92); }   /* Apple press-shrink */
.catpill__seg.is-active { color: #0d0d0d; }        /* glyph on the canary thumb */
.catpill__seg:focus-visible {
  outline: 2px solid var(--color-accent-hi, #ff5a1f);
  outline-offset: 2px;
}
.catpill__icon {
  width: 1.3rem;
  height: 1.3rem;
  display: block;
}

/* ----------------------------------------------------------- panel row ----- */
.panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;          /* only scrolls if min-widths genuinely overflow */
  overflow-y: hidden;
  scrollbar-width: none;
}
.panels::-webkit-scrollbar { display: none; }

/* A panel: equal column by default; grows via flex-grow when expanded. */
.panel {
  position: relative;
  flex: 1 1 0;
  min-width: var(--strip-min);
  display: block;
  overflow: hidden;
  border-left: 1px solid var(--panel-line);
  cursor: pointer;
  /* Animate flex-grow, not width. Fast-out, decelerate-in premium glide. */
  transition: flex-grow var(--flex-duration) var(--flex-ease);
}
.panel:first-child { border-left: 0; }

/* The expanded panel: width comes purely from the inline flex-grow JS sets
   (= 2 * (panelCount - 1), i.e. ~66%). No min-width override here — swapping
   min-width instantly would fight the flex-grow glide and squeeze neighbours. */
.panel.is-expanded {
  cursor: default;
}

/* Vertical label (number + name), shown in equal + compressed states. */
.panel__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2vh, 1.6rem);
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: clamp(1rem, 3vh, 2rem) 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  color: inherit;
  font: inherit;
  writing-mode: vertical-rl;
  transform: rotate(180deg);        /* read bottom-to-top */
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.panel__num {
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.06em;
  color: var(--color-text-faint, #777);
  transition: color 0.2s ease;
}
.panel__title {
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted, #b3b3b3);
  white-space: nowrap;
}
/* Hover on a non-expanded panel shifts its number to the accent. */
.panel:not(.is-expanded):hover .panel__num { color: var(--accent); }
.panel:not(.is-expanded):hover .panel__title { color: var(--color-text, #f4f5f7); }
.panel__label:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -6px;
}
/* On expand the vertical label fades out as the inner content comes in. */
.panel.is-expanded .panel__label {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------- expanded inner -------- */
.panel__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding: clamp(1.4rem, 3.2vw, 3rem) clamp(1.4rem, 3.5vw, 3.4rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.panel.is-expanded .panel__inner {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* LEFT: the bordered INTERACTIVE PREVIEW frame with accent corner ticks. */
.preview {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--panel-line);
  overflow: hidden;
}
.preview::before {
  content: "";
  position: absolute;
  inset: 14px;
  background:
    linear-gradient(var(--accent), var(--accent)) left top,
    linear-gradient(var(--accent), var(--accent)) left top,
    linear-gradient(var(--accent), var(--accent)) right top,
    linear-gradient(var(--accent), var(--accent)) right top,
    linear-gradient(var(--accent), var(--accent)) left bottom,
    linear-gradient(var(--accent), var(--accent)) left bottom,
    linear-gradient(var(--accent), var(--accent)) right bottom,
    linear-gradient(var(--accent), var(--accent)) right bottom;
  background-repeat: no-repeat;
  background-size: 14px 1px, 1px 14px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 3;
}
.preview__cap {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-faint, #777);
  transition: opacity 0.3s ease;
}
/* The car photo fills the frame and fades in once loaded. */
.preview__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.preview.is-live .preview__photo { opacity: 1; }
.preview.is-live .preview__cap { opacity: 0; }

/* Grounded contact shadow beneath the transparent-PNG cars — DESKTOP ONLY
   (`.panels` is the desktop container; the mobile stage uses `.vehicles-mobile`,
   left flat per request). Two stacked drop-shadows follow each car's alpha
   silhouette, so there is NO per-car tuning and the shadow tracks the car
   through object-fit:contain. Offset mostly straight DOWN (a hair right, to sit
   with the front-left studio light): the opaque car occludes its own upper
   silhouette, so only the soft pool below the tyres/underbody shows — the wheel
   gaps read as natural density variation. A tight dark core + a wider soft
   penumbra keep it believable without spreading far past the car. */
.panels .preview__photo {
  filter:
    drop-shadow(1px 8px 6px rgba(0, 0, 0, 0.30))
    drop-shadow(2px 20px 17px rgba(0, 0, 0, 0.17));
}

/* RIGHT: car name, lede, body, price, divider, specs. */
.panel__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
  min-width: 0;
  max-width: 46rem;
}
.panel__name {
  margin: 0;
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.panel__lede {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--color-text, #f4f5f7);
}
.panel__body {
  margin: 0;
  max-width: 44ch;
  color: var(--color-text-muted, #b3b3b3);
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.6;
}
.panel__price {
  margin: clamp(0.4rem, 1.2vw, 0.9rem) 0 0;
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
}
.panel__price[data-on-request] { color: var(--color-text-muted, #b3b3b3); }
.panel__price-unit {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--color-text-faint, #777);
}
.panel__divider {
  width: 100%;
  height: 0;
  margin: clamp(0.4rem, 1vw, 0.8rem) 0;
  border: 0;
  border-top: 1px solid var(--panel-line);
}
/* Labelled spec pairs — same key/value vocabulary as the homepage featured
   tile. Desktop: an inline row. Mobile: a bordered 3-up grid (further down). */
.panel__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
}
.spec {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.spec__k {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint, #777);
}
.spec__v {
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  color: var(--color-text, #0d0d0d);
}

/* ---------------------------------------------------- WhatsApp CTA -------- */
/* The site's booking button, per car. Same 40px-pill recipe as the VIP page's
   "BOOK A CALL" — keep this block in sync with .btn-whatsapp in
   vip-transport.css (that stylesheet is not loaded here). box-sizing is pinned
   locally: /vehicles/ has no global border-box reset. */
.btn-whatsapp {
  box-sizing: border-box;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: #25d366;
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold, 700);
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--radius-pill, 999px);
  box-shadow: 0 8px 20px -6px rgba(13, 13, 13, 0.24);  /* tinted, not a green glow */
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-whatsapp:hover {
  background-color: #1ebe57;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(13, 13, 13, 0.30);
}
.btn-whatsapp:active { transform: translateY(1px); }   /* tactile press */
.btn-whatsapp:focus-visible {
  outline: 2px solid var(--color-accent-hi, #ff5a1f);
  outline-offset: 3px;
}
.btn-whatsapp__icon { width: 20px; height: 20px; flex: none; }
.panel__wa { margin-top: clamp(0.5rem, 1.4vw, 1rem); }

.noscript-note {
  margin: 0;
  padding: 1rem clamp(1.1rem, 3.5vw, 3rem);
  color: var(--color-text-muted, #b3b3b3);
}

/* Mobile-only structures hidden on desktop. */
.vehicles-mobile { display: none; }

/* ============================================================= MOBILE ===== */
@media (max-width: 56rem) {
  .vehicles {
    height: 100svh;
    overflow: hidden;
  }
  /* The horizontal flex-panel model is desktop-only. */
  .panels { display: none; }

  .vehicles-mobile {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 clamp(1rem, 5vw, 1.6rem) 1rem;
  }
  .vehicles-mobile[hidden] { display: none; }

  /* Every car in the category is built as a card up front (photo and all) and
     only the selected one is shown — see renderMobile in vehicles.js. */
  .vcard { display: none; }
  .vcard.is-active { display: block; }

  .vehicles-mobile .panel__inner {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    gap: 0.9rem;
    padding: 0 0 1.2rem;
  }
  .vehicles-mobile .preview {
    height: 34svh;
    min-height: 12rem;
  }

  /* Position counter + prev/next, directly under the photo: the card has to
     say "one of N" on its own — it is the only thing telling the visitor how
     many cars there are and how to reach them. */
  .vnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--panel-line);
  }
  .vnav__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;                    /* 44px touch target */
    height: 2.75rem;
    flex: none;
    appearance: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius-pill, 999px);
    color: var(--color-text, #0d0d0d);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, transform 0.18s ease;
  }
  .vnav__btn svg { width: 1.25rem; height: 1.25rem; display: block; }
  .vnav__btn:active { transform: scale(0.92); background: var(--color-bg-raised); }
  .vnav__count {
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    color: var(--color-text-faint, #777);
  }
  .vnav__count b {
    font-family: "Raleway", var(--font-display, var(--font-sans));
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text, #0d0d0d);
  }

  /* Reading order on the card: identity -> price -> hard facts -> the pitch ->
     the way to book. The desktop order puts the body copy above the price. */
  .vehicles-mobile .panel__text {
    max-width: none;
    gap: 0.85rem;
  }
  .vehicles-mobile .panel__name  { order: 1; font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .vehicles-mobile .panel__lede  { order: 2; font-size: 1.02rem; }
  .vehicles-mobile .panel__price { order: 3; margin: 0; }
  .vehicles-mobile .panel__specs { order: 4; }
  .vehicles-mobile .panel__body  { order: 5; max-width: none; }
  .vehicles-mobile .panel__wa    { order: 6; }
  /* The spec grid brings its own rules — the loose divider is redundant. */
  .vehicles-mobile .panel__divider { display: none; }

  /* Specs as a bordered 3-up grid: scannable at a glance, and it reads as a
     spec sheet rather than a sentence. */
  .vehicles-mobile .panel__specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--panel-line);
  }
  .vehicles-mobile .spec {
    box-sizing: border-box;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.4rem;
    text-align: center;
    border-left: 1px solid var(--panel-line);
  }
  .vehicles-mobile .spec:first-child { border-left: 0; }
  .vehicles-mobile .spec__v { font-size: 0.95rem; }

  /* Full-width CTA — the primary action on the card. */
  .vehicles-mobile .panel__wa {
    align-self: stretch;
    justify-content: center;
    padding: 0.95rem var(--space-lg);
    font-size: 1rem;
  }

  /* The category pill is DESKTOP-ONLY. On mobile the counter's arrows walk the
     entire fleet in one list, so filtering by type would only hide cars behind
     an extra control. */
  .filterbar { display: none; }
}

/* The pill only ever renders above 56rem now, so it never needs thumb-sizing
   or the stacked topbar the old mobile filter required: with just the brand on
   the bar, it stays a single row under the staggered-menu toggle. */
@media (max-width: 68rem) {
  .catpill__status { display: none; }   /* pill alone once the bar gets tight */
}

@media (max-width: 30rem) {
  .vehicles-mobile .preview { height: 30svh; min-height: 10rem; }
}

/* --------------------------------------------------- reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel__label,
  .preview__photo,
  .preview__cap,
  .catpill__thumb,
  .catpill__seg,
  .btn-whatsapp,
  .vnav__btn {
    transition: none;
  }
  .catpill__seg:active,
  .vnav__btn:active,
  .btn-whatsapp:hover,
  .btn-whatsapp:active { transform: none; }
}