/* ============================================================
   NI INSPECTIES — eigen aanpassingen NÁ de design-handoff.
   Apart bestand (geladen ná ni-site.css) zodat deze fixes bewaard
   blijven als de design-CSS uit een nieuwe handoff-bundle opnieuw
   wordt geïmporteerd.
   ============================================================ */

/* Foto's-in-actie (homepage): de design-CSS hield 3 kolommen aan op
   álle schermbreedtes, waardoor de kaartjes op mobiel te smal werden en
   de bijschriften ("Thermografie", "warmtebeeld") werden afgekapt. */
@media (max-width: 900px) {
  .photo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .photo-grid { grid-template-columns: 1fr; }
}

/* Bijschriften: lange woorden netjes laten breken i.p.v. afkappen. */
.photo-card figcaption { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.photo-card figcaption .lc { flex: none; }

/* Hero-statistieken (1500+ / 6+ / 5+): op mobiel naast elkaar i.p.v. 2+1
   wrappen. Drie gelijke kolommen, kleiner getal zodat alles op één rij past. */
@media (max-width: 560px) {
  .hero-stats { gap: 10px; flex-wrap: nowrap; }
  .hero-stats .hero-stat { flex: 1; min-width: 0; }
  .hero-stats .hero-stat .n { font-size: 27px; }
  .hero-stats .hero-stat .l { font-size: 10.5px; line-height: 1.25; }
}

/* Header op mobiel: de tweede-tier knoppenrij (logo + Klantportaal + thema +
   telefoon + offerte) past niet op smalle schermen → compacter maken. */
@media (max-width: 720px) {
  /* Portaal-/inlogknop blijft op mobiel zichtbaar, maar compact (alleen het slot-icoon). */
  header.site .btn-portal { padding: 8px 11px; }
  header.site .btn-portal .btn-portal-tekst { display: none; }
  header.site .nav-sep { display: none; }
  .nav-top { height: 64px; }
  .nav-top .right { gap: 8px; }
  .brand .bt span { display: none; }           /* subtitel "Kwaliteit en eerlijkheid" weg */
  .nav-bottom nav { gap: 18px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 15px; }
  .brand .mark { width: 34px; height: 34px; }
  .brand .bt b { font-size: 14.5px; letter-spacing: .02em; }
  .theme-toggle, .phone-icon { width: 36px; height: 36px; }
  .nav-top .right .btn-green { padding: 8px 12px; font-size: 12.5px; }
  .nav-top .right .btn-green .nav-aanvragen { display: none; }  /* "Offerte" i.p.v. "Offerte aanvragen" */
  .nav-bottom nav { gap: 15px; }
  .nav-bottom nav a { font-size: 13px; }
}

/* Klantportaal-preview: de cijfers in de 4 mini-statblokjes (1 / 3 / 2 / 25)
   stonden op verschillende hoogtes doordat sommige labels 2 regels beslaan en
   "Geldig" maar 1. De blokjes zijn even hoog (grid-stretch); door het cijfer
   naar onderen te duwen lijnen ze allemaal mooi op één lijn uit. */
.pp-stat { display: flex; flex-direction: column; }
.pp-stat .n { margin-top: auto; }

/* Op mobiel stond er te veel witruimte BÓVEN de eerste tekst: de hero/eerste
   sectie heeft een grote top-padding (72–84px). Op smalle schermen compacter,
   zodat de content direct onder de menubalk begint. */
/* Eerste sectie ná de header overal DEZELFDE top-ruimte als de werkwijze-pagina
   (Wisse: "bij werkwijze is het perfect"). De pagina's gebruikten verschillende
   hero-classes met andere top-padding (hero-alt 72 / .block 84 / pagehero 56 /
   dhero 42); dit trekt ze gelijk: 56px desktop, 28px mobiel. */
header.site + section { padding-top: 56px !important; }   /* !important overrulet inline padding-top op sommige eerste secties (bv. diensten) */
.wm-intro { padding-top: 0 !important; }                  /* werkwijze zet de ruimte op de sectie i.p.v. hierop */

@media (max-width: 600px) {
  header.site + section { padding-top: 28px !important; }
  .hero-alt { padding-bottom: 52px; }
}

/* Klikbare certificaat-badges (SCIOS / Bureau Veritas) in de footer */
a.cert { cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
a.cert:hover { background: rgba(255,255,255,.10); border-color: rgba(139,191,67,.5); transform: translateY(-1px); }

/* === Mobiel hamburger-menu === (met 6 nav-items past de rij niet meer op
   smalle schermen). Op mobiel verdwijnt de nav-rij achter de ☰-knop; op
   desktop verandert er niets. Telefoonnummer verhuist naar het uitklapmenu. */
.nav-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1.5px solid var(--line-strong); background: #fff; color: var(--anthracite); cursor: pointer; flex: none; }
.nav-burger .lc { width: 20px; height: 20px; }
[data-theme="dark"] .nav-burger { background: var(--d-surface-2); border-color: var(--d-line-2); color: #E8EAE6; }
.nav-only-mobile { display: none; }

@media (max-width: 720px) {
  .nav-burger { display: inline-flex; }
  header.site .phone-icon { display: none; }
  .nav-bottom { display: none; }
  body.nav-open .nav-bottom { display: block; }
  .nav-bottom .wrap { padding: 0; }
  .nav-bottom nav { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
  .nav-bottom nav a { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 15px; white-space: normal; }
  [data-theme="dark"] .nav-bottom nav a { border-bottom-color: var(--d-line); }
  .nav-bottom nav a::after { display: none; }
  .nav-only-mobile { display: flex; align-items: center; gap: 9px; }
}

/* Home: tussen het diensten/BES-blok en de 'NI in actie'-sectie stond ~168px
   witruimte (diensten-sectie 84px onder + inactie-sectie 84px boven, vooral
   storend op mobiel). Ingekort tot een normale sectie-overgang. Alleen home:
   de inactie-sectie op werkwijze heeft een inline padding-top die deze regel
   niet raakt (inline wint). */
#diensten { padding-bottom: 30px; }
section.block.inactie { padding-top: 30px; }
@media (max-width: 600px) {
  #diensten { padding-bottom: 16px; }
  section.block.inactie { padding-top: 16px; }
}

/* Nina-foto in het 'Hoi, ik ben Nina'-blok (klantportaal) wordt nu beheerd via
   de Nina-afbeeldingbibliotheek (admin → Nina-afbeelding): bron + uitsnede
   komen daaruit. De bibliotheekfoto's zijn hi-res (384px), dus de originele
   150×188 uit ni-site.css is scherp — geen verkleining meer nodig. */

/* Roulerende site-foto's ("NI in actie" + Over ons): zachte cross-fade bij wissel. */
[data-roulatie] img { transition: opacity .25s ease; }