/* =========================================================
   Munsters Dakbedekkingen – responsive.css
   Alleen mobiele/tablet-overrides. Desktop blijft identiek.
   ========================================================= */

/* Basis */
img, video { max-width: 100%; height: auto; }

/* ---------------------------------------
   Tablet en kleiner (≤ 1024px)
   --------------------------------------- */
@media (max-width: 1024px) {
  .container { padding-left: 16px; padding-right: 16px; }

  /* Grids 3->2 kolommen */
  .grid.cols-3,
  .grid.three,
  .projects .grid,
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  .projects .item img,
  .item img { height: 220px !important; }

  /* Contact naast elkaar -> onder elkaar */
  .contact { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------
   Telefoon (≤ 780px)
   --------------------------------------- */
@media (max-width: 780px) {
  /* Header/nav */
  .mobile-toggle { display: block !important; font-size: 1.8rem; }
  .menu { display: none !important; }
  .menu.open { display: flex !important; flex-direction: column; gap: 10px; padding: 10px 0; }

  .nav img { height: 42px !important; }

  /* Hero compacter & leesbaar */
  .hero { padding: 56px 0 48px !important; text-align: left; }
  .hero h1 { font-size: clamp(26px, 6vw, 34px) !important; line-height: 1.15; }
  .hero .sub { font-size: 16px !important; max-width: 680px; }

  /* Buttons: full width */
  .hero .cta .btn,
  .cta .btn,
  .btn.block { width: 100% !important; text-align: center; }

  /* Chips/badges */
  .badge, .tag, .chip { font-size: .95rem !important; padding: .45rem .8rem !important; }

  /* Grids 2->1 kolom */
  .grid.cols-3,
  .grid.cols-4,
  .grid.two,
  .grid.three,
  .grid,
  .reviews-grid,
  .projects .grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  .card { padding: 18px !important; }
  .card h3 { margin-top: 0 !important; }

  .projects .item img,
  .item img { height: 200px !important; }

  /* Formulieren */
  label { margin-bottom: 8px !important; }
  input, select, textarea { width: 100% !important; }

  /* Review kopje + datum stacken */
  .review-head { display:flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .review .txt { margin-bottom: 10px !important; }

  /* Footer 1 kolom */
  footer .columns,
  .ft-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
}

/* ---------------------------------------
   Kleine telefoons (≤ 480px)
   --------------------------------------- */
@media (max-width: 480px) {
  body { line-height: 1.7; }
  .container { padding-left: 14px; padding-right: 14px; }
  .btn { padding: 0.95rem 1.1rem !important; font-weight: 800; }
  .hero h1 { font-size: clamp(24px, 7vw, 30px) !important; }
}

/* Sticky “Bel nu” en WhatsApp (toon alleen mobiel) */
@media (max-width: 780px){
  .floating-call, .floating-whatsapp {
    position: fixed; right: 16px; z-index: 9999;
    background: #e53935; color: #fff; padding: 12px 16px; border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15); font-weight: 800; line-height:1;
  }
  .floating-call { bottom: 16px; }
  .floating-whatsapp {
    bottom: 64px; display:flex; gap:8px; align-items:center; background:#25D366;
  }
}