/* Case study page (blocks/case). Layout only: type, buttons, cards, chips and the photo frame
   with its D-corner and brand shape come from the homepage components in home.css, so a case
   reads as part of the same site. Grounds alternate white and surface-alt, with nacht only for
   the quote, the one dark band on the page. */

/* === Sections === */
.b27u.b27c .st-U{padding:0}
.b27u.b27c .b27c-hero{background:#FFFFFF;padding:40px 0 72px}
.b27u.b27c .b27c-resultaat{background:#FFFFFF;padding:0 0 64px}
.b27u.b27c .b27c-verhaal{background:var(--u-zacht);padding:88px 0}
.b27u.b27c .b27c-detail{background:#FFFFFF;padding:88px 0}
.b27u.b27c .b27c-citaat{padding:96px 0}
.b27u.b27c .b27c-slot{background:#FFFFFF;padding:72px 0 88px}

/* === Hero: claim on white, photo beside it; never text on the photo === */
.b27u.b27c .b27c-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.b27u.b27c .b27c-terug{display:inline-flex;gap:8px;margin-bottom:28px;color:var(--u-link);font-size:15px;font-weight:600;text-decoration:none}
.b27u.b27c .b27c-terug::before{content:"\2190"}
.b27u.b27c .b27c-terug:hover{color:var(--u-link-hover)}
.b27u.b27c .b27c-hero__tekst{display:flex;flex-direction:column;align-items:flex-start}
.b27u.b27c .b27c-title{margin:16px 0 20px;color:var(--u-kop);font-family:"Poppins","Segoe UI",system-ui,sans-serif;font-size:clamp(34px,3.4vw,54px);font-weight:600;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.b27u.b27c .b27c-lead{margin:0}
.b27u.b27c .b27c-hero .u-knoppen{margin-top:32px}
.b27u.b27c .b27c-foto{margin:0}
.b27u.b27c .b27c-foto .u-foto img{display:block;width:100%;height:100%;object-fit:cover}
.b27u.b27c .b27c-hero__foto .u-foto{aspect-ratio:5/4}
/* The brand shape repeats the frame's D-corner, as on the homepage's project tiles: there the
   shape is as wide as the corner's radius (30% of a 413px tile is 124px against a 120px radius)
   and its top sits at about two thirds of that radius, so the same curve returns just below the
   corner. Tied to --u-d rather than to the photo's width, which on a wide photo turned the
   shape into a large sticker across the image. */
.b27u.b27c .b27c-hero__foto .u-vorm{--u-vorm-w:var(--u-d);top:calc(var(--u-d) * .64)}
/* The D and the half shape sit higher, as on the strip's even tiles (6% instead of 14% of the
   tile, which is .28 against .64 of the corner's radius). */
.b27u.b27c .b27c-hero__foto .u-vorm:is(.u-v-d,.u-v-half){top:calc(var(--u-d) * .28)}

/* === Results: proof straight under the claim === */
.b27u.b27c .b27c-resultaat .u-wrap{padding-top:40px;border-top:1px solid var(--u-lijn)}
.b27u.b27c .b27c-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin:20px 0 0}
.b27u.b27c .b27c-kpi{padding-left:24px;border-left:2px solid var(--u-paars)}
.b27u.b27c .b27c-kpi dt{color:var(--u-kop);font-family:"Poppins","Segoe UI",system-ui,sans-serif;font-size:clamp(40px,4vw,64px);font-weight:600;line-height:1}
.b27u.b27c .b27c-kpi dd{margin:10px 0 0;color:var(--u-txt2);font-size:16px;line-height:1.5}
.b27u.b27c .b27c-punten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px;margin:20px 0 0;padding:0;font-size:17px;line-height:1.55;color:var(--u-txt)}

/* === Story in a reading column, facts beside it === */
.b27u.b27c .b27c-verhaal__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:80px;align-items:start}
.b27u.b27c .b27c-tekst{max-width:68ch}
.b27u.b27c .b27c-h2{margin:48px 0 14px;color:var(--u-kop);font-family:"Poppins","Segoe UI",system-ui,sans-serif;font-size:clamp(24px,2vw,30px);font-weight:600;line-height:1.2}
.b27u.b27c .b27c-tekst > .b27c-h2:first-child{margin-top:0}
.b27u.b27c .b27c-tekst p,.b27u.b27c .b27c-duo p{margin:0 0 16px;color:var(--u-txt);font-size:17px;line-height:1.7}
.b27u.b27c .b27c-feiten{position:sticky;top:116px;gap:24px}
.b27u.b27c .b27c-feiten dl{display:flex;flex-direction:column;gap:20px;margin:0}
.b27u.b27c .b27c-feiten dt{color:var(--u-txt3);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.b27u.b27c .b27c-feiten dd{margin:6px 0 0;color:var(--u-kop);font-size:16px;font-weight:500}
.b27u.b27c .b27c-feiten .u-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.b27u.b27c .b27c-feiten .u-knop{align-self:stretch}

/* === In detail === */
.b27u.b27c .b27c-detail__kop{max-width:760px}
.b27u.b27c .b27c-detail__kop .b27c-h2{margin:14px 0 12px;font-size:clamp(28px,2.6vw,40px)}
.b27u.b27c .b27c-foto--groot{margin:40px 0 0}
.b27u.b27c .b27c-foto--groot .u-foto{aspect-ratio:16/9}
/* Bottom right, as the homepage's benefits panel places its shape: about .8 of the corner's
   radius (86px against 108px there), tied to --u-d rather than to the photo's width. */
.b27u.b27c .b27c-foto--groot .u-vorm{--u-vorm-w:calc(var(--u-d) * .8)}
.b27u.b27c .b27c-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin-top:48px}
.b27u.b27c .b27c-duo h3{margin:0 0 12px}
.b27u.b27c .b27c-duo--fotos{gap:24px;margin-top:40px}
.b27u.b27c .b27c-duo--fotos .u-foto{aspect-ratio:4/3}
/* The two smaller photos each carry a shape bottom right, as the homepage's interview cards do,
   at the same size as on the large detail photo. */
.b27u.b27c .b27c-duo--fotos .u-vorm{--u-vorm-w:calc(var(--u-d) * .8)}
.b27u.b27c .b27c-foto figcaption{margin-top:10px}

/* === The client's own words: the one nacht band === */
.b27u.b27c .b27c-citaat figure{max-width:920px;margin:0}
.b27u.b27c .b27c-citaat blockquote{margin:0;padding:0;border:0}
.b27u.b27c .b27c-citaat blockquote p{margin:0;color:#FFFFFF;font-family:"Poppins","Segoe UI",system-ui,sans-serif;font-size:clamp(24px,2.4vw,36px);font-weight:500;line-height:1.32;text-wrap:pretty}
.b27u.b27c .b27c-citaat blockquote p::before{content:"\201C"}
.b27u.b27c .b27c-citaat blockquote p::after{content:"\201D"}
.b27u.b27c .b27c-citaat figcaption{margin-top:28px;font-size:16px}
.b27u.b27c .b27c-citaat figcaption b{display:block;color:#FFFFFF;font-weight:600}
.b27u.b27c .b27c-citaat figcaption span{display:block;margin-top:4px;color:#D98BEA}

/* === Who was involved (the next cases follow in the closing band, inc/more.php) === */
.b27u.b27c .b27c-credits{display:flex;flex-wrap:wrap;gap:40px 72px}
.b27u.b27c .b27c-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin:14px 0 0;padding:0;list-style:none}
.b27u.b27c .b27c-logo img{display:block;width:auto;max-width:160px;height:40px;object-fit:contain}
.b27u.b27c .b27c-logo span{color:var(--u-kop);font-weight:600}

/* === Narrow screens === */
@media (max-width:960px){
	.b27u.b27c .b27c-hero__grid,.b27u.b27c .b27c-verhaal__grid{grid-template-columns:minmax(0,1fr);gap:40px}
	.b27u.b27c .b27c-feiten{position:static}
	.b27u.b27c .b27c-verhaal,.b27u.b27c .b27c-detail{padding:64px 0}
}
@media (max-width:700px){
	.b27u.b27c .b27c-hero{padding:24px 0 48px}
	.b27u.b27c .b27c-punten,.b27u.b27c .b27c-duo{grid-template-columns:minmax(0,1fr);gap:24px}
				.b27u.b27c .b27c-citaat{padding:64px 0}
}