/* ==========================================================================
   NINE TYRES — Responsive layer
   Mobile-first content, desktop-down overrides.
   Breakpoints:  1180 (small desktop) · 1024 (tablet L) · 860 (tablet P) · 640 (mobile) · 420 (small mobile)
   ========================================================================== */

/* --------------------------------------------------------------------------
   SMALL DESKTOP  (≤ 1180px)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   NAV RAIL SCALING
   Nine long menu names at full size need ~1690px. Rather than hide the icons
   or clip a link, the rail steps down a size at a time as the screen narrows,
   then hands over to the drawer below 1340px.
   -------------------------------------------------------------------------- */
@media (max-width: 1749px) {
  .nav > a { padding: 11px 14px 13px; font-size: .87rem; gap: 6px; }
  .nav > a i { font-size: 20px; }
  .nav > a::after { left: 14px; right: 14px; }
}

@media (max-width: 1529px) {
  .nav > a { padding: 10px 9px 12px; font-size: .8rem; gap: 6px; }
  .nav > a i { font-size: 18px; }
  .nav > a::after { left: 9px; right: 9px; }
}

/* --------------------------------------------------------------------------
   NAV COLLAPSE  (≤ 1340px)
   Nine full-length menu names ("Buy Two Wheeler / Three Wheeler Tyre") stop
   fitting on one rail well before the tablet breakpoint, so the drawer takes
   over here — and the logo moves into the blue rail so it is never doubled.
   -------------------------------------------------------------------------- */
@media (max-width: 1340px) {
  .nav { display: none; }
  .burger { display: grid; }

  .header .container { justify-content: space-between; }
  .header__logo { display: flex; }

  .topbar__logo { display: none; }
  .topbar .container { grid-template-columns: auto 1fr; }
  .topbar__badge { justify-self: start; }
}

