/* ============================================================
   Events 2026 — MU UI redesign (SCOPED)
   File: /css/events-2026.css
   Safe: only targets .events-page + events classes
   Goal: fast overview + easy scanning
   ============================================================ */

:root{
  --ev-ink:#0b1220;
  --ev-muted:#52657f;

  --ev-border: rgba(15,23,42,.12);
  --ev-border-2: rgba(15,23,42,.18);

  --ev-card: rgba(255,255,255,.92);
  --ev-card-2: rgba(248,250,252,.92);

  --ev-radius: 18px;
  --ev-radius-sm: 14px;

  --ev-shadow: 0 18px 60px rgba(2,6,23,.10);
  --ev-shadow-sm: 0 10px 30px rgba(2,6,23,.08);

  --ev-grad: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
  --ev-darkhead: rgba(73,73,73,.92);
}

/* page safety */
.events-page{ padding:0; }
.events-page .white-box{
  transform:none !important;
  transition:none !important;
}

/* a11y */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ---------- HERO ---------- */
.ev-hero{
  position:relative;
  overflow:hidden;
  border-radius: var(--ev-radius);
  border: 1px solid var(--ev-border);
  background: var(--ev-card);
  box-shadow: var(--ev-shadow);
  padding: clamp(16px, 2.2vw, 26px);
  margin-bottom: 1rem;
  isolation:isolate;
}

.ev-hero::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(780px 520px at 80% 20%, rgba(79,70,229,.14), transparent 62%),
    repeating-linear-gradient(90deg, rgba(15,23,42,.030) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  rgba(15,23,42,.024) 0 1px, transparent 1px 26px);
  transform: rotate(-3deg);
  pointer-events:none;
  z-index:0;
}

.ev-hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 1rem;
  align-items:start;
}
@media (max-width: 980px){
  .ev-hero__grid{ grid-template-columns: 1fr; }
}

.ev-kicker{
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(11,18,32,.60);
  font-size: .78rem;
}

.ev-title{
  margin: .45rem 0 .35rem 0;
  font-weight: 950;
  letter-spacing: .01em;
  color: var(--ev-ink);
  font-size: clamp(1.65rem, 2.2vw + 1rem, 2.6rem);
}
.ev-subtitle{
  margin:0;
  color: rgba(11,18,32,.72);
  font-weight: 650;
  max-width: 80ch;
  line-height: 1.45;
}

/* Next event banner */
.events-page .next-event-banner{
  border-radius: var(--ev-radius);
  border: 1px solid rgba(15,23,42,.14);
  background:
    radial-gradient(800px 260px at 20% 10%, rgba(6,182,212,.10), transparent 55%),
    radial-gradient(760px 260px at 80% 0%, rgba(79,70,229,.10), transparent 55%),
    rgba(255,255,255,.88);
  box-shadow: 0 14px 36px rgba(2,6,23,.08);
  padding: 1rem;
}
.events-page .next-event-label{
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(11,18,32,.56);
  margin-bottom: .35rem;
}
.events-page .next-event-main{
  display:flex;
  justify-content:space-between;
  gap: .8rem;
  align-items:flex-start;
}
.events-page .next-event-name{
  font-weight: 950;
  color: var(--ev-ink);
  font-size: 1.05rem;
  display:block;
}
.events-page .next-event-realm-pill{
  display:inline-flex;
  margin-top: .45rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(248,250,252,.95);
  font-weight: 850;
  color: rgba(11,18,32,.74);
}
.events-page .next-event-main-right{
  text-align:right;
}
.events-page .next-event-text{
  display:block;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(11,18,32,.56);
}
.events-page .next-event-countdown{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:.35rem;
  font-weight: 950;
  font-size: 1.15rem;
  color: var(--ev-ink);

  padding: .40rem .70rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.78);
}

/* ---------- CONTROLS (timezone row) ---------- */
.ev-controls{
  border-radius: var(--ev-radius);
  border: 1px solid var(--ev-border);
  background: var(--ev-card);
  box-shadow: var(--ev-shadow-sm);
  padding: 1rem;
  margin-bottom: 1rem;
}
.ev-controls__head{
  display:flex;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items:flex-start;
}
.ev-controls__head-left{ min-width: min(520px, 100%); }

