/* =========================================================================
   USAutoPartSource — Responsive Stylesheet
   Covers ALL pages
   ========================================================================= */

/* -------------------- 1024px (tablets, small laptops) -------------------- */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem;}
  .split,.split--reverse,.expert-split,.savings-grid,.coverage-strip,.contact-grid{grid-template-columns:1fr;gap:2rem;}
  .split--reverse{direction:ltr;}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .compass{grid-template-columns:1fr 1fr;}
  .compass::before{display:none;}
  .ribbon{grid-template-columns:1fr 1fr;}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:160px;}
  .mosaic__tile--wide{grid-column:span 2;}
  .tabs__panel.active{grid-template-columns:1fr;}
  .trust-strip,.guarantee-grid,.vehicle-types{grid-template-columns:1fr 1fr;}
  .stats-banner{grid-template-columns:1fr 1fr;}
  .testimonial-grid{grid-template-columns:1fr;}
  .brand-showcase{grid-template-columns:repeat(4,1fr);}
  .finder-widget{grid-template-columns:1fr;}
  .response-promise{grid-template-columns:auto 1fr;}
  .response-promise .btn{grid-column:1/-1;}
  .steps{grid-template-columns:1fr;gap:1rem;}
  .steps::before{display:none;}

  /* Typography adjustments */
  .section{padding:4rem 0;}
  .section--tight{padding:3rem 0;}
  .page-hero{padding:3.5rem 0 3rem;}
}

