/*
 * Ruijs Reset, Home (front-page.php). Laadt alleen op de voorpagina, na base.css.
 *
 * Wat hier staat en niet in base.css: de ruimte tussen de secties zoals in ontwerp B,
 * de uitklaplijst met de pijlers en het podium (template-parts/home/dimensies.php),
 * en recepten met gidsen (template-parts/home/eten.php). Tokens komen uit base.css.
 */

/* ---------- Ruimte zoals in ontwerp B: de ervaringen sluiten direct aan op de opening ---------- */
.rr-home .rr-hero + .rr-citaat{padding-top:0}

/* ---------- De foto van Edith in de opening: bijsnijden vanaf de bovenkant ---------- */
/* Op een laag scherm wordt de foto bijgesneden; zo blijft de ruimte boven haar hoofd staan
   en valt het stukje onderaan weg, in plaats van evenveel boven als onder. */
.rr-home .rr-hero__foto img{object-position:50% 0}

/* ---------- De pijlers: uitklaplijst links, podium rechts ---------- */
.rr-dimensies{padding-top:0}
.rr-dimensies__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.rr-dimensies__links .rr-kop2{margin-bottom:20px}
.rr-dimensies__intro{max-width:26em;margin-bottom:32px}
.rr-dimensies__lijst{padding:0;list-style:none;border-top:1px solid var(--rr-lijn)}
.rr-pijler{border-bottom:1px solid var(--rr-lijn)}
.rr-pijler__knop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;min-height:72px;padding:16px 0;cursor:pointer;list-style:none;color:var(--rr-inkt);-webkit-tap-highlight-color:transparent}
.rr-pijler__knop::-webkit-details-marker{display:none}
.rr-pijler__knop::marker{content:""}
.rr-pijler__knop:focus-visible{outline-offset:4px;border-radius:var(--rr-r-s)}
.rr-pijler__nr{font:300 22px/1 var(--rr-serif);color:var(--rr-groen);letter-spacing:-.02em}
.rr-pijler__naam{font:400 clamp(24px,2.2vw,32px)/1.1 var(--rr-serif);letter-spacing:-.025em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .15s linear}
.rr-pijler__plus{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--rr-grond);transition:background-color .25s var(--rr-ease-uit)}
.rr-pijler__plus::before,.rr-pijler__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.7px;margin:-.85px 0 0 -7px;background:currentColor;border-radius:2px}
.rr-pijler__plus::after{transform:rotate(90deg);transition:transform .4s var(--rr-ease-koers)}
.rr-pijler__blok[open] .rr-pijler__plus{background:var(--rr-geel)}
.rr-pijler__blok[open] .rr-pijler__plus::after{transform:rotate(0)}
@media (hover:hover) and (pointer:fine){
  .rr-pijler__blok:not([open]) .rr-pijler__knop:hover .rr-pijler__plus{background:var(--rr-muur)}
  .rr-pijler__knop:hover .rr-pijler__naam{text-decoration-color:var(--rr-groen)}
}
.rr-pijler__paneel{padding:0 0 24px}
.rr-pijler__paneel p{font-size:19px;max-width:30em;margin-bottom:12px}
.rr-pijler__paneel .rr-tekstlink{color:var(--rr-groen);font-size:16px}
.rr-pijler__blok[open] .rr-pijler__paneel{animation:rr-in .5s var(--rr-ease-koers)}

/* het podium: een dia per pijler, de open pijler bepaalt welke zichtbaar is */
.rr-dimensies__beeld{order:-1;max-width:420px}
.rr-podium{position:relative;aspect-ratio:1/1;border-radius:var(--rr-r-l);background:var(--rr-grond)}
.rr-podium__dia{position:absolute;inset:0;display:flex;padding:12px;opacity:0;visibility:hidden;transition:opacity .5s var(--rr-ease-koers),visibility 0s linear .5s}
.rr-podium__foto{position:relative;flex:1;border-radius:var(--rr-r-m);overflow:hidden;background:var(--rr-vlak,var(--rr-muur))}
.rr-podium__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.06);transition:transform 1s var(--rr-ease-koers)}
.rr-podium__foto--collage{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:8px;background:none;border-radius:0}
.rr-podium__foto--collage img{position:static;border-radius:var(--rr-r-m);transform:none;min-height:0}
.rr-podium__foto--collage img:first-child{grid-row:1/3}
.rr-podium__foto--collage img:only-child{grid-column:1/-1}

