/* ============================================================
   DIERENS VERHUUR — RESPONSIVE CSS
   Breakpoints: tablet (960px), mobiel (640px), klein (400px)
   ============================================================ */

/* ---- Tablet (max 1024px) ---- */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
  }
  .footer-col--brand { grid-column: span 2; }

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

  .steps-visual {
    grid-template-columns: 1fr;
  }
  .step-visual-connector { display: none; }

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

/* ---- Tablet klein (max 960px) ---- */
@media (max-width: 960px) {
  :root {
    --topbar-height: 0px;
    --header-height: 68px;
  }

  .header-topbar { display: none; }

  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    padding: 1.5rem var(--container-pad);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition);
    z-index: 999;
    border-top: 1px solid var(--border);
  }
  .site-nav.is-open { transform: translateX(0); }
  .nav-menu { flex-direction: column; align-items: stretch; }
  .nav-menu .menu-item a {
    padding: 0.85rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .header-main__cta { display: none; }

  .product-layout {
    grid-template-columns: 1fr;
  }
  .product-gallery { position: static; }

  .contact-layout { grid-template-columns: 1fr; }

  .two-col-layout {
    grid-template-columns: 1fr;
  }
  .two-col-layout--reverse { direction: ltr; }

  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__content--center .hero__actions { align-items: center; }
}

/* ---- Mobiel (max 640px) ---- */
@media (max-width: 640px) {
  :root { --container-pad: 1rem; }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  .products-grid { grid-template-columns: 1fr; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .info-cards-grid { grid-template-columns: 1fr; }
  .pickup-info-grid { grid-template-columns: 1fr; }
  .usp-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col--brand { grid-column: span 1; }

  .cta-banner__inner { flex-direction: column; text-align: center; }
  .cta-banner__actions { width: 100%; justify-content: center; }

  .contact-form-wrap { padding: 1.25rem; }

  .pickup-banner__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

  .hero--small { min-height: 200px; }
  .hero__bg-img { min-height: 280px; }
  .hero__badges { gap: 0.35rem; }
  .hero-badge { font-size: 0.75rem; }

  .form-row { flex-direction: column; }
  .form-row--2 > * { flex: none; }

  .breadcrumb__list { font-size: 0.75rem; }

  .aanvraag-form-wrap { padding: 1.1rem; }

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

  .about-visual { gap: 0.75rem; }

  .product-gallery__thumbs .product-gallery__thumb { width: 60px; height: 45px; }

  .cat-filter__inner { gap: 0.35rem; }
  .cat-filter__btn { font-size: 0.8125rem; padding: 0.35rem 0.7rem; }
}

/* ---- Klein (max 400px) ---- */
@media (max-width: 400px) {
  .categories-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .btn-lg { padding: 0.75rem 1.25rem; font-size: 0.95rem; }
  .btn-group { flex-direction: column; }
  .btn-group .btn { width: 100%; justify-content: center; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ---- Print ---- */
@media print {
  .site-header,
  .site-footer,
  .hero,
  .cta-banner,
  .breadcrumb-bar { display: none !important; }

  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .container { max-width: 100%; padding: 0; }
}