/* css/evenemang.css — the events page (/evenemang and the category pages).
   Layered on core.css + subpages.css; adds only what this page needs.

   LAYOUT DECISION (2026-08-16, DESIGN_LOG): sidebar + list, NOT tabs. Ten
   categories cannot be a tab row, and more importantly each category is a real
   URL — tabs are client state and would give us a page that browses fine and
   ranks for nothing. The sidebar mirrors the map app's 460px sidebar so the
   pattern is already familiar. */

.ev-main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }

.ev-crumbs { font-size: 13px; color: rgba(0,0,0,.55); margin-bottom: 10px; min-height: 18px; }
.ev-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.2); }
.ev-crumbs a:hover { color: var(--black, #111010); }
.ev-crumb-sep { margin: 0 6px; opacity: .5; }

.ev-h1 { font-family: 'DM Serif Display', Georgia, serif; font-size: 38px; line-height: 1.12; margin: 0 0 6px; }
.ev-intro { margin: 0 0 22px; color: rgba(0,0,0,.62); font-size: 15px; max-width: 60ch; }

.ev-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.ev-side-inner { position: sticky; top: 16px; }
.ev-side-h { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(0,0,0,.45); margin: 0 0 10px; font-weight: 500; }
.ev-side-h + .ev-side-h, .ev-cats + .ev-side-h { margin-top: 26px; }

.ev-cats { list-style: none; margin: 0; padding: 0; }
.ev-cats li { margin: 0 0 1px; }
.ev-cat {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border-radius: 7px; text-decoration: none;
  color: var(--black, #111010); font-size: 14.5px; line-height: 1.25;
  border: 1px solid transparent; background: none; cursor: pointer; text-align: left;
}
.ev-cat:hover { background: rgba(0,0,0,.045); }
.ev-cat.is-on { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.14); font-weight: 500; }
.ev-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ev-cat-name { flex: 1 1 auto; min-width: 0; }
.ev-cat-count { flex: 0 0 auto; font-size: 12.5px; color: rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }
.ev-cat-skel { height: 32px; border-radius: 7px; background: rgba(0,0,0,.05); margin-bottom: 2px; }

.ev-filter-group { margin-bottom: 14px; }
.ev-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ev-lbl { display: block; font-size: 13px; color: rgba(0,0,0,.6); margin-bottom: 5px; }
.ev-select {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 14px;
  border: 1px solid rgba(0,0,0,.35); border-radius: 7px; background: #fff; color: var(--black,#111010);
}
.ev-reset { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13.5px;
  color: rgba(0,0,0,.55); text-decoration: underline; cursor: pointer; }
.ev-reset:hover { color: var(--black,#111010); }

/* ── Controls + list ─────────────────────────────────────────────────────── */
.ev-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ev-dates { display: flex; gap: 7px; flex-wrap: wrap; }
.ev-date {
  padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(0,0,0,.35);
  background: #fff; font: inherit; font-size: 13.5px; color: var(--black,#111010); cursor: pointer;
}
.ev-date:hover { background: rgba(0,0,0,.04); }
.ev-date.is-on { background: var(--black,#111010); color: #fff; border-color: var(--black,#111010); }

.ev-filter-btn { display: none; }

.ev-count { font-size: 14px; color: rgba(0,0,0,.6); margin-bottom: 14px; }
.ev-count strong { color: var(--black,#111010); }

.ev-day { margin-bottom: 26px; }
.ev-day-h {
  font-size: 13px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
  color: rgba(0,0,0,.5); margin: 0 0 9px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,0,0,.14);
}
.ev-day-cards { display: flex; flex-direction: column; gap: 2px; }

.ev-empty { padding: 34px 0; color: rgba(0,0,0,.55); font-size: 15px; }
.ev-more {
  display: block; margin: 8px auto 0; padding: 9px 22px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.35); background: #fff; font: inherit; font-size: 14px; cursor: pointer;
}
.ev-more:hover { background: rgba(0,0,0,.04); }

/* ── Mobile ──────────────────────────────────────────────────────────────
   Single column. The sidebar becomes a sheet behind the Filter button — same
   move the map made on 2026-07-18, and for the same reason: a permanent
   category strip eats the screen the content needs. Date chips stay inline
   because they are the most-used control on the page. */
@media (max-width: 860px) {
  .ev-main { padding: 18px 16px 84px; }
  .ev-h1 { font-size: 28px; }
  .ev-intro { font-size: 14.5px; margin-bottom: 18px; }
  .ev-layout { grid-template-columns: 1fr; gap: 0; }

  .ev-side {
    position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.35);
    display: none; padding: 0;
  }
  .ev-side.is-open { display: block; }
  .ev-side-inner {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto;
    background: var(--white, #F7F4EE); border-radius: 16px 16px 0 0;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  }
  .ev-side-close {
    position: absolute; top: 12px; right: 14px; border: 0; background: none;
    font-size: 22px; line-height: 1; cursor: pointer; color: var(--black,#111010);
  }
  .ev-filter-btn {
    display: inline-block; margin-left: auto;
    padding: 6px 15px; border-radius: 999px; border: 1px solid rgba(0,0,0,.35);
    background: #fff; font: inherit; font-size: 13.5px; cursor: pointer;
  }
  .ev-filter-btn.has-active { background: var(--black,#111010); color: #fff; border-color: var(--black,#111010); }
  .ev-dates { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ev-dates::-webkit-scrollbar { display: none; }
}