/* ============================================================================
   Bruuks Huus — Wave G (Webby): evenementenpagina-uitbouw
   ----------------------------------------------------------------------------
   Nieuw bestand, alleen op de evenementen-pagina geladen (conditionele enqueue
   in functions.php, na bh-main). Raakt main.css/feest.css/wave-d.css niet aan.

   Kleurkeuze-discipline voor de feest-transformatie (harde eis: geen groen
   accent dat "blijft staan" in feest-modus): alle koppen/kickers/knoppen
   hieronder zijn gewone h2/h3/.kicker/.btn-primary/.ev-beats-badge-elementen —
   die transformeren al generiek mee via de bestaande regels in feest.css
   (main h1/h2/h3/.kicker, main .btn-primary, .ev-beats-badge). Voor al het
   overige (kaartranden, achtergronden, meta-tekst) gebruiken we bewust NEUTRALE
   tokens (--line/--white/--paper/--ink/--ink-soft) en --green voor hover-
   accenten (--green is ondanks de naam de warme terracotta-tint, geen groen —
   zie tokens.css/main.css). Nergens --green-deep/--green-wash buiten koppen.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. UITGELICHT EVENEMENT (S1) — grote kaart boven het ev-grid
   ---------------------------------------------------------------------- */
.ev-featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0; margin-top:40px;
  background:var(--white); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow-deep); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.ev-featured:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.ev-featured__media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2)}
.ev-featured__media picture, .ev-featured__media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease)}
.ev-featured:hover .ev-featured__media img{transform:scale(1.04)}
.ev-featured__body{padding:clamp(24px,3vw,42px); display:flex; flex-direction:column; justify-content:center}
.ev-featured__body .kicker{margin-bottom:12px}
.ev-featured__body h3{font-size:clamp(1.5rem,2.4vw,2.1rem); margin:0 0 14px; line-height:1.14}
.ev-featured__meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:16px}
.ev-featured__meta span{font-family:var(--sans); font-weight:700; font-size:.86rem; color:var(--ink-soft)}
.ev-featured__body p{margin:0 0 20px; color:var(--ink-soft); font-size:.98rem; line-height:1.55}
.ev-featured .pillar-go{font-family:var(--sans); font-weight:700; font-size:.9rem; color:var(--ink); display:inline-flex; align-items:center; gap:8px}
.ev-featured .pillar-go .arr{transition:transform .28s var(--ease)}
.ev-featured:hover .pillar-go .arr{transform:translateX(5px)}

@media (max-width:820px){
  .ev-featured{grid-template-columns:1fr}
  .ev-featured__media{aspect-ratio:16/10}
}

/* ----------------------------------------------------------------------------
   2. VASTE-ACTIVITEITEN-STROOK (S2) — compacte reeks, los van de kaarten-grid
   ---------------------------------------------------------------------- */
.vast-strook{background:var(--paper-2)}
.vast-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px}
.vast-item{
  display:flex; align-items:baseline; gap:14px; background:var(--white); border:1px solid var(--line);
  border-radius:6px; padding:16px 18px; transition:border-color .3s var(--ease), transform .3s var(--ease);
}
a.vast-item:hover{border-color:var(--green); transform:translateY(-2px); box-shadow:var(--shadow-lift)}
.vast-item--statisch{cursor:default}
.vast-dag{
  flex:none; min-width:52px; font-family:var(--sans); font-weight:800; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.vast-body{display:flex; flex-direction:column; gap:2px; min-width:0}
.vast-body b{font-size:.98rem; color:var(--ink); line-height:1.25}
.vast-tijd{font-family:var(--serif); font-style:italic; font-size:.86rem; color:var(--ink-soft)}

@media (max-width:900px){
  .vast-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .vast-grid{grid-template-columns:1fr}
}

/* ----------------------------------------------------------------------------
   3. FOTO-TERUGBLIK (S4) — horizontale strip met sfeerfoto's
   ---------------------------------------------------------------------- */
.terugblik-grid{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:14px;
  margin-top:36px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity;
}
.terugblik-item{
  margin:0; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--line); scroll-snap-align:start;
}
.terugblik-item picture, .terugblik-item img{width:100%; height:100%; object-fit:cover; display:block}

@media (max-width:640px){
  .terugblik-grid{grid-auto-columns:minmax(160px,68vw)}
}

/* ----------------------------------------------------------------------------
   4. AGENDA-ABONNEREN (S5)
   ---------------------------------------------------------------------- */
.agenda-abo .cta-row{flex-wrap:wrap}

