/* ==========================================================================
   /e/index.php — events listing: hero + cards. Colours are the /e theme tokens
   (e/includes/header.php), so dark mode needs nothing extra here.
   Hidden things use .e-evt-hidden, never the hidden attribute (an author
   display rule beats it).
   ========================================================================== */

.e-evt-hidden   { display: none !important; }
/* Set by the type chips. A separate class from the navbar search's
   .e-ns-filtered-out on purpose: each filter owns its own class, so clearing one
   never reveals a card the other is still hiding. */
.e-evt-type-off { display: none !important; }
.e-evt-page { padding: 1.25rem 0 2rem; }

/* ── Head ─────────────────────────────────────────────────────────────── */
.e-evt-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.e-evt-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.e-evt-all { display: inline-block; margin-top: .25rem; font-size: .82rem; color: var(--text-muted); text-decoration: none; }
.e-evt-all span { color: var(--primary); text-decoration: underline; }
.e-evt-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--white); border: 1px solid var(--border); }
.e-evt-tab {
    padding: .45rem 1.1rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.e-evt-tab.is-on { background: var(--text); color: var(--bg); }
.e-evt-tab:not(.is-on):hover { color: var(--text); }

/* ── Shared bits ──────────────────────────────────────────────────────── */
.e-evt-status {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .6rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
}
.e-evt-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.e-evt-status.is-open    { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); background: var(--success-light); }
.e-evt-status.is-soon    { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: var(--warning-light); }
.e-evt-status.is-closed  { color: var(--danger); }
.e-evt-status.is-joined  { color: var(--primary); background: var(--primary-light); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.e-evt-status.is-private,
.e-evt-status.is-ended   { color: var(--text-muted); }

.e-evt-price { display: inline-flex; align-items: baseline; gap: .3rem; }
.e-evt-price span   { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.e-evt-price strong { font-size: 1rem; font-weight: 800; color: var(--text); }

/* Image box; the placeholder shows the event's initials when there is no image
   or it fails to load (the img is removed by events.js on error). */
.e-evt-media, .e-evt-hero-media {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.e-evt-media::before, .e-evt-hero-media::before {
    content: attr(data-initials);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .55); font-weight: 900; letter-spacing: .06em;
}
.e-evt-media::before { font-size: 2.6rem; }
.e-evt-hero-media::before { font-size: 5rem; }
.e-evt-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.e-evt-hero {
    position: relative; display: block; overflow: hidden;
    border-radius: 16px; min-height: 340px;
    color: #fff; text-decoration: none;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.75rem;
}
.e-evt-hero-media { position: absolute; inset: 0; }
.e-evt-hero-shade {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6, 10, 20, .88) 0%, rgba(6, 10, 20, .45) 55%, rgba(6, 10, 20, .15) 100%);
}
.e-evt-hero-body {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem;
    min-height: 340px; padding: 1.5rem;
}
.e-evt-hero-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.e-evt-kicker {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .7rem; border-radius: 999px;
    background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px);
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.e-evt-hero .e-evt-status { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(6px); }
.e-evt-hero .e-evt-status.is-open { color: #a7f3d0; }
.e-evt-hero-name { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.1; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.e-evt-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .9rem; color: rgba(255, 255, 255, .9); }
.e-evt-hero-meta i { margin-right: .3rem; opacity: .8; }
.e-evt-hero-foot { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: .25rem; }
.e-evt-count { display: flex; align-items: baseline; gap: .4rem; }
.e-evt-count strong { font-size: 2rem; font-weight: 900; line-height: 1; }
.e-evt-count span   { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.e-evt-hero .e-evt-price span, .e-evt-hero .e-evt-price strong { color: #fff; }
.e-evt-hero-cta {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.25rem; border-radius: 8px;
    background: #fff; color: #111827;
    font-weight: 700; font-size: .9rem;
    transition: transform .15s;
}
.e-evt-hero:hover .e-evt-hero-cta { transform: translateX(3px); }

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.e-evt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.e-evt-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.e-evt-chip {
    padding: .4rem .9rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--white); color: var(--text-muted);
    font-size: .82rem; font-weight: 600; cursor: pointer;
}
.e-evt-chip:hover { color: var(--text); border-color: var(--text-muted); }
.e-evt-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
a.e-evt-chip { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; white-space: nowrap; }
.e-evt-chip-n {
    min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; text-align: center;
    font-size: .72rem; line-height: 1.35rem; background: var(--bg); color: var(--text-muted);
}
.e-evt-chip.is-on .e-evt-chip-n { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── Events / Demo ────────────────────────────────────────────────────── */
.e-evt-kinds { display: flex; gap: 1.5rem; margin: -.25rem 0 1.1rem; border-bottom: 1px solid var(--border); }
.e-evt-kind {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent;
    font-size: .92rem; font-weight: 700; color: var(--text-muted); text-decoration: none;
}
.e-evt-kind:hover { color: var(--text); }
.e-evt-kind.is-on { color: var(--text); border-bottom-color: var(--primary); }
.e-evt-kind-n {
    min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; text-align: center;
    font-size: .72rem; line-height: 1.4rem; background: var(--border); color: var(--text-muted);
}
.e-evt-kind.is-on .e-evt-kind-n { background: var(--primary); color: #fff; }
.e-evt-demo-note {
    display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1.1rem;
    padding: .6rem .85rem; border-radius: 10px;
    background: var(--warning-light, #fffbeb); color: var(--text); font-size: .82rem;
}
.e-evt-demo-note i { color: var(--warning, #d97706); margin-top: .15rem; }
.e-evt-empty .e-evt-btn { margin-top: .75rem; display: inline-block; }
/* Many sports: one scrollable row on a phone instead of four wrapped lines. */
@media (max-width: 767.98px) {
    .e-evt-toolbar .e-evt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; max-width: 100%; }
    .e-evt-toolbar .e-evt-chips::-webkit-scrollbar { display: none; }
    .e-evt-toolbar { flex-wrap: nowrap; }
    .e-evt-toolbar .e-evt-chips { min-width: 0; }
    .e-evt-countlabel { flex-shrink: 0; }
}
.e-evt-countlabel { font-size: .82rem; color: var(--text-muted); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.e-evt-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.e-evt-card {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    border-radius: 14px; background: var(--white); border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s;
}
.e-evt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.e-evt-media-link { position: relative; display: block; color: inherit; }
.e-evt-media { aspect-ratio: 16 / 9; }
.e-evt-date {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    min-width: 46px; padding: 6px 7px; border-radius: 10px;
    background: #fff; color: #111827;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    line-height: 1;
}
.e-evt-date b    { font-size: 1.15rem; font-weight: 900; }
.e-evt-date span { font-size: .62rem; font-weight: 700; letter-spacing: .08em; margin-top: 2px; color: var(--danger); }
.e-evt-soon {
    position: absolute; right: 10px; bottom: 10px; z-index: 2;
    padding: .25rem .6rem; border-radius: 999px;
    background: rgba(17, 24, 39, .8); color: #fff; backdrop-filter: blur(4px);
    font-size: .68rem; font-weight: 700; letter-spacing: .03em;
}
.e-evt-soon.is-live { background: var(--danger); }
.e-evt-lock {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17, 24, 39, .75); color: #fff; font-size: .8rem;
}
.e-evt-body { display: flex; flex-direction: column; gap: .5rem; padding: .9rem .95rem 1rem; flex: 1; }
.e-evt-badges { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.e-evt-type { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.e-evt-type i { margin-right: .25rem; color: var(--primary); }
.e-evt-name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.e-evt-name a { color: inherit; text-decoration: none; }
.e-evt-name a:hover { color: var(--primary); }
.e-evt-meta { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--text-muted); }
.e-evt-meta i { width: 1rem; text-align: center; margin-right: .2rem; }
.e-evt-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.e-evt-actions { display: flex; align-items: center; gap: .4rem; }
.e-evt-share {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--white); color: var(--text-muted);
    cursor: pointer;
}
.e-evt-share:hover { color: var(--primary); border-color: var(--primary); }
.e-evt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; padding: 0 .9rem; border-radius: 8px;
    border: 1px solid var(--border); background: var(--white); color: var(--text);
    font-size: .82rem; font-weight: 700; text-decoration: none;
}
.e-evt-btn:hover { border-color: var(--text); color: var(--text); }
.e-evt-btn--go { background: var(--primary); border-color: var(--primary); color: #fff; }
.e-evt-btn--go:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.e-evt-btn.is-off { opacity: .5; cursor: default; }

/* ── Empty states ─────────────────────────────────────────────────────── */
.e-evt-empty {
    padding: 3rem 1rem; text-align: center; color: var(--text-muted);
    border: 1px dashed var(--border); border-radius: 14px; background: var(--white);
}
.e-evt-empty i { font-size: 2rem; opacity: .5; }
.e-evt-empty p { margin: .75rem 0 0; }
.e-evt-only { margin: 0; color: var(--text-muted); font-size: .9rem; }

/* ── Breakpoints ──────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) { .e-evt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  {
    .e-evt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .e-evt-hero, .e-evt-hero-body { min-height: 300px; }
    .e-evt-hero-body { padding: 1.1rem; }
    .e-evt-hero-cta { width: 100%; justify-content: center; margin-left: 0; }
    .e-evt-body { padding: .75rem .8rem .85rem; }
    .e-evt-name { font-size: .92rem; }
}
@media (max-width: 480px)     { .e-evt-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .e-evt-card, .e-evt-hero-cta, .e-evt-img { transition: none; } }

/* ── Past section (below upcoming; there is no Upcoming/Past switch) ───── */
.e-evt-past { margin-top: 2.25rem; }
.e-evt-lists > .e-evt-past:first-child { margin-top: 0; }
.e-evt-section-title {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
    font-size: 1.15rem; font-weight: 800; color: var(--text);
}
.e-evt-lists > .e-evt-past:first-child .e-evt-section-title { border-top: 0; padding-top: 0; }
.e-evt-past .e-evt-card { opacity: .92; }
.e-evt-past .e-evt-card:hover { opacity: 1; }
.e-evt-none-upcoming {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem;
    padding: .7rem .9rem; border-radius: 10px; border: 1px dashed var(--border);
    background: var(--white); color: var(--text-muted); font-size: .88rem;
}