/* ==========================================================================
   Open Ground — the event overview

   Two views of one list. The map view is a stage (map.css): the drawn world
   takes the whole window under the masthead, and the page's head, its
   filters and the event list float on it in the dock. The tile view is a
   page again, and the same head and filters move into its column — so a
   filter set on the map is still set on the tiles, and the other way round.
   ========================================================================== */

/* the map view has no page below it to scroll to, and fills the one it has */
body.is-stage .foot { display: none; }
body.is-stage .ev { height: 100%; }

/* ── The head: what this is, and what the platform is carrying ─────────── */
.ev__head h1 { margin-bottom: 4px; }

.evtotals { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-end; }
.evtotals span { display: grid; gap: 2px; }
.evtotals b {
  font-family: var(--display);
  font-size: var(--t-subtitle);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.evtotals b.is-live { color: var(--pulse-ink); }
.evtotals em {
  font-style: normal;
  font-size: var(--t-pip);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.seg--view button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; }
.seg--view svg { width: 15px; height: 15px; }

/* In the dock the head is a card's header: a smaller title beside the view
   switch, one line of explanation, and the four readings as one row. */
.dock__top {
  flex: none;
  display: grid;
  gap: 12px;
  padding: 16px 16px 14px;
  background: linear-gradient(var(--line), var(--line)) bottom / 100% 1px no-repeat;
}
.dock .ev__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.dock .ev__head h1 { font-size: var(--t-subtitle); letter-spacing: -0.03em; }
.dock .ev__head .lede { font-size: var(--t-small); color: var(--ink-3); line-height: 1.45; }
.dock .evtotals {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.dock .evtotals span { align-content: start; min-width: 0; }
.dock .evtotals b { font-size: 1.08rem; white-space: nowrap; }
/* a quarter of the dock is too narrow for "VERANSTALTUNGEN" in capitals, so
   the labels are set as words here and may take a second line */
.dock .evtotals em {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
}
.dock .seg--view { grid-column: 2; grid-row: 1; }
.dock .seg--view button { padding: 7px 10px; }
.dock .seg--view button span { display: none; }

/* ── Filters: one set, and both views answer to it ─────────────────────── */
.evf { display: grid; gap: 8px; }
.evf__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.evf__chips .chip { padding: 6px 12px; font-size: var(--t-caption); }
.evf__sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.evf .tf { gap: 4px; }
.evf .tf__l { font-size: 10px; }
.evf .tf__s { padding: 8px 26px 8px 10px; font-size: var(--t-caption); }
.evf .tf__box .inp { padding-block: 9px; font-size: var(--t-small); border-radius: var(--r-pill); }
.evf__reset {
  justify-self: start;
  padding: 2px 0;
  font-size: var(--t-caption);
  font-weight: 650;
  color: var(--pulse-ink);
}
.evf__reset:hover { text-decoration: underline; }
.evf__reset[hidden] { display: none; }

.tf { display: grid; gap: 6px; min-width: 0; }
.tf__l { font-size: var(--t-legend); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.tf__s { padding: 11px 36px 11px 14px; font-size: var(--t-label); }
.tf__box { position: relative; display: flex; align-items: center; }
.tf__box svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.tf__box .inp { padding-left: 38px; }

/* ── The list, in the dock ─────────────────────────────────────────────── */
.ev__list {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px 8px 8px 12px;
}
.ev__count { padding-inline: 4px; }

.elist {
  display: grid;
  gap: 6px;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.erow {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--ease-s), transform var(--ease-s), box-shadow var(--ease-s);
}
.erow:hover, .erow[data-on='1'] {
  background: var(--surface-2);
  transform: translateX(3px);
  box-shadow: var(--lift);
}
/* The selected row lifts into the light and takes the pulse on its own
   thumbnail; a coloured bar down its edge is the cheap version. */
.erow[data-on='1'] { background: var(--pulse-wash); box-shadow: var(--lift-2); }
.erow[data-on='1'] .erow__thumb { background: var(--surface-solid); }

.erow__thumb {
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--ground-3);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.erow__thumb svg { width: 100%; height: 100%; }
.erow__main { min-width: 0; display: grid; gap: 3px; }
.erow__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.erow__name {
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erow__meta { color: var(--ink-3); font-size: 12.5px; font-weight: 600; display: flex; gap: 10px; flex-wrap: wrap; }
.erow .state { font-size: 11px; padding: 3px 9px 3px 7px; flex: none; }

/* ── Chrome on the map ────────────────────────────────────────────────────
   Whatever sits along the left edge starts where the dock stops, and
   follows it when it slides away. */
.world__legend {
  position: absolute;
  left: calc(var(--dock-off) + 16px); bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface-solid), transparent 8%);
  backdrop-filter: blur(8px);
  box-shadow: var(--lift);
  transition: left var(--spring);
}
.legend__i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-2);
}
.legend__i i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.legend__i--live i { background: var(--pulse); }
.legend__i--past i { background: var(--ink-3); }

