/* ============================================================
   SPOED DAK TECHNIEK — Responsive Breakpoints
   responsive.css
   ============================================================ */

/* ============================================================
   XL — max-width: 1280px
   ============================================================ */
@media (max-width: 1280px) {
  .diensten__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   LG — max-width: 1100px
   ============================================================ */
@media (max-width: 1100px) {
  .diensten__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nood-banner__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    text-align: center;
  }
  .nood-banner p {
    margin: 0 auto;
  }
  .nood-banner__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .werk-voor-na {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ============================================================
   MD — max-width: 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .split-section {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .dienst-sectie__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Foto komt op tablet en mobiel altijd boven de tekst */
  .dienst-sectie__grid .img-placeholder,
  .dienst-sectie__grid .foto-blok,
  .split-section .foto-blok { order: -1; }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   SM — max-width: 900px
   ============================================================ */
@media (max-width: 900px) {
  .trust-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-strip__item {
    border-bottom: 1px solid var(--color-border);
  }
  .trust-strip__item:nth-child(2n) { border-right: none; }

  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .werk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .werk-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   XS — max-width: 640px
   ============================================================ */
@media (max-width: 640px) {
  /* Hero */
  .hero__stats-grid {
    grid-template-columns: 1fr;
  }
  .hero__stat {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .hero__stat:last-child { border-bottom: none; }

  /* Trust strip */
  .trust-strip__grid {
    grid-template-columns: 1fr;
  }
  .trust-strip__item {
    border-right: none;
  }

  /* Portfolio */
  .portfolio__grid {
    grid-template-columns: 1fr;
  }

  /* Reviews */
  .reviews__grid {
    grid-template-columns: 1fr;
  }

  /* Diensten cards */
  .diensten__grid {
    grid-template-columns: 1fr;
  }

  /* Features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CTA buttons stacked */
  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-group .btn {
    text-align: center;
    justify-content: center;
  }

  /* Contact form */
  .contact-form-card {
    padding: var(--space-4) var(--space-3);
  }

  /* Nood banner phone */
  .nood-banner__phone-number {
    font-size: clamp(1.5rem, 7vw, 2rem);
    flex-direction: column;
    gap: var(--space-1);
  }

  /* Werk cards */
  .werk-grid,
  .werk-grid--2 {
    grid-template-columns: 1fr;
  }

  /* Chips lopen door op meerdere regels; geen zijwaartse scroll op mobiel */
  .daktype-chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .daktype-chip {
    flex-shrink: 1;
    max-width: 100%;
  }
}

/* ============================================================
   MOBILE — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .hero__title {
    font-size: clamp(2.75rem, 12vw, 3.5rem);
  }

  .hero--page .hero__title {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .contact-form-card {
    border-radius: var(--radius-xl);
  }

  /* Scroll top closer to call btn */
  .scroll-top {
    right: var(--space-2);
  }
  .call-btn {
    right: var(--space-2);
    bottom: var(--space-3);
  }
  .wa-btn {
    right: var(--space-2);
    bottom: calc(var(--space-3) + 60px + 12px);
  }
  .scroll-top {
    bottom: calc(var(--space-3) + 60px + 12px + 60px + 12px);
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .navbar,
  .call-btn,
  .scroll-top,
  .navbar__overlay,
  .hero__wave,
  .hero__grid-overlay {
    display: none !important;
  }
  body { padding-top: 0; }
  main { padding-top: 0; }
  .hero {
    min-height: auto;
    padding: var(--space-4);
  }
}

/* ============================================================
   SPOED DAK TECHNIEK — responsive voor de nieuwe onderdelen
   ============================================================ */

/* Nooit zijwaarts kunnen schuiven, op geen enkele pagina.
   Bewust clip en niet hidden: hidden op html en body maakt van beide een
   scrollcontainer en blokkeert daardoor het verticaal scrollen. */
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 1100px) {
  .signaal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .stappen-grid {
    grid-template-columns: 1fr;
  }
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .signaal-grid {
    grid-template-columns: 1fr;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .foto-blok--hoog img {
    aspect-ratio: 3 / 4;
  }
  .werk-card__foto {
    height: 200px;
  }
  .kruimelpad {
    font-size: var(--text-xs);
  }
}

/* ============================================================
   MOBIEL — knoppen en raakdoelen
   Op smalle schermen passen de grote knoppen niet meer op één regel.
   Ze mogen daar afbreken en krijgen minder ruime binnenmarges.
   ============================================================ */
@media (max-width: 640px) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
  }
  .btn--lg {
    padding: 0.9rem 1.5rem;
    font-size: var(--text-md);
  }
  .btn--xl {
    padding: 1rem 1.5rem;
    font-size: var(--text-lg);
  }

  /* Voetteksten ruimer aantikbaar maken */
  .footer__links a,
  .footer__contact a {
    display: inline-block;
    padding-block: var(--space-1);
  }
  .footer__links li,
  .footer__contact li {
    margin-bottom: var(--space-0-5);
  }
}

/* ============================================================
   GEEN ZIJWAARTSE BEWEGING OP TABLET EN MOBIEL
   De inschuif-animaties zetten elementen eerst 42 pixels naar links of
   rechts. Op smalle schermen maakt dat de pagina breder dan het scherm,
   wat precies de zijwaartse scroll veroorzaakte. Hier bewegen ze daarom
   alleen verticaal.
   ============================================================ */
@media (max-width: 1024px) {
  .reveal-left,
  .reveal-right {
    transform: translateY(28px);
  }
}

@media (max-width: 640px) {
  /* Kerngegevens compacter, anders duwen ze de rest te ver naar beneden */
  .hero__stat {
    padding: var(--space-2-5) var(--space-2);
  }
  .hero__stat-number {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }
}