/* Projectenpagina - bouwt voort op style.css (zelfde tokens, knoppen, glas en navigatie).
   Concept: een bouwtekening-achtergrond met echte foto's als hoofdrol. Elk blok past een overtuigingsprincipe toe:
   hero en raster = sociaal bewijs, uitgelicht en achter de schermen = autoriteit, tips = wederkerigheid,
   start = sympathie + eenheid + kleine eerste stap (commitment) + eerlijke schaarste. */

.page-projecten{
  background:
    linear-gradient(rgba(150,185,255,.05) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(150,185,255,.05) 1px,transparent 1px) 0 0/32px 32px,
    var(--bg);
}
.page-projecten main{position:relative;z-index:2}
.links a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--blue)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blue{color:var(--blue-soft)}
.out{color:transparent;-webkit-text-stroke:2px var(--ink)}

/* Klikbare foto's */
.zoom{position:relative;display:block;width:100%;padding:0;border:0;background:var(--panel);cursor:zoom-in;overflow:hidden;color:inherit}
.zoom img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.zoom:hover img{transform:scale(1.04)}
.zoom::after{content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;background:rgba(4,21,47,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f7fd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transition:opacity .25s}
.zoom:hover::after,.zoom:focus-visible::after{opacity:1}

/* ===== Hero ===== */
.p-hero{padding-top:calc(var(--nav) + env(safe-area-inset-top,0px) + 48px);padding-bottom:56px}
.p-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.p-hero-text{min-width:0}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-soft);margin-bottom:28px;min-height:44px}
.back:hover{color:var(--ink)}
.back .icon{width:16px;height:16px}
.p-h1{font-weight:800;font-size:clamp(3rem,7vw,6rem);letter-spacing:-.005em}
.p-lede{margin-top:22px;max-width:30em;color:var(--ink-soft);font-size:1.15rem}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px 0 0;border:1px solid var(--line);background:rgba(4,21,47,.55)}
.facts div{padding:14px 16px;border-right:1px solid var(--line);min-width:0}
.facts div:last-child{border-right:0}
.facts dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.facts dd{margin:6px 0 0;font-family:var(--f-display);text-transform:uppercase;font-weight:700;font-size:1.25rem;line-height:1.05}
.facts .num{font-size:2.4rem;color:var(--blue-soft);font-variant-numeric:tabular-nums}
.p-hero-media{position:relative;margin:0;padding:0 0 56px 0;min-width:0}
.shot-main{aspect-ratio:4/3;border:1px solid var(--line);max-width:100%}
.shot-main::before{content:"";position:absolute;left:-1px;top:-1px;width:22px;height:22px;border-top:3px solid var(--blue);border-left:3px solid var(--blue);z-index:2}
.shot-inset{position:absolute;left:-28px;bottom:0;width:36%;aspect-ratio:3/4;border:4px solid var(--bg);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.p-hero-media figcaption{position:absolute;right:0;bottom:18px;color:var(--ink-soft);font-size:.7rem}

/* ===== Secties ===== */
.sec-p{padding-block:72px}
.sec-p .sec-head{margin-bottom:34px;max-width:680px}

/* Uitgelicht project */
.case{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:stretch}
.case-photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;min-height:520px}
.case-photos .c1{grid-row:span 2}
.case-photos .zoom{border:1px solid var(--line)}
.tag{position:absolute;left:10px;top:10px;background:rgba(4,21,47,.85);color:var(--ink);padding:5px 9px;font-size:.66rem}
.case-text{display:flex;flex-direction:column;gap:16px}
.spec{margin:0;display:grid;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-soft);padding-top:3px}
.spec dd{margin:0}
.case-text h3{font-size:1.7rem;font-weight:800;margin-top:6px}
.case-text p{color:var(--ink-soft)}
.case-text .check{align-self:flex-start;margin-top:auto}

/* Filter */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--line);background:rgba(4,21,47,.6);color:var(--ink-soft);font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.chip:hover{border-color:var(--blue-soft);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.chip .count{font-family:var(--f-mono);font-size:.72rem;opacity:.85}

/* Raster */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);min-width:0;transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-color:var(--blue-soft);transform:translateY(-3px)}
.card .zoom{aspect-ratio:4/3}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-body .mono{font-size:.66rem}
.card-body h3{font-size:1.45rem;font-weight:800}
.card-body p{color:var(--ink-soft);font-size:.95rem}
.card[hidden]{display:none!important}
.more-photo{align-self:flex-start;margin-top:auto;min-height:44px;padding:0;border:0;background:none;color:var(--blue-soft);font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.more-photo:hover{color:var(--ink)}

/* Achter de schermen */
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:f;position:relative}
.process::before{content:"";position:absolute;left:0;right:0;top:-18px;height:6px;background:repeating-linear-gradient(90deg,rgba(150,185,255,.4) 0 1px,transparent 1px 12px)}
.process li{display:flex;flex-direction:column;gap:8px;min-width:0}
.process .zoom{aspect-ratio:4/3;border:1px solid var(--line);margin-bottom:8px}
.process h3{font-size:1.6rem;font-weight:800}
.process p{color:var(--ink-soft)}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.review{margin:0;background:var(--glass);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:14px}
.review.is-empty{border-style:dashed;border-color:rgba(255,209,102,.5)}
.review.is-empty blockquote p,.review.is-empty figcaption{color:var(--check)}
.stars{color:var(--blue-soft);letter-spacing:.2em;font-size:1.05rem}
.review blockquote{margin:0;font-size:1.1rem}
.review figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.review figcaption b{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem}
.review figcaption span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.insta-band{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;border:1px solid var(--line);background:rgba(4,21,47,.6);padding:20px 24px}
.insta-band p{margin-top:6px;color:var(--ink-soft)}