.world__home {
  position: absolute;
  left: calc(var(--dock-off) + 16px); top: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-solid);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  box-shadow: var(--lift);
  transition: left var(--spring), background var(--ease-s);
}
.world__home svg { width: 16px; height: 16px; transition: transform var(--spring); }
.world__home:hover { background: var(--surface-2); }
.world__home:hover svg { transform: translateX(-3px); }
.world__home[hidden] { display: none; }

/* -- The focused event, as a card over its own ground ------------------ */
.focus {
  position: absolute;
  right: 16px; top: 16px;
  /* clear of the zoom control in the corner below it */
  max-height: calc(100% - 170px);
  z-index: 4;
  width: min(330px, 34%);
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface-solid), transparent 8%);
  backdrop-filter: blur(16px);
  box-shadow: var(--lift-2), inset 0 0 0 1px var(--line);
  overflow-y: auto;
  animation: focus-in 520ms var(--out) both;
}
@keyframes focus-in {
  from { opacity: 0; transform: translateX(22px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.focus[hidden] { display: none; }
/* the card's own grid, so its children are blocks and can be clipped */
.focus__in { display: grid; gap: 12px; align-content: start; min-width: 0; }
.focus__in > * { min-width: 0; }
.focus__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-subtitle);
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.focus__when { display: block; color: var(--ink-3); font-size: var(--t-meta); font-weight: 600; }
.focus__shot {
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ground-3);
}
.focus__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.focus__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.focus__stat b {
  display: block;
  font-family: var(--display);
  font-size: var(--t-subtitle);
  letter-spacing: -0.02em;
}
.focus__stat span { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.focus__routes { display: grid; gap: 7px; }
.focus__routes { margin: 0 -8px; gap: 2px; }
/* each course is a button: it picks that course out on the map */
.focus__route {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease-xs), color var(--ease-xs), opacity var(--ease-xs);
}
.focus__route:hover { background: var(--surface-2); color: var(--ink); }
.focus__route i { width: 16px; height: 3px; border-radius: 3px; flex: none; transition: height var(--ease-xs); }
.focus__routes.has-pick .focus__route { opacity: 0.55; }
.focus__routes.has-pick .focus__route[aria-pressed='true'] { opacity: 1; color: var(--ink); background: var(--surface-2); }
.focus__route[aria-pressed='true'] i { height: 5px; }
.focus .btn { justify-self: start; }

/* -- Zoom on the drawn world ------------------------------------------
   The canvas takes wheel and drag, but a visitor has to be able to see
   that it zooms, and a phone needs a target it can hit. */
.world__zoom {
  position: absolute;
  right: 16px; bottom: 16px;
  z-index: 4;
  display: grid;
  gap: 1px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface-solid), transparent 8%);
  backdrop-filter: blur(8px);
  box-shadow: var(--lift);
}
.world__zoom button {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: background var(--ease-s), color var(--ease-xs), transform var(--ease-s);
}
.world__zoom svg { width: 17px; height: 17px; }
.world__zoom button:hover { background: var(--pulse-wash); color: var(--ink); transform: scale(1.08); }

/* ── Tile view ───────────────────────────────────────────────────────────
   The catalogue reading of the same events: a tile that answers the
   questions a dot cannot. The head and the filters are the dock's, moved
   into this column while the tiles are showing. */
