/* ══════════════════════════════════════════════════════════════════════════
   RECEPTEN — de twee secties die zine.css nog niet had

   De rest van deze pagina draait volledig op zine.css: de kop, de opening met
   de twee schriften, de plaat, de sluiting en de voet staan daar al. Alleen
   §02 de keuken en §03 de recepten zijn nieuw, en die staan hier — apart, zodat
   zine.css onaangeroerd blijft en de andere pagina's er niets van merken.

   De gegraveerde kaders van §03 zijn dezelfde als de beloftes op de thuispagina. Ze
   staan hier opnieuw en niet in een gedeeld bestand, en dat is een keuze: twee
   pagina's die toevallig hetzelfde kader gebruiken zijn nog geen onderdeel.
   Wordt het er een derde, dan verhuist het naar zine.css.

   Alles hieronder leunt op de tokens en de type-klassen die zine.css al zet;
   er wordt geen kleur, maat of ritme opnieuw bedacht.
   ══════════════════════════════════════════════════════════════════════════ */

#recepten{position:relative;padding-block:clamp(.4rem,2vh,1.2rem) var(--lucht)}

/* ── §01 de opening ───────────────────────────────────────────────
   Hier stonden onder de titel nog een gouden regel ("Uit onze keuken"), een
   alinea van vier regels over wat recepten zijn, en een foto van een
   dienblad. Alle drie eruit: de naam van de pagina zegt het al en de kaarten
   eronder laten het zien. Wat overblijft is de titel en dan meteen de
   recepten -- je bent er om te koken, niet om te lezen wat koken is. */
/* En daarmee mag de opening ook inzakken. #opening in zine.css is een scherm
   hoog en houdt onderaan de hoogte van de tafel vrij -- allebei horen ze bij
   de thuispagina, waar in die ruimte een toneel staat. Hier stond er na het
   weghalen een leeg scherm onder het woord. */
#opening{
  min-height:0;
  padding-block:calc(var(--kv-boog,0px) * 71 / 60 + clamp(1rem,3vh,2.2rem))
                clamp(1.2rem,3vh,2.2rem);
}
.opening__raam{row-gap:clamp(1.2rem,3vh,2rem)}
.opening__woord{grid-column:1 / -1}

/* ── de recepten ──────────────────────────────────────────────────────────
   Drie naast elkaar, dezelfde kaart als op de thuispagina (.rkaart in
   zine.css). De kaartenrij komt uit tools/recepten.py; er hoeft alleen een
   recept bij in data/recepten.json, het raster telt zelf door. */
.receptenrij{
  display:grid;gap:clamp(1rem,2.4vw,2rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.recepten{list-style:none;margin:0;padding:0;display:contents}

/* ── smaller ──────────────────────────────────────────────────────────── */
@media (max-width:1000px){.receptenrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.receptenrij{grid-template-columns:1fr}}

/* ── het eerste recept uitgelicht ─────────────────────────────────────────
   Twee kolommen breed, beeld links en tekst rechts, met de zin erbij. Zo
   heeft de pagina een begin in plaats van een rij gelijke vakjes. */
@media (min-width:641px){
  .recepten > .rkaart-vak:first-child{grid-column:span 2}
  .recepten > .rkaart-vak:first-child .rkaart{flex-direction:row;align-items:stretch}
  .recepten > .rkaart-vak:first-child .rkaart__beeld{flex:0 0 52%;aspect-ratio:auto;min-height:20rem}
  .recepten > .rkaart-vak:first-child .rkaart__zin{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  }
  .recepten > .rkaart-vak:first-child .rkaart__tekst{
    justify-content:center;gap:.8rem;
    padding:clamp(1.2rem,3vw,2.4rem) clamp(1rem,2.6vw,2.2rem);
  }
  .recepten > .rkaart-vak:first-child .rkaart__naam{font-size:clamp(2rem,3.4vw,3rem)}
  .recepten > .rkaart-vak:first-child .rkaart__knop{margin-top:.6rem}
}