/* -------------------- 860px (mobile menu kicks in) -------------------- */
@media (max-width:860px){
  .nav-toggle{display:flex;}
  .primary-nav{
    position:absolute;top:100%;left:0;right:0;
    background:rgba(10,10,10,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--c-border);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .primary-nav.open{max-height:680px;}
  .primary-nav ul{flex-direction:column;align-items:flex-start;gap:0;padding:1rem 20px;}
  .primary-nav li{width:100%;border-bottom:1px solid var(--c-border);}
  .primary-nav li:last-child{border-bottom:0;}
  .primary-nav a{display:block;padding:.9rem 0;font-size:.95rem;color:#fff;width:100%;}
  .primary-nav a.active::after{display:none;}
  .nav-actions{display:none;}
  .navbar__inner{position:relative;}


  .hero__actions{flex-direction:column;}
  .hero__actions .btn{width:100%;}
  .hero__stats{grid-template-columns:1fr 1fr 1fr;gap:.75rem;}
  .hero__stat strong{font-size:1.3rem;}

  .footer-grid{grid-template-columns:1fr 1fr;}
  .sticky-call{display:flex;}
  body{padding-bottom:60px;}
  .section{padding:3.5rem 0;}
  .section--tight{padding:2.5rem 0;}

  .ribbon{grid-template-columns:1fr;}
  .mosaic{grid-template-columns:1fr;grid-auto-rows:auto;}
  .mosaic__tile{min-height:140px;}
  .mosaic__tile--wide,.mosaic__tile--tall{grid-column:auto;grid-row:auto;}
  .compass{grid-template-columns:1fr;}

  .finder-form{grid-template-columns:1fr;}
  .stats-banner{grid-template-columns:1fr 1fr;}
  .brand-showcase{grid-template-columns:repeat(3,1fr);}

  .activity-toast{bottom:80px;left:12px;right:12px;max-width:none;}

  .split__media img{aspect-ratio:16/9;}
  .about-hero-img img{aspect-ratio:16/10;}

  .page-hero{padding:3rem 0 2.5rem;}
  .page-hero h1{font-size:1.75rem;}

  .compare-table{font-size:.82rem;}
  .compare-table th,.compare-table td{padding:.75rem .85rem;}

  .contact-grid{grid-template-columns:1fr;gap:2rem;}
}

/* -------------------- 560px (phones) -------------------- */
@media (max-width:560px){
  h1{font-size:1.85rem;}
  h2{font-size:1.5rem;}
  h3{font-size:1.1rem;}

  .container{padding-inline:16px;}

  .form-grid{grid-template-columns:1fr;}
  .topbar__note{display:none;}
  .topbar__inner{justify-content:center;}

  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom__inner{flex-direction:column;}
  .btn{width:100%;}
  .btn--sm{width:auto;}

  .trust-strip,.guarantee-grid,.vehicle-types,.stats-banner{grid-template-columns:1fr;}
  .hero__stats{grid-template-columns:1fr;gap:.85rem;}
  .hero__stat{text-align:center;}
  .brand-showcase{grid-template-columns:repeat(2,1fr);}
  .expert-badges{grid-template-columns:1fr;}
  .coverage-stats{grid-template-columns:1fr;}
  .savings-result__value{font-size:2.2rem;}

  .hero-form{padding:1.5rem;}
  .form-card{padding:1.5rem;}

  .section__head{margin-bottom:2rem;}
  .section__head p{font-size:.95rem;}

  .card__body{padding:1.1rem;}
  .card__body h3{font-size:1rem;}

  .faq__q{padding:1rem 1.15rem;font-size:.92rem;}
  .faq__item.open .faq__a{padding:0 1.15rem 1.15rem;}

  .final-cta{padding:3rem 1.5rem;}
  .final-cta h2{font-size:1.5rem;}

  .quote-strip{padding:2rem 1.5rem;}
  .quote-strip p{font-size:1rem;}
  .quote-strip::before{font-size:8rem;top:-20px;}

  .response-promise{grid-template-columns:1fr;text-align:center;gap:1rem;}
  .response-promise__icon{margin-inline:auto;}

  .page-hero{padding:2.5rem 0 2rem;}
  .breadcrumbs{font-size:.78rem;padding:.65rem 0;}

  .tabs__nav{gap:.4rem;}
  .tabs__btn{padding:.55rem 1rem;font-size:.82rem;}

  .compare-table th,.compare-table td{padding:.65rem .7rem;font-size:.78rem;}

  .status-page{padding:4rem 0;}
  .status-page__icon{width:72px;height:72px;}

  .coverage-map{padding:1.25rem;aspect-ratio:4/3;}
  .finder-widget{padding:1.75rem;}
}

/* -------------------- 400px (very small phones) -------------------- */
@media (max-width:400px){
  h1{font-size:1.65rem;}
  .hero{padding:3rem 0 2.5rem;}
  .hero__eyebrow{font-size:.7rem;}
  .btn{padding:.8rem 1.25rem;font-size:.88rem;}
  .btn--lg{padding:.9rem 1.5rem;font-size:.92rem;}
  .brand__mark{width:40px;height:40px;font-size:.75rem;}
  .brand__text strong{font-size:.95rem;}
  .brand__text small{font-size:.68rem;}
}

/* -------------------- Print -------------------- */
@media print{
  body{background:#fff;color:#000;}
  .site-header,.site-footer,.sticky-call,.activity-toast,.ticker,.btn{display:none !important;}
  .hero,.page-hero{background:#fff !important;color:#000 !important;padding:1rem 0;}
  .hero h1,.page-hero h1,h1,h2,h3{color:#000;}
  p,span,li{color:#333;}
  a{color:#000;text-decoration:underline;}
  .card,.feature,.ribbon-card,.compass__step{border:1px solid #ccc;background:#fff;box-shadow:none;}
}

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero::before,.hero::after,.ticker__track,.brand-track,.shimmer{animation:none !important;}
}

/* -------------------- High contrast mode -------------------- */
@media (prefers-contrast:high){
  :root{
    --c-border:#555;
    --c-border-light:#666;
    --c-text-dim:#DDD;
  }
  .field input,.field select,.field textarea{border-width:2px;}
  .btn{border-width:2px;}
}
@media (max-width:860px){
  .hero{
    padding:3.5rem 0 3rem;
    min-height:auto;
    /* Keep the image, scale it to cover the hero */
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
  }

  /* Mobile overlay — vertical gradient reads better */
  .hero::before{
    background:linear-gradient(
      180deg,
      rgba(0,0,0,.75) 0%,
      rgba(0,0,0,.55) 45%,
      rgba(0,0,0,.75) 100%
    );
  }

  /* Stack the hero grid + full-width CTAs */
  .hero__grid{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .hero__actions{
    flex-direction:column;
  }
  .hero__actions .btn{
    width:100%;
  }

  /* Tighten the stats row */
  .hero__stats{
    grid-template-columns:1fr 1fr 1fr;
    gap:.75rem;
    margin-top:2rem;
    padding-top:1.5rem;
  }
  .hero__stat strong{font-size:1.3rem;}
  .hero__stat span{font-size:.72rem;}
}

@media (max-width:560px){
  .hero{
    padding:2.5rem 0 2.5rem;
    background-position:center top;   /* show more of the image top */
  }
  .hero__stats{
    grid-template-columns:1fr 1fr 1fr;
    gap:.5rem;
  }
  .hero__stat strong{font-size:1.15rem;}
  .hero__stat span{font-size:.68rem;}
}