/* kookworkshop-avond: React Bits Pro Blocks/about-9 (block-port) met Components/ember-reveal in de filmkaart en
   Components/glyph-stream op de kop. Tailwind uit de bron vertaald naar gescopete CSS; kleuren via --m-*. */
.msm-kookworkshop-avond{--av-p:var(--m-primary,#d34d2f);--av-bg:var(--m-bg,#efe8db);--av-ink:var(--m-ink,#243027);--av-s:var(--m-surface,#fffaf1);--av-mut:var(--m-muted,#667067);--av-a2:var(--m-accent2,#455047);--av-line:var(--m-line,#ddd3c2);position:relative;scroll-margin-top:112px;padding:clamp(64px,8vw,96px) 0 clamp(72px,9vw,112px);background:var(--av-bg);color:var(--av-ink);font-family:var(--m-font-body,"Nunito Sans","Segoe UI",system-ui,sans-serif);font-size:16px;line-height:1.55}
.msm-kookworkshop-avond *{box-sizing:border-box}
.msm-kookworkshop-avond [hidden]{display:none!important}
.msm-kookworkshop-avond .av-wrap{width:min(1400px,100% - 32px);margin:0 auto}

/* about-9: gecentreerde kop (max-w 4xl) */
.msm-kookworkshop-avond .av-head{max-width:56rem;margin:0 auto;text-align:center}
.msm-kookworkshop-avond .av-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--av-mut)}
.msm-kookworkshop-avond .av-glyph-anchor{position:relative;margin-top:24px}
.msm-kookworkshop-avond .av-title{margin:0;font:400 clamp(2.25rem,1.1rem + 4.4vw,4.5rem)/1.05 var(--m-font-display,"Caprasimo",Georgia,serif);letter-spacing:-.03em;color:var(--av-ink);text-wrap:balance}
.msm-kookworkshop-avond .av-accent{color:var(--av-p)}
.msm-kookworkshop-avond .av-intro{max-width:42rem;margin:24px auto 0;font-size:clamp(16px,1.4vw,18px);line-height:1.65;color:var(--av-mut);text-wrap:pretty}

/* Gedeelde glyph-stream-instantie (originele component-CSS, gescoped) */
.msm-kookworkshop-avond .kw-glyph{position:absolute;inset:-14px -10px;z-index:2}
.msm-kookworkshop-avond .glyph-stream{position:relative;isolation:isolate;width:100%;height:100%;min-height:240px;overflow:hidden}
.msm-kookworkshop-avond .kw-glyph .glyph-stream{min-height:0}
.msm-kookworkshop-avond .glyph-stream__content{position:relative;z-index:10;width:100%;height:100%}

/* Filmkaart: rounded-3xl, rand, schaduw, 16:9 en vanaf sm 21:9 */
.msm-kookworkshop-avond .av-film{position:relative;margin-top:clamp(48px,6vw,64px);overflow:hidden;aspect-ratio:16/9;border:1px solid var(--av-line);border-radius:24px;background:color-mix(in srgb,var(--av-line) 60%,var(--av-bg));box-shadow:0 32px 80px -48px rgba(0,0,0,.4)}
.msm-kookworkshop-avond .av-reveal{position:absolute;inset:0;color:var(--av-s)}
.msm-kookworkshop-avond .av-still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.msm-kookworkshop-avond .av-film.is-playing .av-reveal{pointer-events:none}
/* Originele component-CSS van ember-reveal, gescoped */
.msm-kookworkshop-avond .ember-reveal{position:relative;isolation:isolate;width:100%;overflow:hidden;cursor:crosshair;touch-action:manipulation;user-select:none;-webkit-user-select:none;outline:none}
.msm-kookworkshop-avond .ember-reveal:focus-visible{outline:2px solid currentColor;outline-offset:-6px}
.msm-kookworkshop-avond .av-veil{position:absolute;inset:0;background:color-mix(in srgb,var(--av-ink) 25%,transparent);pointer-events:none;transition:opacity .45s ease}
.msm-kookworkshop-avond .av-film.is-playing .av-veil,.msm-kookworkshop-avond .av-film.is-clear .av-veil{opacity:0}
.msm-kookworkshop-avond .av-now{position:absolute;top:14px;left:14px;z-index:3;display:flex;align-items:center;gap:8px;max-width:calc(100% - 28px);margin:0;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--av-ink) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--av-s);font-size:13px;font-weight:700;line-height:1.3;pointer-events:none}
.msm-kookworkshop-avond .av-now-time{font-variant-numeric:tabular-nums}
.msm-kookworkshop-avond .av-now-sep{opacity:.7}
.msm-kookworkshop-avond .av-center{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:16px;pointer-events:none}
.msm-kookworkshop-avond .av-play{display:inline-flex;align-items:center;gap:12px;padding:6px 24px 6px 6px;border:0;border-radius:999px;background:color-mix(in srgb,var(--av-s) 95%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 15px -3px rgba(0,0,0,.12),0 4px 6px -4px rgba(0,0,0,.1);color:var(--av-ink);font:inherit;text-align:left;cursor:pointer;pointer-events:auto;transition:transform .2s cubic-bezier(.22,1,.36,1),background-color .2s,opacity .3s,visibility 0s}
.msm-kookworkshop-avond .av-play:hover{transform:scale(1.03);background:var(--av-s)}
.msm-kookworkshop-avond .av-play:active{transform:scale(.98)}
.msm-kookworkshop-avond .av-play:focus{outline:none}
.msm-kookworkshop-avond .av-play:focus-visible{box-shadow:0 0 0 2px var(--av-ink),0 0 0 4px var(--av-s)}
.msm-kookworkshop-avond .av-film.is-playing .av-play{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.msm-kookworkshop-avond .av-play-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--av-ink);color:var(--av-s)}
.msm-kookworkshop-avond .av-play-icon svg{width:16px;height:16px;fill:currentColor}
.msm-kookworkshop-avond .av-play-text{display:block}
.msm-kookworkshop-avond .av-play-label{display:block;font-size:14px;font-weight:700;line-height:1.3;color:var(--av-ink)}
.msm-kookworkshop-avond .av-play-sub{display:block;font-size:12px;line-height:1.3;color:var(--av-mut)}

