/* ==========================================================================
   RESPONSIVE
   --------------------------------------------------------------------------
   Mobile-first media queries. Base styles (other files) target phones;
   each block below adds layout for wider screens.

   Breakpoints (mirrored in variables.css → --bp-*)
     576px   Large phones / small tablets
     768px   Tablets
     992px   Laptops (desktop navigation, sidebars)
     1200px  Desktops

   Contents
     1. ≥ 576px
     2. ≥ 768px
     3. ≥ 992px
     4. ≥ 1200px
     5. Sticky booking card (desktop)
     6. Reduced motion
     7. Print
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ≥ 576px
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  /* Header */
  .header__cta {
    display: inline-flex;
  }

  /* Grids */
  .car-grid,
  .service-grid,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid .field--full {
    grid-column: 1 / -1;
  }

  /* Home */
  .hero__actions .btn {
    flex: 0 0 auto;
  }

  /* Fleet */
  .fleet-search {
    flex: 1 1 16rem;
    max-width: 24rem;
  }

  .sort__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  /* Contact */
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .req-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .req-item {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* --------------------------------------------------------------------------
   2. ≥ 768px
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Footer: brand + newsletter full width, three link columns between */
  .footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__col--contact {
    grid-column: auto;
  }

  /* Home */
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .stats__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .slider__track {
    grid-auto-columns: calc((100% - var(--slider-gap)) / 2);
  }

  .toast-region {
    justify-items: end;
  }

  .map {
    aspect-ratio: 21 / 9;
  }

  /* Car details */
  .quick-specs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .spec-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inclusions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-table th,
  .price-table td {
    padding: var(--space-4) var(--space-5);
  }

  .gallery__thumbs {
    gap: var(--space-4);
    margin-block-start: var(--space-4);
  }
}


/* --------------------------------------------------------------------------
   3. ≥ 992px
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  :root {
    --header-height: 76px;
  }

  /* Header: full navigation replaces the menu button */
  .header__nav {
    display: block;
  }

  .header__toggle {
    display: none;
  }

  /* Language & currency: desktop dropdown anchored to the button, which is
     a round globe until 1200px; the WhatsApp button returns beside it */
  .locale {
    position: relative;
  }

  .header__inner {
    gap: var(--space-4);
  }

  .header__actions {
    gap: var(--space-2);
  }

  .locale__trigger {
    width: 42px;
    padding: 0;
  }

  .locale__trigger .icon:not(.locale__chevron) {
    display: block;
  }

  .locale__value {
    display: none;
  }

  .locale__panel {
    inset-block-start: calc(100% + 12px);
    inset-inline: auto 0;
    width: 352px;
    max-width: none;
    margin: 0;
  }

  .header__whatsapp {
    display: inline-grid;
  }

  .logo__word {
    font-size: 1.5rem;
  }

  /* Footer: five columns */
  .footer__main {
    grid-template-columns: 1.3fr 0.7fr 0.8fr 1.2fr 1.5fr;
    gap: var(--space-8);
  }

  .footer__brand,
  .footer__col--newsletter {
    grid-column: auto;
  }

  /* Header: logo | centred navigation | actions */
  .header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .header__inner > .logo {
    justify-self: start;
  }

  /* Floating photos around the closing call to action */
  .cta-section {
    position: relative;
  }

  .cta__gallery {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: calc(var(--container-max) + 12rem);
    margin-inline: auto;
    pointer-events: none;
  }

  .cta__photo--1 { inset-block-start: 8%;  inset-inline-start: 2%;  width: 13rem; aspect-ratio: 4 / 3; }
  .cta__photo--2 { inset-block-start: 42%; inset-inline-start: 7%;  width: 11rem; aspect-ratio: 1;     animation-delay: -3s; }
  .cta__photo--3 { inset-block-end: 4%;    inset-inline-start: 20%; width: 9rem;  aspect-ratio: 4 / 3; animation-delay: -6s; }
  .cta__photo--4 { inset-block-start: 6%;  inset-inline-end: 3%;    width: 12rem; aspect-ratio: 1;     animation-delay: -2s; }
  .cta__photo--5 { inset-block-start: 48%; inset-inline-end: 9%;    width: 13rem; aspect-ratio: 4 / 3; animation-delay: -5s; }
  .cta__photo--6 { inset-block-end: 3%;    inset-inline-end: 24%;   width: 8rem;  aspect-ratio: 1;     animation-delay: -8s; }

  /* Grids */
  .car-grid,
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Why choose us: intro + 2×3 features */
  .why__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
    align-items: center;
  }

  /* How it works: four steps joined by a hairline */
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .step {
    min-height: 18rem;
  }

  .slider__track {
    grid-auto-columns: calc((100% - var(--slider-gap) * 2) / 3);
  }

  /* FAQ: sticky intro beside the accordion */
  .faq__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(3rem, 1rem + 4vw, 5rem);
  }

  .faq__intro {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-8));
  }

  /* Fleet: sidebar + results */
  .fleet__layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-8);
  }

  .filters-toggle {
    display: none;
  }

  .car-grid--fleet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Drawer that becomes a static sidebar (fleet filters) */
  .drawer--static-lg {
    position: static;
    z-index: auto;
    visibility: visible;
    transition: none;
  }

  .drawer--static-lg .drawer__overlay,
  .drawer--static-lg .drawer__close,
  .drawer--static-lg .drawer__footer {
    display: none;
  }

  .drawer--static-lg .drawer__panel {
    position: static;
    width: auto;
    overflow: visible;
    background: var(--color-bg-alt);
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: none;
    transform: none;
    transition: none;
  }

  .drawer--static-lg .drawer__header {
    min-height: 0;
    padding: var(--space-5) var(--space-5) var(--space-4);
  }

  .drawer--static-lg .drawer__body {
    overflow: visible;
    padding-block: 0 var(--space-2);
  }

  /* Car details: content + booking column */
  .car-detail__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
      "gallery booking"
      "summary booking"
      "info booking";
    gap: var(--space-10) clamp(2rem, 0.5rem + 3vw, 3.5rem);
  }

  .car-detail__booking {
    align-self: start;
  }

  /* Contact */
  .contact-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .contact-card {
    flex-direction: column;
  }

  .contact-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
  }

  .req-item {
    flex-direction: row;
    align-items: center;
  }
}


/* --------------------------------------------------------------------------
   4. ≥ 1200px
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .locale__trigger {
    width: auto;
    padding-inline: 0.875rem 0.75rem;
  }

  .locale__value {
    display: inline-flex;
    gap: 0.5rem;
  }

  .locale__trigger .locale__chevron {
    display: block;
  }

  .car-grid--fleet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .car-grid--fleet .car-card__body {
    padding-inline: var(--space-2);
  }

  /* Mega menu: brand tiles | categories | photo card */
  .mega__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.75fr);
  }

  .mega__promo {
    display: block;
  }
}


/* ≥ 1280px: room for the call button next to the language & currency pill */
@media (min-width: 1280px) {
  .header__phone {
    display: inline-grid;
  }
}


/* --------------------------------------------------------------------------
   5. Sticky booking card (desktop)
   The card never grows taller than the viewport: on short screens it
   scrolls inside itself, so the Book Now button is always reachable.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .car-detail__booking {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-6));
  }

  .booking-card {
    max-height: calc(100vh - var(--header-height) - var(--space-12));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}


/* --------------------------------------------------------------------------
   6. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   7. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .floating-actions,
  .toast-region,
  .cta-section,
  .skyline,
  .gallery__nav,
  .booking-card__actions {
    display: none !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  body {
    color: #000;
  }
}