/* ============================================================
   SB-EVENTS — FMC · Events page (events.html)
   Marquee-adjacent, celebratory. Built entirely on sb-core
   tokens. This page does NOT load the journey engine:
   sb-events.js adds html.sb-js (+ .sb-va where
   animation-timeline: view() is supported) and a one-shot
   IntersectionObserver drives the same [data-reveal] pattern
   from sb-core §14. JS-rendered ticket stubs enter on a pure
   CSS keyframe. Transform/opacity only; everything sits behind
   prefers-reduced-motion; no 100vh anywhere.
   ============================================================ */

/* ============================================================
   1 · HERO — the "what's on" title card
   ============================================================ */
.ev-hero { position: relative; }
.ev-hero__ring {
  position: absolute;
  width: clamp(320px, 44vw, 620px);
  right: -14%;
  top: -22%;
  z-index: 0;
}
.ev-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 40svh;
  display: grid;
  align-content: center;
  justify-items: start;
}
.ev-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.5vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 1.2rem;
  max-width: 14ch;
}
/* three-craft colour bar — the marquee lockup cue */
.ev-hero__bar {
  width: min(300px, 62%);
  height: 8px;
  border-radius: 4px;
  margin-bottom: 1.4rem;
  background: linear-gradient(90deg,
    var(--film) 0 33.4%,
    var(--music) 33.4% 66.7%,
    var(--comedy) 66.7% 100%);
}

/* ============================================================
   2 · THE BOARD — upcoming events on cocoa
   ============================================================ */
.ev-list {
  display: grid;
  gap: 1rem;
  margin-top: var(--flow);
}
.ev-nojs {
  font-size: var(--fs-body);
  line-height: 1.65;
  max-width: 62ch;
}
.ev-nojs a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hair-cream);
}

/* ---- ticket stub card ----
   Cream stub on the cocoa band. Craft colour rides the left
   spine (--tick) and the craft label (--tick-ink); notch bites
   (--punch) are punched at both short ends, echoing the
   Record & Ticket mark. */
.stub {
  --tick: var(--film);
  --tick-ink: var(--film-ink);
  --punch: var(--c-cocoa);
  position: relative;
  overflow: hidden;               /* clips the punch circles clean */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem 1.15rem;
  padding: 0.9rem 1.5rem 0.9rem 1.1rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--hair);
  border-left: 8px solid var(--tick);
  border-radius: var(--radius-plate);
  box-shadow: var(--shadow-lift);
}
.stub[data-disc="film"]   { --tick: var(--film);   --tick-ink: var(--film-ink); }
.stub[data-disc="music"]  { --tick: var(--music);  --tick-ink: var(--music-ink); }
.stub[data-disc="comedy"] { --tick: var(--comedy); --tick-ink: var(--comedy-ink); }
/* notch bites, both short ends — the torn-stub cue */
.stub::before,
.stub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--punch);
  transform: translateY(-50%);
}
.stub::before { left: -11px; }
.stub::after  { right: -9px; }

.stub__date {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.15rem;
  min-width: 72px;
  padding: 0.5rem 0.9rem 0.5rem 0.2rem;
  border-right: 2px dashed rgba(18, 35, 75, 0.45);  /* perforation */
}
.stub__day {
  font-family: var(--font-display);
  font-size: 2rem;                /* slab ≥ 24px, always */
  line-height: 1;
}
.stub__mon {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-panel);
}
.stub__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;              /* slab ≥ 24px, always */
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
  overflow-wrap: anywhere;
}
.stub__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  font-size: var(--fs-sm);
  color: var(--ink-panel);
}
.stub__craft {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tick-ink);
}
.stub__craft::before {
  content: "";
  display: inline-block;
  vertical-align: 0.14em;
  width: 22px;
  height: 3px;
  margin-right: 0.5em;
  border-radius: 2px;
  background: var(--tick);        /* the craft colour tick */
}

/* JS-rendered entrance — pure CSS, gated on .sb-js, RM-safe.
   Reuses sb-core's sb-reveal-in keyframes. */
@media (prefers-reduced-motion: no-preference) {
  .sb-js .stub { animation: sb-reveal-in 0.7s var(--ease) backwards; }
  .sb-js .stub:nth-child(2) { animation-delay: 90ms; }
  .sb-js .stub:nth-child(3) { animation-delay: 180ms; }
  .sb-js .stub:nth-child(4) { animation-delay: 270ms; }
  .sb-js .stub:nth-child(5) { animation-delay: 360ms; }
  .sb-js .stub:nth-child(n + 6) { animation-delay: 430ms; }
}

