/* The event card (templates/public/_home_event_card.html): one shape for the
   home hero stack, the home rail and the city pages. Day block, quiet tags
   (DUPR is the only solid one), name, time · venue · distance, spots. */

.ev { --ev-ink: var(--brand-1); --ev-ink-deep: var(--brand-1-dark); --ev-muted: var(--brand-gray);
      --ev-rule: rgba(29, 64, 81, 0.12); --ev-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; }
a.ev, .ev { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center; background: white; color: var(--ev-ink); border-radius: 16px; padding: 0.9rem 1rem 0.9rem 0.9rem; border: 1px solid var(--ev-rule); text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.ev:hover, .ev:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15, 37, 48, 0.14); color: var(--ev-ink); }
.ev-float { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28); border-color: transparent; }
.ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: var(--ev-ink); color: white; line-height: 1; }
.ev-date span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; opacity: 0.85; }
.ev-date b { font-family: var(--ev-display); font-size: 1.7rem; font-weight: 800; margin-top: 0.15rem; }
.ev-body { min-width: 0; }
.ev-body h3 { font-family: var(--ev-display); font-size: 1.08rem; font-weight: 700; margin: 0.15rem 0; line-height: 1.2; letter-spacing: -0.01em; color: inherit; }
.ev-body p { margin: 0; font-size: 0.9rem; color: var(--ev-muted); }
.ev-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ev .tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--ev-rule); color: var(--ev-muted); background: transparent; }
.ev .tag-price { color: var(--ev-ink); }
.ev .tag-dupr { background: var(--ev-ink); border-color: var(--ev-ink); color: white; }
.ev-spots { font-size: 0.85rem; font-weight: 700; color: var(--brand-accent-dark); white-space: nowrap; text-align: right; }
.ev-spots.wait { color: var(--danger); }
.ev-spots.closes { color: var(--warning); }
@media (prefers-reduced-motion: reduce) { a.ev, .ev { transition: none; } }