/* district-voorbeelden.css — paginalaag voor de etalagestraat (voorbeelden/).
   Altijd laden na css/origami.css en css/origami-district.css. */

/* — Straatblokken: de etalagestraat in stukken, per branche — */
.street-block{margin-top:clamp(2.8rem,6vw,4.2rem)}
.street-block:first-of-type{margin-top:0}
.evidence-block{padding:clamp(2.4rem,5vw,4rem) 0;border-block:1px solid var(--line)}
.evidence-heading{max-width:46rem;margin-bottom:2rem}
.evidence-heading h2,.package-proof h2{margin:0;font:400 clamp(2.35rem,4.8vw,4.6rem)/1.02 var(--serif);max-width:12ch}
.evidence-heading>p:last-child,.package-proof>div>p:last-child{max-width:42rem;margin:1rem 0 0}
.evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.8rem)}
.evidence-case{display:grid;grid-template-columns:minmax(0,12rem) 1fr;grid-template-rows:auto auto 1fr auto;gap:.25rem 1.2rem;align-items:start;padding:1rem;border:1px solid var(--line);background:var(--cream);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.evidence-case:hover{transform:translateY(-4px);box-shadow:.6rem .6rem 0 rgba(18,82,91,.1)}
.evidence-case img{grid-row:1 / 5;width:100%;height:100%;min-height:13rem;object-fit:cover;border:1px solid var(--line)}
.evidence-case span{font:500 .68rem/1.35 var(--mono);text-transform:uppercase;color:var(--petrol)}
.evidence-case h3{margin:.25rem 0;font:400 1.7rem/1.05 var(--serif)}
.evidence-case p{margin:.45rem 0;font-size:.9rem}
.evidence-case strong{align-self:end;width:max-content;padding-bottom:.12rem;border-bottom:1px solid currentColor;color:var(--crimson);font-size:.82rem}
.package-proof{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,5rem);align-items:start;padding:clamp(3rem,7vw,5.5rem) 0}
.package-proof-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.package-proof-list a{display:grid;gap:.25rem;min-height:9rem;padding:1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.24);transition:background .2s,transform .2s var(--ease)}
.package-proof-list a:hover{background:rgba(244,200,75,.13);transform:translateY(-2px)}
.package-proof-list span,.package-proof-list small{font:500 .67rem/1.4 var(--mono);text-transform:uppercase;color:var(--petrol)}
.package-proof-list strong{font:400 1.35rem/1.08 var(--serif)}
.package-proof-list small{align-self:end;color:var(--crimson)}
.street-sign{display:inline-flex;align-items:center;gap:.55rem;margin:0;padding:.5rem .95rem .55rem;font:700 .73rem/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;max-width:none;color:var(--petrol);background:var(--cream);border:1px solid rgba(28,43,46,.22);box-shadow:.3rem .3rem 0 rgba(28,43,46,.08);clip-path:polygon(0 0,96% 0,100% 30%,100% 100%,4% 100%,0 70%);transform:rotate(-.6deg)}
.street-sign i{width:.4rem;height:.4rem;background:var(--crimson);transform:rotate(45deg)}
.street-block .fold-grid{margin-top:1.35rem}
.street-vignette{position:relative;margin:1.25rem 0 1.8rem;background:#fff;padding:.7rem;border:1px solid rgba(28,43,46,.14);box-shadow:0 .8rem 2rem rgba(28,43,46,.12);transform:rotate(-.35deg)}
.street-vignette--right{transform:rotate(.35deg)}
.street-vignette::before{content:"";position:absolute;z-index:1;top:-.6rem;left:12%;width:5.2rem;height:1.15rem;background:rgba(244,200,75,.58);border:1px solid rgba(28,43,46,.08);transform:rotate(-1deg)}
.street-vignette picture,.street-vignette img{display:block;width:100%}
.street-vignette img{height:auto;aspect-ratio:2/1;object-fit:cover}

/* — Etalages: elke vouwkaart krijgt een smalle papieren luifel — */
.etalage{overflow:hidden}
.etalage::before{content:"";position:absolute;left:0;right:0;top:0;height:.42rem;background:rgba(18,82,91,.16);pointer-events:none}
.etalage b{transition:transform .28s var(--ease)}
.etalage:hover b{transform:translateX(.3rem)}

@media (prefers-reduced-motion:reduce){
  .etalage:hover b{transform:none}
}
@media(max-width:780px){.evidence-grid,.package-proof{grid-template-columns:1fr}.evidence-case{grid-template-columns:minmax(0,9rem) 1fr}.evidence-case img{min-height:11rem}.package-proof-list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.street-vignette{margin-left:-.4rem;margin-right:-.4rem;padding:.4rem}.street-vignette img{aspect-ratio:4/3}.street-sign{font-size:.68rem}.evidence-case{grid-template-columns:1fr}.evidence-case img{grid-row:auto;aspect-ratio:16/9;min-height:0}.package-proof-list{grid-template-columns:1fr}}