/* Event card - an event-page card: date badge, title, when/where list,
   countdown, calendar chips and action buttons. */
.ec { display: grid; gap: 12px; min-width: 0; }
.ec-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--e-radius-sm); background: var(--e-surface-2); }
.ec-top { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.ec-badge {
    flex: none; display: grid; justify-items: center; width: 58px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--e-line); background: var(--e-bg); box-shadow: 0 1px 2px rgba(16, 22, 43, .06);
}
.ec-mon { display: block; width: 100%; text-align: center; padding: 3px 0; font-size: .72em; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #b42f2a; }
.ec-day { display: block; padding: 4px 0 6px; font-size: 1.55em; font-weight: 800; line-height: 1.1; color: var(--e-ink); font-variant-numeric: tabular-nums; }
.ec-heading { display: grid; gap: 4px; min-width: 0; }
.ec-title { margin: 0; font-size: 1.28em; line-height: 1.22; font-weight: 750; letter-spacing: -.015em; color: var(--e-ink); overflow-wrap: anywhere; }
.ec-host { margin: 0; font-size: .86em; color: var(--e-ink-2); overflow-wrap: anywhere; }
.ec-pill { justify-self: start; }
.ec-pill.ec-soon { background: color-mix(in srgb, var(--e-accent) 13%, var(--e-bg)); color: var(--e-accent-fg); }
.ec-pill.ec-on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ec-pulse 1.6s ease-in-out infinite; }
@keyframes ec-pulse { 50% { opacity: .35; } }
.ec-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ec-meta li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ec-meta svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--e-accent-fg); }
.ec-meta div { display: grid; gap: 1px; min-width: 0; }
.ec-meta strong { font-weight: 650; font-size: .95em; overflow-wrap: anywhere; }
.ec-sub { font-size: .85em; color: var(--e-ink-3); overflow-wrap: anywhere; }
.ec-desc { margin: 0; color: var(--e-ink-2); font-size: .93em; overflow-wrap: anywhere; }
.ec-count { margin-top: 2px; }
.ec-live { margin: 0; font-weight: 600; }
.ec-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 12px; border-top: 1px solid var(--e-line); }
.ec-cal-label { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--e-ink-3); }
.ec-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ec .e-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; min-height: 40px; }
.ec .e-btn svg { width: 16px; height: 16px; }
.ec-chip { font-size: .84em; padding: 6px 12px; border-radius: 999px; }
.ec-acts .e-btn { flex: 1 1 120px; }
html[data-compact="1"] .ec { gap: 8px; }
html[data-compact="1"] .ec-img, html[data-compact="1"] .ec-desc { display: none; }
@media (max-width: 360px) {
    .ec-top { gap: 10px; }
    .ec-badge { width: 50px; }
    .ec-title { font-size: 1.12em; }
    .ec-cal-label { flex-basis: 100%; }
}
.ec .e-status:empty, .atc .e-status:empty { display: none; }