/* website_l2s · /ervaar/ — de voorbeeld-clubsite: alleen wat er naast cinematic.css nodig is (zijpaneel, kaarten)
   ═══════════════════════════════════════════════════════════════════════════
   De clubsite zelf staat in cinematic.css (gedeeld met het template in de website-module,
   hier geserveerd via src/shared-assets.txt). Dit bestand is wat er alleen op de
   marketingsite omheen zit. Mockup 17 is leidend. Geen hex: alle kleur komt uit de
   --cine-tokens van .cine-theme (#ervaar) of uit wit/zwart. */

/* KAAL (owner 27-10): de pagina IS de clubsite, schermvullend. Geen labbalk, geen podium,
   geen L2S-schil (layout-stand kaal); sport en kleur zijn op de homepage gekozen. */
body.ervaar-pagina { margin: 0; background: var(--cine-paper, white); }
.ervaar { position: relative; font-family: var(--cine-font); }
/* Vrijwilligers-chip in het dock: gecentreerd en vast. De chip verliest hier zijn eigen fixed-positie
   (cinematic.css) en staat als gewone knop in de wrapper. */
.ervaar-dock { position: fixed; z-index: 190; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; max-width: calc(100vw - 20px); }
.ervaar-dock .cine-volunteer { position: static; left: auto; transform: none; max-width: none; }
.ervaar-dock .cine-volunteer:hover { transform: translateY(-3px); }

/* Terugbalk naar Loyal2Sports (owner 28-10). Desktop: donker bovenin, zoals de oude labbalk. Mobiel
   (≤900px): dezelfde balk als smalle vaste strook onderin («sticky smalle strook ipv twee chips»);
   de vrijwilligers-chip zweeft er los boven en de pagina krijgt onderin ruimte voor de strook. */
.ervaar-balk { display: flex; align-items: center; gap: 18px; min-height: 48px; padding: 0 24px;
  background: color-mix(in oklab, var(--cine-deep) 85%, black); color: white; font-family: var(--cine-font);
  border-bottom: 1px solid color-mix(in srgb, white 12%, transparent); }
.ervaar-balk__merk { font-size: 17px; font-weight: 800; letter-spacing: -.04em; color: white; text-decoration: none; }
.ervaar-balk__merk span { color: var(--cine-accent); }
.ervaar-balk__uitleg { flex: 1; font-size: 15px; font-weight: 600; color: color-mix(in srgb, white 60%, transparent); }
.ervaar-balk__terug { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 99px;
  background: white; color: var(--cine-on-accent); font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform .18s; }
.ervaar-balk__terug:hover { transform: translateY(-1px); }
@media (max-width: 900px) {
  .ervaar-balk { position: fixed; z-index: 191; left: 0; right: 0; bottom: 0; gap: 12px; min-height: 0;
    padding: 6px 16px max(6px, env(safe-area-inset-bottom));
    border-bottom: 0; border-top: 1px solid color-mix(in srgb, white 12%, transparent); }
  .ervaar-balk__merk { flex: 1; font-size: 15px; }
  .ervaar-balk__uitleg { display: none; }
  .ervaar-balk__terug { min-height: 34px; padding: 0 14px; }
  .ervaar { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
  .ervaar-dock { bottom: calc(60px + env(safe-area-inset-bottom)); transition: opacity .25s, translate .25s; }
  /* Bovenin de hero staan de knoppen en socials onderaan het scherm: de chip komt pas als je scrolt. */
  .ervaar:not(.is-voorbij-hero) .ervaar-dock { opacity: 0; translate: 0 14px; pointer-events: none; }
}

/* Mobiel (owner 28-10): «Word lid» uit de hero naar de kop, als gekleurde chip naast inloggen en menu. */
@container cine (max-width: 750px) {
  .ervaar .cine-hero__lid { display: none; }
  .ervaar .cine-header__cta { display: inline-flex; min-height: 36px; padding: 0 13px; border-radius: 99px; font-size: 15px; }
  .ervaar .cine-lockup__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.ervaar-noscript { margin: 0; padding: 120px 24px; font-size: 17px; text-align: center; color: var(--cine-ink); }
.stage .cine { max-width: none; margin: 0; border-radius: 0; }

/* ── kaarten met de échte demo-producten ── */
.cine-product__visual img { object-fit: contain; padding: 18px; }
.cine-product__visual.is-foto img { object-fit: cover; padding: 0; }
.badge { display: inline-flex; align-items: center; margin-left: 10px; padding: 3px 10px; border-radius: 99px;
         font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; vertical-align: middle;
         background: color-mix(in srgb, var(--cine-accent) 22%, white); color: var(--cine-on-accent); }
.badge--voorbeeld { background: var(--cine-soft); color: var(--cine-muted); border: 1px dashed var(--cine-line); }
.teaminfo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: start; margin-top: 20px; }
.teaminfo > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--cine-r); }
.teaminfo dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 24px; font-size: 16px; }
.teaminfo dt { color: var(--cine-muted); }
.teaminfo dd { margin: 0; font-weight: 700; }
.teaminfo p { font-size: 16px; line-height: 1.6; color: var(--cine-muted); }
.lijst-kop { margin: 0 0 18px; font-size: 26px; letter-spacing: -.03em; }
.artikel-kop { height: var(--cine-header-h); background: var(--cine-dark); }
.cine-article { margin-top: 20px; }
.demo-embed { display: block; width: 100%; min-height: 720px; border: 0; border-radius: var(--cine-r); background: white; }
.demo-noot { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--cine-r-s); font-size: 15px; line-height: 1.5;
             background: color-mix(in srgb, var(--cine-accent) 14%, white); color: var(--cine-on-accent); }