/* Zonder WebGL of JavaScript: vijf miniaturen met de tijd eronder */
.msm-kookworkshop-avond .av-moments{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64%,1fr);gap:12px;margin:clamp(40px,5vw,56px) 0 0;padding:0 0 8px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none}
.msm-kookworkshop-avond .av-moment{scroll-snap-align:start}
.msm-kookworkshop-avond .av-moment figure{margin:0}
.msm-kookworkshop-avond .av-moment img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:color-mix(in srgb,var(--av-line) 60%,var(--av-bg))}
.msm-kookworkshop-avond .av-moment figcaption{margin-top:8px;font-size:14px;color:var(--av-mut)}
.msm-kookworkshop-avond .av-moment time{display:block;font:400 18px/1.2 var(--m-font-display,"Caprasimo",Georgia,serif);color:var(--av-ink)}
.msm-kookworkshop-avond.is-live .av-moments{display:none}

/* Feitenrij: raster met scheidingslijnen */
.msm-kookworkshop-avond .av-facts{display:grid;grid-template-columns:minmax(0,1fr);margin:48px 0 0;border-top:1px solid var(--av-line)}
.msm-kookworkshop-avond .av-fact{padding:24px 0}
.msm-kookworkshop-avond .av-fact + .av-fact{border-top:1px solid var(--av-line)}
.msm-kookworkshop-avond .av-fact dt{font:400 clamp(30px,3vw,38px)/1.1 var(--m-font-display,"Caprasimo",Georgia,serif);letter-spacing:-.01em;color:var(--av-ink)}
.msm-kookworkshop-avond .av-fact dd{max-width:20rem;margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--av-mut)}

/* Reacties op receptkaartjes */
.msm-kookworkshop-avond .av-quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:clamp(32px,4vw,48px) 0 0;padding:0;list-style:none}
.msm-kookworkshop-avond .av-card{position:relative;padding:18px 22px 30px;border:1px solid var(--av-line);border-top:4px solid var(--av-p);border-radius:6px;background-color:var(--av-s);background-image:repeating-linear-gradient(to bottom,transparent 0 27px,color-mix(in srgb,var(--av-line) 75%,transparent) 27px 28px);background-position:0 52px;background-repeat:no-repeat;background-size:100% calc(100% - 56px);box-shadow:0 14px 30px -24px rgba(0,0,0,.35)}
.msm-kookworkshop-avond .av-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.msm-kookworkshop-avond .av-tag{padding:2px 8px;border-radius:4px;background:var(--av-bg);color:var(--av-a2);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.msm-kookworkshop-avond .av-occasion{font-size:13px;font-weight:700;color:var(--av-mut)}
.msm-kookworkshop-avond .av-card blockquote{margin:0}
.msm-kookworkshop-avond .av-card blockquote p{margin:0;font:400 19px/28px var(--m-font-display,"Caprasimo",Georgia,serif);color:var(--av-ink)}

@media (min-width:640px){
.msm-kookworkshop-avond .av-wrap{width:min(1400px,100% - 48px)}
.msm-kookworkshop-avond .av-film{aspect-ratio:21/9}
.msm-kookworkshop-avond .av-now{top:20px;left:20px;font-size:14px}
.msm-kookworkshop-avond .av-moments{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
.msm-kookworkshop-avond .av-facts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px}
.msm-kookworkshop-avond .av-fact{padding:32px 40px}
.msm-kookworkshop-avond .av-fact:first-child{padding-left:0}
.msm-kookworkshop-avond .av-fact:last-child{padding-right:0}
.msm-kookworkshop-avond .av-fact + .av-fact{border-top:0;border-left:1px solid var(--av-line)}
.msm-kookworkshop-avond .av-quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.msm-kookworkshop-avond .av-card:nth-child(1){transform:rotate(-.6deg)}
.msm-kookworkshop-avond .av-card:nth-child(3){transform:rotate(.5deg)}
}
@media (min-width:1024px){
.msm-kookworkshop-avond .av-wrap{width:min(1400px,100% - 64px)}
}
@media (prefers-reduced-motion:reduce){
.msm-kookworkshop-avond .av-play,.msm-kookworkshop-avond .av-veil{transition:none}
.msm-kookworkshop-avond .av-play:hover,.msm-kookworkshop-avond .av-play:active{transform:none}
}