/* ==========================================================================
   Shanthi Self Rental Cars — Adaptive breakpoints
   Breakpoints: 1600 / 1200 / 1024 / 900 / 768 / 600 / 480 / 375 / 320
   ========================================================================== */

/* ---------- Ultra-wide -------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container: 1340px; --container-wide: 1560px; --logo-h: 70px; }
  .hero__content { max-width: 48rem; }
}

/* ---------- Laptop ------------------------------------------------------ */
@media (max-width: 1200px) {
  :root { --logo-h: 58px; --nav-h: 78px; --nav-h-compact: 66px; }
  .footer__grid { grid-template-columns: 1.3fr 0.8fr 1.1fr 1.1fr; }
}

/* ---------- Tablet landscape / small laptop ----------------------------- */
@media (max-width: 1024px) {
  /* Five long labels plus the CTA cannot share the bar — swap to the drawer. */
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav-actions .btn--call-desktop { display: none; }

  /* Hero full background composition on tablet */
  .hero {
    min-height: 75vh;
    padding-top: calc(var(--nav-h) + 2.5rem);
    padding-bottom: 4rem;
  }
  .hero__bg-img {
    background-position: right 30% center;
  }
  .hero__content {
    max-width: 38rem;
  }
  .hero__scroll { display: none; }

  .spotlight { grid-template-columns: minmax(0, 1fr); }
  .spotlight__media { order: 1; }
  .spotlight__body  { order: 2; }

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

  .map__frame { aspect-ratio: 16 / 9; }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* ---------- Tablet portrait --------------------------------------------- */
@media (max-width: 900px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pillar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem 1.25rem;
  }
  .pillar__mark { display: none; }

  .car-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  .hero__bg-img {
    background-position: 65% center;
  }
}

/* ---------- Mobile: sticky action bar engages --------------------------- */
@media (max-width: 768px) {
  :root {
    --nav-h: 68px;
    --nav-h-compact: 62px;
    --logo-h: 50px;
    --sticky-bar-h: 68px;
  }

  .sticky-bar { display: flex; }

  .section + .section::before { background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }

  /* Full Hero mobile background with vertical gradient overlay */
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 2rem);
    padding-bottom: 3.5rem;
  }
  .hero__bg-img {
    background-position: 72% center;
  }
  .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(8, 10, 15, 0.94) 0%,
        rgba(8, 10, 15, 0.85) 55%,
        rgba(8, 10, 15, 0.60) 80%,
        rgba(8, 10, 15, 0.96) 100%
      ),
      linear-gradient(90deg, rgba(8, 10, 15, 0.8) 0%, transparent 100%);
  }
  [data-theme="light"] .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(253, 250, 243, 0.96) 0%,
        rgba(253, 249, 240, 0.88) 55%,
        rgba(252, 246, 230, 0.68) 80%,
        rgba(253, 250, 243, 0.97) 100%
      ),
      linear-gradient(90deg, rgba(253, 250, 243, 0.82) 0%, transparent 100%);
  }
  .hero__content {
    max-width: 100%;
  }

  .spotlight__meta { gap: 1rem; }

  .map__frame { aspect-ratio: 4 / 3; min-height: 320px; }

  .cta-band__actions .btn { flex: 1 1 240px; }

  .footer__watermark {
    font-size: clamp(3.5rem, 15vw, 6.5rem);
    bottom: 8%;
  }
  .footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
  }
}

/* ---------- Small mobile ------------------------------------------------ */
@media (max-width: 600px) {
  .services__grid {
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--radius-md);
  }
  .service__title { max-width: 24ch; }
  .service__desc  { max-width: none; }

  .car-grid { grid-template-columns: minmax(0, 1fr); }
  .car-card__media { aspect-ratio: 16 / 9; }

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

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }
  .footer .brand { --logo-h: 50px; }

  .hero__actions .btn { flex: 1 1 100%; }
  .cta-band__actions .btn { flex: 1 1 100%; }
}

/* ---------- 480px and under --------------------------------------------- */
@media (max-width: 480px) {
  :root { --gutter: 1.05rem; --logo-h: 40px; --nav-h: 62px; --nav-h-compact: 58px; }

  .navbar__inner { gap: 0.6rem; }

  .hero__tagline { gap: 0.4rem 0.75rem; }

  .spotlight { padding: 1.25rem; border-radius: var(--radius-lg); }
  .spotlight__actions .btn { flex: 1 1 100%; }

  .pillar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .pillar__index { font-size: 1.5rem; }

  .channel { gap: 0.6rem; }
  .channel__main { gap: 0.75rem; }
  .channel__icon { width: 44px; height: 44px; }
  .channel__icon svg { width: 21px; height: 21px; }

  .map__frame { aspect-ratio: 1 / 1; min-height: 300px; }

  /* Below 480px the numbers ellipsize mid-digit — drop them and keep the
     verb, which is what the tap target actually needs to say. */
  .sticky-bar .btn { font-size: 0.8rem; --btn-px: 0.6rem; }
  .sticky-bar__num { display: none; }
}

/* ---------- 375px (iPhone SE / mini) ------------------------------------ */
@media (max-width: 375px) {
  :root { --gutter: 0.9rem; --logo-h: 37px; }

  .btn { --btn-px: 1.3rem; }
  .upcoming__panel { padding: 1.25rem; }
  .cta-band { padding-inline: 1.1rem; }
  .drawer { width: min(92vw, 340px); }
}

/* ---------- 320px absolute floor ---------------------------------------- */
@media (max-width: 320px) {
  :root { --gutter: 0.75rem; --logo-h: 32px; }

  .theme-toggle { width: 58px; height: 30px; }
  .theme-toggle__thumb { width: 22px; height: 22px; }
  .theme-toggle[aria-checked="true"] .theme-toggle__thumb { transform: translateX(28px); }

  .chips { gap: 0.35rem; }
  .chip { padding: 0.35rem 0.6rem; font-size: 0.68rem; }
  .sticky-bar { gap: 0.4rem; padding-inline: 0.5rem; }
  .sticky-bar .btn { font-size: 0.7rem; gap: 0.35rem; }
  .sticky-bar .btn svg { width: 15px; height: 15px; }
}

/* ---------- Short viewports (landscape phones) -------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero__scroll { display: none; }
}

/* ---------- Pointer-coarse: drop hover-only lifts ----------------------- */
@media (hover: none) {
  .car-card:hover,
  .channel:hover,
  .pillar:hover,
  .btn:hover { transform: none; }
}

/* ---------- Print -------------------------------------------------------- */
@media print {
  .navbar, .drawer, .nav-scrim, .sticky-bar, .hero__scroll, .grain, .glow, .map { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  h1, h2, h3, .accent, .upcoming__title, .cta-band__shout { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .section { padding-block: 1.5rem; }
}