/* ============================================================
   VOLTRIX — RESPONSIVE SYSTEM
   Mobile-first, device-agnostic, proportional scaling
   
   STRATEGIE:
   - Alle spacing via clamp() of CSS custom properties
   - Container padding schaalt met viewport
   - Typografie schaalt vloeiend via clamp()
   - 3 mobiele zones: klein (<390px), middel (390-430px), groot (430-600px)
   - Geen enkel fixed breakpoint op een specifiek toestel
   ============================================================ */

/* ──────────────────────────────────────────
   1. VLOEIENDE SPACING TOKENS
   ────────────────────────────────────────── */
:root {
  /* Container padding: 4% van viewport, min 14px, max 28px */
  --container-px: clamp(14px, 4vw, 28px);
  
  /* Section padding: schaalt vloeiend */
  --sp-xs:  clamp(28px, 6vw,  44px);   /* kleine secties */
  --sp-sm:  clamp(36px, 7vw,  52px);   /* standaard mobiel */
  --sp-md:  clamp(44px, 8vw,  72px);   /* medium secties */
  --sp-lg:  clamp(52px, 9vw,  88px);   /* grote secties */
  
  /* Gaps */
  --gap-sm: clamp(8px,  2vw, 14px);
  --gap-md: clamp(12px, 3vw, 20px);
  --gap-lg: clamp(16px, 4vw, 28px);
  
  /* Border radius */
  --r-card: clamp(12px, 3vw, 20px);
  
  /* Button padding */
  --btn-py: clamp(12px, 2.8vw, 17px);
  --btn-px: clamp(18px, 5vw,  36px);
}

/* ──────────────────────────────────────────
   2. CONTAINER — SCHAALBAAR
   ────────────────────────────────────────── */