/* zichtbare dia: die van de open pijler; staat er niets open, dan de eerste */
.rr-dimensies:not(:has(.rr-pijler__blok[open])) .rr-podium__dia:first-child,
.rr-dimensies:has(.rr-pijler:nth-child(1) > [open]) .rr-podium__dia:nth-child(1),
.rr-dimensies:has(.rr-pijler:nth-child(2) > [open]) .rr-podium__dia:nth-child(2),
.rr-dimensies:has(.rr-pijler:nth-child(3) > [open]) .rr-podium__dia:nth-child(3),
.rr-dimensies:has(.rr-pijler:nth-child(4) > [open]) .rr-podium__dia:nth-child(4),
.rr-dimensies:has(.rr-pijler:nth-child(5) > [open]) .rr-podium__dia:nth-child(5),
.rr-dimensies:has(.rr-pijler:nth-child(6) > [open]) .rr-podium__dia:nth-child(6){opacity:1;visibility:visible;transition:opacity .5s var(--rr-ease-koers),visibility 0s}
.rr-dimensies:not(:has(.rr-pijler__blok[open])) .rr-podium__dia:first-child img,
.rr-dimensies:has(.rr-pijler:nth-child(1) > [open]) .rr-podium__dia:nth-child(1) img,
.rr-dimensies:has(.rr-pijler:nth-child(2) > [open]) .rr-podium__dia:nth-child(2) img,
.rr-dimensies:has(.rr-pijler:nth-child(3) > [open]) .rr-podium__dia:nth-child(3) img,
.rr-dimensies:has(.rr-pijler:nth-child(4) > [open]) .rr-podium__dia:nth-child(4) img,
.rr-dimensies:has(.rr-pijler:nth-child(5) > [open]) .rr-podium__dia:nth-child(5) img,
.rr-dimensies:has(.rr-pijler:nth-child(6) > [open]) .rr-podium__dia:nth-child(6) img{transform:none}
/* een browser zonder :has() toont het eerste beeld */
@supports not selector(:has(a)){
  .rr-podium__dia:first-child{opacity:1;visibility:visible}
}

@media (min-width:640px){
  .rr-dimensies__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rr-dimensies__beeld{order:0;max-width:none;position:sticky;top:calc(var(--rr-kop-h) + 16px)}
  .rr-podium{aspect-ratio:4/5}
}
@media (min-width:900px){
  .rr-dimensies__raster{gap:clamp(32px,6vw,96px);align-items:center}
  .rr-dimensies__beeld{position:static}
  .rr-pijler__paneel{padding-left:52px}
  /* de hele sectie past in het venster: het podium wordt nooit hoger dan wat er overblijft */
  .rr-podium{max-height:calc(100svh - var(--rr-sectie) - 32px)}
}
/* telefoon dwars: het beeld plakt niet en past in het scherm */
@media (min-width:640px) and (max-width:1023px) and (max-height:600px){
  .rr-dimensies__beeld{position:static}
  .rr-podium{aspect-ratio:auto;height:calc(100svh - 48px)}
}

/* ---------- Recepten en gidsen ---------- */
.rr-eten{padding:0 0 var(--rr-sectie)}
.rr-eten__rij{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.rr-eten__rij + .rr-eten__rij{margin-top:var(--rr-sectie)}
.rr-eten .rr-kop2{margin-bottom:16px}
.rr-eten p{margin-bottom:24px;max-width:26em}
.rr-eten__rij--gidsen{background:var(--rr-salie);border-radius:var(--rr-r-l);padding:clamp(20px,3vw,40px);gap:clamp(24px,5vw,72px)}
.rr-eten__rij--gidsen .rr-eten__foto{order:2}
.rr-eten__foto img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--rr-r-m)}
@media (min-width:900px){
  .rr-eten__rij{grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px)}
  .rr-eten__rij--gidsen{align-items:center;gap:clamp(24px,5vw,72px)}
  .rr-eten__rij--gidsen .rr-eten__foto{order:0}
  /* Ronde 3: recepten en gidsen samen in beeld op 1280x800, dus een lagere foto en minder lucht tussen de rijen */
  .rr-eten__rij + .rr-eten__rij{margin-top:clamp(48px,7vh,96px)}
  .rr-eten__foto img{aspect-ratio:16/9}
}

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .rr-podium__dia,.rr-podium__foto img,.rr-pijler__plus,.rr-pijler__plus::after{transition:none}
  .rr-pijler__blok[open] .rr-pijler__paneel{animation:none}
}