@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ============================================================
 * v2.2.4 — Events · Monochrome Glass redesign overlay
 *
 * Mirrors the Watch Live (watch-redesign.css) token system and
 * remaps the parent theme's amber accent (--color-accent #F5A312)
 * to the ink palette so the events browser matches the rest of
 * the redesigned site. Adds a full dark-mode pass (the inline
 * styles only dark-themed the modal).
 *
 * Loaded AFTER the inline page-events <style>. Scoped to
 * .eos-events-page (+ the modal, which lives at body level).
 * ============================================================ */

/* ---- 1. Tokens (mockup-aligned, same as watch-redesign) ----- */
.eos-events-page,
.eos-ev-modal {
  --r:  18px;
  --r2: 12px;
  --r3: 10px;
  --blur: blur(26px) saturate(150%);

  --page:    #EFEEEA;
  --surf:    rgba(20,20,22,0.035);
  --surf2:   rgba(20,20,22,0.065);
  --glass:   rgba(255,255,255,0.72);
  --glassBrd:rgba(20,20,22,0.08);
  --hair:    rgba(20,20,22,0.10);
  --fg:      #141416;
  --fg2:     rgba(20,20,22,0.6);
  --fg3:     rgba(20,20,22,0.4);
  --ink:     #141416;
  --inkFg:   #FFFFFF;
  --shadow:  0 34px 70px -28px rgba(20,20,30,0.24);
  --shadowSm:0 12px 32px -14px rgba(20,20,30,0.14);
  --live:    #E5342B;
}
[data-theme="dark"] .eos-events-page,
[data-theme="dark"] .eos-ev-modal {
  --page:    #202124;
  --surf:    rgba(255,255,255,0.055);
  --surf2:   rgba(255,255,255,0.10);
  --glass:   rgba(41,42,45,0.82);
  --glassBrd:rgba(255,255,255,0.11);
  --hair:    rgba(255,255,255,0.10);
  --fg:      #E3E3E3;
  --fg2:     #9AA0A6;
  --fg3:     rgba(154,160,166,0.55);
  --ink:     #E8EAED;
  --inkFg:   #202124;
  --shadow:  0 34px 80px -24px rgba(0,0,0,0.8);
  --shadowSm:0 10px 34px -14px rgba(0,0,0,0.6);
  --live:    #FF453A;
}

.eos-events-page {
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

/* ---- 2. Search ---------------------------------------------- */
.eos-events-page .eos-ev-search input {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  border-radius: 999px !important;
  color: var(--fg) !important;
  box-shadow: var(--shadowSm);
}
.eos-events-page .eos-ev-search input::placeholder { color: var(--fg2); }
.eos-events-page .eos-ev-search input:focus {
  outline: none !important;
  border-color: var(--fg3) !important;
}
.eos-events-page .eos-ev-search button {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
}

/* ---- 3. Chips + dropdowns ----------------------------------- */
.eos-events-page .eos-ev-chip {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  color: var(--fg);
  border-radius: 999px !important;
  font-weight: 600;
}
.eos-events-page .eos-ev-chip:hover { background: var(--surf2); }
.eos-events-page .eos-ev-chip.is-on {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
  border-color: var(--ink) !important;
}
.eos-events-page .eos-ev-dd-menu {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--shadow) !important;
}
.eos-events-page .eos-ev-dd-menu button { color: var(--fg) !important; border-radius: 8px; }
.eos-events-page .eos-ev-dd-menu button:hover { background: var(--surf2) !important; }
.eos-events-page .eos-ev-dd-menu button.is-on {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
  font-weight: 700;
}
.eos-events-page .eos-ev-dd-group { color: var(--fg2) !important; }

