/* Helvi events page (events.html) — builds on the tokens, nav and footer in site.css. */

.ev-page { background: var(--paper); }
/* Several hidden-able elements here set their own display. */
[hidden] { display: none !important; }
.ev-main { padding: 124px 0 clamp(60px, 9vw, 110px); min-height: 80vh; }
.ev-head { margin-bottom: clamp(24px, 4vw, 44px); }
.ev-head .h2 { font-size: clamp(40px, 6.6vw, 84px); letter-spacing: -.045em; line-height: .98; }
.ev-head .sub { margin-top: 20px; }
.nav-links a[aria-current="page"] { opacity: 1; background: rgba(27, 20, 22, .06); }

/* ───────────── Filter bar ───────────── */
/* The nav floats over a long list here, so it and the filter bar share one frosted sheet: cards
   blur away under them instead of showing through around the pill. */
.ev-page .nav, .ev-bar { background: rgba(255, 249, 244, .9); -webkit-backdrop-filter: saturate(1.6) blur(28px); backdrop-filter: saturate(1.6) blur(28px); }
.ev-page .nav.scrolled .nav-in { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.ev-bar { position: sticky; top: var(--ev-nav, 76px); z-index: 20; padding: 2px 0 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.ev-bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Family / All, Free and This weekend: part of the bar itself, except on a phone (see Responsive). */
.ev-quick { display: contents; }
.ev-seg { display: inline-flex; height: 42px; padding: 4px; border-radius: 999px; background: rgba(27, 20, 22, .06); }
.ev-seg button, .ev-toggle { appearance: none; display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer; padding: 0 15px; border-radius: 999px; font-size: 14.5px; font-weight: 700; background: none; color: var(--muted); transition: background .25s var(--ease), color .25s, box-shadow .25s; }
.ev-seg button svg, .ev-toggle svg { width: 17px; height: 17px; flex: none; }
.ev-seg button:hover, .ev-toggle:hover { color: var(--ink); }
.ev-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 4px 10px -6px rgba(27, 20, 22, .35); }
.ev-toggle { height: 42px; box-shadow: inset 0 0 0 1px rgba(27, 20, 22, .14); }
.ev-toggle:hover { background: rgba(27, 20, 22, .05); }
.ev-toggle[aria-pressed="true"] { color: #fff; background: var(--ink); box-shadow: none; }
.ev-search { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 16px; height: 42px; border-radius: 999px; background: rgba(27, 20, 22, .06); transition: background .25s, box-shadow .25s; }
.ev-search:focus-within { background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.ev-search svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.ev-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); }
.ev-search input::placeholder { color: #9A8E92; }
.ev-search input::-webkit-search-cancel-button { cursor: pointer; }
/* Month shortcuts: one line, scrolls sideways when the catalogue runs far ahead. */
.ev-months { flex: 1 0 100%; display: flex; gap: 2px; margin: 0 -6px; overflow-x: auto; scrollbar-width: none; }
.ev-months::-webkit-scrollbar { display: none; }
.ev-months button { appearance: none; flex: none; border: 0; cursor: pointer; padding: 6px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--muted); background: none; transition: background .2s, color .2s; }
.ev-months button:hover { color: var(--ink); background: rgba(27, 20, 22, .06); }
/* The month the list is scrolled to. */
.ev-months button[aria-current="true"] { color: var(--red-text); background: var(--red-tint); }
.ev-count { flex: none; margin-left: 6px; font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ───────────── Month groups ───────────── */
.ev-group { padding-top: clamp(26px, 4vw, 44px); }
.ev-group > h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.035em; }
.ev-group > h2 span { font-weight: 500; color: #A99DA0; }
.ev-group > h2 small { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1.3; color: var(--muted); background: rgba(27, 20, 22, .06); font-variant-numeric: tabular-nums; }
.ev-group--now > h2 { position: relative; }
.ev-group--now > h2::before, .ev-group--now > h2::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
.ev-group--now > h2::before { margin-right: 2px; }
/* The pulse is a second dot that grows and fades: transform and opacity only, so nothing repaints. */
.ev-group--now > h2::after { position: absolute; left: 0; top: 50%; margin-top: -5.5px; animation: evPulse 2.2s ease-out infinite; }
@keyframes evPulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
/* --cols, --gap and --tall (a card's height ÷ one column's width) change with the breakpoints below;
   events.js reads --cols, and the grid is a size container so a widened card can match its row. */
.ev-grid { --cols: 4; --gap: 16px; --tall: 1.25; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); container-type: inline-size; margin: 0; padding: 0; list-style: none; }
.ev-grid > li { min-width: 0; }

/* ───────────── Cards ─────────────
   A poster: the photo fills the card and the text sits on a scrim tinted with --c, the event's
   catalog colour — which also stands in for the photo until it loads, or when there is none. */
.ev-card { --tint: color-mix(in oklab, var(--c, var(--red)) 30%, #140C0E); position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; color: #fff; text-decoration: none; background: var(--tint); box-shadow: 0 22px 34px -26px var(--tint); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ev-card:hover { transform: translateY(-4px); box-shadow: 0 30px 44px -24px var(--tint); }
.ev-card:focus-visible { border-radius: 26px; }
.ev-thumb { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(160deg, color-mix(in oklab, var(--c, var(--red)) 72%, #fff), color-mix(in oklab, var(--c, var(--red)) 78%, #140C0E)); }
.ev-thumb::after, .ev-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--tint) 95%, transparent), color-mix(in oklab, var(--tint) 80%, transparent) 24%, color-mix(in oklab, var(--tint) 30%, transparent) 50%, transparent 72%); }
.ev-thumb img, .ev-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease), scale 1.2s var(--ease); }
.ev-thumb img.ready, .ev-photo img.ready { opacity: 1; }
.ev-card:hover .ev-thumb img { scale: 1.06; }
.ev-text { display: flex; flex-direction: column; gap: 7px; padding: 18px; }
/* Date and "Free" ride on the photo's top edge. */
.ev-meta { position: absolute; inset: 12px 12px auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ev-date, .ev-free, .ev-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; color: var(--ink); background: rgba(255, 255, 255, .93); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
.ev-date { letter-spacing: .07em; text-transform: uppercase; }
.ev-date--now::before, .ev-chip--now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.ev-free, .ev-chip--free { flex: none; color: #0B7A49; }
.ev-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.ev-place { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.ev-place svg { width: 14px; height: 14px; flex: none; }
.ev-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No row ends short of the full width: events.js widens the cards that close a month (data-span),
   and the first card on the page, which leads. A widened card stays as tall as its neighbours. */
@media (min-width: 621px) {
  .ev-grid > [data-span="2"] { grid-column: span 2; }
  .ev-grid > [data-span="3"] { grid-column: span 3; }
  .ev-grid > [data-span="4"] { grid-column: span 4; }
  [data-span] .ev-card { aspect-ratio: auto; height: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols) * var(--tall)); }
  [data-span] .ev-text { padding: 22px; }
  [data-span] .ev-card h3 { max-width: 18em; font-size: clamp(22px, 2.3vw, 27px); line-height: 1.08; }
  [data-span] .ev-place { font-size: 15px; }
}
@media (min-width: 821px) {
  .ev-lead .ev-text { gap: 9px; padding: 26px; }
  .ev-lead .ev-card h3 { max-width: 16em; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; line-height: 1.04; }
  .ev-lead .ev-place { font-size: 16px; }
  .ev-lead .ev-meta { inset: 16px 16px auto; }
  .ev-lead .ev-date, .ev-lead .ev-free { padding: 7px 13px; font-size: 13px; }
}
/* Cards rise into place as they scroll in. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ev-grid > li { animation: evRise linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
  }
}
@keyframes evRise { from { opacity: 0; transform: translateY(30px) scale(.97); } }
/* Filter changes cross-fade (events.js wraps them in a view transition). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

.ev-skel { aspect-ratio: 4 / 5; border-radius: 26px; background: linear-gradient(100deg, #F5E6DE 40%, #FCF1EA 50%, #F5E6DE 60%) 0 0 / 300% 100%; animation: evShimmer 1.8s linear infinite; }
@keyframes evShimmer { to { background-position: -150% 0; } }
#skeleton { padding-top: 36px; }

.ev-state { padding: clamp(50px, 9vw, 100px) 0; text-align: center; }
.ev-state b { display: block; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.03em; }
.ev-state p { margin-top: 8px; color: var(--muted); font-weight: 500; }
.ev-reset { margin-top: 20px; padding: 12px 22px; background: var(--ink); color: #fff; }
.ev-reset:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(27, 20, 22, .7); }

/* ───────────── Event dialog ───────────── */
html:has(.ev-dialog[open]) { overflow: hidden; } /* the page behind stays put */
/* Opens and closes on transitions: @starting-style is the way in, allow-discrete holds it for the way out. */
.ev-dialog { width: min(700px, calc(100vw - 28px)); max-height: min(900px, calc(100dvh - 28px)); padding: 0; border: 0; border-radius: 32px; overflow: hidden auto; overscroll-behavior: contain; color: var(--ink); background: var(--card); box-shadow: 0 50px 90px -30px rgba(30, 5, 8, .6); opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .3s var(--ease), transform .45s var(--ease), overlay .45s allow-discrete, display .45s allow-discrete; }
.ev-dialog[open] { opacity: 1; transform: none; }
.ev-dialog::backdrop { background: rgba(27, 12, 14, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .35s, -webkit-backdrop-filter .35s, backdrop-filter .35s, overlay .45s allow-discrete, display .45s allow-discrete; }
.ev-dialog[open]::backdrop { background: rgba(27, 12, 14, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@starting-style {
  .ev-dialog[open] { opacity: 0; transform: translateY(26px) scale(.96); }
  .ev-dialog[open]::backdrop { background: rgba(27, 12, 14, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}
.ev-close, .ev-share { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(20, 12, 14, .38); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .3s var(--spring), background .25s; }
.ev-share { right: 62px; }
.ev-close:hover, .ev-share:hover { transform: scale(1.08); background: rgba(20, 12, 14, .55); }
.ev-close svg, .ev-share svg { width: 18px; height: 18px; }
/* The title sits on the photo, over the same tinted scrim as the cards. */
.ev-photo { --tint: color-mix(in oklab, var(--c, var(--red)) 30%, #140C0E); position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, color-mix(in oklab, var(--c, var(--red)) 72%, #fff), color-mix(in oklab, var(--c, var(--red)) 78%, #140C0E)); }
.ev-photo .ev-chips { position: absolute; z-index: 1; top: 16px; left: 16px; right: 112px; display: flex; flex-wrap: wrap; gap: 6px; }
.ev-photo .ev-chip { padding: 7px 13px; font-size: 13px; }
.ev-photo h2 { position: relative; z-index: 1; padding: 0 clamp(20px, 4vw, 32px) clamp(20px, 3.4vw, 28px); color: #fff; font-size: clamp(27px, 4.6vw, 40px); letter-spacing: -.035em; line-height: 1.04; }
.ev-detail { padding: clamp(18px, 3.4vw, 26px) clamp(20px, 4vw, 32px) clamp(22px, 4vw, 32px); }
.ev-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ev-facts li { display: flex; gap: 10px; padding: 14px 16px; border-radius: 18px; background: #FBF2EC; font-weight: 700; line-height: 1.35; }
.ev-facts svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--red-text); }
.ev-facts small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--muted); }
.ev-facts a { color: var(--red-text); font-weight: 700; text-decoration: none; }
.ev-facts a:hover { text-decoration: underline; }
.ev-desc { margin-top: 20px; color: #463A3D; text-wrap: pretty; }
.ev-prices { display: grid; gap: 0; margin: 20px 0 0; border-radius: 18px; background: #FBF2EC; padding: 4px 16px; }
.ev-prices:empty { display: none; }
.ev-prices div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 15px; }
.ev-prices div + div { border-top: 1px solid var(--line); }
.ev-prices dt { color: #463A3D; font-weight: 500; }
.ev-prices dd { margin: 0; flex: none; font-weight: 800; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ev-actions .btn { flex: 1 1 200px; padding: 15px 20px; font-size: 16px; }
.ev-actions svg { width: 17px; height: 17px; }
.ev-primary { background: var(--red-btn); color: #fff; }
.ev-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgba(142, 15, 21, .8); }
.ev-secondary { background: rgba(27, 20, 22, .07); color: var(--ink); }
.ev-secondary:hover { background: rgba(27, 20, 22, .11); }
/* Who made the photo and under which licence (Wikimedia Commons photos). */
.ev-credit { margin-top: 18px; font-size: 13px; color: var(--muted); }
.ev-credit a { color: inherit; text-underline-offset: 2px; }
.ev-credit a:hover { color: var(--ink); }
/* The list as plain links, for a browser that does not run events.js (see scripts/helvi-events.mjs). */
.ev-plain { padding-top: 28px; }
.ev-plain h2 { margin-bottom: 10px; font-size: 26px; letter-spacing: -.03em; }
.ev-plain ul { margin: 0; padding: 0; list-style: none; }
.ev-plain li { padding: 10px 0; border-top: 1px solid var(--line); }
.ev-plain a { font-weight: 700; text-decoration: none; }
.ev-plain a:hover { text-decoration: underline; }
.ev-plain span { color: var(--muted); font-size: 15px; }

/* ───────────── Responsive ───────────── */
@media (max-width: 1100px) { .ev-grid { --cols: 3; } }
@media (max-width: 820px) {
  .ev-grid { --cols: 2; --gap: 14px; --tall: 1; }
  .ev-card { aspect-ratio: 1; }
}
@media (max-width: 620px) {
  .ev-main { padding-top: 100px; }
  .ev-bar { position: static; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* The count shares its row with the month shortcuts. */
  .ev-count { flex: none; margin: 0 2px 0 4px; }
  .ev-months { flex: 1 1 0; min-width: 0; margin: 0 -6px 0 0; }
  .ev-search { order: -1; flex-basis: 100%; }
  /* One row of filters that scrolls sideways, edge to edge, instead of two rows of them. */
  .ev-quick { display: flex; flex: 1 0 100%; gap: 8px; min-width: 0; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .ev-quick::-webkit-scrollbar { display: none; }
  .ev-quick > * { flex: none; }
  .ev-seg button, .ev-toggle { white-space: nowrap; }
  /* The lead keeps its poster; every other event is a compact row — photo left, text right. */
  .ev-grid { --cols: 1; --gap: 0px; }
  .ev-lead { margin-bottom: 8px; }
  .ev-lead .ev-card { aspect-ratio: 4 / 3; }
  .ev-grid > li:not(.ev-lead) + li { border-top: 1px solid var(--line); }
  li:not(.ev-lead) > .ev-card { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; height: auto; aspect-ratio: auto; padding: 12px 0; border-radius: 0; overflow: visible; color: var(--ink); background: none; box-shadow: none; }
  li:not(.ev-lead) > .ev-card:hover { transform: none; }
  li:not(.ev-lead) > .ev-card:focus-visible { border-radius: 20px; }
  li:not(.ev-lead) .ev-thumb { position: relative; inset: auto; z-index: 0; flex: 0 0 92px; aspect-ratio: 1; border-radius: 20px; }
  li:not(.ev-lead) .ev-thumb::after { display: none; }
  li:not(.ev-lead) .ev-text { flex: 1; min-width: 0; gap: 4px; padding: 0; }
  /* A long date range and "Free" do not always fit side by side on a narrow phone: let them wrap. */
  li:not(.ev-lead) .ev-meta { position: static; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 3px 8px; }
  li:not(.ev-lead) .ev-date { padding: 0; color: var(--red-text); background: none; box-shadow: none; }
  li:not(.ev-lead) .ev-date--now { color: #0B7A49; }
  li:not(.ev-lead) .ev-free { padding: 3px 9px; background: #E7F9EF; box-shadow: none; }
  li:not(.ev-lead) > .ev-card h3 { -webkit-line-clamp: 2; font-size: 17px; line-height: 1.2; }
  li:not(.ev-lead) .ev-place { color: var(--muted); }
  .ev-skel { aspect-ratio: auto; height: 116px; border-radius: 20px; }
  .ev-dialog { width: 100vw; max-width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: 28px 28px 0 0; transform: translateY(40%); }
  .ev-photo { aspect-ratio: 4 / 3; }
  .ev-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) { @starting-style { .ev-dialog[open] { transform: translateY(40%); } } }

/* Location controls stay in a separate, compact row. */
.ev-location { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 0 100%; }
/* Each select is an outlined pill like the toggles, with its label inside: "Canton  All cantons ⌄". */
.ev-select { position: relative; display: flex; flex: 0 1 240px; align-items: center; gap: 8px; min-width: 0; height: 42px; padding-left: 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(27, 20, 22, .14); cursor: pointer; transition: background .25s, box-shadow .25s; }
.ev-select:hover { background: rgba(27, 20, 22, .05); }
.ev-select:focus-within { background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.ev-select > span { flex: none; font-size: 13px; font-weight: 700; color: var(--muted); }
.ev-select select { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; height: 100%; padding: 0 38px 0 0; border: 0; outline: 0; border-radius: 0 999px 999px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236F6164' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; text-overflow: ellipsis; cursor: pointer; }
.ev-select:has(select:disabled) { opacity: .5; cursor: default; }
.ev-radius { flex: 0 1 260px; }
.ev-clear { height: 42px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: none; color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 700; transition: color .25s, background .25s; }
.ev-clear:hover { color: var(--ink); background: rgba(27, 20, 22, .05); }
.ev-location-hint { flex: 1 0 100%; padding-left: 4px; color: var(--muted); font-size: 12px; }
/* While the bar is sticky the count sits beside the search and the pills share the second row with
   the month shortcuts, so the bar stays two rows tall and the list keeps most of the screen. */
@media (min-width: 621px) {
  .ev-location { display: contents; }
  .ev-select, .ev-clear { order: 1; }
  .ev-select { flex-basis: 204px; }
  /* The right edge fades out where more months wait off-screen; the padding keeps the last one clear of it. */
  .ev-months { order: 2; flex: 1 1 200px; min-width: 0; margin: 0; padding-right: 26px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  /* The distance note rides at the end of the months row instead of taking one of its own. */
  .ev-location-hint { order: 3; flex: 0 1 auto; padding: 0; }
}
/* Where the search wraps to the second row, the count follows the pills so Canton and City stay together. */
@media (min-width: 621px) and (max-width: 820px) { .ev-count { order: 1; } }
/* Wider than that, a zero-height item ends the first row, so Canton and City always start the second. */
@media (min-width: 821px) { .ev-bar-in::before { content: ""; order: 1; flex: 1 0 100%; height: 0; margin-top: -8px; } }
/* Month jumps land just under the bar: events.js measures it into --ev-bar, and the page's
   scroll-padding already clears the nav. */
.ev-group { scroll-margin-top: var(--ev-bar, 118px); }
@media (max-width: 620px) {
  .ev-select { flex: 1 1 calc(50% - 8px); padding-left: 14px; }
  /* Half-width pills have no room for the label; the select keeps its aria-label. */
  .ev-select > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ev-select select { padding-right: 32px; background-position: right 12px center; font-size: 16px; }
  .ev-radius { flex: 1 1 calc(50% - 8px); }
  .ev-clear { flex: 1 1 calc(50% - 8px); }
  .ev-group { scroll-margin-top: 78px; }
}