/* ==========================================================================
   Vandaag Duurzaam - mobiele verfijning
   Werkt alleen op smalle schermen en raakt de desktopweergave niet aan.
   Dit bestand gebruikt !important zodat het altijd voorrang krijgt op de
   stijlregels in de pagina zelf, waar je de link ook plaatst.
   Wil je alles terug zoals het was: haal op elke pagina de regel
   <link rel="stylesheet" href="vd-mobiel.css"> weg. Meer is niet nodig.
   ========================================================================== */

/* --- 1. Niets mag breder zijn dan het scherm ------------------------------
   Eén te breed element zorgt er in een in-app browser voor dat de hele
   pagina wordt uitgezoomd. Dit is het vangnet daartegen. */
@media (max-width: 860px) {
  img, video, svg, iframe, canvas { max-width: 100% !important; height: auto !important; }
  pre, table { max-width: 100% !important; overflow-x: auto !important; }
}

/* --- 2. Verticale ruimte -------------------------------------------------
   De secties gebruiken 9vh boven en onder. Op een lange, smalle telefoon
   levert dat grote lege vlakken op en veel scrollen. Op mobiel zetten we
   dat om naar vaste, compactere waarden. */
@media (max-width: 720px) {
  section { padding: 46px 5vw !important; }
  .hero { padding: 32px 5vw 40px !important; }
  footer { padding: 52px 5vw 40px !important; }
  .sectiekop, h2 { max-width: 100% !important; }
  .lead { font-size: 1.06rem !important; margin-top: 16px !important; }
  .intro { font-size: 1rem !important; }
  .kaarten2, .kaarten3, .kaarten4 { gap: 14px !important; }
}

/* --- 3. Rasters die op twee kolommen bleven staan ------------------------
   De merkenrij en de feitenrij gingen van vier naar twee kolommen en
   daarna niet verder. Op een toestel van 390 pixels werden dat kolommen
   van nog geen 160 pixels. */
@media (max-width: 560px) {
  .merken { grid-template-columns: 1fr !important; }
  .feit { grid-template-columns: 1fr !important; }
  .fotoband, .fotoraster { grid-template-columns: 1fr !important; }
}

/* --- 4. Aanraakvlakken ---------------------------------------------------
   Knoppen en menu-items minstens 44 pixels hoog, zodat ze met een duim
   goed te raken zijn. */
@media (max-width: 720px) {
  .knop {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
  }
  nav > .knop { min-height: 40px !important; }
  nav ul li a { display: block !important; padding-top: 4px !important; padding-bottom: 4px !important; }
  .tag { font-size: .82rem !important; }
}

/* --- 5. Merkpagina Enphase ----------------------------------------------
   Het certificaat is een liggende afbeelding. Over de volle breedte van
   een telefoon wordt de tekst erop onleesbaar klein, dus geven we hem
   wat meer lucht en een rustiger kader. */
@media (max-width: 720px) {
  .enp-cert figure { padding: 10px !important; }
  .enp-cert figcaption { font-size: .8rem !important; }
  .enp-feiten li { flex-wrap: wrap !important; gap: 2px !important; }
  .enp-feiten li b { text-align: left !important; width: 100% !important; }
  .enp-foto { padding: 14px !important; }
}