/* ---- graceful empty state ---- */
.ev-empty {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  padding: clamp(1.8rem, 6vw, 3rem);
  border: 2px dashed var(--hair-cream);
  border-radius: var(--radius-plate);
  text-align: center;
}
.ev-empty__line {
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.5;
  max-width: 40ch;
  text-wrap: pretty;
}

/* ============================================================
   3 · BECOME A MEMBER — pitch + ticket-styled membership card
   ============================================================ */
.ev-member__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 760px) { .ev-member__grid { grid-template-columns: 1fr; } }

.ev-promises { max-width: 56ch; }
.ev-promise {
  padding-block: 0.7rem;
  font-size: var(--fs-body);
  line-height: 1.55;
}
.ev-promise + .ev-promise { border-top: 1px solid var(--hair); }
.ev-promise::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  margin-right: 0.75em;
  vertical-align: 0.22em;
  background: var(--tick, var(--ink));
}
.ev-promise--film   { --tick: var(--film); }
.ev-promise--music  { --tick: var(--music); }
.ev-promise--comedy { --tick: var(--comedy); }

/* the membership ticket — mustard body, cocoa ink (6.1:1),
   ADMIT-ONE-style vertical strap, perforation, punched ends */
.mstub {
  --punch: var(--c-cream-2);      /* the band shows through the bites */
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  background: var(--music);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-plate);
  box-shadow: var(--shadow-plate);
}
.mstub::before,
.mstub::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--punch);
  border: 2px solid var(--ink);
  transform: translateY(-50%);
}
.mstub::before { left: -11px; }
.mstub::after  { right: -11px; }
.mstub__strap {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 1rem 0.55rem 1rem 0.85rem;
  border-left: 2px dashed rgba(18, 35, 75, 0.7); /* perforation (visual right, pre-rotation left) */
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mstub__body { padding: 1.4rem 1.5rem 1.5rem; }
.mstub__kicker {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.mstub__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.mstub__price {
  margin-top: 0.55rem;
  font-weight: 600;
}
.mstub__price .badge { vertical-align: 0.1em; margin-left: 0.35em; }
.mstub__line {
  margin-top: 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: 34ch;
}
.mstub__join {
  margin-top: 1.1rem;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-lift);
}
.mstub__join:hover { background: var(--ink-panel); transform: translateY(-2px); }
.mstub__join:focus-visible { outline-color: var(--ink); }
/* status line — filled by JS (role="status"); invisible until then */
.mstub__status {
  margin-top: 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
}
.mstub__status.is-on {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
}
.mstub__status a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* no-JS note inside the ticket; sb-events.js sets [hidden] on it */
.mstub__nojs[hidden] { display: none; }
.mstub__nojs {
  margin-top: 0.9rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.mstub__nojs a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   4 · CLOSING INVITATION — "Meet me at the FMC!"
   ============================================================ */
.ev-cta { text-align: left; }
.ev-cta__title { font-size: clamp(2.4rem, 6.5vw, 4rem); }
.ev-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.ev-cta__mail { margin-top: var(--sp-4); }
.ev-cta__mail a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hair-cream);
}

/* ============================================================
   5 · TICKET DIALOG — the front-desk box office stub
   ============================================================ */
.ev-modal {
  width: min(92vw, 430px);
  border: 2px solid var(--ink);
  border-radius: var(--radius-plate);
  background: var(--paper);
  color: var(--ink);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-plate);
}
.ev-modal::backdrop { background: rgba(18, 35, 75, 0.55); }
.ev-modal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.05;
  margin-bottom: 0.35rem;
}
.ev-modal__event {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--film-ink);
  margin-bottom: 0.7rem;
  overflow-wrap: anywhere;
}
.ev-modal__event:empty { display: none; }
.ev-modal__body { font-size: var(--fs-body); line-height: 1.6; }
.ev-modal__actions { margin-top: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .ev-modal[open] { animation: sb-reveal-in 0.3s var(--ease); }
}

/* ============================================================
   6 · SMALL SCREENS + COARSE POINTERS
   ============================================================ */
@media (max-width: 560px) {
  .stub { grid-template-columns: auto 1fr; }
  .stub__cta { grid-column: 1 / -1; }
  .stub__btn { width: 100%; justify-content: center; }
}

/* inline text links get a 44px+ hit area; negative margin keeps
   the layout unchanged (same pattern as sb-core §16) */
