/*! Fleur de Lis — events popup (built by assets/js/events.js).
 * Uses the design tokens from menu.css (:root, light + espresso dark via html[data-theme] /
 * prefers-color-scheme), so it follows the page theme automatically. Mobile-first.
 * Layout (top → bottom): optional heading + counter · poster(s) in a thin frame · caption ·
 * carousel controls (several posters) · OK button.
 */

/* The <dialog> is a full-viewport, transparent layer; clicks on it (outside the panel) close it. */
.evpop{position:fixed;inset:0;z-index:60;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;
  padding:max(var(--ev-out),env(safe-area-inset-top)) max(var(--ev-out),env(safe-area-inset-right)) max(var(--ev-out),env(safe-area-inset-bottom)) max(var(--ev-out),env(safe-area-inset-left));
  background:transparent;color:var(--text);overflow:hidden;overscroll-behavior:contain;
  /* space around the panel · frame around the poster · heights of the rows next to the poster
     (only used to size the poster so that everything fits the viewport) */
  --ev-out:var(--s-3);--ev-frame:5px;
  --ev-head:3.5rem;--ev-nav:0rem;--ev-foot:4.25rem}
.evpop:not([open]){display:none}
.evpop[open]{display:flex;align-items:center;justify-content:center}
.evpop::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.evpop--multi{--ev-nav:3rem}
.evpop.evpop--headless{--ev-head:0rem} /* beats the per-breakpoint values below */
html.evpop-locked,html.evpop-locked body{overflow:hidden}

/* The panel is the frame: a few px of surface around the poster, same curve outside and in. */
.evpop__panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:38rem;max-height:100%;padding:var(--ev-frame);
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-md),0 24px 64px rgba(0,0,0,.28);overflow:hidden;
  /* When the poster is limited by the height (portrait poster, wide screen), the panel narrows to it,
     so the frame stays thin on the sides too. --ev-r = widest poster's width/height (set by the JS). */
  --ev-cap-p:4.5rem;min-width:min(100%,18rem);
  max-width:min(38rem,calc((100vh - 2*var(--ev-out) - 2*var(--ev-frame) - var(--ev-head) - var(--ev-cap-p) - var(--ev-nav) - var(--ev-foot) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ev-r,10) + 2*var(--ev-frame)))}
@supports (height:100dvh){
  .evpop__panel{max-width:min(38rem,calc((100dvh - 2*var(--ev-out) - 2*var(--ev-frame) - var(--ev-head) - var(--ev-cap-p) - var(--ev-nav) - var(--ev-foot) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ev-r,10) + 2*var(--ev-frame)))}
}
.evpop--bare .evpop__panel{--ev-cap-p:0rem}

