/* zaalzeven.nl v2 /agenda/. Gegenereerd uit de blokkenkiezer (zaalzeven-agenda-blokkenkiezer), keuze 1f-2b-3d-4b-5c-6a-7b.
   Laadt NA /v2/home.css (kop, voet, knoppen, hero b1a, variabelen, productieregels komen daaruit).
   Deel 1 = wat de blokken nodig hebben en home.css nog niet heeft (uit paginastijl.css / feesten.css); deel 2 = blok-CSS letterlijk uit de kiezer
   (b2b/b4b-markup komt uit build.py: agenda_pagina()); deel 3 = productie: statusvarianten, formulier, sterren-vulbalk, hero-uitsnede.
   Mobiel: @media (max-width:700px) i.p.v. @container pv uit de kiezer. */

/* ===== 1. aanvulling op home.css ===== */
.pv{--zz-schaduw-rgb:23,0,36;--zz-ivoor-70:rgba(255,255,255,.7);--zz-rood-hover:#b5141b;
    --display:var(--zz-font-kop);--body:var(--zz-font-tekst);--radius:4px;--radius-chip:8px;--radius-zoekbalk:14px}
/* watermerk als doorlopende paginalaag: de 7 in lavendel (zoals feesten/bruiloften) */
.pv::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:var(--zz-wm-7),var(--zz-wm-7),var(--zz-wm-7);
  background-repeat:no-repeat;background-position:right -260px top 1000px,left -300px top 42%,right -280px top 76%;
  background-size:760px,900px,820px}
.pv>main{position:relative}
.pv main p a:not(.btn),.pv main li a:not(.btn){color:var(--zz-rood);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}
.pv .accent{color:var(--zz-rood)}
.pv .sub{font-size:17px;opacity:.85}
.pv .sec--ivoor{background:rgba(255,255,255,.72)}
.pv .icon{width:20px;height:20px;flex:none}
.pv .btn .icon{width:16px;height:16px}
.pv .btn--outline{background:transparent;color:var(--zz-rood)}
.pv .btn--outline:hover{background:var(--zz-rood);border-color:var(--zz-rood);color:var(--zz-ivoor)}
.pv .knoppen{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pv .tekstlink{color:var(--zz-rood);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:8px}
.pv .tekstlink:hover{text-decoration-thickness:2px}
.pv .kaart__foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.pv .kaart__body{padding:24px 26px 26px}
.pv .kaart__body h3{color:var(--zz-rood)}
@media (max-width:700px){
  .pv::before{background-size:900px,1100px,1000px;background-position:right -300px top 600px,left -380px top 42%,right -340px top 76%}
  .pv .knoppen .btn{flex:1 1 100%}
}

/* ===== 2. blokken uit de kiezer ===== */
/* 2b · Komende evenementen als kaarten */
.pv .b2b-kop{margin-bottom:36px}
.pv .b2b-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.pv .b2b-kaart{display:flex;flex-direction:column}
.pv .b2b-beeld{position:relative}
.pv .b2b-beeld--poster .kaart__foto{object-fit:contain;background:var(--zz-paars)}
.pv .b2b-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;height:86px;width:72px;border-radius:var(--zz-radius);background:var(--zz-schelp);color:var(--zz-paars);line-height:1;flex:none}
.pv .b2b-dag{font-size:12px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase}
.pv .b2b-nr{font-family:var(--display);font-weight:700;font-size:34px;margin:4px 0 2px}
.pv .b2b-mnd{font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--zz-rood)}
.pv .b2b-datum{position:absolute;left:14px;top:14px;box-shadow:0 2px 10px rgba(23,0,36,.18)}
.pv .b2b-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:1}
.pv .b2b-body h3{font-size:28px}
.pv .b2b-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;line-height:1;color:var(--zz-paars);background:rgba(243,148,0,.16);padding:6px 10px 6px 9px;border-radius:var(--radius-chip);white-space:nowrap}
.pv .b2b-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--zz-oranje)}
.pv .b2b-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;line-height:1.5;color:var(--zz-paars-2)}
.pv .b2b-meta span{display:inline-flex;align-items:center;gap:7px}
.pv .b2b-meta .icon{width:15px;height:15px;color:var(--zz-rood)}
.pv .b2b-meta{flex-direction:column;gap:2px}
.pv .b2b-tekst{font-size:14px;line-height:1.65}
.pv .b2b-onder{margin-top:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(23,0,36,.12)}
.pv .b2b-prijs{font-size:13px;line-height:1.2;color:var(--zz-grijs);text-align:left}
.pv .b2b-prijs b{display:block;font-family:var(--display);font-weight:700;font-size:30px;color:var(--zz-rood);white-space:nowrap}
.pv .b2b-prijs{align-self:flex-start;display:flex;align-items:baseline;gap:8px}
.pv .b2b-knop{width:100%}
.pv .b2b-link{font-size:14px}
.pv .b2b-link .icon{width:16px;height:16px}
@media (max-width:700px){
  .pv .b2b-kop{margin-bottom:24px}
  .pv .b2b-raster{grid-template-columns:1fr;gap:18px}
  .pv .b2b-body h3{font-size:24px}
}

