/*
  Echte use cases (/cases/<slug>, 27 oktober 2026), naast dag.css en voorbeeld.css (het venster
  en de telefoon). Alleen op de casepagina's geladen. Markup: scripts/cases.mjs.
*/

/* ===== de klant in twee regels, direct onder de held ===== */
.case-klant>.hm-wrap{padding-block:clamp(28px,3.4vw,44px)}
.case-klant-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,5vw,88px);align-items:baseline}
.case-klant-naam{display:flex;flex-direction:column;gap:6px}
.case-klant-naam b{font:540 1.2rem/1.25 var(--display);letter-spacing:-.02em}
.case-klant-naam a{width:fit-content;font:400 .8rem/1.4 var(--mono);color:var(--dag-mist);text-decoration:none}
.case-klant-naam a:hover{color:var(--dag-ink);text-decoration:underline}
.case-klant-regels p{max-width:62ch;color:var(--dag-mist)}
.case-klant-regels p:first-child{color:var(--dag-ink);font-size:1.06rem}
.case-klant-regels p+p{margin-top:10px;font-size:.95rem}

/* ===== wat er gebouwd is: per onderdeel tekst en beeld ===== */
.case-delen{list-style:none;margin:0;padding:0;display:grid;gap:clamp(64px,9vw,128px)}
.case-deel{display:grid;gap:clamp(28px,3.6vw,44px)}
.case-deel-tekst{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,5vw,88px);align-items:start;padding-top:22px;border-top:1px solid var(--dag-lijn-sterk)}
.case-deel-kop{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.case-deel-kop h3{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.2rem);font-weight:540;letter-spacing:-.03em;line-height:1.08;max-width:16ch}
.case-host{display:inline-flex;align-items:center;gap:8px;font:400 .8rem/1.4 var(--mono);color:var(--dag-mist);text-decoration:none}
.case-host:hover{color:var(--dag-ink);text-decoration:underline}
.case-host .pijl{display:inline-block;transform:rotate(-45deg);transition:transform .3s var(--gemak)}
.case-host:hover .pijl{transform:translate(2px,-2px) rotate(-45deg)}
.case-deel-x p{max-width:62ch;font-size:1.06rem}
.case-stenen{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.case-stenen a{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--dag-lijn-sterk);font:500 .78rem/1 var(--mono);letter-spacing:.02em;color:var(--dag-ink);text-decoration:none;transition:background .25s var(--gemak),border-color .25s var(--gemak)}
.case-stenen a:hover{background:var(--wit);border-color:var(--dag-ink)}
.case-deel.nog .case-deel-kop h3,.case-deel.nog .case-deel-x p{color:var(--dag-mist)}
.case-schot{margin-bottom:0}
.case-schot figcaption{margin-top:4px}

/* ===== hoe het gebouwd is ===== */
.case-bouw{margin:clamp(28px,3.6vw,40px) 0 0;display:grid;border-top:1px solid var(--dag-lijn)}
.case-bouw>div{display:grid;grid-template-columns:minmax(120px,.34fr) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--dag-lijn)}
.case-bouw dt{font:500 .8rem/1.6 var(--mono);letter-spacing:.02em}
.case-bouw dd{margin:0;color:var(--dag-mist)}

/* ===== resultaat: alleen gemeten ===== */
.case-feiten{margin:0;display:grid;border-top:1px solid var(--dag-lijn)}
.case-feiten>div{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:8px clamp(16px,3vw,40px);align-items:baseline;padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--dag-lijn)}
.case-feiten dt{font:540 clamp(1.6rem,1.1rem + 1.6vw,2.6rem)/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.case-feiten dd{margin:0;max-width:44ch;color:var(--dag-mist)}
.case-gemeten{margin-top:16px;font:400 .78rem/1.5 var(--mono);color:var(--dag-mist)}

/* ===== citaat (alleen als het echt is) ===== */
.case-citaat figure{margin:0;max-width:34ch}
.case-citaat blockquote{margin:0}
.case-citaat blockquote p{font:500 clamp(1.6rem,1.1rem + 1.8vw,2.8rem)/1.15 var(--display);letter-spacing:-.03em;text-wrap:balance}
.case-citaat figcaption{margin-top:20px;color:var(--dag-mist)}
.case-citaat figcaption b{color:var(--dag-ink);font-weight:600}

@media (max-width:900px){
  .case-klant-raster,.case-deel-tekst{grid-template-columns:1fr}
}
@media (max-width:560px){
  .case-bouw>div,.case-feiten>div{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.case-host .pijl,.case-stenen a{transition:none}}
.case-slot{font-size:.84rem;color:var(--dag-mist)}
div.venster:hover,div.telefoon:hover{transform:none}

/* ===== resultaat als voor en na (kosten) ===== */
.case-voorna{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--dag-lijn-sterk)}
.case-vn{display:flex;flex-direction:column;padding:clamp(20px,2.6vw,32px) clamp(0px,2.6vw,32px) 0 0}
.case-vn.na{padding-inline:clamp(20px,2.6vw,32px);border-left:1px solid var(--dag-lijn);background:var(--wit);padding-bottom:clamp(20px,2.6vw,32px)}
.case-vn h3{font:500 .78rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dag-mist)}
.case-vn dl{margin:18px 0 0;display:grid}
.case-vn dl>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--dag-lijn)}
.case-vn dt{min-width:0}
.case-vn dd{margin:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--dag-mist)}
.case-vn.na dl>div{flex-direction:column;gap:4px}
.case-vn.na dt{color:var(--dag-mist)}
.case-vn.na dd{text-align:left;white-space:normal;color:var(--dag-ink);font-weight:600;font-size:1.1rem}
.case-vn-samen{margin-top:auto;padding-top:20px;font:540 clamp(1.25rem,1rem + .8vw,1.6rem)/1.2 var(--display);letter-spacing:-.02em;text-wrap:balance}
.case-vn.voor .case-vn-samen{padding-bottom:4px}
.case-noot{margin-top:18px;max-width:62ch;font-size:.92rem;color:var(--dag-mist)}
.case-noot+.case-gemeten{margin-top:6px}
@media (max-width:760px){
  .case-voorna{grid-template-columns:1fr}
  .case-vn{padding-right:0}
  .case-vn.voor{padding-bottom:24px}
  .case-vn.na{border-left:0;border-top:1px solid var(--dag-lijn-sterk);padding-inline:18px}
}

/* ===== klein: de kosten als rustige bijzaak onder het verhaal ===== */
.case-klein>.hm-wrap{padding-block:clamp(44px,5vw,72px)}
.case-klein h2{font-size:clamp(1.4rem,1.1rem + .9vw,1.9rem);letter-spacing:-.025em}
.case-klein .case-voorna{border-top-color:var(--dag-lijn)}
.case-klein .case-vn{padding-top:16px}
.case-klein .case-vn h3{font-size:.7rem}
.case-klein .case-vn dl{margin-top:10px;font-size:.92rem}
.case-klein .case-vn dl>div{padding:8px 0}
.case-klein .case-vn.na dd{font-size:1rem}
.case-klein .case-vn-samen{padding-top:14px;font:500 1rem/1.4 var(--tekst);letter-spacing:0}
.case-klein .case-vn.na{padding-bottom:16px}
.case-klein .case-noot{font-size:.86rem}