/* ==========================================================================
   AWCompany ApS — Responsive rules
   Breakpoints: 1920 / 1440 / 1280 / 1024 / 768 / 430 / 390 / 375
   Desktop-first base in style.css; this file narrows the layout down.
   ========================================================================== */

/* ---------- ≤1280px : tablet landscape / small laptop ---------- */
@media (max-width: 1280px){
  .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col:nth-child(4){ grid-column: 1 / -1; }
}

/* ---------- ≤1024px : tablet ---------- */
@media (max-width: 1024px){
  .split, .grid-2{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .split-media{ order: -1; }

  .stat-row{ grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3){ border-left: 0; border-top: 1px solid var(--c-line); grid-column: span 2; }

  .service-row{ grid-template-columns: 60px 1fr; row-gap: 0.5rem; }
  .service-desc{ grid-column: 2; max-width: 100%; }
  .service-link{ grid-column: 2; justify-self: start; }
  .service-row .service-thumb{ display: none; }

  .project-feature{ grid-template-columns: 1fr; gap: var(--sp-3); }
  .project-feature:nth-child(even) .project-media{ order: -1; }

  .value-grid{ grid-template-columns: repeat(2,1fr); }
  .value-item:nth-child(3n+1){ border-left: 1px solid var(--c-line); }
  .value-item:nth-child(2n+1){ border-left: 0; }

  .model-feature{ grid-template-columns: 1fr; gap: var(--sp-3); }

  .process-grid{ grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }

  .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
  .footer-col:nth-child(1){ grid-column: 1 / -1; margin-bottom: var(--sp-2); }

  .gallery-grid{ grid-template-columns: repeat(4,1fr); }
}

/* ---------- ≤1279px : nav collapses to mobile menu ----------
   Was ≤900px, raised to match the site's own ≤1280px breakpoint: with
   12 top-level items (up from the ~9 this was designed for), the inline
   .main-nav wraps to 3 cramped rows in the 901–1279px band — tall enough
   to overlap .page-hero's fixed top clearance on interior pages — and to
   2 rows even at 1920px, so "wide enough" was never coming. Below this,
   the already-solid, already-tested mobile nav (see js/navigation.js)
   handles it correctly at any width. */
@media (max-width: 1279px){
  .main-nav{ display: none; }
  .menu-toggle{ display: flex; }
  .header-phone{ display: none; }
}
@media (max-width: 640px){
  .header-cta .btn--primary{ display: none; }
}
@media (min-width: 1280px){
  .mobile-nav{ display: none; }
}

/* ---------- ≤768px : tablet portrait ---------- */
@media (max-width: 768px){
  .hero-content{ padding-top: 7.5rem; }
  .hero-copy{ max-width: 100%; }

  .tiktok-banner .container{ grid-template-columns: 110px 1fr; }
  .tiktok-banner .btn{ grid-column: 1 / -1; justify-self: start; }

  .timeline-item{ grid-template-columns: 1fr; gap: 0.5rem; }

  .form-grid{ grid-template-columns: 1fr; }

  .calc-options{ grid-template-columns: 1fr; }

  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
  .gallery-grid .span-2, .gallery-grid .span-3{ grid-column: span 3; }
}

/* ---------- ≤560px : phones ---------- */
@media (max-width: 560px){
  .section-pad{ padding-block: var(--sp-5); }
  .section-pad-s{ padding-block: var(--sp-4); }

  .stat-row{ grid-template-columns: 1fr; }
  .stat{ border-left: 0; border-top: 1px solid var(--c-line); }
  .stat:first-child{ border-top: 0; }
  .stat:nth-child(3){ grid-column: auto; }

  .value-grid{ grid-template-columns: 1fr; }
  .value-item{ border-left: 0 !important; }
  .value-item:first-child{ border-top: 0; }

  .process-grid{ grid-template-columns: 1fr; }

  .footer-grid{ grid-template-columns: 1fr; }
  .footer-wordmark{ font-size: clamp(2.6rem, 16vw, 5rem); }

  .footer-bottom{ flex-direction: column; align-items: flex-start; }

  .tiktok-banner .container{ grid-template-columns: 84px 1fr; gap: var(--sp-2); }
  .tiktok-text h3{ font-size: 1.2rem; }
  .tiktok-text p{ display:none; }

  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid .span-2, .gallery-grid .span-3{ grid-column: span 2; }

  .cta-contacts{ flex-direction: column; gap: var(--sp-2); }

  .lightbox-nav{ font-size: 1.4rem; padding: 0.4em 0.6em; }

  .cookie-banner{ left: calc(var(--sp-1) + var(--safe-l)); right: calc(var(--sp-1) + var(--safe-r)); bottom: calc(var(--sp-1) + var(--safe-b)); max-width: none; }
}

/* No horizontal overflow anywhere, ever */
html, body{ max-width: 100%; overflow-x: hidden; }