/* 3d · Maak er een avond van */
.pv .b3d-raster{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:72px;align-items:center}
.pv .b3d-beeld{position:relative;height:520px}
.pv .b3d-foto{position:absolute;left:0;top:0;width:340px;height:100%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--zz-schaduw)}
.pv .b3d-foto img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.pv .b3d-lijst{position:absolute;left:250px;right:0;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pv .b3d-lijst li{display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:var(--radius);background:var(--zz-ivoor);box-shadow:0 2px 10px rgba(var(--zz-schaduw-rgb),.08);font-size:15px;font-weight:500;color:var(--zz-paars);line-height:1.35}
.pv .b3d-lijst li .icon{color:var(--zz-rood);width:18px;height:18px}
.pv .b3d-lijst li.b3d-aan{background:var(--zz-ivoor);box-shadow:var(--zz-schaduw);margin-left:-22px}
.pv .b3d-tekst h2{margin-bottom:22px}
.pv .b3d-tekst > p{font-size:16.5px;line-height:1.8;max-width:470px}
.pv .b3d-tekst > p.b3d-prijs{margin-top:22px;font-size:14px;line-height:1.6;color:var(--zz-paars-2)}
.pv .b3d-prijs b{white-space:nowrap;line-height:1;font-family:var(--display);font-weight:700;font-size:24px;color:var(--zz-rood)}
.pv .b3d .knoppen{margin-top:28px}
.pv .b3d-tekst > p.b3d-voet{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--zz-grijs)}
@media (max-width:700px){
  .pv .b3d-raster{grid-template-columns:1fr;gap:36px}
  .pv .b3d-tekst{order:-1}
  .pv .b3d-tekst > p{font-size:15px}
  .pv .b3d-tekst > p.b3d-prijs{font-size:14px}
  .pv .b3d-tekst > p.b3d-voet{font-size:12.5px}
  .pv .b3d-beeld{height:auto}
  .pv .b3d-foto{position:relative;width:100%;height:320px}
  .pv .b3d-lijst{position:relative;left:auto;top:auto;transform:none;margin:-48px 14px 0;gap:8px}
  .pv .b3d-lijst li{background:var(--zz-ivoor);box-shadow:var(--zz-schaduw);padding:12px 16px;font-size:14px}
  .pv .b3d-lijst li.b3d-aan{margin-left:0}
}

/* 4b · Archief, fototegels in grijstint */
.pv .b4b{padding:80px 0}
.pv .b4b-arch-kop{margin-bottom:32px}
.pv .b4b-arch-kop h2{font-size:44px;margin-bottom:8px}
.pv .b4b-arch-kop p{font-size:16px;color:var(--zz-grijs)}
.pv .b4b-arch-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pv .b4b-arch-tegel{background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:var(--zz-schaduw);overflow:hidden}
.pv .b4b-arch-foto{position:relative;aspect-ratio:3/2;background:var(--zz-paars)}
.pv .b4b-arch-foto img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);opacity:.7}
.pv .b4b-arch-geweest{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--zz-grijs);background:var(--zz-ivoor);padding:5px 11px;border-radius:var(--radius-chip);line-height:1.3}
.pv .b4b-arch-body{padding:18px 22px 22px}
.pv .b4b-arch-body h3{font-size:23px;color:var(--zz-paars-2)}
.pv .b4b-arch-body p{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--zz-grijs)}
.pv .b4b-arch-body .icon{width:15px;height:15px}
@media (max-width:700px){
  .pv .b4b{padding:56px 0}
  .pv .b4b-arch-kop{margin-bottom:22px}
  .pv .b4b-arch-kop h2{font-size:34px}
  .pv .b4b-arch-kop p{font-size:15px;line-height:1.6}
  .pv .b4b-arch-rij{grid-template-columns:1fr;gap:12px}
  .pv .b4b-arch-tegel{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center}
  .pv .b4b-arch-foto{height:100%;aspect-ratio:auto;min-height:96px}
  .pv .b4b-arch-geweest{left:8px;top:8px;font-size:11.5px;padding:3px 8px}
  .pv .b4b-arch-body{padding:12px 14px}
  .pv .b4b-arch-body h3{font-size:19px}
  .pv .b4b-arch-body p{font-size:13px}
}

