/* ── RESPONSIVE ──
   Drie breakpoints: 900px (tablet), 600px (mobiel), en reduced-motion voor toegankelijkheid. */

/* Nav + hero op tablet/mobiel: hamburgermenu, hero-helften onder elkaar */
@media (max-width: 900px) {
  nav { padding: 1.1rem 1.5rem; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--off-white);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-bottom: 1px solid var(--rule);
  }
  .nav-links.open { max-height: 400px; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 0.9rem 1.5rem;
  }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-image-wrap { height: 70vh; }
  .hero-image-overlay { background: linear-gradient(to bottom, transparent 80%, var(--off-white) 100%); }
  .slide-dots { right: 0; }
  .hero-text { padding: 2.5rem 1.75rem 3.5rem; }
  .hero-intro { max-width: none; }
}

/* Secties 2-7 op tablet: minder kolommen, kleinere coverflow-kaarten */
@media (max-width: 900px) {
  .fotos-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
  .gedichten-grid { grid-template-columns: 1fr; gap: 3rem; }
  .gedicht-typed { padding: 2.4rem 1.25rem; }
  .coverflow-stage { height: 380px; }
  .coverflow-card { width: 220px; height: 300px; }
  .herinneringen-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
}

/* Secties 2-7 op smalle telefoons: nog compacter, alles onder elkaar */
@media (max-width: 600px) {
  .fotos-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
  .fotos-nav-row { gap: 1rem; }
  .lightbox-arrow { width: 40px; height: 40px; font-size: 1.1rem; }
  .lightbox-arrow-prev { left: 0.5rem; }
  .lightbox-arrow-next { right: 0.5rem; }
  .schilderij-tab { flex: 1 1 100%; }
  .coverflow-stage { height: 380px; }
  .coverflow-card { width: 250px; height: 400px; }
  .coverflow-typed-text { font-size: 0.80rem; }
  .coverflow-nav-row { gap: 1rem; }
  .lightbox-typed { padding: 2rem 1.5rem; font-size: 1rem; max-width: 92vw; }
  .afscheid-name { font-size: 1.15rem; }
  .afscheid-header { padding: 1.4rem 0.1rem; gap: 1rem; }
  .herinneringen-grid { grid-template-columns: 1fr; }
  .herinneringen-toolbar { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .herinnering-form-inner { padding: 1.6rem 1.4rem; }
}

/* Animaties uitschakelen voor bezoekers die dat als voorkeur hebben ingesteld */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .slide { transition: none; }
  .scroll-line { animation: none; }
}