/* Uppercase muted section labels (TIME RANGE / ACTIVE FILTERS). */
.events-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 0.45rem;
}

.facet-search { width: 100%; margin-bottom: 0.6rem; }
/* Cap the city list so many cities scroll inside a fixed area instead of
   growing the panel without bound. */
.facet-scroll { max-height: 260px; overflow-y: auto; padding-right: 0.25rem; }
.facet-empty { color: var(--text-muted); font-size: 0.85rem; margin: 0.3rem 0 0; }

/* Day-grouped agenda */
.agenda-day { margin-bottom: 1.5rem; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }

/* Per-type accent (used by the placeholder mark color via currentColor). */
.style-social   { --accent: #22c55e; }
.style-class    { --accent: #3b82f6; }
.style-workshop { --accent: #8b5cf6; }
.style-festival { --accent: #f59e0b; }
.style-other    { --accent: var(--teal); }

.events-empty {
    text-align: center;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 1.5rem;
}

/* ---- Page layout: single column on mobile, main + sidebar on desktop ---- */
.events-page { max-width: 1440px; margin: 0 auto; padding-inline: 24px; }
.events-title { margin: 0; font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.events-tagline { color: var(--text-muted); margin: 0.2rem 0 0; font-size: 1.05rem; }

/* Bookmark ("save for later") — sibling of the card link, never nested in the <a>. */
.ev-card-wrap { position: relative; }
/* Width/height match the date tile's rendered height so the two top corners
   sit at the same size. */
.ev-bookmark {
    position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92); color: var(--text);
    box-shadow: var(--shadow); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease, color 0.15s ease;
}
.ev-bookmark:hover { transform: scale(1.08); }
.ev-bookmark .ev-bookmark-filled { display: none; }
.ev-bookmark.is-saved { color: var(--teal); }
.ev-bookmark.is-saved .ev-bookmark-filled { display: block; }
.ev-bookmark.is-saved .ev-bookmark-outline { display: none; }
/* "Saved only" client-side filter: hide unsaved cards when active. */
.events-main.show-saved .ev-card-wrap:not(.is-saved-card) { display: none; }
/* A day whose every card is hidden must go too, otherwise the filter leaves a
   run of date headings with nothing under them. Degrades to the old behaviour
   where :has() is unsupported: untidy, not broken. */
.events-main.show-saved .agenda-day:not(:has(.ev-card-wrap.is-saved-card)) { display: none; }
/* Per-day counts come from the server and describe the unfiltered day, so
   while filtering they would each state a wrong number. */
.events-main.show-saved .timeline-count { display: none; }

/* Mini calendar */
.mini-cal { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.mini-cal__label { font-size: 0.95rem; font-weight: 800; margin: 0 0 0.6rem; text-transform: capitalize; }
.mini-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; }
.mini-cal__dow { text-align: center; font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding-bottom: 0.2rem; }
.mini-cal__cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.78rem; border-radius: 8px; color: var(--text); text-decoration: none; position: relative; }
/* Was var(--border) at 1.23:1. These show real dates, so they need to be
   legible; --text-muted stays recessive against the --text in-month days. */
.mini-cal__cell.is-muted { color: var(--text-muted); }
.mini-cal__cell.is-today { background: var(--teal-soft); color: var(--teal); font-weight: 800; }
a.mini-cal__cell:hover { background: var(--bg-soft); }
.mini-cal__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin-top: 1px; }

/* Three stacked rows: region dropdown, date presets, then saved + more filters.
   The Add button lives in the header, not here. */
.events-chips { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.events-filterbar__region { display: flex; justify-content: center; max-width: 100%; }
.events-filterbar__presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.events-filterbar__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.events-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 1.05rem; border-radius: 999px; border: 1px solid var(--border);
    background: #fff; color: var(--text); font-weight: 600; font-size: 0.9rem;
    line-height: 1; text-decoration: none; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.events-chip:hover { border-color: var(--teal); color: var(--teal-hover); }
.events-chip.is-active { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 4px 12px -4px rgba(14,116,144,.5); }
.events-chip.is-active:hover { color: #fff; }
/* The saved filter's bookmark fills in once the filter is on. */
.events-chip--saved.is-active svg { fill: currentColor; }
.events-chip .icon { flex: 0 0 auto; }
.events-chip--ghost { border-style: dashed; color: var(--text-muted); }
@media (max-width: 768px) {
    /* Keep the filter to three compact rows: a full-width region selector,
       then the presets and the actions each on a single line (smaller chips;
       they scroll sideways rather than wrap if a row ever overflows). */
    /* Trim the side gutters on phones (the page already sits inside the
       global .container padding, so 24px on top of that wastes width). */
    .events-page { padding-inline: 8px; }
    .events-chips { gap: 0.5rem; margin-bottom: 0.9rem; align-items: stretch; }
    .events-filterbar__region .region-select { justify-content: center; }
    .events-filterbar__presets,
    .events-filterbar__actions {
        /* "safe center" keeps the row centered when it fits but falls back to
           left-aligned when it overflows, so chips are never clipped on both
           ends (and the first one stays reachable) on very small phones. */
        flex-wrap: nowrap; justify-content: safe center; gap: 0.4rem;
        overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .events-filterbar__presets::-webkit-scrollbar,
    .events-filterbar__actions::-webkit-scrollbar { display: none; }
    .events-filterbar__presets > *,
    .events-filterbar__actions > * { flex: 0 0 auto; }
    .events-chip { padding: 0.5rem 0.7rem; font-size: 0.82rem; gap: 0.3rem; }
}
/* Very small phones: a single line no longer fits, so let the rows wrap onto
   new lines (centered) instead of scrolling sideways. */
@media (max-width: 380px) {
    .events-filterbar__presets,
    .events-filterbar__actions {
        flex-wrap: wrap; justify-content: center; overflow-x: visible;
    }
}

.events-aside { display: none; }
.events-map { height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 1.25rem; }

/* Sidebar is a desktop-only affordance; tablets keep the full-width timeline. */
@media (min-width: 1200px) {
    /* Centered 70/30: the date timeline on the left, sticky sidebar right. */
    .events-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
    .events-aside { display: block; position: sticky; top: 1rem; }
}

/* ---------------- date timeline: stacked, sticky day header ---------------- */
/* The day is its own scannable anchor: a small weekday line, a big date, and
   the count. It stays pinned (frosted) to the top while you read the day. */
.timeline-day { position: relative; margin-bottom: 1.4rem; }
.timeline-head {
    position: sticky; top: 0; z-index: 4;
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 0 0.7rem; padding: 0.45rem 0 0.5rem;
    background: rgba(246, 248, 251, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 2px solid var(--border);
    color: var(--text);
}
.timeline-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2.5px solid var(--border); }
.timeline-day.is-today .timeline-dot { border-color: var(--teal); background: var(--teal); }
.timeline-date { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.015em; }
.timeline-count { margin-left: auto; flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.timeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
/* Card layout per day count: 1 = one long card; 2+ = two per line. Grids
   only kick in on desktop; mobile/tablet stack one (big) card per line.
   The lone card's image matches a two-up card's image size (≈half width). */
@media (min-width: 992px) {
    /* minmax(0, 1fr) + min-width:0 on the items keeps each card track from
       growing past its share when a card holds unwrappable content (e.g. a
       broken image's alt text), which otherwise pushes the second column
       out under the sidebar. */
    .timeline-list--multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .timeline-list--multi > li { display: flex; min-width: 0; }
    .timeline-list--multi .ev-card { width: 100%; }
    .timeline-list--single .ev-row__media { flex: 0 0 calc(50% - 0.5rem); width: calc(50% - 0.5rem); aspect-ratio: 16 / 9; border-radius: 12px; }
    .timeline-list--single .ev-row { gap: 1.1rem; padding: 0.8rem; }
}
.timeline-end { color: var(--text-muted); font-size: 0.85rem; margin: 0.5rem 0 0; }

/* End-of-list CTA card: flat teal-soft panel with a lead line and the pill. */
.events-cta { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; margin: 2rem 0 0.5rem; padding: 1.6rem 1.2rem; background: var(--teal-soft); border: 1px solid var(--border); border-radius: 16px; }
.events-cta__lead { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.events-cta__btn { font-size: 0.95rem; padding: 0.6rem 1.2rem; }

/* Mid-list support band: flat teal-soft panel, same shape as the end CTA. */
.events-support { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; margin: 1.75rem 0; padding: 1.4rem 1.2rem; background: var(--teal-soft); border: 1px solid var(--border); border-radius: 16px; }
.events-support__lead { margin: 0; font-weight: 700; font-size: 1.02rem; color: var(--text); }

/* ---------------- event row ---------------- */
.ev-row { display: flex; align-items: center; gap: 0.9rem; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 0.7rem 0.9rem; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; }
.ev-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal); color: inherit; }
.ev-row:hover .ev-row__title { color: var(--teal-hover); }
.ev-row:active { box-shadow: var(--shadow-lg); border-color: transparent; }
.ev-row:active .ev-card__img { transform: scale(1.03); transition-duration: 0.1s; }
.ev-row__time { flex: 0 0 auto; width: 3rem; font-weight: 800; font-size: 0.9rem; color: var(--teal-hover); font-variant-numeric: tabular-nums; }
/* The weekday only appears in the mobile photo-overlay tile (below). */
.ev-row__dow { display: none; }
.ev-row__media { flex: 0 0 auto; width: 132px; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: var(--teal-soft); position: relative; }
.ev-row__media .ev-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ev-row:hover .ev-card__img { transform: scale(1.05); }
/* 1.2rem = 19.2px, and bold at >=18.66px counts as WCAG large text, so the
   3:1 threshold applies. At 1.1rem it was small text needing 4.5:1 and the
   teal tint only reached 3.65. */
.ev-row__media .ev-ph__label { font-size: 1.2rem; }
.ev-row__media .ev-ph__mark { width: 18px; height: 18px; top: 0.4rem; right: 0.4rem; }
.ev-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; }
.ev-row__title { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
.ev-row__where { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-muted); font-size: 0.86rem; min-width: 0; }
.ev-row__where span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-row__where .icon { flex: 0 0 auto; }
.ev-row__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.1rem; }
/* Free-form crawler text: the price keeps its natural width (shrinking it would
   fold "from 15 CHF" into three lines) but is capped, so a price list wraps
   inside 12rem instead of eating the title's room. */
.ev-row__price { flex: 0 0 auto; max-width: 12rem; align-self: center; font-weight: 800; font-size: 0.92rem; color: var(--text); padding-right: 2.1rem; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.ev-row__price.free { color: var(--teal); }
.is-cancelled.ev-row .ev-row__title { text-decoration: line-through; color: var(--text-muted); }
.is-cancelled.ev-row .ev-row__media { opacity: 0.6; }
.ev-row--compact { padding: 0.55rem 0.9rem; gap: 0.8rem; }
.ev-row--compact .ev-row__media { width: 92px; border-radius: 9px; }
.ev-row--compact .ev-row__title { font-size: 0.95rem; }
.ev-row--compact .ev-row__tags { display: none; }
.ev-badge { display: inline-block; vertical-align: middle; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.12rem 0.4rem; border-radius: 5px; }
.ev-badge--new { background: var(--teal); color: #fff; }
@media (max-width: 991px) {
    /* Mobile/tablet: every event becomes an image-on-top card (more readable
       than rows). The card's own 2.4:1 photo trim + tighter padding live in
       the shared _event_card_styles partial; the row-to-card flip is here. */
    .ev-row, .ev-row--compact { flex-direction: column; align-items: stretch; gap: 0; padding: 0; position: relative; overflow: hidden; }
    .ev-row__media, .ev-row--compact .ev-row__media { width: 100%; aspect-ratio: 2.4 / 1; border-radius: 0; }
    /* Same floating Airbnb-style tile as the two-up cards: weekday + time. */
    .ev-row__time { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; width: auto; display: flex; flex-direction: column; align-items: center; line-height: 1; background: #fff; color: var(--text); font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; padding: 0.42rem 0.62rem 0.46rem; border-radius: 14px; box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.4), 0 1px 2px rgba(15, 23, 42, 0.12); }
    .ev-row__dow { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.13em; color: var(--teal); margin-bottom: 0.16rem; }
    .ev-row__body { padding: 0.6rem 0.85rem 0.6rem; gap: 0.18rem; }
    .ev-row__title { font-size: 1.04rem; }
    /* One shared slot: the tags reserve exactly the width the pinned price may
       use, so the two can never reach each other. 7.5rem holds the longest label
       the price labeler produces ("dès 13,50 CHF", 112.5px). */
    .ev-row { --ev-row-price-slot: 7.5rem; }
    .ev-row__tags, .ev-row--compact .ev-row__tags { display: flex; padding-right: calc(var(--ev-row-price-slot) + 0.85rem); }
    /* Pin the price to the right of the tags line instead of a new row below,
       so a single-event card stays as compact as a two-up card. */
    .ev-row__price { position: absolute; right: 0.85rem; bottom: 0.6rem; align-self: auto; padding: 0; margin: 0; max-width: var(--ev-row-price-slot); font-size: 0.95rem; }
    /* Too long for the slot (a price list with no amount to lead with): give it
       its own line rather than clip it, and hand the tags their room back. */
    .ev-row__price--flow { position: static; max-width: none; padding: 0 0.85rem 0.6rem; }
    .ev-row:has(.ev-row__price--flow) .ev-row__tags { padding-right: 0.85rem; }
}

/* ---------------- sidebar widgets ---------------- */
.side-panel { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.side-panel--flush { padding: 0; overflow: hidden; }
.side-panel--flush .side-panel__title { padding: 0.9rem 1.1rem 0.7rem; margin: 0; }
.side-panel__title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: 0.95rem; font-weight: 800; margin: 0 0 0.6rem; }
.side-panel__link { font-size: 0.78rem; font-weight: 700; color: var(--teal-hover); text-decoration: none; }
.side-panel .events-map { height: 200px; border: none; border-radius: 0; margin: 0; }
.side-list { display: flex; flex-direction: column; }
.side-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; }
.side-item:first-child { border-top: none; }
.side-item--static { cursor: default; }
a.side-item:hover .side-item__title { color: var(--teal-hover); }
.side-thumb { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--teal-soft); }
.side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--teal-soft); color: var(--teal-hover); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.side-avatar--gold { background: #f8f0dd; color: #9a6b15; }
.side-item__body { min-width: 0; display: flex; flex-direction: column; gap: 0.04rem; flex: 1 1 auto; }
.side-item__when { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--teal-hover); }
.side-item__title { font-weight: 700; font-size: 0.88rem; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item__sub { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-count { margin-left: auto; flex: 0 0 auto; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); background: var(--bg-soft); border-radius: 999px; padding: 0.15rem 0.55rem; }
/* Centered page header. */
.events-hero { text-align: center; margin-bottom: 0.9rem; }
.events-hero h1 { margin: 0; }
@media (max-width: 480px) {
    .events-title { font-size: 1.5rem; }
    .events-tagline { font-size: 0.95rem; }
}
/* Region hero photo wraps BOTH the title block and the filter bar. The dark
   overlay sits BEHIND the content via z-index:-1 (not by stacking the
   content), so we never create a stacking context on the chips — that would
   trap the fixed "More filters" slide-over inside this box. */
.events-tophero--photo {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    overflow: hidden;
    padding: 3rem 1.5rem 1.6rem;
    margin-bottom: 1.4rem;
}
/* Flat single-opacity overlay (NOT a gradient) for legibility. */
.events-tophero--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(15, 23, 42, 0.5);
}
.events-tophero--photo .events-hero { margin-bottom: 1.1rem; }
/* White title/subtitle need a shadow to stay legible over light areas of the
   photo (dusk skies etc.) without darkening the whole image. Not a gradient. */
.events-tophero--photo .events-title,
.events-tophero--photo .events-tagline {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35), 0 1px 14px rgba(15, 23, 42, 0.3);
}
/* Inactive controls go frosted so the photo shows through; active chip keeps
   its solid teal fill. Solid opacity + blur, no gradient. */
.events-tophero--photo .events-chip:not(.is-active),
.events-tophero--photo .region-select {
    background: rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.5);
}
.events-hero__credit {
    position: absolute;
    right: 0.6rem;
    bottom: 0.4rem;
    z-index: 1;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
}
/* Compact solid pill, sized to match the outline Filters button beside it. */
.events-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
    background: var(--teal);
    color: #fff;
    border: 1px solid var(--teal);
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}
.events-add-btn:hover { background: var(--teal-dark, #0e7490); color: #fff; }

/* Selected-facet chips + count */
.events-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.events-count { color: var(--text); font-size: 1.05rem; font-weight: 700; margin: 0; }
/* Push the add CTA to the far right of the count line; filter chips wrap below it. */
.events-summary__add { margin-left: auto; }
.events-active-label { margin: 0; width: 100%; }
.facet-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    background: var(--teal-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--text);
    text-decoration: none;
}
.facet-chip:hover { border-color: var(--teal); color: var(--text); }
.facet-chip .facet-chip-x { font-weight: 700; color: var(--text-muted); line-height: 1; }
/* The anonymous favourites facet is a <button>, since it toggles client-side
   state rather than navigating. Buttons do not inherit type styles. */
button.facet-chip { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.events-clear-all { font-size: 0.85rem; color: var(--text-muted); }

/* Slide-over filter panel */
.events-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
}
.events-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 100%;
    background: #fff;
    z-index: 41;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.events-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
}
.events-panel-head h2 { margin: 0; font-size: 1.1rem; }
.events-panel-head-actions { display: inline-flex; align-items: center; gap: 0.6rem; }
.events-panel-reset { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); text-decoration: none; }
.events-panel-reset:hover { text-decoration: underline; }
.events-panel-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.2rem 0.4rem;
}
.events-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0.5rem 1.1rem; }

