/* ==========================================================================
   BYB Bygg & Design AB — responsiv finjustering
   ========================================================================== */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .case-grid { gap: 2.25rem; }
  .contact-grid { gap: 2.5rem; }
}

/* Collapsed nav breakpoint (≤1280px) — must load after components.css so this
   beats the unconditional `display: none` base rule there. */
@media (max-width: 1280px) {
  .header-phone-mobile { display: flex; }
}

/* Small tablet / large mobile (≤768px) */
@media (max-width: 768px) {
  :root { --section-y: clamp(3rem, 10vw, 5rem); }
  body { font-size: 16px; }
  .hero { min-height: auto; padding: clamp(5.5rem, 22vh, 7rem) 0 3rem; }
  .header-inner { padding: 0.8rem var(--gutter); }
  .brand img { height: 34px; }
  .brand-text strong { font-size: 0.9rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .service-detail, .story-grid, .case-grid { gap: 1.75rem; }
  .cookie-banner {
    left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
    max-width: none; padding: 1.1rem 1.25rem;
  }
  .cookie-banner h4 { font-size: 0.95rem; margin-bottom: 0.4rem; }
  .cookie-banner p { font-size: 0.8rem; margin-bottom: 0.9rem; }
  .cookie-buttons button { padding: 0.55rem 1rem; min-height: 40px; }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .before-after .ba-tag { font-size: 0.64rem; padding: 0.3rem 0.6rem; }
  .contact-info-block, .callout { padding: 1.5rem; }
}

/* Extra small (≤360px) */
@media (max-width: 360px) {
  .brand-text span { display: none; }
  .header-phone span.phone-text { display: none; }
}

/* Larger desktop refinement */
@media (min-width: 1440px) {
  :root { --max: 1320px; }
}

/* Print */
@media print {
  .site-header, .cookie-banner, .site-footer { display: none; }
}