/* ===================================================================
   StorageIQ · printlaag
   De site is voor het scherm gemaakt; dit maakt hem ook op papier
   leesbaar. Behoudt kleur en kolommen, voorkomt dat beelden of
   kaarten alleen op een pagina belanden.
   =================================================================== */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { background: #fff !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* animaties uit — anders printen reveal-elementen onzichtbaar */
  .reveal, .reveal * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }

  /* header één keer bovenaan, niet meelopend */
  .site-header { position: static !important; box-shadow: none !important; }
  .nav-drop, .nav-caret, .hamburger, .to-top, .cookie, .skip-link { display: none !important; }

  /* secties compacter en niet doorgebroken */
  .section, .phero, .dip { padding-top: 16mm !important; padding-bottom: 16mm !important; }
  section { break-inside: avoid-page; page-break-inside: avoid; }
  h1, h2, h3, h4, .h1, .h2, .h3, .dip-nm { break-after: avoid; page-break-after: avoid; }
  .section-head { break-after: avoid; page-break-after: avoid; }

  /* kolommen behouden — de browser klapt anders naar één kolom */
  .phero-grid { grid-template-columns: 1.05fr .95fr !important; gap: 26px !important; }
  .dip-grid { grid-template-columns: 1fr 1fr !important; }
  .grid.g-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
  .grid.g-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .steps { grid-template-columns: repeat(5, 1fr) !important; gap: 10px !important; }
  .reason-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px 20px !important; }
  .prf { grid-template-columns: 1fr 1fr !important; }

  /* beelden nooit alleen op een pagina */
  img, svg, figure, .figure, .dip-half img, .phero-fig { break-inside: avoid; page-break-inside: avoid; max-width: 100% !important; }
  .dip-half img { height: 62mm !important; width: auto !important; }
  .phero-fig, .phero-fig img { max-height: 105mm !important; }
  .figure { max-height: 105mm !important; }

  /* kaarten en blokken bij elkaar houden */
  .card, .dip-half, .step, .reason, .prf-quote, .cta-panel, .trust-strip, .accordion-row, .dl-row, .faq-row { break-inside: avoid; page-break-inside: avoid; }

  /* koppen kleiner op papier */
  .phero .h1, .phero h1 { font-size: 34pt !important; line-height: 1.05 !important; }
  .h2 { font-size: 20pt !important; }
  .h3, .dip-nm { font-size: 15pt !important; }
  .lead { font-size: 11pt !important; }
  body { font-size: 10pt !important; }

  /* decoratie die op papier niets doet */
  .dip-glow, .glow, .phero-glow, .aurora, .grain { display: none !important; }

  /* donkere secties blijven donker, maar zonder zware schaduwen */
  .ctx-dark, .dip { box-shadow: none !important; }
  .render-shadow, .card { box-shadow: none !important; }

  /* footer aan het eind, in één stuk */
  .site-footer { break-before: avoid; page-break-inside: avoid; padding: 10mm 0 !important; }

  /* interactieve elementen die op papier verwarren */
  .ai, .hd-search, .wiz, .tabs-nav, .filter-row { display: none !important; }
}