/* ============================================================
   BESTE VERHUIZERS — Responsive Stylesheet
   Breakpoints:
   1280px  →  large desktop
   1024px  →  laptop / tablet landscape
    900px  →  tablet
    768px  →  tablet portrait
    640px  →  large phone
    480px  →  phone
    375px  →  small phone
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1280px — Large desktop tweaks
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  :root { --container: 1100px; }
}


/* ════════════════════════════════════════════════════════════
   1024px — Laptop / tablet landscape
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Global ────────────────────────────── */
  :root {
    --container-pad: var(--sp-6);
    --font-hero: clamp(2.25rem, 5vw, 3rem);
    --font-h2:   clamp(1.5rem, 3vw, 2rem);
  }

  .section { padding-block: var(--sp-16); }

  /* ── Navigation ────────────────────────── */
  .nav-menu,
  .nav-cta { display: none !important; }
  .nav-toggle { display: flex !important; }

  /* ── Hero (homepage) ───────────────────── */
  .hero {
    min-height: auto;
    padding-top: 110px;
    padding-bottom: 80px;
  }
  .hero__container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--sp-10);
  }
  .hero-content { align-items: center; }
  .hero-subtitle { max-width: 640px; }
  .hero-actions { justify-content: center; }
  .hero-trust  { justify-content: center; }
  .hero-illustration { display: none; }

  /* ── Page hero ─────────────────────────── */
  .page-hero { padding: 120px 0 70px; }

  /* ── USPs ──────────────────────────────── */
  .usps-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-card--featured {
    grid-column: span 2;
    grid-template-columns: auto 1fr;
  }

  /* ── How it works ──────────────────────── */
  .hiw-steps {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    max-width: 560px;
    margin-inline: auto;
  }
  .hiw-step__connector { display: none; }

  /* ── Reviews ───────────────────────────── */
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-stats { gap: var(--sp-5); padding: var(--sp-6); flex-wrap: wrap; }
  .reviews-stat__divider { display: none; }

  /* ── Form layout ───────────────────────── */
  .form-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  .form-promo { position: static; }

  /* ── SEO layout ────────────────────────── */
  .seo-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .seo-sidebar { position: static; }

  /* ── Over ons ──────────────────────────── */
  .over-ons-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
  .over-ons-stats { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .kwaliteit-steps { grid-template-columns: repeat(2, 1fr); }

  /* ── Contact ───────────────────────────── */
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-8); }

  /* ── Blog ──────────────────────────────── */
  .blog-featured { flex-direction: column; gap: var(--sp-5); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Artikel ───────────────────────────── */
  .artikel-layout { grid-template-columns: 1fr; }
  .artikel-sidebar { position: static; }

  /* ── Legal ─────────────────────────────── */
  .legal-layout { grid-template-columns: 1fr; }
  .legal-sidebar { position: static; }

  /* ── Stad intro ────────────────────────── */
  .stad-intro-layout { grid-template-columns: 1fr; }

  /* ── Internationaal USPs ───────────────── */
  .int-usps { grid-template-columns: repeat(2, 1fr); }

  /* ── Bestemming grid ───────────────────── */
  .bestemming-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── CTA banner ────────────────────────── */
  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--sp-10) var(--sp-8);
    gap: var(--sp-6);
  }
  .cta-banner__actions { justify-content: center; }

  /* ── Footer ────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer-col--brand { grid-column: span 2; }
  .footer-top { padding: var(--sp-12) 0 var(--sp-8); }
}


/* ════════════════════════════════════════════════════════════
   900px — Tablet portrait
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Global ────────────────────────────── */
  :root {
    --container-pad: var(--sp-5);
    --font-hero: clamp(2rem, 6vw, 2.75rem);
    --font-h2:   clamp(1.4rem, 4vw, 1.875rem);
  }

  .section { padding-block: var(--sp-12); }

  /* ── USPs ──────────────────────────────── */
  .usp-card--featured {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .usp-card--featured .usp-card__icon--lg { margin-inline: auto; }

  /* ── Reviews stats ─────────────────────── */
  .reviews-stats { justify-content: center; gap: var(--sp-5) var(--sp-8); }
  .reviews-cta { flex-direction: column; padding: var(--sp-6); }

  /* ── How it works ──────────────────────── */
  .hiw-cta .btn--lg { width: 100%; justify-content: center; }

  /* ── Steden grid ───────────────────────── */
  .steden-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Urgentie grid ─────────────────────── */
  .urgentie-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }

  /* ── Page hero ─────────────────────────── */
  .page-hero { padding: 110px 0 60px; }
  .page-hero__subtitle { font-size: var(--font-base); }

  /* ── Blog ──────────────────────────────── */
  .blog-featured__icon { width: 64px; height: 64px; font-size: 2rem; }
  .blog-featured__title { font-size: var(--font-xl); }
}


