/* ══════════════════════════════════════════════════════════════════════════
   EEN RECEPT — de pagina van één gerecht (tools/recepten.py)

   De kop en de voet komen uit kop-voet.css, de letters en de kleuren uit
   zine.css, de beeldtegel (.rkaart__beeld) ook. Hier staat de indeling:

     de kop      tekst links, beeld rechts, twee knoppen eronder
     het koken   links een kaart met wat je nodig hebt, rechts de stappen;
                 allebei af te vinken (js/recept.js)
     erin        de Ziné-producten, als tegels
     verder      het vorige en het volgende recept

   Onderaan staat de printopmaak: "Download recept" drukt de pagina af, en de
   browser biedt daar "bewaren als pdf" aan. Dan staat er een kaal recept op
   wit, zonder kop, voet, knoppen en versiering.
   ══════════════════════════════════════════════════════════════════════════ */

.receptkop,
.kook,
.strook,
.erin,
.verder{position:relative;padding-block:clamp(1.6rem,4.5vh,3rem)}
.receptkop{padding-top:calc(var(--kv-boog,0px) * 71 / 60 + clamp(1rem,3vh,2rem))}

/* ── de kop ───────────────────────────────────────────────────────────── */
.receptkop__raster{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:center;
}
.receptkop__tekst{display:flex;flex-direction:column;align-items:flex-start}
.receptkop__waar{margin:0 0 clamp(.7rem,1.8vh,1rem);color:var(--goud)}
.receptkop__waar a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(249,222,96,.4)}
.receptkop__waar a:hover{border-color:currentColor}
.receptkop__naam{
  margin:0;color:var(--vanille);
  font-size:clamp(2.6rem,5.6vw,5rem);font-weight:300;line-height:1.05;letter-spacing:-.01em;
}
.receptkop__zin{
  margin:clamp(.9rem,2.2vh,1.3rem) 0 0;max-width:52ch;
  color:var(--vanille-zacht);font-size:var(--nl-body);font-weight:300;line-height:1.75;
}