/* heading (owner-edited, optional) + "2 of 3" */
.evpop__head{display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-2) var(--s-3) var(--s-2);flex:none}
/* small enough that a long owner-written heading wraps to at most 2 lines and never squeezes the poster */
.evpop__title{flex:1;min-width:0;margin:0;font:600 var(--fs-md)/1.2 var(--font-display);letter-spacing:.01em;color:var(--text);text-wrap:balance;overflow-wrap:break-word;hyphens:auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.evpop__title::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:var(--s-2);border-radius:50%;background:var(--rose);vertical-align:.18em}
.evpop__count{flex:none;margin-left:auto;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.evpop__icon{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* slides: one per poster; horizontal scroll-snap when there are several */
.evpop__track{flex:0 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-radius:calc(var(--r-lg) - var(--ev-frame))}
.evpop__track::-webkit-scrollbar{display:none}
.evpop__track:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.evpop__slides{display:flex;width:100%;margin:0;padding:0;list-style:none}
.evpop__slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;--ev-cap:4.5rem}
.evpop__slide--bare{--ev-cap:0rem}
.evpop__figure{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}

/* poster: original aspect ratio, never cropped, always fits the viewport */
.evpop__media{display:flex;align-items:center;justify-content:center;width:100%;border-radius:calc(var(--r-lg) - var(--ev-frame));background:var(--surface-2);overflow:hidden}
.evpop__img{display:block;width:auto;height:auto;max-width:100%;object-fit:contain;
  aspect-ratio:var(--evpop-ratio,auto);
  max-height:calc(100vh - 2*var(--ev-out) - 2*var(--ev-frame) - var(--ev-head) - var(--ev-cap) - var(--ev-nav) - var(--ev-foot) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@supports (height:100dvh){
  .evpop__img{max-height:calc(100dvh - 2*var(--ev-out) - 2*var(--ev-frame) - var(--ev-head) - var(--ev-cap) - var(--ev-nav) - var(--ev-foot) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
.evpop__caption{width:100%;text-align:center;padding-inline:var(--s-3)}
.evpop__name{margin:0;font:600 var(--fs-lg)/var(--lh-snug) var(--font-display);color:var(--text);text-wrap:balance;overflow-wrap:anywhere}
.evpop__text{margin:var(--s-1) 0 0;font-size:var(--fs-md);font-weight:600;color:var(--accent-ink);overflow-wrap:anywhere}

/* carousel controls */
.evpop__nav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:var(--s-1) var(--s-1) 0}
.evpop__arrow{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;
  border:1px solid var(--border-strong);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-std),opacity var(--dur-fast) var(--ease-std)}
.evpop__arrow:hover:not(:disabled){background:var(--surface-2)}
.evpop__arrow:disabled{opacity:.35;cursor:default}
.evpop__dots{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;min-width:0}
.evpop__dots .evpop__count{margin:0}
/* 32px hit area around a small visual dot */
.evpop__dot{position:relative;width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.evpop__dot::before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:var(--r-pill);background:var(--border-strong);
  transition:width var(--dur-base) var(--ease-out),background-color var(--dur-fast) var(--ease-std)}
.evpop__dot[aria-current="true"]::before{width:22px;background:var(--accent)}
.evpop__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* OK: the primary button of menu.css (.btn.btn--primary), full width on phones */
.evpop__foot{flex:none;display:flex;justify-content:center;padding:var(--s-3) var(--s-1) var(--s-1)}
.evpop__ok{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 var(--s-6);
  border:1px solid transparent;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);cursor:pointer;
  font:600 var(--fs-md)/1.2 var(--font-body);letter-spacing:.02em;text-align:center;
  transition:filter var(--dur-fast) var(--ease-std),transform var(--dur-press) var(--ease-std)}
.evpop__ok:hover{filter:brightness(1.06)}
.evpop__ok:active{transform:scale(.98)}
.evpop__ok:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-pill)}

/* motion */
.evpop[open] .evpop__panel{animation:evpop-in var(--dur-slow) var(--ease-out)}
.evpop[open]::backdrop{animation:evpop-fade-in var(--dur-slow) var(--ease-out)}
.evpop.is-closing .evpop__panel{animation:evpop-out 200ms var(--ease-in) forwards}
.evpop.is-closing::backdrop{animation:evpop-fade-out 200ms var(--ease-in) forwards}
@keyframes evpop-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes evpop-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes evpop-fade-in{from{opacity:0}to{opacity:1}}
@keyframes evpop-fade-out{from{opacity:1}to{opacity:0}}

/* larger screens: more air around the panel, a compact centred OK */
@media (min-width:44rem){
  .evpop{--ev-out:var(--s-6);--ev-frame:6px;--ev-head:4.5rem}
  .evpop__head{padding:var(--s-3) var(--s-4) var(--s-3)}
  .evpop__title{font-size:var(--fs-lg)}
  .evpop__ok{width:auto;min-width:12rem}
}
/* very short landscape phones: drop the decorative extras */
@media (max-height:30rem){
  .evpop{--ev-out:var(--s-2);--ev-head:3rem;--ev-foot:3.75rem}
  .evpop__head{padding-block:var(--s-1)}
  .evpop__foot{padding-top:var(--s-2)}
  .evpop__ok{min-height:44px}
  .evpop__slide{--ev-cap:3rem}
  .evpop__slide--bare{--ev-cap:0rem}
  .evpop__panel{--ev-cap-p:3rem}
  .evpop--bare .evpop__panel{--ev-cap-p:0rem}
  .evpop__text{display:inline;margin-left:var(--s-2)}
  .evpop__name{display:inline}
}

@media (prefers-reduced-motion:reduce){
  .evpop[open] .evpop__panel,.evpop[open]::backdrop,.evpop.is-closing .evpop__panel,.evpop.is-closing::backdrop{animation:none}
  .evpop__track{scroll-behavior:auto}
  .evpop__dot::before,.evpop__ok,.evpop__arrow{transition:none}
}

@media print{.evpop{display:none!important}}