/* REVISIE-RONDE 2 (2026-07-05) — "Bruuks Beats in Google Agenda"-knop
   (page-evenementen.php:469): <a class="btn btn-ghost"> zonder .on-paper-class
   of -voorvader, in een <section class="block agenda-abo"> zonder eigen
   achtergrond (main.css:406, transparant) — erft de bijna-witte body-
   achtergrond. De basis .btn-ghost (main.css:274) is ontworpen voor DONKERE
   achtergronden (bijna-wit op bijna-wit = onzichtbaar), zelfde patroon als
   punt 6 hieronder. Niet feest-afhankelijk (ook in rust al fout), dus
   universeel op deze pagina i.p.v. gescoped onder body.feest-evenement. */
.agenda-abo .btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.agenda-abo .btn-ghost:hover{background:var(--ink); color:var(--paper)}

/* ----------------------------------------------------------------------------
   5. PRAKTISCH-BLOK (S3) — onderaan, vóór de footer
   ---------------------------------------------------------------------- */
.praktisch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px}
.praktisch-item h4{font-size:1.05rem; color:var(--ink); margin:0 0 8px}
.praktisch-item p{margin:0; color:var(--ink-soft); font-size:.92rem; line-height:1.55}
.praktisch-item p a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.praktisch-item p a:hover{color:var(--green)}

@media (max-width:900px){
  .praktisch-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .praktisch-grid{grid-template-columns:1fr}
}

/* ----------------------------------------------------------------------------
   6. ITEM C — MOTOR-VEILIGE POLISH-LAAG (Benjamin-besluit 2026-07-05)
   ----------------------------------------------------------------------------
   Verfijningen overgenomen uit Klanten/Bruukshuus/_concepts/impeccable-demo-
   evenementen.html, vertaald naar de bestaande hook-structuur (GEEN nieuwe
   secties/cta-rows toegevoegd binnen .block.on-paper — dat zou het aantal
   .fd-stroke-vegen veranderen dat feest-transformatie.js injecteert; zie
   .baptiq-evidence/2026-07-05-bruukshuus-golf-baseline/baseline-checklist.md).
   Zelfde kleurendiscipline als hierboven: alleen neutrale tokens + --green
   (=terracotta) voor accenten. --bh-radius-lg/--bh-focus zijn bestaande
   tokens uit tokens.css — hergebruikt i.p.v. nieuwe hardcoded waarden.
   ---------------------------------------------------------------------- */

/* 6a. Meta-scheidingsstip op de uitgelichte kaart (demo-detail: kleine
   terracotta bol tussen de meta-items i.p.v. alleen een gap). */
.ev-featured__meta span + span{position:relative; padding-left:18px}
.ev-featured__meta span + span::before{
  content:""; position:absolute; left:0; top:50%; width:5px; height:5px;
  margin-top:-2px; border-radius:999px; background:var(--green);
}

/* 6b. Kaart-/paneel-radius iets ruimer voor een verzorgder, premium gevoel
   (demo-detail 14px). --bh-radius-lg is exact 14px in tokens.css. Alleen op
   deze pagina (wave-g.css is conditioneel enqueued op is_page('evenementen')),
   raakt .ev-card-gebruik elders in het thema dus niet. */
.ev-featured, .ev-card, .terugblik-item{border-radius:var(--bh-radius-lg)}

/* 6c. Terugblik-strip: zachte hover-zoom op de foto's — zelfde interactie-taal
   als .ev-card/.ev-featured hierboven (was tot nu toe het enige kaart-achtige
   element op deze pagina zonder hover-feedback). */
.terugblik-item img{transition:transform .9s var(--ease)}
.terugblik-item:hover img{transform:scale(1.04)}

/* 6d. Vaste-activiteiten-rij: links accent-streepje dat invliegt bij hover
   (demo-detail ".almanak__row"-patroon), alleen op de echte CPT-link-variant —
   niet op de statische vangnet-span (.vast-item--statisch heeft geen href,
   dus geen hover-affordance suggereren). */
a.vast-item{position:relative}
a.vast-item::before{
  content:""; position:absolute; left:-1px; top:8px; bottom:8px; width:3px;
  background:var(--green); border-radius:2px;
  transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease);
}
a.vast-item:hover::before{transform:scaleY(1)}

/* 6e. Focus-rings op de kaart-links: bestaande site-conventie hergebruikt
   (zie main.css .bh-week-dag:focus-visible / .news-card summary:focus-visible)
   i.p.v. de demo's eigen 3px-outline-stijl te introduceren — --bh-focus is
   dezelfde terracotta, dus consistent met de rest van het thema. */
.ev-featured:focus-visible, .ev-card:focus-visible, a.vast-item:focus-visible{
  outline:2px solid var(--bh-focus); outline-offset:2px;
}