/* De feiten als losse pillen: wat het is, in één oogopslag. */
.feiten{
  list-style:none;margin:clamp(1.1rem,2.6vh,1.6rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.feiten li{
  padding:.42rem .9rem;border-radius:999px;
  border:1px solid rgba(249,222,96,.4);
  color:var(--vanille);font-size:var(--label);font-weight:500;letter-spacing:.03em;line-height:1.3;
}

.acties{display:flex;flex-wrap:wrap;gap:.7rem;margin:clamp(1.3rem,3.2vh,2rem) 0 0}
.acties__ik{
  width:1.15em;height:1.15em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.acties .pil{gap:.55rem;font-family:inherit;cursor:pointer}
.acties [hidden]{display:none}
.acties [aria-pressed="true"]{color:var(--goud);box-shadow:inset 0 0 0 1.5px var(--goud)}
html.no-js .acties{display:none}

/* Het beeld: dezelfde tegel als de receptkaart, in dezelfde inktlijst. */
.receptbeeld{
  margin:0;padding:clamp(.7rem,1.3vw,.95rem);
  background:var(--inkt);border-radius:var(--rond);
}
.receptbeeld .rkaart__beeld{aspect-ratio:1}
/* een echte foto staat liggend, zoals hij gemaakt is */
.receptbeeld .rkaart__beeld--foto{aspect-ratio:4 / 3}

/* ── het koken ────────────────────────────────────────────────────────── */
/* Zonder filmpje: links wat je nodig hebt (blijft staan), rechts de
   stappen. Met filmpje: links het filmpje, rechts de twee lijsten onder
   elkaar. */
.kook__raster{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.4rem,3.5vw,3.4rem);align-items:start;
}
.kook__lijsten{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.4rem,3.5vw,3.4rem);align-items:start;min-width:0;
}
.kook__lijsten .boodschap{
  position:sticky;
  top:calc(var(--kophoogte,78px) + var(--kv-boog,0px) * 71 / 60 + 1rem);
}
.kook__raster--film{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.kook__raster--film .kook__lijsten{display:flex;flex-direction:column;gap:clamp(1.6rem,4vh,2.6rem)}
.kook__raster--film .boodschap{position:static}
.kook__kop{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(.9rem,2.2vh,1.3rem);
}
.kook__titel,
.recept__kopje{
  margin:0;color:var(--vanille);
  font-size:var(--nl-kop);font-weight:400;line-height:1.2;
}
.recept__kopje{margin-bottom:clamp(1rem,2.6vh,1.6rem)}

/* Wat je nodig hebt: een inkt kaart die blijft staan terwijl je de stappen
   langsscrolt, onder de gouden boog door. */
.kook__film{
  position:sticky;
  top:calc(var(--kophoogte,78px) + var(--kv-boog,0px) * 71 / 60 + 1rem);
}
.boodschap{
  padding:clamp(1.2rem,2.4vw,1.8rem);
  background:var(--inkt);border-radius:var(--rond);
}
.boodschap__teller{
  flex:none;color:var(--goud);font-size:var(--label);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.vinklijst{list-style:none;margin:0;padding:0}
.vinklijst li + li{border-top:1px solid rgba(223,237,192,.12)}

/* Een vinkje is een echte checkbox, verstopt achter een eigen vakje: het
   werkt met de muis, met een vinger, met de spatiebalk en met een
   schermlezer, en de hele regel is het doel. */
.vink,
.stap{position:relative;display:flex;gap:.9rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vink__doos,
.stap__doos{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.vink{align-items:center;padding:.7rem 0;min-height:44px}
.vink__vak{
  flex:none;position:relative;width:1.35rem;height:1.35rem;border-radius:6px;
  border:1.5px solid rgba(249,222,96,.6);
  transition:background .25s var(--ease-ui),border-color .25s var(--ease-ui);
}
.vink__vak::after{
  content:"";position:absolute;left:50%;top:45%;width:.38rem;height:.7rem;
  border:solid var(--inkt);border-width:0 2.5px 2.5px 0;
  translate:-50% -50%;rotate:45deg;scale:0;
  transition:scale .25s cubic-bezier(.3,1.6,.5,1);
}
.vink__tekst{
  color:var(--vanille);font-size:var(--nl-body);font-weight:300;line-height:1.45;
  transition:color .25s var(--ease-ui),opacity .25s var(--ease-ui);
}
.vink__doos:checked + .vink__vak{background:var(--goud);border-color:var(--goud)}
.vink__doos:checked + .vink__vak::after{scale:1}
.vink__doos:checked ~ .vink__tekst{opacity:.45;text-decoration:line-through;text-decoration-color:rgba(223,237,192,.5)}
.vink__doos:focus-visible + .vink__vak,
.stap__doos:focus-visible + .stap__nr{outline:2px solid var(--goud);outline-offset:3px}

/* De stappen: elke stap een kaart. Wat klaar is zakt weg, de stap die nu
   aan de beurt is krijgt een gouden rand -- zo zie je met natte handen in
   één blik waar je was. */
.stappen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.stap{
  align-items:flex-start;
  padding:clamp(1rem,2vw,1.35rem);
  background:rgba(18,37,26,.55);
  border:1px solid rgba(223,237,192,.12);
  border-radius:var(--rond);
  transition:background .3s var(--ease-ui),border-color .3s var(--ease-ui),opacity .3s var(--ease-ui);
}
.stap:hover{border-color:rgba(249,222,96,.35)}
.stap.is-nu{background:var(--inkt);border-color:var(--goud)}
.stap__nr{
  flex:none;position:relative;display:grid;place-items:center;
  width:2.4rem;height:2.4rem;border-radius:50%;
  border:1.5px solid rgba(249,222,96,.6);
  color:var(--goud);font-size:1rem;font-weight:600;
  transition:background .25s var(--ease-ui),color .25s var(--ease-ui);
}
.stap__nr::after{
  content:"";position:absolute;left:50%;top:44%;width:.5rem;height:.95rem;
  border:solid var(--inkt);border-width:0 3px 3px 0;
  translate:-50% -50%;rotate:45deg;scale:0;
  transition:scale .3s cubic-bezier(.3,1.6,.5,1);
}
.stap__tekst{
  padding-top:.2rem;
  color:var(--vanille);font-size:clamp(1.05rem,1.25vw,1.2rem);font-weight:300;line-height:1.7;
}
.stap__doos:checked + .stap__nr{background:var(--goud);border-color:var(--goud)}
.stap__doos:checked + .stap__nr > span{opacity:0}
.stap__doos:checked + .stap__nr::after{scale:1}
.stap:has(.stap__doos:checked){opacity:.5;background:transparent}

.voortgang{display:flex;align-items:center;gap:1rem;margin:0 0 1.1rem}
.voortgang__balk{
  flex:1;height:6px;border-radius:999px;overflow:hidden;
  background:rgba(223,237,192,.14);
}
.voortgang__balk > span{
  display:block;height:100%;width:100%;border-radius:inherit;background:var(--goud);
  transform-origin:0 50%;transform:scaleX(var(--klaar,0));
  transition:transform .5s var(--ease-ui);
}
.voortgang__tekst{
  margin:0;flex:none;color:var(--vanille-zacht);
  font-size:var(--label);font-weight:500;letter-spacing:.03em;font-variant-numeric:tabular-nums;
}
.voortgang.is-klaar .voortgang__tekst{color:var(--goud)}

.kook__wis{
  flex:none;padding:.4rem 0;min-height:44px;background:none;border:0;cursor:pointer;
  color:var(--vanille-zacht);font:inherit;font-size:var(--label);font-weight:500;
  text-decoration:underline;text-underline-offset:.25em;text-decoration-color:rgba(223,237,192,.4);
}
.kook__wis:hover{color:var(--goud)}
.kook__wis[hidden]{display:none}
.kook__nog{margin:0;color:var(--vanille-zacht);font-size:var(--nl-body);font-weight:300}
.kook__bron{
  margin:clamp(1.2rem,3vh,1.8rem) 0 0;
  color:var(--vanille-stil);font-size:var(--label);font-weight:400;line-height:1.7;
}

/* Een filmpje, alleen als er een is: staand, boven de stappen. */
.film{
  aspect-ratio:9 / 16;max-width:22rem;
  max-height:calc(100svh - var(--kophoogte,78px) - var(--kv-boog,0px) * 71 / 60 - 6rem);
  padding:clamp(.6rem,1vw,.8rem);
  border-radius:var(--rond);overflow:hidden;background:var(--inkt);
}
.film__speler{border-radius:var(--rond-in)}
/* nog geen filmpje: een kader met het motief en één regel */
.leegbeeld{
  position:relative;height:100%;display:flex;align-items:flex-end;
  padding:clamp(1rem,2vw,1.4rem);
  border:1px dashed rgba(223,237,192,.3);border-radius:var(--rond-in);overflow:hidden;
}
.leegbeeld__patroon{--m:var(--vanille-zacht);position:absolute;left:50%;top:50%;translate:-50% -50%;width:62%;opacity:.7}
.leegbeeld__zin{position:relative;margin:0;color:var(--vanille-stil);font-size:var(--label);font-weight:500;letter-spacing:.03em}
.film__speler{width:100%;height:100%;object-fit:cover;display:block}

/* ── de fotostrook, alleen als er foto's zijn ─────────────────────────── */
.strook__rij{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);
  gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem;
}
.strook__vak{margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--rond);scroll-snap-align:start}
.strook__vak img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto)}

/* ── wat er van Ziné in gaat ──────────────────────────────────────────── */
.dingen{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));
  gap:clamp(.8rem,2vw,1.4rem);
}
.ding__link{
  display:flex;flex-direction:column;gap:.35rem;height:100%;
  padding:clamp(.6rem,1.2vw,.85rem) clamp(.6rem,1.2vw,.85rem) 1rem;
  background:var(--inkt);border-radius:var(--rond);
  text-decoration:none;color:var(--vanille-zacht);
  transition:transform .4s var(--ease-ui);
}
.ding__tegel{
  display:grid;place-items:center;aspect-ratio:1;margin-bottom:.6rem;
  background:var(--vanille);border-radius:var(--rond-in);
  container-type:inline-size;
}
/* in cqw: een procent-hoogte in een vak met alleen een aspect-ratio loste
   niet op, en dan werd de tegel van een breed pak lager dan de rest */