/* ---- 4. View toggle ----------------------------------------- */
.eos-events-page .eos-ev-views {
  border: 1px solid var(--glassBrd) !important;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.eos-events-page .eos-ev-view-btn { color: var(--fg2) !important; }
.eos-events-page .eos-ev-view-btn:hover { color: var(--fg) !important; }
.eos-events-page .eos-ev-view-btn.is-on {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
}

/* ---- 5. Result bar + counts --------------------------------- */
.eos-events-page .eos-ev-resultbar h2 { color: var(--fg) !important; font-family: 'Jost', sans-serif; letter-spacing: -0.01em; }
.eos-events-page .eos-ev-count { color: var(--fg2) !important; }

/* ---- 6. Cards ----------------------------------------------- */
.eos-events-page .eos-ev-card {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadowSm);
}
.eos-events-page .eos-ev-card:hover { box-shadow: var(--shadow); border-color: var(--hair) !important; }
.eos-events-page .eos-ev-card-img { background: var(--surf2) !important; }
.eos-events-page .eos-ev-card-body h3 { color: var(--fg) !important; font-family: 'Jost', sans-serif; }
.eos-events-page .eos-ev-card-meta { color: var(--fg2) !important; }
.eos-events-page .eos-ev-card-link { color: var(--fg) !important; }
.eos-events-page .eos-ev-card-link:hover { color: var(--fg2) !important; }

/* Badge: ink instead of amber; keep LIVE red */
.eos-events-page .eos-ev-badge {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
}
.eos-events-page .eos-ev-badge.is-past { background: var(--fg2) !important; color: var(--inkFg) !important; }
.eos-events-page .eos-ev-badge.is-live { background: var(--live) !important; color: #fff !important; }

/* Date block on cards (added in markup) */
.eos-events-page .eos-ev-dateblock {
  position: absolute; top: 14px; right: 14px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 48px; padding: 6px 8px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd);
  border-radius: var(--r3);
  box-shadow: var(--shadowSm);
  line-height: 1;
}
.eos-events-page .eos-ev-dateblock .d-mon { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--live); }
.eos-events-page .eos-ev-dateblock .d-day { font-size: 19px; font-weight: 800; color: var(--fg); margin-top: 1px; }

/* RSVP / Going control */
.eos-events-page .eos-ev-rsvp,
.eos-ev-modal .eos-ev-rsvp {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--glassBrd);
  border-radius: 999px;
  background: var(--surf);
  color: var(--fg);
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.eos-events-page .eos-ev-rsvp:hover { background: var(--surf2); }
.eos-events-page .eos-ev-rsvp.is-going,
.eos-ev-modal .eos-ev-rsvp.is-going {
  background: var(--ink); color: var(--inkFg); border-color: var(--ink);
}

/* ---- 7. Calendar -------------------------------------------- */
.eos-events-page #eos-ev-cal {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  border-radius: var(--r) !important;
}
.eos-events-page .eos-cal-head { border-bottom-color: var(--hair) !important; }
.eos-events-page .eos-cal-head h3 { color: var(--fg) !important; font-family: 'Jost', sans-serif; }
.eos-events-page .eos-cal-nav button {
  background: var(--surf) !important;
  border: 1px solid var(--hair) !important;
  color: var(--fg) !important;
}
.eos-events-page .eos-cal-nav button:hover { background: var(--surf2) !important; }
.eos-events-page .eos-cal-dow {
  background: var(--surf) !important;
  color: var(--fg2) !important;
  border-bottom-color: var(--hair) !important;
}
.eos-events-page .eos-cal-cell {
  background: transparent !important;
  border-right-color: var(--hair) !important;
  border-bottom-color: var(--hair) !important;
}
.eos-events-page .eos-cal-cell.is-other-month { background: var(--surf) !important; color: var(--fg3) !important; }
.eos-events-page .eos-cal-day-num { color: var(--fg) !important; }
.eos-events-page .eos-cal-cell.is-today .eos-cal-day-num {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
}
.eos-events-page .eos-cal-event {
  background: var(--ink) !important;
  color: var(--inkFg) !important;
}
.eos-events-page .eos-cal-event.is-live { background: var(--live) !important; color: #fff !important; }

/* ---- 8. Empty state ----------------------------------------- */
.eos-events-page .eos-ev-empty { color: var(--fg2) !important; }
.eos-events-page .eos-ev-empty h3 { color: var(--fg) !important; font-family: 'Jost', sans-serif; }

/* ---- 9. Pager ----------------------------------------------- */
.eos-events-page .eos-ev-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.eos-events-page .eos-ev-pager button,
.eos-events-page .eos-ev-pager a {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glassBrd);
  border-radius: 10px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--fg);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.eos-events-page .eos-ev-pager button:hover,
