/* 2uto Mobile Overrides */

@media (max-width: 900px){
  :root{ --pad: 14px; }
  body{ font-size: 15.5px; }
  .container{ padding: 0 var(--pad); }

  /* Header buttons */
  .topbar .nav{ padding: 10px 0; gap: 10px; }
  .topbar .navLeft{ gap: 8px; }
  .searchBtn, .navToggle{
    border: 1px solid var(--line);
    background: rgba(255,255,255,.75);
    border-radius: 14px;
    padding: 10px 12px;
    line-height: 1;
  }
  .searchBtn:hover, .navToggle:hover{ background: rgba(0,0,0,.04); }

  /* Hero becomes single column */
  .hero{ grid-template-columns: 1fr !important; padding: 26px 0 34px !important; }
  .heroActions{ gap: 8px; }
  .heroCards{ order: 2; }
  .heroText{ order: 1; }
  .pill{ font-size: 11.5px; }

  /* Car slider */
  .heroCars .carSlider{ border-radius: 18px; }
  .heroCars .carSliderTop{ gap: 10px; flex-wrap: wrap; }
  .heroCars .carSliderTitle{ font-size: 16px; }
  .heroCars .carImg{ width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 14px; }
  .heroCars .carMeta{ padding-top: 8px; }
  .heroCars .carFacts{ padding-inline-start: 18px; }

  /* General grids */
  .cards4{ grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .grid2{ grid-template-columns: 1fr !important; }
  .grid3{ grid-template-columns: 1fr !important; }
  .posts, .postGrid, .cards{ grid-template-columns: 1fr !important; }

  /* Cards */
  .card, .postCard, .sysCard, .faq details{ border-radius: 18px; }
  .postCard{ padding: 14px; }

  /* CTA stack */
  .cta{ padding-bottom: 28px; }
  .ctaBox{ border-radius: 20px; }

  /* Footer */
  .footer{ padding: 18px 0; }
  .copyright{ font-size: 12.5px; }

  /* Prevent overflow */
  img, video{ max-width: 100%; height: auto; }
  pre, code{ max-width: 100%; overflow-x: auto; }
  table{ display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px){
  body{ font-size: 15px; }
  .cards4{ grid-template-columns: 1fr !important; }
  .btn{ padding: 10px 12px; border-radius: 14px; }
  .topbar .brand .siteLogo{ height: 58px; max-width: 150px; }
  .heroCars .carImg{ max-height: 200px; }
}