.ding__foto{width:66cqw;height:72cqw;object-fit:contain;
  filter:drop-shadow(0 .6rem .8rem rgba(9,20,12,.25));transition:scale .5s var(--ease-ui)}
.ding__naam{padding-inline:.3rem;color:var(--vanille);font-size:1.05rem;font-weight:400;line-height:1.35}
.ding__verp{padding-inline:.3rem;color:var(--vanille-zacht);font-size:var(--label);font-weight:300}
.ding__link:focus-visible{outline:2px solid var(--goud);outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .ding__link:hover{transform:translateY(-.3rem)}
  .ding__link:hover .ding__foto{scale:1.06}
  .ding__link:hover .ding__naam{color:var(--goud)}
}

/* ── verder ───────────────────────────────────────────────────────────── */
.verder__rij{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--gap);
}
.verder__link{
  display:flex;flex-direction:column;gap:.3rem;height:100%;
  padding:clamp(1.1rem,2.6vw,1.6rem);
  background:var(--inkt);border-radius:var(--rond);
  text-decoration:none;color:var(--vanille-zacht);
}
.verder__link:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.verder__wat{color:var(--goud)}
.verder__naam{color:var(--vanille);font-size:var(--nl-kop);font-weight:300;line-height:1.2;transition:color .3s var(--ease-ui)}
.verder__naam .pijl{display:inline-block;transition:translate .35s var(--ease-ui)}
.verder__link:hover .verder__naam{color:var(--goud)}
.verder__link:hover .verder__naam .pijl{translate:.3rem 0}
.verder__alles{margin:clamp(1.2rem,3vh,1.8rem) 0 0}

