/* =====================================================================
   UK Car Buyers — responsive.css
   Breakpoints: 1024 (tablet), 760 (mobile), plus landscape tweaks.
   ===================================================================== */

/* ── Large tablet / small desktop ────────────────────────────── */
@media (max-width:1024px){
  .buy-grid{grid-template-columns:repeat(2,1fr)}
  .car-grid{grid-template-columns:repeat(3,1fr)}
  .review-grid{grid-template-columns:repeat(2,1fr)}
  .footer-main__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-usps__grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .hero__grid{grid-template-columns:1fr;gap:2rem}
  .hero .val-card{max-width:520px}
}

/* ── Tablet / mobile: switch to off-canvas nav ───────────────── */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{flex-direction:column;gap:.2rem;width:100%}
  .nav-links a{padding:.9rem 1rem;font-size:1.1rem;text-align:center;border-radius:10px}
  .nav-menu{
    position:fixed;top:0;right:0;height:100%;width:min(360px,86vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:1rem;padding:4.5rem 1.4rem 2rem;
    transform:translateX(100%);transition:transform .28s ease;z-index:1001;overflow-y:auto;
    box-shadow:-12px 0 40px rgba(14,35,64,.2)
  }
  body.nav-open .nav-menu{transform:translateX(0)}
  .nav-close{display:block;position:absolute;top:1rem;right:1.2rem;background:transparent;border:0;font-size:2.2rem;line-height:1;color:var(--navy);cursor:pointer}
  .nav-cta{text-align:center;margin-top:.5rem}
  .main-nav{min-height:64px}
  .brand__logo{height:46px}
  :root{--header-h:104px}
}

/* ── Mobile portrait ─────────────────────────────────────────── */
@media (max-width:760px){
  body{font-size:16px;padding-bottom:60px}          /* room for sticky bar */
  .top-bar__contact{gap:.9rem}
  .top-bar__pill{display:none}
  .buy-grid{grid-template-columns:1fr 1fr}
  .car-grid{grid-template-columns:1fr 1fr}
  .review-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:2rem}
  .step::before{left:1.5rem}
  .split{grid-template-columns:1fr;gap:1.6rem}
  .form-grid{grid-template-columns:1fr}
  .footer-main__grid{grid-template-columns:1fr;gap:1.6rem}
  .footer-usps__grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .footer-bar__inner{flex-direction:column;text-align:center}
  .footer-legal{justify-content:center;flex-wrap:wrap}
  .cta-band__inner{flex-direction:column;text-align:center;align-items:center}
  .stats{grid-template-columns:1fr 1fr}
  .mobile-bar{display:grid}
  .img-trio{grid-template-columns:1fr 1fr 1fr}
  .btn{padding:.9rem 1.3rem}
  .hero{padding-top:calc(var(--header-h) + 1.4rem)}
}

/* ── Very small ──────────────────────────────────────────────── */
@media (max-width:400px){
  .buy-grid,.car-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .top-bar__contact li.hide-sm{display:none}
}

/* ── Mobile landscape (short height) ─────────────────────────── */
@media (max-height:500px) and (orientation:landscape){
  .nav-menu{padding-top:3.5rem}
  .hero{padding-top:calc(var(--header-h) + .8rem)}
}

/* ── Focus visibility (accessibility, all devices) ───────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px
}