/* Tips */
.tips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;counter-reset:t}
.tips li{counter-increment:t;position:relative;background:var(--glass);border:1px solid var(--line);padding:24px 24px 24px 76px;min-width:0}
.tips li::before{content:counter(t);position:absolute;left:22px;top:20px;font-family:var(--f-display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--blue-soft)}
.tips h3{font-size:1.45rem;font-weight:800}
.tips p{margin-top:8px;color:var(--ink-soft)}
.tips a{color:var(--ink);text-decoration-color:var(--blue);text-underline-offset:3px}

/* Start */
.start{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:36px;align-items:center}
.start-photo{aspect-ratio:3/4;border:1px solid var(--line)}
.start-text{min-width:0;display:flex;flex-direction:column;gap:16px}
.start-text h2{font-size:clamp(2.3rem,4.8vw,3.8rem);font-weight:800}
.start-text>p{color:var(--ink-soft);max-width:34em}
.mini-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.mini-steps li{display:flex;align-items:center;gap:10px;font-family:var(--f-display);text-transform:uppercase;font-weight:700;letter-spacing:.04em;font-size:1.15rem}
.mini-steps .num{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--blue);color:#fff;font-size:1rem}
.start .hero-cta{margin-top:6px}
.note{font-size:.95rem;color:var(--ink-soft);border-left:3px solid var(--blue);padding-left:12px}

/* Footer-links */
.page-projecten footer a{color:var(--ink-soft)}
.page-projecten footer a:hover{color:var(--ink)}

/* Lightbox */
.lightbox{border:0;padding:0;max-width:min(1200px,94vw);max-height:92vh;background:transparent;color:var(--ink);overflow:visible}
.lightbox::backdrop{background:rgba(2,10,24,.92)}
.lightbox figure{margin:0;display:flex;flex-direction:column;gap:10px}
.lightbox img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:0 auto;border:1px solid var(--line)}
.lightbox figcaption{text-align:center;color:var(--ink-soft)}
.lb-close{position:absolute;right:0;top:-56px;width:48px;height:48px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.lb-close .icon{width:22px;height:22px}

/* ===== Responsief ===== */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .p-hero{padding-top:calc(var(--nav) + env(safe-area-inset-top,0px) + 24px)}
  .p-hero-grid{grid-template-columns:1fr;gap:28px}
  .p-hero-media{padding-bottom:0}
  .shot-inset{display:none}
  .p-hero-media figcaption{position:static;margin-top:8px}
  .case{grid-template-columns:1fr}
  .case-photos{min-height:0;grid-template-rows:auto auto}
  .case-photos .zoom{aspect-ratio:3/4}
  .case-photos .c2{aspect-ratio:4/3}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process{grid-template-columns:1fr;gap:36px}
  .reviews{grid-template-columns:1fr}
  .tips{grid-template-columns:1fr}
  .start{grid-template-columns:1fr}
  .start-photo{max-width:320px}
  .sec-p{padding-block:52px}
  .callbar{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
  .callbar .btn{width:100%}
}
@media (max-width:600px){
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
  .facts div:last-child{border-bottom:0}
  .facts dd{margin:0;text-align:right}
  .facts .num{font-size:1.8rem}
  .grid{grid-template-columns:1fr}
  .case-photos{grid-template-columns:1fr 1fr}
  .spec div{grid-template-columns:1fr;gap:2px}
  .tips li{padding:20px 18px 20px 62px}
  .tips li::before{left:16px;font-size:2.2rem}
  .chip{font-size:.95rem;padding:8px 12px}
  .out{-webkit-text-stroke-width:1.5px}
  .lb-close{top:-52px}
}
@media (prefers-reduced-motion:reduce){
  .zoom img,.card,.chip{transition:none}
  .zoom:hover img{transform:none}
  .card:hover{transform:none}
}

/* Uitgelichte projectkaart (mantelzorgwoning): 2 kolommen breed, 2 rijen hoog */
.card.is-feature{grid-column:span 2;grid-row:span 2}
.card.is-feature .zoom{aspect-ratio:auto;flex:1 1 auto;min-height:300px}
.card.is-feature .zoom img{position:absolute;inset:0}
.card.is-feature .card-body h3{font-size:1.9rem}
.card.is-feature .card-body{flex:0 0 auto}
@media (max-width:900px){.card.is-feature{grid-row:span 1}.card.is-feature .zoom{aspect-ratio:4/3;min-height:0}}
@media (max-width:600px){.card.is-feature{grid-column:span 1}}