/* events-showcase.css — the events showcase, ONE look for events.oectahw.com and members.oectahw.com (Paul 2026-11-07). Built only
   from the design tokens (oecta-tokens.css), so each site's own fonts and theme carry through. events-showcase.js draws it.
   A page sets --ep-gutter on an ancestor to inset it; where it sets none it runs edge to edge in its container. */
.ep-show__slide:focus-visible, .ep-show__icon:focus-visible, .ep-show__tab:focus-visible { outline: none; box-shadow: var(--oecta-focus-ring); }

/* ── The showcase (Paul 2026-11-07): the events the office ticks, rotating under the banner ──────────────────────────
   Narrow: picture, then words; thin bars over the picture (Pause first). Wide (720px of room): picture beside the words, a
   row of named events under it, each at least 180px, sliding with arrows when they don't fit. */
.ep-show { container-type: inline-size; position: relative; padding: var(--oecta-space-md) var(--ep-gutter, 0px) 0; }
.ep-show[hidden] { display: none; }
.ep-show__skel { aspect-ratio: 16 / 9; border-radius: var(--oecta-radius-xl); }
.ep-show__stage { position: relative; }
.ep-show__slide { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--oecta-radius-xl); background: var(--oecta-surface-low); color: inherit; text-decoration: none; touch-action: pan-y; }
.ep-show__pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--oecta-silk-mid); }
.ep-show__pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ep-show__blur { object-fit: cover; filter: blur(22px) saturate(1.1); transform: scale(1.15); opacity: 0.7; }
.ep-show__img { object-fit: contain; }
.ep-show__pic.is-cover .ep-show__img { object-fit: cover; }
.ep-show__pic.is-cover .ep-show__blur { display: none; }
/* no photo: a date poster in the navy silk, lit from the middle like the banner */
.ep-show__pic--art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--oecta-on-primary);
  background-color: var(--oecta-silk-mid);   /* what the words are measured against; the glow is painted over it */
  background-image: radial-gradient(ellipse 62% 88% at 50% 56%, var(--oecta-silk-light) 0%, var(--oecta-silk-mid) 40%, var(--oecta-silk-navy) 72%, var(--oecta-silk-deep) 100%);
}
.ep-show__art-dow { font-weight: var(--oecta-weight-bold); font-size: clamp(13px, 2.6cqi, 18px); letter-spacing: 0.18em; text-transform: uppercase; }
.ep-show__art-day { font-weight: var(--oecta-weight-light, 300); font-size: clamp(48px, 17cqi, 148px); line-height: 0.95; font-variant-numeric: tabular-nums; }
.ep-show__art-mon { font-weight: var(--oecta-weight-bold); font-size: clamp(14px, 2.8cqi, 20px); letter-spacing: 0.22em; text-transform: uppercase; }
.ep-show__art-type { position: absolute; inset: auto 0 14px; text-align: center; font-weight: var(--oecta-weight-bold); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--oecta-on-primary) 86%, transparent); }
/* An Around OECTA item the office styled, with no photo (2026-11-08: the style without a cover shows wherever a cover
   would): its colour, finish, second colour and pattern (app.js App._aoArtStyle → --ao-ev-*, set through the CSSOM), else
   its kind's colour (ao-event-card.css .ao-evc--k-*), exactly as its tile and its notice draw it; the words take the ink
   the office paired with that colour. */