/* Collapsible panel sections (no-JS friendly <details>). */
.panel-section { border-bottom: 1px solid var(--border); padding: 0.35rem 0; }
.panel-section:last-of-type { border-bottom: none; }
.panel-section > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    padding: 0.45rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}
.panel-section > summary::-webkit-details-marker { display: none; }
.panel-section > summary .icon { flex: 0 0 auto; color: var(--text-muted); }
.panel-section > summary .section-chevron {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.panel-section[open] > summary .section-chevron { transform: rotate(180deg); }
.panel-section-body { padding: 0.15rem 0 0.4rem; }

/* Stacked From/To date fields in the panel DATES section. */
.panel-dates { display: flex; flex-direction: column; gap: 0.3rem; }
.panel-dates .form-label { font-size: 0.8rem; margin: 0.35rem 0 0; }
.panel-dates .form-label:first-child { margin-top: 0; }
.panel-dates .form-control { width: 100%; }
@media (max-width: 480px) {
    /* 16px prevents iOS Safari from auto-zooming when the field gains focus. */
    .panel-dates .form-control { font-size: 16px; }
}
.facet-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.12rem 0;
    cursor: pointer;
}
.facet-check input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--teal); }
.events-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-top: 1px solid var(--border);
}
.events-panel-foot .btn-primary { flex: 1 1 auto; text-align: center; }
.events-panel-foot .clear-link { color: var(--text-muted); font-size: 0.88rem; white-space: nowrap; }

/* No-JS fallback: <details> drives visibility; with JS we close it and use [hidden]. */
.events-panel-wrap[hidden] { display: none; }
.events-panel-toggle { list-style: none; }
.events-panel-toggle::-webkit-details-marker { display: none; }
.events-panel-wrap:not([open]) .events-panel,
.events-panel-wrap:not([open]) .events-panel-overlay { display: none; }

@media (max-width: 480px) {
    .events-panel { width: 100%; }
}

/* Region dropdown (the "where" selector — matches the prod control). */
.region-select {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--teal-soft); color: var(--teal-hover);
    border: 1px solid #bfe6ee; border-radius: 999px;
    padding: 0.5rem 0.9rem; font-weight: 700; cursor: pointer; max-width: 100%;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.region-select:hover { border-color: var(--teal); }
.region-select .icon { color: var(--teal); flex: 0 0 auto; }
.region-select select {
    border: none; background-color: transparent; color: var(--teal-hover);
    font-weight: 700; font-size: 1rem; font-family: inherit; outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none; max-width: 100%; padding: 0 1.3rem 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230b5566' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right center; background-size: 0.7rem;
}