/* ==========================================================================
   Coat Crafters — Responsive Overrides
   Breakpoints: 1080 / 900 / 767 / 560 / 380
   ========================================================================== */

/* ---------- Large tablets / small laptops ---------- */
@media (max-width: 1080px) {
  .header-phone { display: none; }
  .nav-desktop > ul > li > a { padding: 10px 9px; font-size: 0.8rem; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Tablets ---------- */
@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .nav-desktop { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-quote { padding: 12px 18px; font-size: 0.8rem; }

  .trust-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }

  .split, .two-col, .service-row, .finish-explorer, .process-wrap { grid-template-columns: 1fr; }
  .service-row--flip .service-row-media { order: 0; }
  .split-media { aspect-ratio: 16/10; }
  .split-media img { height: 100%; }

  .process-media { position: relative; top: 0; }
  .process-media .media-frame { aspect-ratio: 16/10; }

  .compare-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .g-item.is-wide { grid-column: span 2; aspect-ratio: 16/7; }

  /* Editorial grid simplifies */
  .edit-grid { grid-auto-rows: 120px; }
  .g-a { grid-column: span 6; grid-row: span 3; }
  .g-b, .g-c, .g-d, .g-e { grid-column: span 3; grid-row: span 2; }
  .g-f { grid-column: span 6; grid-row: span 3; }

  .hero-panel { max-width: 520px; }
  .display-1 { font-size: clamp(2.3rem, 7.6vw, 3.6rem); }
}

/* ---------- Mobile: sticky call bar ---------- */
@media (max-width: 767px) {
  .mobile-call-bar { display: flex; }
  body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px)); }
  .site-footer .footer-bottom { padding-bottom: 30px; }
}

@media (min-width: 768px) {
  .mobile-call-bar { display: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  :root { --section-y: 64px; }
  .hero-transform { height: 165vh; height: 165svh; }

  .cards-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .g-item.is-wide { aspect-ratio: 4/3; }
  .edit-grid { grid-auto-rows: 110px; }
  .g-b, .g-c, .g-d, .g-e { grid-column: span 6; }
  .form-grid { grid-template-columns: 1fr; }
  .benefit-list { grid-template-columns: 1fr; }
  .area-grid { grid-template-columns: 1fr; }
  .finish-swatches { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; padding-block: 52px; }

  .hero-stage { min-height: 92vh; min-height: 92svh; align-items: center; }
  .hero-content { padding-block: calc(var(--header-h) + 32px) 90px; }
  .hero-cta .btn { width: 100%; }
  .hero-cta .text-link { justify-content: center; width: 100%; padding-top: 4px; }
  .hero-label--before { left: 14px; bottom: 14px; }
  .hero-label--after { right: 14px; bottom: 14px; }
  .scroll-cue { display: none; }
  .hero-complete {
    right: 14px; left: 14px;
    bottom: 60px;
    max-width: none;
    padding: 20px 22px;
  }
  .hero-media::after {
    background: linear-gradient(to top, rgba(11,31,51,0.78) 6%, rgba(11,31,51,0.3) 52%, rgba(11,31,51,0.18) 100%);
  }

  .brand img { height: 34px; }
  .header-quote { display: none; }

  .cta-actions .btn { width: 100%; }
  .cta-phone { width: 100%; justify-content: center; padding: 14px 0 0; font-size: 1.2rem; }

  .faq-item .faq-answer { padding: 0 8px 24px 4px; }
  .detail-list li { grid-template-columns: 1fr; gap: 2px; }

  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-btn { width: 46px; height: 46px; }

  .compare-caption { font-size: 0.9rem; }
}

@media (max-width: 560px) {
  .display-1 { font-size: clamp(2rem, 9vw, 2.7rem); }
  .display-2 { font-size: clamp(1.7rem, 6.4vw, 2.2rem); }
  .btn { padding: 15px 22px; font-size: 0.88rem; }
  .finish-swatches { grid-template-columns: 1fr 1fr; }
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 10px 14px; font-size: 0.76rem; }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .display-1 { font-size: 1.9rem; }
  .hero-panel .lead { font-size: 0.98rem; }
}

/* ---------- Reduced motion: calm, content-first fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-cue::after { animation: none; }
  /* Simple hero: no pinned scroll, both states legible */
  .hero-transform { height: auto !important; }
  .hero-complete { opacity: 1; visibility: visible; position: relative; right: auto; bottom: auto; margin: 0 var(--gutter) var(--gutter); }
  .card:hover .card-media img,
  .g-item:hover img { transform: none; }
}