.ep-show__pic--art.ep-show__pic--style {
  background-color: var(--ao-ev-hero, var(--aoe-kind-bg, var(--oecta-silk-mid)));
  background-image: var(--ao-ev-bg-image, var(--ao-ev-hero, radial-gradient(color-mix(in srgb, currentColor 13%, transparent) 1px, transparent 1.6px)));
  background-size: var(--ao-ev-bg-size, 16px 16px);
  background-position: var(--ao-ev-bg-pos, 0 0);
  color: var(--ao-ev-art-text, var(--ao-ev-datecard-text, var(--aoe-kind-ink, var(--oecta-on-primary))));
}
.ep-show__pic--style .ep-show__art-type { color: inherit; opacity: 0.86; }
/* dark mode: the Event kind's light-blue fill would leave white words at 3.3:1 — the poster keeps light mode's navy */
body.dark-mode .ep-show__pic--style.ao-evc--k-event { --aoe-kind-bg: var(--oecta-silk-mid); }
.ep-show__text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: var(--oecta-space-lg) var(--oecta-space-lg) 20px; }
.ep-show__when { margin: 0; font-weight: var(--oecta-weight-bold); font-size: 15px; line-height: 20px; color: var(--oecta-on-surface); }
.ep-show__title { margin: 0; font-family: var(--oecta-font-display); font-weight: var(--oecta-weight-regular); font-size: 24px; line-height: 1.2; color: var(--oecta-primary-text); overflow-wrap: anywhere; text-wrap: balance; }
.ep-show__place { margin: 0; font-size: 16px; line-height: 22px; color: var(--oecta-on-surface-variant); overflow-wrap: anywhere; }
.ep-show__tagline { margin: 0; font-size: 17px; line-height: 24px; color: var(--oecta-on-surface); }
.ep-show__btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--oecta-space-sm); padding: 0 22px; border-radius: var(--oecta-radius-md); background: var(--oecta-primary-container); color: var(--oecta-on-primary-container); font-weight: var(--oecta-weight-bold); font-size: 16px; }
.ep-show__slide:hover .ep-show__btn { box-shadow: var(--oecta-shadow-md); }
/* controls */
.ep-show__icon { appearance: none; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--oecta-radius-pill); background: none; color: var(--oecta-on-primary); cursor: pointer; }
.ep-show__icon svg { display: block; }
.ep-show__arrow, .ep-show__count { display: none; }
.ep-show__bar { position: absolute; top: var(--oecta-space-md); left: var(--ep-gutter, 0px); right: var(--ep-gutter, 0px); z-index: 2; display: flex; align-items: center; gap: 2px; padding: 2px 6px 0 2px; }
.ep-show__bar[hidden] { display: none; }
.ep-show__bar::before { content: ""; position: absolute; inset: 0 0 -26px; z-index: -1; border-radius: var(--oecta-radius-xl) var(--oecta-radius-xl) 0 0; background: linear-gradient(color-mix(in srgb, var(--oecta-silk-deep) 62%, transparent), transparent); pointer-events: none; }
.ep-show__tabs { flex: 1 1 auto; display: flex; gap: 4px; min-width: 0; }
.ep-show__tab { appearance: none; position: relative; flex: 1 1 0; min-width: 0; height: 44px; padding: 0; border: 0; border-radius: var(--oecta-radius-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ep-show__tab-text { display: none; }
.ep-show__prog { position: absolute; inset-inline: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: color-mix(in srgb, var(--oecta-on-primary) 42%, transparent); overflow: hidden; }
.ep-show__prog i { position: absolute; inset: 0; background: var(--oecta-on-primary); transform-origin: left center; transform: scaleX(0); }
.ep-show__tab.is-done .ep-show__prog i { transform: scaleX(1); }
/* the fill IS the timer: its animationend moves the showcase on, so it runs whatever the motion setting (it starts paused) */
.ep-show__tab.is-active .ep-show__prog i { animation: ep-show-fill var(--ep-show-dur, 7000ms) linear forwards; }
.ep-show.is-paused .ep-show__tab.is-active .ep-show__prog i { animation-play-state: paused; }
.ep-show.is-stopped .ep-show__tab.is-active .ep-show__prog i { animation: none; transform: scaleX(1); }
@keyframes ep-show-fill { to { transform: scaleX(1); } }
.ep-show.is-count .ep-show__tabs { display: none; }
.ep-show.is-count .ep-show__arrow { display: inline-flex; }
.ep-show.is-count .ep-show__arrow--prev { margin-inline-start: auto; }
.ep-show.is-count .ep-show__count { display: block; min-width: 56px; text-align: center; color: var(--oecta-on-primary); font-weight: var(--oecta-weight-bold); font-size: 15px; font-variant-numeric: tabular-nums; }
/* a narrow card: the poster keeps the date, the kind of event gives way */
@container (max-width: 339px) { .ep-show__art-type { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ep-show__slide.is-entering { animation: ep-show-in 380ms var(--oecta-ease) both; }
  @keyframes ep-show-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@container (min-width: 720px) {
  .ep-show__skel { aspect-ratio: 3 / 1; }
  .ep-show__slide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ep-show__text { justify-content: center; gap: var(--oecta-space-sm); padding: 32px 36px; }
  .ep-show__when { font-size: 16px; line-height: 22px; }
  .ep-show__title { font-size: clamp(28px, 3.4cqi, 38px); }
  .ep-show__place { font-size: 17px; line-height: 24px; }
  .ep-show__tagline { font-size: 18px; line-height: 26px; }
  .ep-show__btn { margin-top: 14px; }
  .ep-show__bar { position: static; gap: var(--oecta-space-sm); margin-top: var(--oecta-space-sm); padding: 0; align-items: stretch; }
  .ep-show__bar::before { display: none; }
  .ep-show__icon { height: auto; min-height: 44px; border-radius: var(--oecta-radius-md); background: var(--oecta-surface-low); color: var(--oecta-primary-text); }
  .ep-show__icon:hover { background: var(--oecta-surface-container); }
  .ep-show__tabs { gap: var(--oecta-space-sm); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ep-show__tabs::-webkit-scrollbar { display: none; }
  .ep-show__tab { flex: 1 0 180px; height: auto; min-height: 64px; padding: 13px 14px 11px; border-radius: var(--oecta-radius-md); color: var(--oecta-on-surface); scroll-snap-align: start; }
  .ep-show__tab:hover, .ep-show__tab.is-active { background: var(--oecta-surface-low); }
  .ep-show__tab-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ep-show__tab-date { font-weight: var(--oecta-weight-bold); font-size: 13px; line-height: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oecta-on-surface-variant); }
  .ep-show__tab-title { font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ep-show__tab.is-active .ep-show__tab-title { color: var(--oecta-primary-text); font-weight: var(--oecta-weight-bold); }
  .ep-show__prog { top: 0; margin: 0; inset-inline: 14px; background: var(--oecta-surface-high); }
  .ep-show__prog i { background: var(--oecta-accent); }
  .ep-show.is-overflow .ep-show__arrow { display: inline-flex; }
}

/* the state pill (also the events list's rows) */
.ep-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--oecta-space-sm);
  padding: var(--oecta-space-xs) var(--oecta-space-md);
  border-radius: var(--oecta-radius-pill);
  background: var(--oecta-surface-container);
  color: var(--oecta-on-surface-variant);
  font-weight: var(--oecta-weight-semibold);
  font-size: 13px;
  line-height: 17px;
  white-space: nowrap;
}
.ep-pill__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--oecta-radius-round); background: var(--oecta-text-muted); }
.ep-pill--open { background: color-mix(in srgb, var(--oecta-success) 8%, var(--oecta-surface-lowest)); color: var(--oecta-success-text); }
.ep-pill--open .ep-pill__dot { background: var(--oecta-success); }
.ep-pill--waitlist .ep-pill__dot { background: var(--oecta-warning); }
.ep-pill--full { background: color-mix(in srgb, var(--oecta-error) 9%, var(--oecta-surface-lowest)); color: var(--oecta-error-text); }
.ep-pill--full .ep-pill__dot { background: var(--oecta-error); }
.ep-pill--going { background: var(--oecta-primary-container); color: var(--oecta-on-primary-container); }
.ep-pill--going .ep-pill__dot { background: var(--oecta-on-primary-container); }
.ep-pill--due { background: color-mix(in srgb, var(--oecta-accent) 12%, var(--oecta-surface-lowest)); color: var(--oecta-accent-text); }
.ep-pill--oecta { background: var(--oecta-chip-feedback-bg); color: var(--oecta-chip-feedback-fg); }
.ep-pill--oecta .ep-pill__dot { background: var(--oecta-channel-violet); }
.ep-pill--due .ep-pill__dot { background: var(--oecta-accent); }