* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; color: #292d3e; font: 14px/1.4 system-ui, sans-serif; }
.events { padding: 8px 12px; width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.event-list { list-style: none; padding: 0; margin: 0; }
.event-row { display: flex; align-items: center; gap: 12px; height: 116px; border-bottom: 1px solid #ddd; }
.date { width: 38px; flex: 0 0 38px; text-align: center; line-height: 1.1; }
.date strong { display: block; font-size: 25px; }
.date span { display: block; margin-top: 4px; font-size: 12px; text-transform: uppercase; }
.thumbnail { flex: 0 0 56px; object-fit: cover; border-radius: 4px; overflow: hidden; font-size: 0; }
.event-info { flex: 1; min-width: 0; }
.event-title { font-weight: 650; text-decoration: none; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-title:hover { text-decoration: underline; }
.details { font-size: 12px; margin-top: 3px; }
.event-button { flex: 0 0 auto; font-size: 12px; font-weight: 600; border: 2px solid var(--accent); border-radius: 5px; padding: 8px; text-decoration: none; white-space: nowrap; }
.event-button:hover { background: #f3f3f5; }
.all-events { padding: 16px 0 12px; text-align: center; font-weight: 600; }
.powered { font-size: 11px; text-align: center; padding-bottom: 8px; }
.empty { padding: 24px 0; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 479px) { .thumbnail { display: none; } .event-row { gap: 8px; } .events { padding: 8px; } }