/* AutoGuru Workshop — Responsive rules (tablet + mobile) */

/* ---- Tablet (<=920px) ---- */
@media (max-width:920px){
  /* No hamburger/dropdown on tablet+mobile — the nav links wrap onto
     their own row within the header (2-row layout). Simpler and avoids
     any overlay-over-content bugs a toggled dropdown can introduce. */
  .menu-toggle{ display:none !important; }

  .nav{
    grid-template-columns:auto auto;
    grid-template-areas:
      "logo cta"
      "links links";
    row-gap:12px; column-gap:16px;
    padding:16px 24px;
  }
  .logo{ grid-area:logo; justify-self:start; }
  .nav-cta{ grid-area:cta; justify-self:end; }
  .nav-links{
    grid-area:links; justify-self:stretch;
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:8px 6px; width:100%;
    background:none; border:none; padding:14px 0 0; margin-top:0;
    border-top:1px solid var(--line);
  }
  .nav-links a{
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:2px;
    width:auto;
  }
  .nav-phone{ display:none; }

  .hero .wrap{ grid-template-columns:1fr; }
  .dial-wrap{ order:-1; margin-bottom:24px; }
  .dial{ max-width:440px; }
  .hero h1{ font-size:36px; }
  .hero-stats{ grid-template-columns:1fr; }

  .photo-strip-grid{ grid-template-columns:1fr 1fr; }
  .photo-strip-grid figure:first-child{ grid-column:1 / -1; }

  .bays{ grid-template-columns:1fr 1fr; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .stat .n{ min-height:auto; }
  .cb-grid, .contact-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .rev-grid{ grid-template-columns:1fr; }

  .brand-logo{ height:108px; max-width:235px; }
  .brand-track{ gap:58px; }

  #services, #why, #callback, #callback-form, #reviews, #contact{ scroll-margin-top:150px; }
}

/* ---- Mobile (<=560px) ---- */
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  section{ padding:56px 0; }

  /* Header: logo and Get a Quote share the top row, nav links wrap
     onto their own row(s) below, form-fitted to how many will fit. */
  .nav{ padding:14px 18px; }
  .logo{ font-size:20px; gap:10px; }
  .logo img{ height:48px; width:48px; }
  .nav-cta .btn{ padding:11px 18px; font-size:13.5px; }
  .nav-links a{ font-size:13px; padding:7px 12px; }

  .dial{ max-width:300px; }

  .hero{ padding:36px 0 48px; }
  .hero h1{ font-size:28px; }
  .hero p.lead{ font-size:15px; }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-actions .btn{ justify-content:center; text-align:center; }

  .bays{ grid-template-columns:1fr; }
  .bay{ padding:30px 24px; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .stat{ padding:26px 18px; }
  .stat .n{ font-size:20px; min-height:auto; }
  .foot-grid{ grid-template-columns:1fr; }
  .photo-strip-grid{ grid-template-columns:1fr; }
  .photo-strip-grid figure{ min-height:180px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
  .foot-social{ justify-content:flex-end; }
  .section-head h2{ font-size:26px; }
  .form-card{ padding:24px 20px; }

  .brand-logo{ height:86px; max-width:190px; }
  .brand-track{ gap:44px; }
  .brand-marquee{ padding:32px 0; }

  #services, #why, #callback, #callback-form, #reviews, #contact{ scroll-margin-top:130px; }
}