.ev-controls__title{
  font-weight: 900;
  color: var(--ev-ink);
  font-size: 1.05rem;
}
.ev-controls__muted{
  margin-top:.2rem;
  color: rgba(11,18,32,.70);
  font-weight: 650;
}
.ev-controls__current{
  text-align:right;
  max-width: min(520px, 100%);
}
.ev-controls__current-label{
  display:block;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(11,18,32,.56);
}
.ev-controls__current-value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:.35rem;

  padding: .52rem .85rem;
  border-radius: 999px;
  background: var(--ev-darkhead);
  color: #e6f6ff;
  font-weight: 850;

  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(79,70,229,.16);

  max-width: min(560px, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* row container to separate the selects visually */
.ev-controls__row{
  margin-top: .9rem;
  display:flex;
  gap: .6rem;
  flex-wrap: wrap;

  padding: .65rem;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}
@media (min-width: 980px){
  .ev-controls__row{ flex-wrap: nowrap; }
}

.events-page .ev-select{
  flex: 1 1 240px;
  min-width: 220px;
  min-height: 46px;
  padding: .58rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.16);

  color: var(--ev-ink);
  font-weight: 800;
  outline:none;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 12px 26px rgba(2,6,23,.06);
}

/* Soft color separation between the three selects */
.events-page .ev-select--continent{
  background: linear-gradient(180deg, rgba(79,70,229,.10) 0%, rgba(255,255,255,.95) 70%);
}
.events-page .ev-select--country{
  background: linear-gradient(180deg, rgba(6,182,212,.10) 0%, rgba(255,255,255,.95) 70%);
}
.events-page .ev-select--exact{
  background: linear-gradient(180deg, rgba(245,201,80,.12) 0%, rgba(255,255,255,.95) 70%);
}

.events-page .ev-select:focus{
  border-color: rgba(79,70,229,.55);
  box-shadow: 0 0 0 3px rgba(79,70,229,.16), 0 0 0 6px rgba(6,182,212,.10);
}

.events-page .tz-hint{
  margin:.65rem 0 0 0;
  color: rgba(11,18,32,.70);
  font-weight: 700;
}

/* ---------- SCHEDULE CARD ---------- */
.ev-schedule{
  border-radius: var(--ev-radius);
  border: 1px solid var(--ev-border);
  background: var(--ev-card);
  box-shadow: var(--ev-shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

.ev-schedule__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ev-h2{
  margin:0;
  font-weight: 950;
  color: var(--ev-ink);
  font-size: 1.35rem;
}

/* Active bar */
.events-page .active-events-bar{
  border-radius: 999px;
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(255,255,255,.78);
  padding: .55rem .9rem;
  color: rgba(11,18,32,.76);
  font-weight: 750;
}
.events-page .active-events-bar.has-active{
  border-style: solid;
  border-color: rgba(6,182,212,.30);
  box-shadow: 0 12px 30px rgba(6,182,212,.10);
}

/* Filters */
.ev-filters{ margin-top: 1rem; display:grid; gap: .7rem; }
.ev-filter-row{
  display:flex;
  gap: .65rem;
  align-items:center;
  flex-wrap: wrap;
}
.ev-filter-label{
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(11,18,32,.56);
  padding-left: .15rem;
}
.ev-filter-chips{
  flex: 1 1 auto;
  display:flex;
  gap: .55rem;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;

  padding: .6rem;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
}
.ev-filter-chips--type{
  background: rgba(255,255,255,.68);
}
.ev-filter-chips--realm{
  background: linear-gradient(90deg, rgba(245,201,80,.10), rgba(255,255,255,.70));
}

.ev-filter-chips::-webkit-scrollbar{ height: 8px; }
.ev-filter-chips::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }

/* Chips */
.events-page .event-filter-btn{
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 999px;
  padding: .55rem .9rem;
  font-weight: 850;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  cursor:pointer;
  position:relative;
}
.events-page .event-filter-btn:hover{
  border-color: rgba(79,70,229,.28);
  box-shadow: 0 18px 44px rgba(79,70,229,.12);
}

/* Default active (event type) */
.events-page .event-filter-btn.is-active{
  background: var(--ev-grad);
  color:#fff;
  border-color: rgba(79,70,229,.55);
  box-shadow: 0 22px 60px rgba(79,70,229,.18);
}

/* Realm chips: add a dot + realm-tinted active */
.events-page .event-filter-btn[data-realm-filter]{
  padding-left: 1.35rem;
}
.events-page .event-filter-btn[data-realm-filter]::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  position:absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--realm-accent, rgba(15,23,42,.70));
  box-shadow: 0 0 0 3px rgba(15,23,42,.06);
}
.events-page .event-filter-btn[data-realm-filter].is-active{
  background: linear-gradient(180deg, var(--realm-soft, rgba(79,70,229,.10)), rgba(255,255,255,.92));
  color: var(--realm-strong, var(--ev-ink));
  border-color: rgba(15,23,42,.16);
  box-shadow: 0 18px 44px rgba(2,6,23,.10);
}