/* ════════════════════════════════════════════════════════════
   768px — Tablet portrait / phablet
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Global typography ─────────────────── */
  :root {
    --font-hero: clamp(1.875rem, 7vw, 2.5rem);
    --font-h2:   clamp(1.35rem, 4.5vw, 1.75rem);
  }

  h1 { letter-spacing: -0.025em; }
  h2 { letter-spacing: -0.015em; }

  /* ── Buttons ───────────────────────────── */
  .btn--lg { padding: 14px 28px; font-size: var(--font-base); }

  /* ── Navigation ────────────────────────── */
  .nav { padding-block: 10px; }
  .nav-logo__text { font-size: var(--font-base); }
  .nav-logo__icon { width: 34px; height: 34px; font-size: 1rem; }
  .nav-mobile { padding: var(--sp-5); }

  /* ── Hero trust badges ─────────────────── */
  .hero-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
  }
  .hero-trust__divider { display: none; }
  .hero-trust { text-align: left; }

  /* ── Hero actions ──────────────────────── */
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    max-width: 340px;
  }

  /* ── Page hero actions ─────────────────── */
  .page-hero__actions {
    flex-direction: column;
    gap: var(--sp-3);
  }
  .page-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Section header ────────────────────── */
  .section-header { margin-bottom: var(--sp-10); }
  .section-header p { font-size: var(--font-base); }

  /* ── USPs ──────────────────────────────── */
  .usps-grid { gap: var(--sp-4); }
  .usp-card { padding: var(--sp-6); }

  /* ── Form ──────────────────────────────── */
  .form-row { grid-template-columns: 1fr; }
  form { padding: var(--sp-5); }
  .form-progress { padding: var(--sp-4) var(--sp-5); }
  .form-progress__steps::before { left: 30px; right: 30px; }
  .step-label { font-size: 11px; }
  .form-promo__trust { gap: var(--sp-3); }
  .form-promo__stat { min-width: 80px; padding: var(--sp-3) var(--sp-4); }

  /* ── Reviews stats ─────────────────────── */
  .reviews-stats { padding: var(--sp-5); gap: var(--sp-4); }
  .reviews-stat__number { font-size: 1.8rem; }

  /* ── CTA banner ────────────────────────── */
  .cta-banner { padding: var(--sp-8) var(--sp-5); }
  .cta-banner__title { font-size: var(--font-xl); }
  .cta-banner__actions { flex-direction: column; align-items: center; }
  .cta-banner__actions .btn {
    width: 100%;
    justify-content: center;
    max-width: 320px;
  }

  /* ── Article CTA ───────────────────────── */
  .artikel-cta { flex-direction: column; text-align: center; }

  /* ── Kwaliteit steps ───────────────────── */
  .kwaliteit-steps { grid-template-columns: 1fr; }

  /* ── Team grid ─────────────────────────── */
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Footer ────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-col--brand { grid-column: 1; }
  .footer-bottom__inner { flex-direction: column; text-align: center; gap: var(--sp-3); }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
  .footer-top { padding: var(--sp-10) 0 var(--sp-6); }

  /* ── Blog featured ─────────────────────── */
  .blog-featured { padding: var(--sp-6); }
  .blog-featured::before { display: none; }
  .blog-grid { grid-template-columns: 1fr; }

  /* ── Over ons stats ────────────────────── */
  .over-ons-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  /* ── Contact cards ─────────────────────── */
  .contact-form-wrap { padding: var(--sp-5); }
}