@media (max-width: 1180px) {
  :root { --gutter: 20px; }

  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .gallery { grid-auto-rows: 165px; }

  .bgrid--battery { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   TABLET LANDSCAPE  (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 64px; --topbar-h: 88px; }

  /* tablet: the featured offer spans the full width, the six cards stay 2-up */
  .offers { padding-top: 60px; padding-bottom: 60px; }
  .offers__layout { grid-template-columns: 1fr; gap: 24px; }
  .offers__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
  .feat__art svg { width: min(200px, 46%); }

  /* Face wall: fewer, larger tiles. At 12 columns on a tablet each face is ~55px and
     reads as noise rather than a person. Rows are re-sized to keep the wall full-bleed;
     the surplus tiles clip below the fold of the section. */
  .tstm__faces { grid-template-columns: repeat(8, 1fr); grid-auto-rows: 12.5%; }
  .tstm__head  { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Tyre finder: the columns stack. Side by side below this width the five selects get
     squeezed to about 130px each and their labels wrap. The photo drops under the card. */
  .thero { padding-block: 32px 60px; }
  .thero__grid { grid-template-columns: 1fr; gap: 40px; }
  .thero__side { max-width: 640px; }
  .thero__sub  { max-width: none; }
  .tcard { margin-top: 24px; }
  /* the chips hang off the frame's edges by design; with no column beside it to hang
     into, they would sit outside the container */
  .thero__chip--a { left: 14px; bottom: 14px; }
  .thero__chip--b { right: 14px; top: 14px; }
  .thero__shot-ring { display: none; }

  /* Hero: the copy takes the full width and the offer caption drops to the
     bottom of the banner, so the two never sit on top of each other. */
  .hero { min-height: 0; padding-block: 56px 300px; }
  .hero__copy { width: auto; max-width: none; }
  .hero .lead { max-width: none; }

  /* Arrows shrink with the screen but keep their lane, so the copy never
     runs underneath them */
  .hero { --arrow-size: 52px; --arrow-gap: 28px; --arrow-clear: 16px; }

  .hero .hero__slider .slide::after {
    background:
      linear-gradient(180deg, rgba(6, 43, 74, .9) 0%, rgba(6, 43, 74, .8) 45%, rgba(6, 43, 74, .92) 100%);
  }
  .hero .hero__slider .slide__body {
    left: var(--edge);
    right: var(--edge);
    bottom: 78px;
    width: auto;
  }
  .hero .hero__slider .slider__dots { bottom: 32px; left: 50%; transform: translateX(-50%); }
  .trust-list { margin-top: 28px; }

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

  .brand-lead { grid-template-columns: 1fr; }

  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__media { order: -1; }

  .enquiry-grid { grid-template-columns: 1fr; }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }

  .footer__grid { grid-template-columns: 1fr 1fr; }

  .auth-strip { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   TABLET PORTRAIT  (≤ 860px)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

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

  .cta-split { grid-template-columns: 1fr; }

  .section-head--split { flex-direction: column; align-items: flex-start; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 175px; }
  .gallery .g-wide { grid-column: span 2; }
  .gallery .g-tall { grid-row: span 1; }

  .slide .media { aspect-ratio: 16 / 11; }

  .brand-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .bgrid, .bgrid--battery { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* --------------------------------------------------------------------------
   MOBILE  (≤ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --header-h: 60px;
    --topbar-h: 72px;
  }

  body { font-size: 15px; }

  /* phone: 5 columns keeps each face recognisable, and the mask hole is widened
     because the quote card now takes nearly the whole width */
  .tstm { --tstm-mask: radial-gradient(96% 58% at 50% 56%,
      rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .16) 40%, rgba(0, 0, 0, .60) 66%, #000 90%); }
  .tstm__faces { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 9%; gap: 4px; }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-auto,
  .why-grid,
  .tyre-stats { grid-template-columns: 1fr; }

  .grid { gap: 16px; }

  .section { padding-block: 38px; }
  .section--why { padding-block: 48px; }
  .tstm { padding-block: 52px; }

  /* Brand bar on phones: the dealer badge steps aside so the number and the
     social icons sit on one comfortable row. */
  .topbar__badge { display: none; }
  .topbar .container { grid-template-columns: 1fr; }
  .topbar__right {
    justify-self: stretch;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .topbar__phone__num { font-size: .95rem; }
  .topbar__social { width: 34px; height: 34px; font-size: 14px; }
  .topbar__socials { gap: 6px; }
  .header__logo img { height: 34px; }

  /* Hero — the bottom padding reserves the band the offer caption sits in. A flat
     300px fitted the shortest caption only: the battery slide runs to three lines on
     a phone and rode up into the "always free" chips above it. The narrower the
     screen the more the caption wraps, so the band grows as the viewport shrinks. */
  .hero { padding-block: 56px clamp(300px, 700px - 100vw, 390px); }
  .hero { --arrow-size: 44px; --arrow-gap: 10px; --arrow-clear: 8px; }
  .hero .hero__slider .slider__nav i { font-size: 16px; }
  .hero .quick-cards { grid-template-columns: 1fr; gap: 10px; }
  .hero__badge { font-size: .78rem; }
  .hero .hero__slider .slide__body h3 { font-size: 1.35rem; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .trust-list { gap: 8px; }
  .trust-chip { font-size: .78rem; padding: 7px 13px 7px 7px; }

  /* Brands: two logo cards per row reads better than one tall column */
  .bgrid, .bgrid--battery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bcard { min-height: 112px; padding: 18px 12px; border-radius: 18px; }
  .bcard__word { font-size: .82rem; letter-spacing: .05em; }
  .bcat { margin-top: 40px; }
  .bcat__head { gap: 10px; }
  .bcat__title { font-size: .84rem; }

  /* Offers: one column throughout. The featured offer comes first in the DOM,
     so it stays first without any reordering. */
  .offers { padding-top: 46px; padding-bottom: 46px; }
  .offers__grid { grid-template-columns: 1fr; gap: 14px; }
  .feat { padding: 26px 22px 28px; }
  .feat__art svg { width: min(180px, 60%); }
  .ocard { padding: 22px 20px 44px; }

  /* Slider */
  .slider__nav { width: 38px; height: 38px; }
  .slider__nav--prev { left: 10px; }
  .slider__nav--next { right: 10px; }
  .slider__dots { bottom: 14px; right: 16px; }
  .slide .media { aspect-ratio: 4 / 3.4; }
  .slide__flag { top: 14px; right: 14px; padding: 9px 12px; }
  .slide__flag b { font-size: 1.1rem; }

  /* Stats: 2×2 stays, but tighter */
  .stat { padding: 20px 14px; }

  /* Cards */
  .card, .feature { padding: 22px 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }

  .steps { grid-template-columns: 1fr; }

  .spec-grid { grid-template-columns: 1fr 1fr; }

  /* CTA */
  .cta-band__actions .btn { flex: 1 1 100%; }

  /* Gallery */
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 10px; }
  .gallery .g-wide,
  .gallery .g-tall { grid-column: span 1; grid-row: span 1; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bar { flex-direction: column; text-align: center; gap: 12px; }
  .footer__bar nav { justify-content: center; gap: 16px; }

  /* Floating WhatsApp shrinks to a circle on phones */
  .fab-stack { right: 14px; bottom: 14px; gap: 10px; }
  .fab-wa { padding: 10px; border-radius: 50%; }
  .fab-wa span { display: none; }
  .fab-wa__ico { width: 32px; height: 32px; }
  .fab-top { width: 42px; height: 42px; }

  /* Modal fills more of the screen */
  .modal { padding: 12px; }
  .modal__box { max-height: 92vh; }

  /* Tables scroll horizontally rather than squashing */
  .tbl { min-width: 560px; }

  /* Panel tabs wrap */
  .panel__tabs { width: 100%; overflow-x: auto; }
  .panel__tab { white-space: nowrap; padding: 9px 16px; }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE  (≤ 420px)
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  /* the icon chip is gone, so the space it took now pays for the label —
     without it a bare number has nothing saying what it's for */
  .topbar__phone__pre { font-size: .76rem; }
  .topbar__phone__num { font-size: .9rem; }

  /* Tyre finder on a phone: one field per row, and the trust badges stack. Two columns
     of selects at 360px leaves each one too narrow to show its value. */
  .tcard { padding: 22px 18px 20px; border-radius: 22px; }
  .tcard__fields { grid-template-columns: 1fr; gap: 13px; }
  .tcard__trust  { grid-template-columns: 1fr; gap: 9px; }
  /* the tab icons go: with them, "Search by Tyre Size" clips to "Search by Tyre Siz"
     at 390px, and a truncated label is worse than no icon */
  .tcard__tab    { font-size: .82rem; gap: 0; padding: 12px 4px; }
  .tcard__tab svg { display: none; }
  .btn-lux { font-size: .96rem; padding: 16px 20px; }
  .thero__shot-frame { aspect-ratio: 4 / 3; border-radius: 20px; }
  .thero__chip { padding: 10px 13px; border-radius: 13px; }
  .thero__chip b { font-size: 1.05rem; }
  .thero__chip span { font-size: .68rem; }
  .topbar__social { width: 32px; height: 32px; }

  /* Narrow phones wrap the offer caption onto more lines — the band above grows to
     match, and the caption itself steps down a size to meet it halfway. */
  .hero { padding-top: 48px; }
  .hero .hero__slider .slide__body h3 { font-size: 1.2rem; }
  .hero .hero__slider .slide__body p { font-size: .84rem; }

  .btn { padding: 13px 20px; font-size: .9rem; }
  .btn--lg { padding: 15px 24px; font-size: .95rem; }

  .tyre-card__foot { flex-direction: column; }
  .btn--icon { width: 100%; aspect-ratio: auto; padding: 12px; }

  .rating-card { flex-direction: column; text-align: center; }

  .gallery { grid-template-columns: 1fr; grid-auto-rows: 180px; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .header, .fab-stack, .drawer, .scrim, .modal, .cta-band, .footer__social { display: none !important; }
  body { color: #000; }
  .card, .feature, .photo-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .reveal { opacity: 1 !important; transform: none !important; }
}