/* ============================================================
   usdc-pagina.css
   Gedeelde opmaak voor de vernieuwde pagina's van unsognodicasa.it
   Alles is gescoped onder .u- zodat het niets van het Canvas-thema raakt.
   Laden na custom.css:
   <link rel="stylesheet" href="../css/usdc-pagina.css" type="text/css" />
   ============================================================ */

:root{
  --u-rood:#c8102e;
  --u-rood-donker:#a00c24;
  --u-groen:#1abc9c;
  --u-inkt:#1f2124;
  --u-grijs:#5b6068;
  --u-lijn:#e3e1dc;
  --u-papier:#faf8f5;
  --u-zand:#f3efe8;
  --u-font:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}

.u-page{ font-family:var(--u-font); color:var(--u-inkt); -webkit-font-smoothing:antialiased; }
.u-page *, .u-page *::before, .u-page *::after{ box-sizing:border-box; }
.u-page img{ max-width:100%; height:auto; }

/* ---------- structuur ---------- */
.u-wrap{ max-width:1060px; margin:0 auto; padding:0 clamp(18px,5vw,28px); }
.u-smal{ max-width:720px; margin-left:auto; margin-right:auto; }
.u-sectie{ padding:clamp(40px,8vw,68px) 0; }
.u-band{ background:var(--u-papier); border-top:1px solid var(--u-lijn); border-bottom:1px solid var(--u-lijn); }
.u-band--zand{ background:var(--u-zand); }
.u-band--donker{ background:#20232a; color:#fff; border:0; }
.u-band--donker .u-kop, .u-band--donker .u-lead{ color:#fff; }

/* ---------- typografie ---------- */
.u-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 10px; color:var(--u-rood);
}
.u-titel{ font-size:clamp(27px,5.4vw,42px); line-height:1.15; font-weight:700; margin:0 0 14px; letter-spacing:-.01em; }
.u-kop{ font-size:clamp(21px,3.6vw,29px); line-height:1.25; font-weight:700; margin:0 0 8px; }
.u-kop--streep::after{ content:""; display:block; width:52px; height:3px; background:var(--u-rood); margin:14px 0 0; }
.u-midden{ text-align:center; }
.u-midden .u-kop--streep::after{ margin-left:auto; margin-right:auto; }
.u-lead{ font-size:clamp(17px,2.4vw,19px); line-height:1.65; margin:0 0 18px; }
.u-tekst{ font-size:16.5px; line-height:1.7; color:var(--u-grijs); margin:0 0 18px; }
.u-tekst strong, .u-lead strong{ color:var(--u-inkt); }
.u-band--donker .u-tekst{ color:#cfd3d8; }

/* ---------- belofte-chips onder de slider ---------- */
.u-chips{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.u-chips li{
  background:#fff; border:1px solid var(--u-lijn); border-radius:100px;
  padding:9px 18px; font-size:15px; font-weight:600; line-height:1.3;
}
.u-chips li::before{ content:"✓"; color:var(--u-rood); font-weight:700; margin-right:8px; }

/* ---------- citaten ---------- */
.u-citaten{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin:0; padding:0; list-style:none; }
.u-citaat{
  background:#fff; border:1px solid var(--u-lijn); border-radius:10px; padding:22px 22px 18px;
  position:relative;
}
.u-citaat::before{
  content:"”"; position:absolute; top:2px; left:16px;
  font:700 54px/1 Georgia,serif; color:var(--u-rood); opacity:.22;
}
.u-citaat p{ font-size:16px; line-height:1.6; margin:0 0 12px; font-style:italic; }
.u-citaat cite{ font-size:14px; color:var(--u-grijs); font-style:normal; font-weight:600; }

/* ---------- vragen als raster ---------- */
.u-vragen{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.u-vragen li{
  background:#fff; border:1px solid var(--u-lijn); border-left:3px solid var(--u-rood);
  border-radius:0 8px 8px 0; padding:12px 16px; font-size:15.5px; line-height:1.5;
}

/* ---------- stappen ---------- */
.u-stappen{ list-style:none; margin:26px 0 0; padding:0; counter-reset:ustap; }
.u-stappen li{
  position:relative; counter-increment:ustap; padding:0 0 26px 56px;
  font-size:16.5px; line-height:1.65; color:var(--u-grijs);
}
.u-stappen li::before{
  content:counter(ustap); position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%; background:var(--u-rood); color:#fff;
  font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.u-stappen li::after{
  content:""; position:absolute; left:18px; top:40px; bottom:4px; width:2px; background:var(--u-lijn);
}
.u-stappen li:last-child{ padding-bottom:0; }
.u-stappen li:last-child::after{ display:none; }
.u-stappen b{ color:var(--u-inkt); font-weight:600; display:block; margin-bottom:2px; }

/* ---------- twee kolommen tekst en beeld ---------- */
.u-duo{ display:grid; gap:clamp(22px,4vw,44px); grid-template-columns:1fr; align-items:start; }
@media(min-width:820px){
  .u-duo{ grid-template-columns:minmax(0,1fr) 320px; }
  .u-duo--omgekeerd{ grid-template-columns:320px minmax(0,1fr); }
  .u-duo--omgekeerd .u-duo__beeld{ order:-1; }
}
.u-duo__beeld img{ border-radius:10px; display:block; width:100%; }
.u-duo__beeld figcaption{ font-size:13.5px; color:var(--u-grijs); margin-top:8px; font-style:italic; }

/* ---------- cijfers ---------- */
.u-stats{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:28px 0 0; padding:0; list-style:none; }
.u-stat{ background:#fff; border:1px solid var(--u-lijn); border-radius:10px; padding:24px 22px; text-align:center; }
.u-stat b{ display:block; font-size:38px; line-height:1; font-weight:700; color:var(--u-rood); margin-bottom:8px; }
.u-stat span{ display:block; font-size:15.5px; font-weight:600; margin-bottom:6px; }
.u-stat small{ display:block; font-size:14.5px; line-height:1.55; color:var(--u-grijs); }

/* ---------- geruststelling ---------- */
.u-gerust{
  background:#fff; border-left:4px solid var(--u-rood); border-radius:0 8px 8px 0;
  padding:18px 20px; margin:clamp(26px,5vw,36px) 0; font-size:16px; line-height:1.6;
}
.u-gerust strong{ display:block; margin-bottom:4px; }

/* ---------- knoppen ---------- */
.u-cta{ margin:clamp(26px,5vw,36px) 0 0; text-align:center; }
.u-knop{
  display:inline-block; background:var(--u-rood); color:#fff;
  font:600 17px/1.2 var(--u-font); min-height:54px; padding:18px 34px;
  border-radius:8px; text-decoration:none; text-align:center; border:2px solid transparent;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:background .15s;
}
.u-knop:visited{ color:#fff; }
.u-knop:active{ background:var(--u-rood-donker); }
@media (hover:hover){ .u-knop:hover{ background:#e01434; color:#fff; text-decoration:none; } }
.u-knop:focus-visible{ outline:3px solid #7ac528; outline-offset:3px; }
.u-knop--rustig{ background:transparent; color:var(--u-rood); border-color:var(--u-rood); }
.u-knop--rustig:visited{ color:var(--u-rood); }
@media (hover:hover){ .u-knop--rustig:hover{ background:var(--u-rood); color:#fff; } }
.u-band--donker .u-knop--rustig{ color:#fff; border-color:#fff; }
.u-onderknop{ font-size:14.5px; color:var(--u-grijs); margin:14px 0 0; }
.u-band--donker .u-onderknop{ color:#aeb4bb; }

/* ---------- uitgelicht kaartje ---------- */
.u-uitgelicht{
  display:grid; gap:0; grid-template-columns:1fr; background:#fff;
  border:1px solid var(--u-lijn); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit;
}
@media(min-width:700px){ .u-uitgelicht{ grid-template-columns:300px 1fr; } }
.u-uitgelicht img{ display:block; width:100%; height:100%; object-fit:cover; }
.u-uitgelicht div{ padding:22px 24px; }
.u-uitgelicht h3{ font-size:19px; margin:0 0 8px; font-weight:700; }
.u-uitgelicht p{ font-size:15.5px; line-height:1.6; color:var(--u-grijs); margin:0 0 10px; }
.u-uitgelicht span{ color:var(--u-rood); font-weight:600; font-size:15px; }

/* ---------- mobiel ---------- */
@media(max-width:600px){
  .u-knop{ display:block; width:100%; padding:18px 20px; }
  .u-stappen li{ padding-left:50px; }
  .u-chips{ justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce){ .u-knop{ transition:none; } }

/* ============================================================
   Aanvullingen voor stappenpagina's zoals Onze_aanpak.php
   ============================================================ */

/* Genummerde sectiekop met duidelijk STAP-label */
.u-stapkop{ display:flex; align-items:center; gap:16px; margin:0 0 6px; }
.u-stapkop__nr{
  flex:0 0 auto; width:54px; height:54px; border-radius:50%;
  background:var(--u-rood); color:#fff; font:700 23px/1 var(--u-font);
  display:flex; align-items:center; justify-content:center;
}
.u-stapkop__label{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--u-rood); margin:0 0 4px;
}
.u-stapkop h2{ font-size:clamp(20px,3.4vw,28px); line-height:1.2; font-weight:700; margin:0; }
.u-stapkop--los{
  margin-bottom:26px; padding-bottom:16px; border-bottom:3px solid var(--u-rood);
}
@media(max-width:600px){
  .u-stapkop{ gap:13px; }
  .u-stapkop__nr{ width:46px; height:46px; font-size:19px; }
}

/* Overzicht van de stappen bovenaan */
.u-overzicht{ list-style:none; margin:22px 0 0; padding:0; counter-reset:uov; display:grid; gap:10px; }
@media(min-width:760px){ .u-overzicht{ grid-template-columns:1fr 1fr; } }
.u-overzicht li{
  counter-increment:uov; position:relative; background:#fff; border:1px solid var(--u-lijn);
  border-radius:8px; padding:13px 16px 13px 52px; font-size:15.5px; line-height:1.45; font-weight:600;
}
.u-overzicht li::before{
  content:counter(uov); position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--u-zand); color:var(--u-rood);
  font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* Vinklijst */
.u-check{ list-style:none; margin:16px 0 18px; padding:0; }
.u-check li{
  position:relative; padding:0 0 12px 30px; font-size:16px; line-height:1.6; color:var(--u-grijs);
}
.u-check li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--u-rood); font-weight:700; font-size:16px;
}
.u-check strong{ color:var(--u-inkt); }

/* Bulletlijst met rode bolletjes */
.u-bullets{ list-style:none; margin:18px 0 20px; padding:0; }
.u-bullets li{
  position:relative; padding:0 0 14px 26px; font-size:16px; line-height:1.65; color:var(--u-grijs);
}
.u-bullets li:last-child{ padding-bottom:0; }
.u-bullets li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--u-rood);
}
.u-bullets strong{ color:var(--u-inkt); }

/* Beeldstrook */
.u-beelden{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin:26px 0 0; }
.u-beelden img{ display:block; width:100%; height:210px; object-fit:cover; border-radius:10px; }
.u-beelden figure{ margin:0; }
.u-beelden figcaption{ font-size:13px; color:var(--u-grijs); margin-top:6px; }

/* Aandachtsblok, bijvoorbeeld het fotobeleid */
.u-let{
  background:#fff; border:1px solid var(--u-lijn); border-left:4px solid var(--u-rood);
  border-radius:0 10px 10px 0; padding:20px 22px; margin:26px 0;
}
.u-let h3{ font-size:17.5px; font-weight:700; margin:0 0 8px; }
.u-let p{ font-size:16px; line-height:1.65; color:var(--u-grijs); margin:0 0 10px; }
.u-let p:last-child{ margin-bottom:0; }
.u-let a{ color:var(--u-rood); font-weight:600; }

/* Zachte scheiding tussen stappen */
.u-scheiding{ border:0; border-top:1px solid var(--u-lijn); margin:clamp(34px,6vw,52px) 0; }