/* 5c · Google-sticker met drie reviews */
.pv .b5c{padding:88px 0}
.pv .b5c-grid{display:grid;grid-template-columns:330px 1fr;gap:36px;align-items:start}
.pv .b5c-links h2{font-size:42px;margin-bottom:26px;text-wrap:balance}
.pv .b5c-links .g-sticker{margin-bottom:26px}
.pv .b5c-sterren{display:flex;gap:4px;color:var(--zz-oranje)}
.pv .b5c-sterren .icon{width:17px;height:17px}
.pv .b5c-sterren--groot .icon{width:22px;height:22px}
.pv .b5c-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pv .b5c-kaart{background:var(--zz-ivoor);border-radius:var(--radius);box-shadow:var(--zz-schaduw);padding:26px 24px 22px;display:flex;flex-direction:column;gap:14px}
.pv .b5c-tekst{font-size:14.5px;line-height:1.75;color:var(--zz-paars-2);flex:1}
.pv .b5c-naam{font-size:13.5px;font-weight:600;color:var(--zz-paars);padding-top:12px;border-top:1px solid rgba(var(--zz-schaduw-rgb),.14);line-height:1.4}
.pv .b5c-naam span{display:block;font-weight:400;color:var(--zz-grijs);font-size:13px;margin-top:2px}
@media (max-width:700px){
  .pv .b5c{padding:64px 0}
  .pv .b5c-grid{grid-template-columns:1fr;gap:26px}
  .pv .b5c-links h2{font-size:34px;margin-bottom:18px}
  .pv .b5c-links .g-sticker{margin-bottom:16px}
  .pv .b5c-kaarten{grid-template-columns:1fr;gap:14px}
  .pv .b5c-kaart{padding:22px 22px 20px}
}

/* 6a · Mis geen evenement */
.pv .b6a-in{text-align:center;max-width:640px;margin:0 auto}
.pv .b6a-in h2{margin-bottom:12px}
.pv .b6a-in .sub{margin:0 auto 30px}
.pv .b6a-form{display:flex;gap:10px;align-items:stretch;padding:10px;text-align:left}
.pv .b6a-veld{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid rgba(23,0,36,.18);border-radius:var(--radius);background:var(--zz-ivoor);min-height:50px}
.pv .b6a-veld .icon{width:18px;height:18px;color:var(--zz-rood)}
.pv .b6a-veld span{display:flex;flex-direction:column;line-height:1.3}
.pv .b6a-veld small{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:500;color:var(--zz-paars-2)}
.pv .b6a-veld em{font-style:normal;font-size:15px;color:var(--zz-grijs)}
.pv .b6a-form .btn{flex:none}
.pv .b6a-klein{font-size:13px;color:var(--zz-grijs);margin-top:16px}
@media (max-width:700px){
  .pv .b6a-form{flex-direction:column;padding:14px}
  .pv .b6a-form .btn{width:100%}
}