/* ── smaller ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .receptkop__raster{grid-template-columns:1fr}
  .receptbeeld{order:-1;width:min(100%,26rem)}
  .receptbeeld .rkaart__beeld{aspect-ratio:4 / 3}
  .kook__raster,.kook__raster--film,.kook__lijsten{grid-template-columns:1fr}
  .kook__lijsten{display:flex;flex-direction:column}
  .kook__lijsten .boodschap{position:static}
  .kook__film{position:static}
  .film{max-width:17rem;max-height:none}
}
@media (max-width:560px){
  .dingen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ding__naam{font-size:.98rem}
}
@media (max-width:480px){
  .stap{gap:.75rem}
  .stap__nr{width:2.1rem;height:2.1rem;font-size:.92rem}
  .acties .pil{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .vink__vak,.vink__vak::after,.vink__tekst,.stap,.stap__nr,.stap__nr::after,
  .voortgang__balk > span,.ding__link,.ding__foto,.verder__naam,.verder__naam .pijl{transition:none}
}

/* Binnenkomen: de kop regel voor regel, het beeld zakt in. */
@media (prefers-reduced-motion:no-preference){
  .receptkop__tekst > *{animation:rc-op .7s cubic-bezier(.2,.9,.25,1) backwards}
  .receptkop__tekst > :nth-child(2){animation-delay:.06s}
  .receptkop__tekst > :nth-child(3){animation-delay:.12s}
  .receptkop__tekst > :nth-child(4){animation-delay:.18s}
  .receptkop__tekst > :nth-child(5){animation-delay:.24s}
  .receptbeeld{animation:rc-op .9s cubic-bezier(.2,.9,.25,1) .1s backwards}
  html.vt .receptkop__tekst > *,html.vt .receptbeeld{animation:none}
  @supports (animation-timeline:view()){
    .stappen > li,.dingen > li{
      animation:rc-op linear both;animation-timeline:view();animation-range:entry 0% entry 45%;
    }
  }
}
@keyframes rc-op{from{opacity:0;transform:translateY(16px)}}

/* ── afdrukken en pdf ─────────────────────────────────────────────────────
   Een kaal recept op wit: de naam, de feiten, wat je nodig hebt en de
   stappen. Vinkjes worden lege vakjes om met een pen af te strepen. */
@media print{
  @page{margin:16mm 16mm 18mm}
  html,body{background:#fff!important;color:#111!important}
  body *{animation:none!important;transition:none!important}
  .kop,#voet,.skip,.sprite,.hoop,.orn,.dadel,.acties,.receptbeeld,.kook__film,.erin,.verder,
  .strook,.film,.voortgang,.kook__wis,.boodschap__teller,.receptkop__waar{display:none!important}
  .receptkop,.kook{padding:0!important}
  .wrap{max-width:none!important;padding:0!important;margin:0!important}
  .receptkop__raster,.kook__raster{display:block}
  .receptkop__naam{color:#111!important;font-size:30pt;font-weight:400}
  .receptkop__naam::before{content:"Zin\00e9  \00b7  recept";display:block;margin-bottom:4pt;color:#777;font-size:10pt;font-weight:500;letter-spacing:.04em}
  .receptkop__zin{color:#333!important;font-size:11pt;max-width:none}
  .feiten{margin:8pt 0 16pt}
  .feiten li{border:0;padding:0 10pt 0 0;color:#555!important;font-size:10pt}
  .feiten li + li::before{content:"\00b7";margin-right:10pt}
  .kook__titel{color:#111!important;font-size:15pt;font-weight:600}
  .boodschap{position:static;background:none!important;padding:0;margin:0 0 18pt;break-inside:avoid}
  .vinklijst{columns:2;column-gap:24pt}
  .vinklijst li{border:0!important;break-inside:avoid}
  .vink{padding:3pt 0;min-height:0}
  .vink__vak{border:1pt solid #555!important;background:none!important;width:10pt;height:10pt;border-radius:2pt}
  .vink__vak::after{display:none}
  .vink__tekst{color:#111!important;opacity:1!important;text-decoration:none!important;font-size:11pt}
  .stappen{gap:8pt}
  .stap{padding:0;background:none!important;border:0!important;opacity:1!important;break-inside:avoid}
  .stap__nr{width:18pt;height:18pt;border:1pt solid #555!important;background:none!important;color:#111!important;font-size:9pt}
  .stap__nr > span{opacity:1!important}
  .stap__nr::after{display:none}
  .stap__tekst{color:#111!important;font-size:11pt;line-height:1.55;padding-top:1pt}
  .kook__bron{color:#555!important;font-size:9pt}
  .kook__bron a{color:#555!important}
  .kook__bron .pijl{display:none}
  .kook__bron a::after{content:" (" attr(href) ")"}
}