/* ==========================================================================
   vip-transport.css
   /vip-transport/ — VIP Chauffeur ("Chauffeur Service") light pricing screen.

   DESIGN MATH (why every number is what it is)
   - Spacing: every padding / gap / margin snaps to the 8px scale in tokens.css
     (--space-2xs 4 · -xs 8 · -sm 12 · -md 16 · -lg 24 · -xl 32 · -2xl 48 · -3xl 72).
   - Type:    sizes come from the fluid modular scale (--fs-*); hierarchy is set
     by weight + size, line-height tightens for display (~1.05) and opens for
     body (~1.6). No ad-hoc font clamps.
   - Layout:  the top bar and the body share ONE horizontal gutter
     (--container-pad); the head and the card grid center inside ONE column
     (--content-max); the two cards split on the GOLDEN RATIO (1 : 1.618) and
     stretch to equal height. One canary accent; off-black (#0d0d0d) service card.
   ========================================================================== */

/* 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;

  /* LIGHT SURFACE OVERRIDE (page-scoped): this stylesheet loads after
     tokens.css, so re-pointing the neutral tokens here flips ONLY
     /vip-transport/ to a warm off-white (#f3f1ed) background with dark text. The
     canary-yellow accent stays. Global dark tokens 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);

  /* --- Page layout constants (the "math") ------------------------------ */
  --gutter: var(--container-pad);          /* shared L/R page gutter: 20→48px */
  --content-max: 60rem;                    /* one centered column: 960px      */
  --card-pad: clamp(1.5rem, 1.2vw + 1.1rem, 2.5rem);  /* 24→40px             */
  --card-radius: var(--radius-lg);         /* 18px                            */
  --card-shadow: 0 18px 40px -12px rgba(13, 13, 13, 0.16); /* tinted, no glow */
  --flow: var(--space-lg);                 /* 24px vertical rhythm in a card  */

  /* Light text tints for the off-black service card (derived from #f4f5f7). */
  --on-dark:        #f4f5f7;
  --on-dark-muted:  rgba(244, 245, 247, 0.72);
  --on-dark-faint:  rgba(244, 245, 247, 0.55);
}

/* Border-box so padding never fights the grid track widths. This page loads
   only tokens.css (which sets no reset), so it must own this itself. */
*, *::before, *::after { box-sizing: border-box; }

.vip {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  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: var(--space-xs) var(--space-sm);
  font-weight: 700;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* ------------------------------------------------------------- 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);
}

/* Exact mirror of the homepage HUD logo: Plaster "Listing" mark + accent bold
   "Rent A Car" sub, on one baseline row. (Brand-mark sizing is intentional and
   shared site-wide — do not fold it into the type scale.) */
.topbar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55ch;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text);
  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;
  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);
}

/* Mini section-nav in the top-right (replaces the old eyebrow). Each link keeps
   the eyebrow's exact type treatment — fs-100, wide caps, faint — and lifts to
   the canary accent on hover / keyboard focus. */
.topbar__nav {
  display: flex;
  flex-wrap: wrap;                        /* wrap gracefully before it crowds the brand */
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);   /* row 12 (when wrapped) · column 24 */
}
.topbar__link {
  font-size: var(--fs-100);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.topbar__link:hover,
.topbar__link:focus-visible {
  color: var(--accent);                   /* canary on hover / focus */
}

/* ---------------------------------------------------------- pricing body --- */
.pricing {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;             /* anchor content under the bar — centering left too much void above the h1 on tall screens */
  gap: clamp(var(--space-xl), 4vw, var(--space-2xl));  /* head → grid: 32→48 */
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl)) var(--gutter);  /* top/bottom 24→48 */
}

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);                    /* 16px between headline and subhead */
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.pricing__title {
  margin: 0;
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 800;
  font-size: var(--fs-700);                /* 2→3rem — restrained, weight carries it */
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pricing__lead {
  margin: 0;
  max-width: 52ch;                         /* comfortable reading measure */
  color: var(--color-text-muted);
  font-size: var(--fs-400);                /* lead — one step above body */
  line-height: 1.55;
  text-wrap: pretty;                       /* avoid orphan last lines */
}

/* --- Two-card grid --------------------------------------------------------
   Mobile: single column. ≥52rem: golden-ratio split (service = major section),
   equal height via the grid's default `align-items: stretch`. */
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-md), 1.5vw, var(--space-lg));  /* 16→24 */
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}
/* Mobile (stacked, single column): lead with the service card so the
   "book a call" contact card sits at the BOTTOM (per user). The order resets at
   the 2-col breakpoint below, so desktop keeps contact-left / service-right. */
.pcard--service { order: -1; }
@media (min-width: 52rem) {
  .pricing__grid { grid-template-columns: 1fr 1.618fr; }  /* golden ratio */
  .pcard--service { order: 0; }                           /* restore DOM order */
}

.pcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
}

/* ======================================================================
   CONTACT CARD (left) — light, "Got a question?"
   Copy grouped at the top; the CTA sits at the bottom of the equalized card.
   ====================================================================== */