/* 7b · Zelf iets te vieren? */
.pv .b7b-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:36px}
.pv .b7b-kop h2{margin-bottom:12px}
.pv .b7b-kop .sub{max-width:560px}
.pv .b7b-kop .btn{flex:none}
.pv .b7b-kop .btn .icon{width:16px;height:16px}
.pv .b7b-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pv .b7b-tegel{position:relative;display:block;height:400px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--zz-schaduw)}
.pv .b7b-tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv .b7b-tegel img.b7b-bruid{object-position:50% 30%}
.pv .b7b-tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,0,36,.9) 0%,rgba(23,0,36,.68) 36%,rgba(23,0,36,0) 62%)}
.pv .b7b-inhoud{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 26px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pv .b7b-inhoud h3{color:var(--zz-ivoor);font-size:30px;text-shadow:0 1px 12px rgba(23,0,36,.5)}
.pv .b7b-inhoud p{color:rgba(255,255,255,.92);font-size:14px;line-height:1.6;text-shadow:0 1px 8px rgba(23,0,36,.6)}
.pv .b7b-link{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--zz-ivoor);font-weight:500;font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pv .b7b-link .icon{width:16px;height:16px}
@media (max-width:700px){
  .pv .b7b-kop{flex-direction:column;align-items:stretch;gap:20px;margin-bottom:26px}
  .pv .b7b-kop .btn{white-space:normal;text-align:center}
  .pv .b7b-rij{grid-template-columns:1fr;gap:14px}
  .pv .b7b-tegel{height:340px}
  .pv .b7b-inhoud{padding:22px 20px 20px}
  .pv .b7b-inhoud h3{font-size:27px}
  .pv .b7b-inhoud p{font-size:13.5px}
}


/* ===== 3. productie ===== */
/* Hero (b1a uit home.css): foto hoog uitgelijnd en verloop versterkt zoals kiezer 1f, zodat de kop onder de gezichten staat */
.pv .b1a-foto{top:auto;bottom:0;height:150%;object-position:50% 100%}
/* Breed scherm (≥1200): de 4:3-foto wordt sterk verticaal bijgesneden; focus op de gezichten van de band (±42% van de hoogte)
   i.p.v. onderkant, anders vallen de hoofden boven de kop weg (zelfde probleem als parkhotelhorst.nl-hero op groot scherm) */
@media (min-width:1200px){
  .pv .b1a-foto{top:0;bottom:auto;height:100%;object-position:50% 42%}
}
.pv .b1a::after{background:linear-gradient(180deg,rgba(23,0,36,0) 22%,rgba(23,0,36,.55) 50%,rgba(23,0,36,.88)),linear-gradient(90deg,rgba(23,0,36,.6),rgba(23,0,36,0) 65%)}
.pv .b1a-volgende{font-size:14px;font-weight:500;line-height:1.5;margin-top:18px;color:var(--zz-ivoor)}
.pv .b1a-volgende:empty{display:none}
@media (max-width:700px){
  .pv .b1a{min-height:780px}
  .pv .b1a-foto{top:0;bottom:auto;height:62%;object-position:40% 50%}
  .pv .b1a::after{background:linear-gradient(180deg,rgba(23,0,36,0) 34%,rgba(23,0,36,.9) 58%,var(--zz-paars) 62%)}
}
/* 2b: kaarten zijn <article>; foto + datumblok; statussen uit evenementen.json (status) */
.pv .b2b-beeld{overflow:hidden}
.pv .b2b-status--bijna-uitverkocht{background:rgba(215,25,33,.12)}
.pv .b2b-status--bijna-uitverkocht::before{background:var(--zz-rood)}
.pv .b2b-status--uitverkocht{background:var(--zz-schelp);color:var(--zz-grijs)}
.pv .b2b-status--uitverkocht::before{background:var(--zz-grijs)}
.pv .b2b-knop--uit{background:transparent;border-color:var(--zz-lavendel);color:var(--zz-grijs);cursor:default}
.pv .b2b-kaart--leeg .b2b-leeg{display:grid;place-items:center;aspect-ratio:3/2;background:var(--zz-schelp);color:var(--zz-rood)}
.pv .b2b-kaart--leeg .b2b-leeg .icon{width:40px;height:40px}
.pv .b2b-raster>[hidden]{display:none}
/* 4b: tegel is een link naar de evenementpagina */
.pv .b4b-arch-tegel{display:block;color:inherit;text-decoration:none}
.pv .b4b-arch-tegel:hover h3{color:var(--zz-rood)}
@media (max-width:700px){
  .pv .b4b-arch-tegel{display:grid}
}
/* 6a: echt invoerveld in de weergave van de kiezer (nog zonder mailsysteem) */
.pv .b6a-veld{cursor:text}
.pv .b6a-veld span{flex:1;min-width:0}
.pv .b6a-veld input{font:inherit;font-size:15px;color:var(--zz-paars);border:0;outline:0;padding:0;background:transparent;width:100%}
.pv .b6a-veld input::placeholder{color:var(--zz-grijs);opacity:1}
.pv .b6a-veld:focus-within{border-color:var(--zz-rood)}