/* ════════════════════════════════════════════════════════════
   640px — Large phone
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Global ────────────────────────────── */
  :root {
    --container-pad: var(--sp-4);
    --font-hero: clamp(1.75rem, 8vw, 2.25rem);
    --font-h2:   clamp(1.3rem, 5vw, 1.625rem);
  }

  .section { padding-block: var(--sp-10); }

  /* ── Hero content ──────────────────────── */
  .hero { padding-top: 100px; padding-bottom: 60px; }
  .hero-content { gap: var(--sp-5); }
  .hero-label .badge { font-size: var(--font-xs); padding: 5px 12px; }
  .hero-trust {
    text-align: center;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
  }
  .hero-trust__item { font-size: var(--font-xs); }

  /* ── Page hero ─────────────────────────── */
  .page-hero { padding: 100px 0 50px; }
  .page-hero__title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .page-hero__subtitle { font-size: var(--font-sm); }

  /* ── Breadcrumb ────────────────────────── */
  .breadcrumb { font-size: var(--font-xs); }
  .breadcrumb__current { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── Section header ────────────────────── */
  .section-header { margin-bottom: var(--sp-8); }

  /* ── USPs ──────────────────────────────── */
  .usps-grid { grid-template-columns: 1fr; }
  .usp-card--featured { grid-column: 1; }
  .usp-card { padding: var(--sp-5); }
  .usp-card--featured h3 { font-size: var(--font-xl); }

  /* ── How it works ──────────────────────── */
  .hiw-step { padding: var(--sp-6) var(--sp-5); }
  .hiw-step__visual { display: none; }
  .hiw-step__number { width: 52px; height: 52px; }
  .hiw-step__number span { font-size: var(--font-xl); }

  /* ── Reviews ───────────────────────────── */
  .reviews-grid { gap: var(--sp-4); }
  .review-card { padding: var(--sp-5); }
  .review-card__text { font-size: var(--font-sm); }
  .reviews-stats { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-5); }

  /* ── Form ──────────────────────────────── */
  .form-wrapper { border-radius: var(--radius-lg); }
  form { padding: var(--sp-4); }
  .form-step__title { font-size: var(--font-base); }
  .form-progress__steps { gap: var(--sp-2); }
  .step-circle { width: 34px; height: 34px; font-size: var(--font-xs); }
  .form-progress__steps::before { top: 17px; }
  .form-nav { flex-direction: column-reverse; gap: var(--sp-3); }
  .form-nav .btn { width: 100%; justify-content: center; }

  /* ── Form promo ────────────────────────── */
  .form-promo__trust { flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
  .form-promo__list li { font-size: var(--font-sm); }

  /* ── Stats strip ───────────────────────── */
  .stats-strip__inner { flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
  .stats-strip__item strong { font-size: var(--font-xl); }
  .stats-strip__div { display: none; }

  /* ── Steden grid ───────────────────────── */
  .steden-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .stad-card { flex-direction: column; text-align: center; gap: var(--sp-2); padding: var(--sp-4); }
  .stad-card__arrow { display: none; }

  /* ── Bestemming grid ───────────────────── */
  .bestemming-grid { grid-template-columns: 1fr; }

  /* ── Int USPs ──────────────────────────── */
  .int-usps { grid-template-columns: 1fr; }

  /* ── Over ons ──────────────────────────── */
  .team-grid { grid-template-columns: 1fr; }
  .over-ons-stats { grid-template-columns: 1fr 1fr; }
  .value-item { font-size: var(--font-xs); padding: var(--sp-2) var(--sp-3); }
  .kwaliteit-step { padding: var(--sp-5); }

  /* ── Contact ───────────────────────────── */
  .contact-card { padding: var(--sp-4); gap: var(--sp-3); }
  .contact-form__title { font-size: var(--font-xl); }
  .contact-form-wrap { padding: var(--sp-4); border-radius: var(--radius-lg); }

  /* ── Blog ──────────────────────────────── */
  .blog-featured { padding: var(--sp-5); }
  .blog-featured__title { font-size: var(--font-lg); }
  .blog-card__content { padding: var(--sp-5); }

  /* ── Artikel ───────────────────────────── */
  .artikel-intro { font-size: var(--font-base); }
  .artikel-body h2 { font-size: var(--font-xl); }
  .tip-item { flex-direction: column; gap: var(--sp-3); }
  .tip-item__num { width: 36px; height: 36px; font-size: var(--font-base); }
  .checklist li { font-size: var(--font-xs); padding: var(--sp-2) var(--sp-3); }

  /* ── Legal ─────────────────────────────── */
  .legal-intro { font-size: var(--font-base); }
  .legal-content h2 { font-size: var(--font-lg); }

  /* ── FAQ ───────────────────────────────── */
  .faq-question { padding: var(--sp-4) var(--sp-5); font-size: var(--font-sm); }
  .faq-answer { padding: 0 var(--sp-5) var(--sp-4); }

  /* ── CTA banner ────────────────────────── */
  .cta-banner { padding: var(--sp-7) var(--sp-4); border-radius: var(--radius-lg); }
  .cta-banner__title { font-size: var(--font-lg); }

  /* ── Stad USPs ─────────────────────────── */
  .stad-usps { gap: var(--sp-2); }
  .stad-usp { font-size: var(--font-xs); padding: var(--sp-2) var(--sp-3); }

  /* ── Footer ────────────────────────────── */
  .footer-top { padding: var(--sp-8) 0 var(--sp-5); }
  .footer-heading { margin-bottom: var(--sp-3); }
  .footer-links { gap: var(--sp-1); }
  .footer-contact { gap: var(--sp-3); }
}


/* ════════════════════════════════════════════════════════════
   480px — Phone
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Global ────────────────────────────── */
  :root {
    --container-pad: var(--sp-4);
    --font-hero: clamp(1.625rem, 8.5vw, 2rem);
    --font-h2:   clamp(1.2rem, 5.5vw, 1.5rem);
  }

  .section { padding-block: var(--sp-8); }

  /* ── Buttons ───────────────────────────── */
  .btn { padding: 13px 24px; font-size: var(--font-sm); }
  .btn--lg { padding: 14px 24px; }
  .btn--sm { padding: 10px 18px; }

  /* ── Hero ──────────────────────────────── */
  .hero { padding-top: 90px; padding-bottom: 50px; }
  .hero-content { gap: var(--sp-4); }
  .hero-trust { display: none; } /* verberg trust op kleinste schermen, verderop getoond in USPs */

  /* ── Nav logo ──────────────────────────── */
  .nav-logo__icon { width: 30px; height: 30px; font-size: .9rem; border-radius: 8px; }
  .nav-logo__text { font-size: var(--font-sm); }

  /* ── Page hero ─────────────────────────── */
  .page-hero { padding: 90px 0 44px; }
  .page-hero__title { font-size: clamp(1.375rem, 8vw, 1.875rem); }
  .artikel-meta { font-size: var(--font-xs); gap: var(--sp-3); flex-wrap: wrap; }

  /* ── Section header ────────────────────── */
  .section-header p { font-size: var(--font-sm); }
  .section-label { font-size: 11px; }

  /* ── Reviews card ──────────────────────── */
  .review-card { padding: var(--sp-4); }
  .review-card__footer { flex-direction: column; gap: var(--sp-2); align-items: flex-start; }

  /* ── Form progress ─────────────────────── */
  .step-label { display: none; }
  .step-circle { width: 32px; height: 32px; font-size: 11px; }
  .form-progress__steps::before { top: 16px; }
  .form-progress__bar { margin-bottom: var(--sp-3); }
  .form-input { padding: 11px 12px 11px 36px; font-size: var(--font-sm); }
  .form-input-icon { font-size: .8rem; left: 12px; }
  .form-label { font-size: var(--font-xs); }

  /* ── Steden grid ───────────────────────── */
  .steden-grid { grid-template-columns: 1fr; }
  .stad-card { flex-direction: row; text-align: left; }
  .stad-card__arrow { display: block; }

  /* ── Stats strip ───────────────────────── */
  .stats-strip__item strong { font-size: var(--font-lg); }
  .stats-strip__item span { font-size: 11px; }

  /* ── Over ons stats ────────────────────── */
  .over-ons-stats { grid-template-columns: 1fr 1fr; }
  .big-stat { padding: var(--sp-4) var(--sp-3); }
  .big-stat__number { font-size: 1.5rem; }

  /* ── Blog featured ─────────────────────── */
  .blog-featured__meta { flex-wrap: wrap; gap: var(--sp-2); }
  .blog-cat { font-size: 10px; }

  /* ── Spoed ─────────────────────────────── */
  .urgentie-card { padding: var(--sp-5); }
  .urgentie-card__icon { font-size: 2rem; margin-bottom: var(--sp-3); }
}