.ev__tiles { display: grid; gap: 14px; padding-block: clamp(26px, 4vw, 46px) var(--section); }
.ev__tiles[hidden] { display: none; }

.tcount { padding-inline: 4px; }

/* Small enough that a screen holds several: the catalogue's job is
   comparison, and one tile per screen is the map view with extra steps. */
.tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  /* stretch, so a row of tiles shares one baseline instead of stepping */
  align-items: stretch;
}

.tile {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--lift);
  transition: background var(--ease-s), transform var(--ease-s), box-shadow var(--ease-s);
}
.tile:hover { background: var(--surface-2); transform: translateY(-4px); box-shadow: var(--lift-2); }

.tile__top {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  background: var(--ground-3);
  overflow: hidden;
}
.tile__top img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--out); }
.tile:hover .tile__top img { transform: scale(1.05); }
.tile__route { position: absolute; inset: 0; }
.tile__state { position: absolute; left: 12px; top: 12px; z-index: 2; }

.tile__body { padding: 12px 13px 13px; display: grid; gap: 7px; align-content: start; grid-template-rows: auto auto auto 1fr auto; }
.tile__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-note);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile__name:hover { color: var(--brand); }
.tile__when { font-size: var(--t-legend); color: var(--ink-3); font-weight: 600; }

.tile__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
  padding-top: 8px;
  background: linear-gradient(to right, var(--line), transparent 78%) top / 100% 1px no-repeat;
}
.tile__facts div { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.tile__facts dt { font-size: 10.5px; font-weight: 650; color: var(--ink-3); order: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__facts dd {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-legend);
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
}

.tile__routes { display: flex; flex-wrap: wrap; gap: 4px; }
.tile__routes li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  font-size: 10.5px;
  color: var(--ink-2);
  font-weight: 650;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile__routes i { width: 9px; height: 2.5px; border-radius: 2px; background: var(--pulse); flex: none; }

.tile__acts { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.tile__acts .btn { padding: 8px 14px; font-size: var(--t-legend); }
.tile__acts .chip { padding: 7px 9px; }
.tile__acts .chip span { display: none; }
.tile__state { left: 8px; top: 8px; font-size: 10.5px; padding: 3px 9px 3px 7px; }
.tile__more { background: transparent; color: var(--ink-3); padding-inline: 2px; }

/* the globe sits under the two zoom steps, separated by a hairline of ground */
#zoomGlobe { margin-top: 3px; }
#zoomGlobe::before {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  margin-top: -5px;
  height: 1px;
  background: var(--line);
}
.world__zoom button { position: relative; }


/* ── The head and filters in the tile view's column ───────────────────────
   The same nodes as in the dock, given the page's width: the title and
   readings on one side, the view switch on the other, and the filters as
   one row under them. */
.ev__tilehead { display: grid; gap: 18px; }
.ev__tilehead .ev__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 28px;
}
.ev__tilehead .ev__say { flex: 1 1 420px; }
.ev__tilehead .ev__say .lede { max-width: 56ch; }
.ev__tilehead .evf {
  grid-template-columns: auto minmax(200px, 1fr) minmax(0, 1.5fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.ev__tilehead .evf__chips { align-self: center; }
.ev__tilehead .evf__reset { align-self: center; }
@media (max-width: 1080px) {
  .ev__tilehead .evf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ev__tilehead .evf__sel { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .ev__tilehead .evf { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .ev__tilehead .evtotals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
}

/* ── Phone: the dock is a sheet along the bottom (map.css) ───────────────
   The chrome that sat along the bottom moves to the top, where the map is,
   and the focus card lies over the bottom — the page folds the sheet away
   when an event is picked, so the card has the room. */
@media (max-width: 900px) and (min-height: 500px) {
  .world__legend { left: 12px; bottom: auto; top: 12px; }
  .world__home { left: 12px; top: 58px; }
  .world__zoom { right: 12px; bottom: auto; top: 12px; }
  .focus {
    inset: auto 12px 52px 12px;
    width: auto;
    max-height: 56%;
  }
  .dock .ev__head .lede { display: none; }
}
@media (max-width: 520px) {
  .seg--view button span { display: none; }
  .dock .evtotals em { font-size: 9.5px; }
}