/* Rijschool Voordelig — responsive layer
 * All breakpoints are min-width (mobile-first). Base styles in style.css are 375px+.
 */

/* ---------- Tablet 768px+ ---------- */
@media (min-width: 768px) {
  .container { padding-inline: var(--container-pad-desktop); }
  .review-band__inner { flex-direction: row; align-items: center; gap: var(--space-xl); }
  .review-band__sep { display: block; }
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .instructeur-grid { grid-template-columns: repeat(3, 1fr); }
  .instructeur-card__photo-wrap { aspect-ratio: 3/4; }

  h1 { font-size: 2.5rem; }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  .h1-hero { font-size: 3rem; }
  .stat__num { font-size: 3rem; }

  .section { padding-block: var(--space-3xl); }
  .section--hero { padding-block: var(--space-3xl); }

  .cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }
  .cta-row .btn { width: auto; }

  .hero__inner {
    flex-direction: row;
    gap: var(--space-2xl);
    align-items: center;
  }
  .hero__content { flex: 0 1 56%; }
  .hero__media { flex: 0 1 44%; max-width: 480px; }
  .hero__decoration { width: 280px; height: 280px; }

  .stat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
  .stat:not(:last-child) {
    border-right: 1px solid var(--color-border-dark);
    padding-right: var(--space-xl);
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

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

  .geslaagden-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .awards { grid-template-columns: repeat(4, 1fr); }

  .area {
    grid-template-columns: 4fr 5fr;
    align-items: center;
  }

  .form__row--2col { grid-template-columns: 1fr 1fr; }

  .two-col { grid-template-columns: 1fr 1fr; }

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

  .final-cta h2 { font-size: var(--fs-h2); }
}

/* ---------- Desktop 1024px+ ---------- */
@media (min-width: 1024px) {
  h1 { font-size: var(--fs-h1); }
  .h1-hero { font-size: var(--fs-h1-hero); max-width: 18ch; }
  .stat__num { font-size: var(--fs-stat); }

  .service-grid { grid-template-columns: repeat(4, 1fr); }
  .geslaagden-grid { grid-template-columns: repeat(4, 1fr); }
  .feature-list { grid-template-columns: repeat(3, 1fr); }

  .step { padding: var(--space-xl); }
  .steps { grid-template-columns: repeat(2, 1fr); }

  .price-card { padding: var(--space-xl); }

  .contact-layout {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-2xl);
  }

  .final-cta h2 { font-size: 2.75rem; }
  .final-cta p { font-size: 1.25rem; }
}

/* ---------- Wide desktop 1280px+ ---------- */
@media (min-width: 1280px) {
  .h1-hero { font-size: 5rem; }
}