/*
 * responsive.css
 * ─────────────────────────────────────────────────────
 * Media queries voor mobiel (< 900px).
 * Breakpoint: 900px - kolommen stapelen verticaal.
 *
 * Hero: hoogte terug naar 60vh op mobiel zodat de foto
 * niet te dominant wordt. Padding kleiner voor smalle schermen.
 * ─────────────────────────────────────────────────────
 */

@media (max-width: 900px) {

  /* ── Hero ──────────────────────────────────────────── */

  /* Iets minder hoog op mobiel */
  .hero {
    height: 60vh;
    min-height: 420px;
  }

  .hero-content {
    padding: 2.5rem;
  }


  /* ── Info ───────────────────────────────────────────── */

  .info {
    padding: 4rem 2.5rem;
  }

  /* Drie kolommen → één kolom gestapeld */
  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0;
  }
  .info-col:last-child {
    border-bottom: none;
  }


  /* ── Contact ────────────────────────────────────────── */

  .contact {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 4rem 2.5rem;
  }

  /* Formulier vult volledige breedte op mobiel */
  form {
    max-width: 100%;
  }

  /* Twee formuliervelden onder elkaar */
  .form-row {
    grid-template-columns: 1fr;
  }


  /* ── Footer ─────────────────────────────────────────── */

  footer {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem;
  }

  .footer-links {
    align-items: flex-start;
  }

  .footer-contact {
    text-align: left;
  }
}