/* ════════════════════════════════════════════════════════════
   375px — Small phone (iPhone SE, etc.)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  :root {
    --container-pad: var(--sp-3);
    --font-hero: 1.5rem;
    --font-h2:   1.2rem;
  }

  .section { padding-block: var(--sp-7); }

  /* ── Hero ──────────────────────────────── */
  .hero { padding-top: 85px; }
  .hero-content { gap: var(--sp-4); }

  /* ── Buttons full-width op hero ────────── */
  .hero-actions .btn,
  .page-hero__actions .btn { max-width: 100%; }

  /* ── Form wrapper ──────────────────────── */
  form { padding: var(--sp-3); }
  .form-progress { padding: var(--sp-3) var(--sp-3) var(--sp-3); }
  .form-step__title { font-size: var(--font-sm); gap: var(--sp-2); }

  /* ── Reviews ───────────────────────────── */
  .review-card { padding: var(--sp-4) var(--sp-3); }

  /* ── USP cards ─────────────────────────── */
  .usp-card { padding: var(--sp-4) var(--sp-4); }
  .usp-card h3 { font-size: var(--font-base); }

  /* ── Stats ─────────────────────────────── */
  .over-ons-stats { grid-template-columns: 1fr; }

  /* ── Footer ────────────────────────────── */
  .footer-legal { gap: var(--sp-3); }
  .footer-legal a { font-size: 11px; }

  /* ── Nav ───────────────────────────────── */
  .nav { gap: var(--sp-2); }
  .nav-logo { gap: var(--sp-2); }

  /* ── CTA Banner ────────────────────────── */
  .cta-banner { border-radius: var(--radius-md); }
}


/* ════════════════════════════════════════════════════════════
   TOUCH — Hover verwijderen voor touch devices
   ════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .hover-lift:hover         { transform: none; box-shadow: var(--shadow-card); }
  .usp-card:hover           { transform: none; }
  .review-card:hover        { transform: none; }
  .hiw-step:hover           { transform: none; }
  .stad-card:hover          { transform: none; border-color: var(--grey-200); }
  .bestemming-card:hover    { transform: none; }
  .blog-card:hover          { transform: none; }
  .blog-featured:hover      { transform: none; }
  .int-usp:hover            { transform: none; }
  .btn--primary:hover       { transform: none; }
  .btn--ghost:hover         { transform: none; }
  .btn--outline:hover       { transform: none; }
  .footer-social__link:hover{ transform: none; }
}


/* ════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced motion
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll,
  .animate-on-scroll.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .anim-float,
  .anim-float-slow { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════
   PRINT — Basisstijlen voor afdrukken
   ════════════════════════════════════════════════════════════ */
@media print {
  .site-header, .site-footer, .hero-illustration,
  .cta-banner, .nav-toggle, .nav-mobile { display: none !important; }
  body { font-size: 12pt; color: #000; }
  h1, h2, h3 { color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
}