/* Event cards grid */
.events-page .event-grid{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* Event card */
.events-page .event-card--schedule{
  position:relative;
  overflow:hidden;
  border-radius: var(--ev-radius);
  border: 1px solid rgba(15,23,42,.12);

  /* subtle colored background (realm tinted) */
  background:
    radial-gradient(900px 360px at 16% 0%, var(--realm-soft, rgba(79,70,229,.10)), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.94) 100%);

  box-shadow: 0 14px 34px rgba(2,6,23,.08);

  display:flex;
  flex-direction:column;
  min-height: 210px;
}

.events-page .event-card--schedule::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 6px;
  background: var(--realm-accent, rgba(15,23,42,.70));
}

/* Header */
.events-page .event-card-header{
  padding: 1rem 1rem .75rem 1rem;
  display:flex;
  justify-content:space-between;
  gap: 1rem;
  align-items:flex-start;
}
.events-page .event-title{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.events-page .event-title > span{
  font-weight: 950;
  color: var(--ev-ink);
  font-size: 1.05rem;
}

.events-page .event-scope-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .32rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.92);
  font-weight: 800;
  font-size: .78rem;
  color: rgba(11,18,32,.72);
}
.events-page .event-scope-pill .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--realm-accent, rgba(15,23,42,.65));
  box-shadow: 0 0 0 3px rgba(15,23,42,.06);
}

/* Countdown (more “badge” like for scanning) */
.events-page .event-countdown{ text-align:right; }
.events-page .event-countdown-label{
  display:block;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .70rem;
  color: rgba(11,18,32,.56);
}
.events-page .event-countdown-output{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:.35rem;

  font-weight: 900;
  font-size: 1.05rem;
  color: var(--ev-ink);

  padding: .40rem .70rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  min-width: 8.5rem;
}

/* Body */
.events-page .event-body{
  padding: 0 1rem 1rem 1rem;
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
}

.events-page .event-meta{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: .45rem;
}

/* Keep label/value aligned for quick scanning */
.events-page .event-meta-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: .75rem;
}
.events-page .event-meta-row b{
  font-weight: 850;
  color: rgba(11,18,32,.82);
}
.events-page .event-meta-row span{
  font-weight: 700;
  color: rgba(11,18,32,.74);
  text-align:right;
}

/* Details pinned to bottom of card */
.events-page .event-schedule-details{
  margin-top: auto;
  padding-top: .7rem;
}
.events-page .event-schedule-details summary{
  cursor:pointer;
  font-weight: 900;
  color: #4f46e5;

  display:flex;
  align-items:center;
  gap:.5rem;

  padding-top: .65rem;
  border-top: 1px solid rgba(15,23,42,.08);

  list-style: none;
}
.events-page .event-schedule-details summary::-webkit-details-marker{ display:none; }
.events-page .event-schedule-details summary::before{
  content:"▸";
  color: var(--realm-accent, #4f46e5);
}
.events-page .event-schedule-details[open] summary::before{
  content:"▾";
}

.events-page .event-meta--schedule{
  margin-top:.6rem;
  padding-top:.6rem;
  border-top: 1px solid rgba(15,23,42,.06);
}
.events-page .event-meta--schedule li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}
.events-page .event-sched-countdown{
  margin-left:.75rem;
  font-weight: 800;
  color: rgba(11,18,32,.62);
}