@media (pointer: coarse), (max-width: 720px) {
  .ev-nojs a,
  .mstub__status a,
  .mstub__nojs a,
  .ev-cta__mail a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
}

/* ============================================================
   PUBLIC CALENDAR — List / Calendar toggle + view-only month grid.
   Sits on the cocoa board; light-on-dark. Read-only (no booking).
   ============================================================ */
/* [hidden] must beat the .ev-list/.ev-cal display rules when toggling views */
.ev-list[hidden], .ev-cal[hidden] { display: none !important; }
.ev-viewtoggle {
  display: inline-flex; gap: 0.25rem;
  margin: 0.2rem 0 1.5rem;
  padding: 0.25rem;
  background: rgba(243, 231, 206, 0.1);
  border-radius: 999px;
}
.ev-vtab {
  border: 0; background: transparent; color: var(--paper);
  font: inherit; font-weight: 600; font-size: 0.9rem;
  min-height: 40px; padding: 0.45rem 1.2rem;
  border-radius: 999px; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ev-vtab[aria-pressed="true"] { background: var(--music); color: var(--ink); }
.ev-vtab:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

.ev-cal__bar {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-bottom: 1.1rem;
}
.ev-cal__title {
  font-family: var(--font-display); font-weight: 400; font-size: 1.4rem;
  color: var(--paper); min-width: 11ch; text-align: center;
}
.ev-cal__nav {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(243, 231, 206, 0.35); background: transparent;
  color: var(--paper); font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.ev-cal__nav:hover { background: rgba(243, 231, 206, 0.12); }
.ev-cal__nav:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

.ev-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ev-cal__dow {
  text-align: center; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(243, 231, 206, 0.6); padding-bottom: 0.3rem;
}
.ev-cal__cell {
  min-height: 88px; display: flex; flex-direction: column; gap: 4px;
  padding: 0.4rem;
  background: linear-gradient(180deg, rgba(243, 231, 206, 0.075), rgba(243, 231, 206, 0.04));
  border: 1px solid rgba(243, 231, 206, 0.1); border-radius: 9px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ev-cal__cell.is-empty { background: transparent; border: 0; }
.ev-cal__cell:not(.is-empty):hover { border-color: rgba(243, 231, 206, 0.32); }
.ev-cal__cell.has-ev { background: linear-gradient(180deg, rgba(243, 231, 206, 0.11), rgba(243, 231, 206, 0.05)); }
.ev-cal__cell.is-past { opacity: 0.38; }
.ev-cal__cell.is-today {
  border-color: var(--film);
  box-shadow: inset 0 0 0 1px var(--film), 0 4px 16px rgba(0, 0, 0, 0.22);
}
.ev-cal__dnum {
  align-self: flex-start; font-size: 0.8rem; font-weight: 600;
  color: rgba(243, 231, 206, 0.85); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ev-cal__cell.is-today .ev-cal__dnum {
  color: var(--paper); background: var(--film);
  width: 1.55rem; height: 1.55rem; margin: -0.05rem 0 0.05rem;
  display: grid; place-items: center; border-radius: 50%;
}
.ev-cal__chip {
  text-align: left; border: 0; border-left: 3px solid rgba(0, 0, 0, 0.28); border-radius: 5px;
  padding: 0.24rem 0.42rem; font: inherit; font-size: 0.66rem; font-weight: 600;
  line-height: 1.2; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform 0.14s ease, filter 0.14s ease;
}
.ev-cal__chip[data-disc="film"]   { background: var(--film);   color: var(--paper); }
.ev-cal__chip[data-disc="music"]  { background: var(--music);  color: var(--ink); }
.ev-cal__chip[data-disc="comedy"] { background: var(--comedy); color: var(--paper); }
.ev-cal__chip:hover { transform: translateY(-1px); filter: brightness(1.07); }
.ev-cal__chip:focus-visible { outline: 2.5px solid var(--paper); outline-offset: 2px; }
.ev-cal__ct { font-variant-numeric: tabular-nums; opacity: 0.82; margin-right: 0.15em; }

.stub.is-flash { box-shadow: 0 0 0 3px var(--music); transition: box-shadow 0.3s ease; }

@media (max-width: 640px) {
  .ev-cal__grid { gap: 3px; }
  .ev-cal__cell { min-height: 60px; padding: 0.25rem; }
  .ev-cal__chip { font-size: 0.6rem; padding: 0.18rem 0.28rem; }
  .ev-cal__dow { font-size: 0.6rem; }
}