.pcard--contact {
  background: #f3f1ed;
  border: 1px solid var(--color-line);
  justify-content: space-between;          /* copy top · CTA bottom */
  gap: var(--flow);                        /* min copy→CTA gap = 24 */
}

/* Corner-anchored accent wedge, mirror of the service card's (24% x 28%).
   Dark text over canary stays high-contrast, so overlap here is safe. */
.pcard--contact::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24%;
  height: 28%;
  background: var(--accent);
  clip-path: polygon(100% 0, 100% 100%, 0 0);  /* top-right triangle */
  pointer-events: none;
}

.pcard__copy {
  position: relative;                      /* above the wedge */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);                    /* heading → text = 12 */
}
.pcard__heading {
  margin: 0;
  max-width: 16ch;                         /* keeps the heading clear of the wedge */
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: var(--fs-600);                /* 1.5→2rem (matches the service name) */
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.pcard__text {
  margin: 0;
  max-width: 30ch;
  color: var(--color-text-muted);
  font-size: var(--fs-300);
  line-height: 1.55;
}

/* "Book a call" — the site WhatsApp button, on the 8px grid.
   40px tall pill: 12/24 padding · 16px label · 8px icon gap · 20px glyph. */
.btn-whatsapp {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: #25D366;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px -6px rgba(13, 13, 13, 0.24);  /* tinted, not a green glow */
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-base, 0.2s) var(--ease-out),
              transform var(--dur-base, 0.2s) var(--ease-out),
              box-shadow var(--dur-base, 0.2s) var(--ease-out);
}
.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__icon { width: 20px; height: 20px; flex: none; }

/* ======================================================================
   SERVICE CARD (right) — off-black, the VIP offer
   ====================================================================== */
.pcard--service {
  background: #0d0d0d;
  color: var(--on-dark);
  gap: var(--flow);                        /* 24px between every block */
}

/* Mirrored corner wedge (bottom-right, 24% x 28%). Small + corner-anchored, and
   the content below is width-capped, so it never sits behind the light text. */
.pcard--service::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  height: 28%;
  background: var(--accent);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);  /* bottom-right triangle */
  opacity: 0.95;
  pointer-events: none;
}

.pcard__top {
  position: relative;
  z-index: 1;
}
.pcard__name {
  margin: 0;
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 700;
  font-size: var(--fs-600);                /* matches the contact heading */
  letter-spacing: -0.02em;
}
.pcard__rule {
  position: relative;
  z-index: 1;
  border: 0;
  height: 1px;
  margin: 0;
  background: rgba(255, 255, 255, 0.16);
}
.pcard__desc {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 44ch;
  color: var(--on-dark-muted);
  font-size: var(--fs-300);
  line-height: 1.6;
}

.pcard__price {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);                    /* label → amount = 4 (one unit) */
}
.pcard__price-label {
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--on-dark-faint);
  font-weight: var(--fw-semibold);
}
.pcard__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.pcard__amount {
  font-family: "Raleway", var(--font-display, var(--font-sans));
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3rem);    /* 36→48px focal price */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);                     /* the accent, used functionally */
}

.pcard__features {
  position: relative;
  z-index: 1;
  max-width: 34ch;                          /* stays left of the corner wedge */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);                     /* 12px between features */
}
.pcard__features li {
  position: relative;
  padding-left: var(--space-md);            /* 16px hang for the dot */
  font-size: var(--fs-300);
  line-height: 1.5;
  color: rgba(244, 245, 247, 0.9);
}
.pcard__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;                              /* optically centered on the first line */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------- entrance -------------- */
/* On-load reveal that mirrors the site's signature content animation — the
   revealContent() choreography in vehicles.js / bosnia-tours.js and the
   dashboard-tile stagger in home.js: each block fades up from +30px on a strong
   ease-out, staggered in reading order. This page ships no JS, so the cascade is
   pure CSS, but the motion is the same DNA: opacity 0->1, 30px rise, 0.6s, and
   --ease-out (the token equivalent of GSAP's power3.out).

   Scoped to `no-preference` so the hidden pre-state (the keyframe `from`, held
   through the delay by `both`) is NEVER applied under reduced motion — or if the
   animation can't run for any reason. Content then just renders at rest, fully
   visible; nothing can be stranded invisible. */
@media (prefers-reduced-motion: no-preference) {
  .topbar,
  .pricing__title,
  .pricing__lead,
  .pcard {
    animation: vip-rise 0.6s var(--ease-out) both;
  }

  /* Reading-order cascade; the 0.08s step mirrors the JS CONTENT_STAGGER. */
  .topbar         { animation-delay: 0.05s; }
  .pricing__title { animation-delay: 0.13s; }
  .pricing__lead  { animation-delay: 0.21s; }
  .pcard--contact { animation-delay: 0.29s; }
  .pcard--service { animation-delay: 0.37s; }
}

@keyframes vip-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------- responsive ------------ */
@media (max-width: 30rem) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .topbar__nav { justify-content: flex-start; }  /* nav sits left under the brand */
}

/* --------------------------------------------------- reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .btn-whatsapp { transition: none; }
}