/* Auto-highlight states */
.events-page .event-card--schedule.event-live{
  border-color: rgba(6,182,212,.35);
  box-shadow: 0 20px 60px rgba(6,182,212,.14);
}
.events-page .event-card--schedule.event-live::before{ background:#06b6d4; }
.events-page .event-card--schedule.event-live .event-countdown-output{
  border-color: rgba(6,182,212,.35);
  background: rgba(6,182,212,.10);
}

.events-page .event-card--schedule.event-registration-open{
  border-color: rgba(79,70,229,.35);
  box-shadow: 0 20px 60px rgba(79,70,229,.14);
}
.events-page .event-card--schedule.event-registration-open::before{ background:#4f46e5; }
.events-page .event-card--schedule.event-registration-open .event-countdown-output{
  border-color: rgba(79,70,229,.35);
  background: rgba(79,70,229,.10);
}

.events-page .event-card--schedule.event-finished{ opacity: .74; }

/* How-it-works block */
.events-page .ev-how{
  margin-top: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  padding: .65rem .85rem;
}
.events-page .ev-how summary{
  cursor:pointer;
  font-weight: 900;
  color: var(--ev-ink);
}
.events-page .ev-how__content{
  margin-top: .6rem;
  color: rgba(11,18,32,.74);
  font-weight: 650;
}
.events-page .ev-how__content ul{
  margin: .6rem 0 0 1.1rem;
}

/* ---------- GLOBAL REGISTRATION OVERVIEW TABLE ---------- */
.ev-reg{
  border-radius: var(--ev-radius);
  border: 1px solid var(--ev-border);
  background: var(--ev-card);
  box-shadow: var(--ev-shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

.ev-reg__top{ margin-bottom: .75rem; }
.ev-reg__intro{
  margin: .35rem 0 0 0;
  color: rgba(11,18,32,.70);
  font-weight: 650;
}

.ev-reg-table-wrap{
  overflow-x:auto;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}

.ev-reg-table{
  width:100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.ev-reg-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ev-darkhead);
  color: #e6f6ff;
  text-align:left;
  padding: .85rem .95rem;
  font-weight: 900;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ev-reg-th--event{ width: 220px; }

.ev-reg-head{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight: 900;
}
.ev-reg-head .dot{
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--realm-accent, rgba(255,255,255,.65));
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}

.ev-reg-table thead th[data-realm].is-selected-realm{
  box-shadow: inset 0 -3px 0 var(--realm-accent, rgba(34,211,238,.90));
}

.ev-reg-table tbody th.ev-reg-rowhead{
  padding: .82rem .95rem;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.92);
  font-weight: 850;
  color: var(--ev-ink);
}
.ev-reg-table tbody td{
  padding: .82rem .95rem;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.92);
}

.ev-reg-table tbody tr:nth-child(2n) td,
.ev-reg-table tbody tr:nth-child(2n) th.ev-reg-rowhead{
  background: rgba(248,250,252,.92);
}

.ev-reg-table tbody td.reg-cell{
  text-align:center;
}

.reg-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 7.0rem;

  padding: .36rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  font-weight: 850;
  color: rgba(11,18,32,.80);
}

.reg-cell--open .reg-pill{
  background: var(--ev-grad);
  color:#fff;
  border-color: rgba(79,70,229,.45);
  box-shadow: 0 16px 38px rgba(79,70,229,.16);
}

.reg-cell--none .reg-pill{
  background: rgba(241,245,249,.88);
  color: rgba(11,18,32,.55);
  border-style: dashed;
}

/* Selected realm column highlight (clean + readable) */
.ev-reg-table tbody td.is-selected-realm{
  background: linear-gradient(180deg, var(--realm-soft, rgba(79,70,229,.08)), rgba(255,255,255,.92));
  box-shadow: inset 1px 0 0 rgba(15,23,42,.06), inset -1px 0 0 rgba(15,23,42,.06);
}

.ev-small-note{
  margin: .75rem 0 0 0;
  color: rgba(11,18,32,.70);
  font-weight: 650;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}