.eos-events-page .eos-ev-pager a:hover { background: var(--surf2); }
.eos-events-page .eos-ev-pager .is-on,
.eos-events-page .eos-ev-pager [aria-current="page"] {
  background: var(--ink) !important; color: var(--inkFg) !important; border-color: var(--ink) !important;
}
.eos-events-page .eos-ev-pager button[disabled] { opacity: .4; cursor: default; }

/* ---- 10. Modal retheme (ink accents) ------------------------ */
.eos-ev-modal-card { background: var(--page) !important; color: var(--fg) !important; border-radius: var(--r) !important; }
.eos-ev-modal-body h2 { color: var(--fg) !important; font-family: 'Jost', sans-serif; }
.eos-ev-modal-body .subtitle { color: var(--fg2) !important; }
.eos-ev-modal-meta { border-top-color: var(--hair) !important; border-bottom-color: var(--hair) !important; }
.eos-ev-modal-meta .row { color: var(--fg) !important; }
.eos-ev-modal-meta .row strong { color: var(--fg) !important; }
.eos-ev-modal-meta .row .ev-ic { color: var(--fg2) !important; }
.eos-ev-modal-desc { color: var(--fg) !important; }
.eos-ev-modal-actions .eos-btn,
.eos-ev-modal-actions button {
  background: var(--surf) !important;
  border: 1px solid var(--glassBrd) !important;
  color: var(--fg) !important;
  border-radius: 999px !important;
}
.eos-ev-modal-actions .primary {
  background: var(--ink) !important; color: var(--inkFg) !important; border-color: var(--ink) !important;
}
.eos-ev-modal-actions .accent {
  background: var(--ink) !important; color: var(--inkFg) !important; border-color: var(--ink) !important;
}
.eos-ev-modal-actions .menu {
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glassBrd) !important;
  box-shadow: var(--shadow) !important;
}
.eos-ev-modal-actions .menu a,
.eos-ev-modal-actions .menu button { color: var(--fg) !important; }
.eos-ev-modal-actions .menu a:hover,
.eos-ev-modal-actions .menu button:hover { background: var(--surf2) !important; }
.eos-ev-modal-close { background: rgba(0,0,0,.5) !important; color: #fff !important; }

/* ---- 11. Sticky toolbar ------------------------------------- */
.eos-events-page .eos-ev-toolbar {
  position: sticky; top: 8px; z-index: 30;
  background: var(--page);
  padding: 12px 0;
  margin: -12px 0 20px;
}

/* ---- 12. Featured hero banner (next upcoming event) --------- */
.eos-events-page .eos-ev-hero {
  position: relative;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 0; margin: 0 0 28px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--glassBrd);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadowSm);
  min-height: 260px;
}
.eos-events-page .eos-ev-hero-img { position: relative; background: var(--surf2) center/cover no-repeat; min-height: 220px; }
.eos-events-page .eos-ev-hero-badge {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--live); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.eos-events-page .eos-ev-hero-body { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.eos-events-page .eos-ev-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg2); }
.eos-events-page .eos-ev-hero-body h2 { margin: 0; font-family: 'Jost', sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; color: var(--fg); line-height: 1.1; }
.eos-events-page .eos-ev-hero-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--fg2); font-size: 13.5px; }
.eos-events-page .eos-ev-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.eos-events-page .eos-ev-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.eos-events-page .eos-ev-hero-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--glassBrd);
  background: var(--surf); color: var(--fg);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.eos-events-page .eos-ev-hero-btn.primary { background: var(--ink); color: var(--inkFg); border-color: var(--ink); }
.eos-events-page .eos-ev-hero-btn:hover { transform: translateY(-1px); }
@media (max-width: 760px) {
  .eos-events-page .eos-ev-hero { grid-template-columns: 1fr; }
  .eos-events-page .eos-ev-hero-img { min-height: 180px; }
}