/* ── zijpaneel (desktop) / onderblad (mobiel) met de échte demo-pagina ── */
.paneel-scrim { position: fixed; inset: 0; z-index: 400; background: color-mix(in srgb, black 45%, transparent);
                backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.paneel { position: fixed; z-index: 401; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
          display: flex; flex-direction: column; background: white; color: var(--cine-ink); font-family: var(--cine-font);
          box-shadow: -24px 0 60px color-mix(in srgb, black 30%, transparent);
          transform: translateX(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s; }
.paneel * { box-sizing: border-box; }
.ervaar.paneel-open .paneel-scrim { opacity: 1; pointer-events: auto; }
.ervaar.paneel-open .paneel { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.paneel__kop { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--cine-line); }
.paneel__bron { flex: 1; min-width: 0; font-size: 15px; color: var(--cine-muted); }
.paneel__bron strong { display: block; font-size: 16px; color: var(--cine-ink); }
.paneel__kop a, .paneel__kop button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
          gap: 6px; padding: 0 12px; border: 1px solid var(--cine-line); border-radius: 10px; background: white;
          color: var(--cine-ink); font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.paneel__kop a[hidden] { display: none; }
.paneel__kop button { padding: 0; font-size: 22px; }
.paneel__noot { margin: 0; padding: 12px 18px; font-size: 15px; background: color-mix(in srgb, var(--cine-accent) 14%, white); color: var(--cine-on-accent); }
.paneel__noot[hidden] { display: none; }
.paneel__body { flex: 1; overflow-y: auto; padding: 22px; }
.paneel__body.is-frame { padding: 0; overflow: hidden; }
.paneel__frame { display: block; width: 100%; height: 100%; border: 0; }
.paneel .cine-btn { width: 100%; }
.paneel button.cine-role { width: 100%; background: white; color: var(--cine-ink); font: inherit; font-size: 16px; text-align: left; }
/* nagetekende demo-pagina: alleen als terugval wanneer het kader niet kan (http) */
.demo-pg__img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 14px; background: var(--cine-soft); }
.demo-pg__img.is-foto { object-fit: cover; }
.demo-pg small { display: block; margin-top: 18px; font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cine-muted); }
.demo-pg h2 { margin: 6px 0 4px; font-size: 26px; letter-spacing: -.03em; }
.demo-pg__prijs { font-size: 22px; font-weight: 800; }
.demo-pg p { font-size: 16px; line-height: 1.6; color: var(--cine-muted); }
.demo-pg__voet { margin-top: 14px; font-size: 15px; color: var(--cine-muted); text-align: center; }

@media (max-width: 640px) {
  .paneel { top: auto; left: 0; width: 100%; height: 92vh; border-radius: 18px 18px 0 0; transform: translateY(105%); }
}