.container {
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

/* ──────────────────────────────────────────
   3. TYPOGRAFIE — VLOEIEND MET CLAMP()
   Formule: clamp(min, preferred-vw, max)
   preferred = ideale grootte op gemiddeld scherm
   ────────────────────────────────────────── */

/* Alleen van toepassing op mobiel (<768px) */
@media (max-width: 768px) {

  /* Body */
  body { font-size: clamp(15px, 3.8vw, 17px); }
  
  /* Headings — proportioneel met scherm */
  h1 { font-size: clamp(1.75rem, 7.5vw, 2.4rem); line-height: 1.12; }
  h2 { font-size: clamp(1.35rem, 5.8vw, 1.85rem); line-height: 1.18; }
  h3 { font-size: clamp(1.05rem, 4.2vw, 1.3rem);  line-height: 1.25; }
  p  { font-size: clamp(.88rem,  3.6vw, 1rem);    line-height: 1.7;  }

  /* Hero H1 — grote maar schaalbare tekst */
  .hero-content h1 {
    font-size: clamp(1.85rem, 8.2vw, 2.55rem);
    line-height: 1.1;
  }
  
  /* Dienstenpagina H1 */
  .page-hero h1,
  .zk-hero h1 {
    font-size: clamp(1.8rem, 7.8vw, 2.4rem);
    line-height: 1.1;
  }

  /* Section headers */
  .section-header p {
    font-size: clamp(.85rem, 3.5vw, .97rem);
  }
}

/* ──────────────────────────────────────────
   4. HEADER
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-inner {
    height: clamp(56px, 14vw, 68px);
    padding: 0 var(--container-px);
  }
  #header.scrolled .header-inner {
    height: clamp(52px, 13vw, 62px);
  }
  .logo svg { height: clamp(28px, 7vw, 36px); }
}

/* ──────────────────────────────────────────
   5. HERO (HOMEPAGE)
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding-top: clamp(80px, 20vw, 110px);
    padding-bottom: clamp(36px, 8vw, 56px);
  }
  .hero-content p {
    font-size: clamp(.9rem, 3.8vw, 1.05rem);
    margin-bottom: clamp(20px, 5vw, 30px);
  }
  .hero-actions { gap: clamp(8px, 2.5vw, 14px); }
  .hero-trust {
    margin-top: clamp(24px, 6vw, 36px);
    padding-top: clamp(18px, 5vw, 28px);
    gap: 0 clamp(4px, 2vw, 12px);
  }
  .trust-item { padding: clamp(6px, 2vw, 12px) 4px; }
  .trust-item strong { font-size: clamp(.9rem, 4.2vw, 1.15rem); }
  .trust-item span   { font-size: clamp(.6rem, 2.5vw, .72rem); }
}

/* ──────────────────────────────────────────
   6. PAGE HERO (DIENSTENPAGINA'S)
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero,
  .zk-hero {
    padding-top:    clamp(74px, 18vw, 100px) !important;
    padding-bottom: clamp(36px, 8vw,  56px)  !important;
  }
  .hero-label {
    font-size: clamp(.66rem, 2.5vw, .78rem);
    padding: clamp(4px, 1vw, 6px) clamp(10px, 3vw, 16px);
    margin-bottom: clamp(10px, 3vw, 18px);
  }
  .breadcrumb { font-size: clamp(.72rem, 2.8vw, .82rem); margin-bottom: clamp(12px, 3vw, 20px); }
  .hero-sub {
    font-size: clamp(.86rem, 3.6vw, 1rem);
    margin-bottom: clamp(16px, 4vw, 24px);
  }
  .hero-usps { gap: clamp(7px, 2vw, 12px); margin-bottom: clamp(18px, 5vw, 28px); }
  .hero-usps li { font-size: clamp(.84rem, 3.5vw, .97rem); }
  .hero-btns { gap: clamp(8px, 2.5vw, 12px); }
}

/* ──────────────────────────────────────────
   7. BUTTONS — SCHAALBARE PADDING
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .btn {
    padding: var(--btn-py) var(--btn-px);
    font-size: clamp(.84rem, 3.5vw, .97rem);
  }
  .btn-lg {
    padding: clamp(14px, 3.2vw, 18px) clamp(20px, 5.5vw, 36px);
    font-size: clamp(.88rem, 3.8vw, 1rem);
  }
  .btn-call-hero {
    padding: clamp(12px, 2.8vw, 16px) clamp(16px, 4.5vw, 26px);
    font-size: clamp(.84rem, 3.5vw, .97rem);
  }
}

/* ──────────────────────────────────────────
   8. SECTIONS — UNIFORME PADDING
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-pad    { padding: var(--sp-md) 0; }
  .section-pad-sm { padding: var(--sp-sm) 0; }
  .section-header { margin-bottom: clamp(24px, 6vw, 40px); }
}

/* ──────────────────────────────────────────
   9. SERVICE CARDS
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .service-card-body {
    padding: clamp(16px, 4vw, 24px) clamp(14px, 3.5vw, 20px);
  }
  .service-card-body h3 { font-size: clamp(1rem, 4vw, 1.2rem); margin-bottom: 7px; }
  .service-card-body p  { font-size: clamp(.84rem, 3.4vw, .94rem); }
}

/* ──────────────────────────────────────────
   10. FAQ
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-question {
    padding: clamp(12px, 3vw, 18px) clamp(12px, 3.5vw, 20px);
    font-size: clamp(.84rem, 3.5vw, .95rem);
    gap: clamp(8px, 2.5vw, 14px);
  }
  .faq-answer {
    padding: 0 clamp(12px, 3.5vw, 20px) clamp(10px, 3vw, 16px);
    font-size: clamp(.84rem, 3.4vw, .92rem);
  }
}

/* ──────────────────────────────────────────
   11. CTA SECTION
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-section { padding: clamp(36px, 8vw, 56px) 0; }
  .cta-content h2 { font-size: clamp(1.4rem, 5.8vw, 1.85rem); }
  .cta-phone { padding: clamp(10px, 2.5vw, 14px) clamp(14px, 3.5vw, 20px); }
}

/* ──────────────────────────────────────────
   12. FOOTER
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-main { padding: clamp(28px, 7vw, 44px) 0 clamp(24px, 6vw, 36px); }
  .footer-brand p { font-size: clamp(.82rem, 3.3vw, .9rem); }
  .footer-col h4  { font-size: clamp(.68rem, 2.6vw, .76rem); }
  .footer-col ul a { font-size: clamp(.82rem, 3.3vw, .9rem); }
  .footer-bottom-inner p { font-size: clamp(.72rem, 2.8vw, .8rem); }
}

/* ──────────────────────────────────────────
   13. USP STRIP
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .usp-strip { padding: clamp(14px, 4vw, 22px) 0; }
  .usp-item  { font-size: clamp(.76rem, 3.2vw, .88rem); }
  .usp-item-icon {
    width:  clamp(24px, 5.5vw, 30px);
    height: clamp(24px, 5.5vw, 30px);
    font-size: clamp(.72rem, 3vw, .88rem);
  }
}

/* ──────────────────────────────────────────
   14. STICKY BAR — PROPORTIONEEL
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .mob-sticky {
    padding: clamp(8px, 2vw, 12px) clamp(10px, 3vw, 16px);
    padding-bottom: max(clamp(8px, 2vw, 12px), env(safe-area-inset-bottom));
    gap: clamp(6px, 2vw, 10px);
  }
  .mob-sticky-call {
    padding: clamp(11px, 2.8vw, 15px) clamp(12px, 3vw, 16px);
    font-size: clamp(.78rem, 3.2vw, .9rem);
  }
  .mob-sticky-offerte {
    font-size: clamp(.82rem, 3.5vw, .95rem);
    padding: clamp(11px, 2.8vw, 15px) clamp(8px, 2.5vw, 12px);
  }
  .mob-sticky-wa {
    width:  clamp(40px, 10vw, 50px);
    height: clamp(40px, 10vw, 50px);
    min-width: clamp(40px, 10vw, 50px);
  }
  body { padding-bottom: clamp(64px, 16vw, 80px); }
}

/* ──────────────────────────────────────────
   15. REVIEWS CAROUSEL
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .rv-carousel { margin-top: clamp(18px, 5vw, 28px); }
  .rv-slide { padding: clamp(16px, 4vw, 24px) clamp(14px, 3.5vw, 20px); }
  .rv-avatar {
    width:  clamp(34px, 8vw, 44px);
    height: clamp(34px, 8vw, 44px);
    font-size: clamp(.8rem, 3.2vw, .95rem);
  }
  .rv-name { font-size: clamp(.82rem, 3.4vw, .95rem); }
  .rv-text { font-size: clamp(.82rem, 3.4vw, .92rem); line-height: 1.68; }
  .reviews-score-num { font-size: clamp(1.4rem, 5.5vw, 1.8rem); }
}

/* ──────────────────────────────────────────
   16. DISTRICT CARDS
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .district-card { padding: clamp(10px, 3vw, 16px) clamp(6px, 2vw, 12px); }
  .district-card-name { font-size: clamp(.72rem, 3vw, .88rem); }
}

/* ──────────────────────────────────────────
   17. KLEINE SMARTPHONES (<360px)
   Extra correcties voor heel kleine schermen
   ────────────────────────────────────────── */
@media (max-width: 360px) {
  :root {
    --container-px: 12px;
  }
  h1 { font-size: clamp(1.55rem, 9vw, 1.85rem); }
  .hero-content h1 { font-size: clamp(1.6rem, 9.5vw, 2rem); }
  .trust-item strong { font-size: clamp(.82rem, 4.5vw, 1rem); }
  .btn { font-size: clamp(.8rem, 4vw, .9rem); }
  .mob-sticky-offerte { font-size: clamp(.76rem, 4vw, .86rem); }
}

/* ──────────────────────────────────────────
   18. GROTE SMARTPHONES (430px+)
   iPhone Pro Max, Samsung Ultra etc.
   ────────────────────────────────────────── */
@media (min-width: 430px) and (max-width: 600px) {
  :root {
    --container-px: clamp(20px, 4.5vw, 28px);
  }
  /* Iets meer ruimte beschikbaar — licht opschalen */
  .service-card-body { padding: 22px 20px; }
  .rv-slide { padding: 22px 20px; }
}