.cp-events{margin-bottom:40px}
.cp-events__month{margin-bottom:14px;font-family:var(--cp-font-head);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-accent)}
.cp-events__list{display:grid;gap:10px}
.cp-event{display:grid;grid-template-columns:170px minmax(0,1fr) 236px;gap:20px;padding:18px 20px;border:1px solid var(--cp-line-2);background:var(--cp-panel)}
.cp-event:hover{border-color:var(--cp-accent-line)}
.cp-event__when{display:flex;flex-direction:column;gap:4px;font-family:var(--cp-font-head)}
.cp-event__date{font-size:15px;font-weight:600;color:var(--cp-text-hi)}
.cp-event__time{font-size:13px;letter-spacing:.08em;color:var(--cp-text-mute)}
.cp-event__title{font-family:var(--cp-font-head);font-size:18px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.cp-event__live{display:inline-block;margin-left:10px;padding:2px 8px;border:1px solid var(--cp-green);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-green);vertical-align:middle}
.cp-event__body p{margin-bottom:0}
.cp-event__place{margin-top:8px;color:var(--cp-text);overflow-wrap:anywhere}
.cp-event__city{margin-right:4px;font-family:var(--cp-font-head);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-accent)}
.cp-event__city a{color:inherit;text-decoration:underline;text-decoration-color:var(--cp-accent-line);text-underline-offset:3px}
.cp-event__city a:hover{color:var(--cp-accent-hover);text-decoration-color:currentColor}
/* przycisk zapisów: wypełniony akcent (.cp-btn--primary), po prawej stronie pozycji, wyrównany do góry */
.cp-event__cta{align-self:start;justify-content:center;gap:12px;min-height:44px;white-space:nowrap}
.cp-event__cta-icon{flex:none}
/* Dopisek „: tytuł” dla czytników ekranu: musi zostać elementem liniowym (font-size:0), bo ukrycie przez position:absolute
   daje w nazwie dostępnej linku spację przed dwukropkiem („melee.gg : tytuł”). Wymuszone ponad ogólnym .screen-reader-text. */
.cp-event__cta .screen-reader-text{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important;font-size:0!important;line-height:0;letter-spacing:0!important;word-spacing:0!important}
.cp-event__org{margin-top:4px;font-size:14px;color:var(--cp-text-mute)}
.cp-event__org a{color:var(--cp-text-2);text-decoration:underline;text-decoration-color:var(--cp-line-3);text-underline-offset:3px}
.cp-event__org a:hover{color:var(--cp-accent-hover);text-decoration-color:currentColor}
.cp-event__meta{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:12px}
.cp-event__meta li{padding:3px 9px;border:1px solid var(--cp-line-3);font-family:var(--cp-font-head);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-text-2)}
.cp-events__source{margin-top:8px;font-size:14px;color:var(--cp-text-mute)}
.cp-events__source a{color:var(--cp-accent)}
/* pusty stan — .cp-empty żyje w news.css/catalog.css, których tu nie ładujemy */
.cp-empty{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:40px;padding:32px}
/* układ: lewa kolumna `.cp-evside` (260 px, przyklejona pod nagłówkiem) z wyborem miasta i pod nim organizatora, obok filtr
   dat i lista. `.cp-evbar` na szerokim ekranie nie tworzy pudełka (display:contents) — jego dzieci są komórkami siatki; do
   900 px staje się paskiem nad listą. Wiersz 2 jest elastyczny (1fr), żeby wysoka kolumna wyborów nie rozpychała wiersza z filtrem. */
@media (min-width:901px){
  .cp-evlayout{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:40px;align-items:start}
  .cp-evlayout--solo{grid-template-columns:minmax(0,1fr)}
  .cp-evbar{display:contents}
  .cp-evlayout__main{grid-column:2;grid-row:2;min-width:0}
  .cp-events-filter{grid-column:2;grid-row:1}
  .cp-evlayout--solo :is(.cp-evlayout__main,.cp-events-filter){grid-column:1}
  /* strona bez listy (pusty stan): nie ma filtra, treść zaczyna się od pierwszego wiersza */
  .cp-evbar:not(:has(.cp-events-filter))+.cp-evlayout__main{grid-row:1 / span 2}
  /* --cp-evside-room: wysokość okna pod nagłówkiem (16 px odstępu nad kolumną i pod nią) — kolumna mieści się w niej cała */
  .cp-evside{grid-column:1;grid-row:1 / span 2;position:sticky;top:calc(var(--cp-sticky-top) + 16px);display:flex;flex-direction:column;gap:16px;--cp-evside-room:calc(100vh - var(--cp-sticky-top) - 32px)}
  /* nagłówek sekcji w jednym wierszu (długą nazwę bieżącego organizatora kończy wielokropek; pełna jest podświetlona na liście) */
  .cp-citypick__head{pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  /* skrót „Twoje miasto” dzieli pierwszą komórkę siatki z kolumną wyborów: kolumna odsuwa się o jego stałą wysokość (44 px) i odstęp */
  .cp-citypick__mine{grid-column:1;grid-row:1}
  .cp-citypick__mine:not([hidden])~.cp-evbar .cp-evside{margin-top:56px;--cp-evside-room:calc(100vh - var(--cp-sticky-top) - 32px - 56px)}
  /* każda lista przewija się we własnym oknie: dwie sekcje dzielą wysokość po połowie (16 px = odstęp między nimi, 110 px =
     nagłówek sekcji + pole szukania + ramki), więc oba pola szukania są zawsze widoczne; sama jedna sekcja dostaje całość */
  .cp-evside .cp-citypick__list{max-height:max(132px,calc((var(--cp-evside-room) - 16px) / 2 - 110px))}
  .cp-evside>.cp-citypick:only-child .cp-citypick__list{max-height:max(180px,calc(var(--cp-evside-room) - 110px))}
  /* przełącznik „Termin” jest tylko na pasku (≤ 900 px) */
  .cp-evbar__toggle:not(.cp-citypick__head){display:none}
}
/* cele linku pomijającego listy wyboru (tabindex="-1"): fokus ląduje w filtrze albo kolumnie, bez obwódki wokół całego kontenera */
.cp-events-filter:focus,.cp-evlayout__main:focus{outline:none}
.cp-evbar__toggle[hidden],.cp-citypick__mine[hidden],.cp-citypick__search[hidden],.cp-citypick__list [hidden],.cp-citypick__none[hidden],.cp-evbar__dot[hidden]{display:none}
/* skrócona etykieta („Org”) tylko na wąskim pasku, dla czytników zawsze pełna („Organizator”) */
.cp-evbar__short{display:none}
/* wybór (miasto, organizator): panel z nagłówkiem („Miasto: …”), polem szukania i listą wierszy (nazwa po lewej, liczba wydarzeń po prawej) */
.cp-citypick{min-width:0;border:1px solid var(--cp-line-2);background:var(--cp-panel)}
.cp-citypick__head{display:block;padding:14px 16px;border-bottom:1px solid var(--cp-line-2);font-family:var(--cp-font-head);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text-mute);list-style:none}
.cp-citypick__head::-webkit-details-marker{display:none}
.cp-evbar__toggle strong{font-weight:600;color:var(--cp-text-hi)}
.cp-citypick__search{padding:12px 12px 8px}
.cp-citypick__search input{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--cp-line-input);background:var(--cp-bg);font-size:14px}
.cp-citypick__search input::placeholder{color:var(--cp-text-mute);opacity:1}
.cp-citypick__search input:hover{border-color:var(--cp-accent-line)}
/* fokus: akcentowa ramka i obwódka tuż przy niej (domyślny odstęp 2 px wychodziłby poza wąski panel) */
.cp-citypick__search input:focus-visible{border-color:var(--cp-accent);outline-offset:0}
/* lista przewija się we własnym oknie (wysokość na szerokim ekranie: `.cp-evside`, na wąskim: panel pod paskiem) */
.cp-citypick__list{position:relative;padding-bottom:6px;overflow-y:auto;overscroll-behavior:contain;scroll-padding-top:46px}
.cp-citypick__list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;padding:6px 16px;font-size:15px;line-height:1.3;color:var(--cp-text-2)}
.cp-citypick__list a:hover{background:var(--cp-accent-tint);color:var(--cp-accent)}
.cp-citypick__list a[aria-current]{background:var(--cp-accent-tint);box-shadow:inset 2px 0 0 var(--cp-accent);font-weight:600;color:var(--cp-accent)}
/* obwódka fokusu do środka wiersza — na zewnątrz ucinałby ją kontener przewijania */
.cp-citypick__list a:focus-visible{outline-offset:-2px}
.cp-citypick__name{min-width:0;overflow-wrap:anywhere}
.cp-citypick__count{flex:none;font-family:var(--cp-font-head);font-size:12px;font-variant-numeric:tabular-nums;color:var(--cp-text-dim)}
.cp-citypick__list a:hover .cp-citypick__count,.cp-citypick__list a[aria-current] .cp-citypick__count{color:inherit}
/* „Wszystkie miasta” / „Wszyscy organizatorzy” zostaje u góry przewijanej listy — powrót do pełnej listy jest zawsze pod ręką */
.cp-citypick__list .cp-citypick__all{position:sticky;top:0;z-index:1;border-bottom:1px solid var(--cp-line-1);background:var(--cp-panel)}
.cp-citypick__none{padding:8px 16px 16px;font-size:14px;color:var(--cp-text-2)}
.cp-citypick__none p{margin-bottom:8px}
.cp-citypick__none a{text-decoration:underline;text-decoration-color:var(--cp-accent-line);text-underline-offset:3px}
@media (forced-colors:active){.cp-citypick__list a[aria-current]{forced-color-adjust:none;background:SelectedItem;color:SelectedItemText}}
/* skrót „Twoje miasto” (tylko lista ogólna, odkrywany skryptem wbudowanym przed pierwszym malowaniem) */
.cp-citypick__mine{display:flex;align-items:center;gap:8px;height:44px;margin:0;padding:0 16px;border:1px solid var(--cp-line-2);background:var(--cp-panel);box-shadow:inset 2px 0 0 var(--cp-accent);font-family:var(--cp-font-head);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--cp-text-mute)}
.cp-citypick__mine a{min-width:0;margin-right:auto;overflow:hidden;text-overflow:ellipsis;font-family:var(--cp-font-body);font-size:15px;font-weight:600;letter-spacing:0;line-height:42px;text-transform:none}
/* sekcja „Gdzie grać” na stronie miasta i „Lokale organizatora” na stronie organizatora (z linkiem do profilu na melee.gg) */
.cp-venues{margin:0 0 40px}
.cp-venues__title{margin-bottom:14px;font-family:var(--cp-font-head);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-accent)}
.cp-venues__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.cp-venue{padding:18px 20px;border:1px solid var(--cp-line-2);background:var(--cp-panel)}
.cp-venue__name{font-family:var(--cp-font-head);font-size:17px;font-weight:600;line-height:1.3;color:var(--cp-text-hi);overflow-wrap:anywhere}
.cp-venue p{margin:4px 0 0;overflow-wrap:anywhere}
.cp-venue__address{color:var(--cp-text)}
.cp-venue__org{font-size:14px;color:var(--cp-text-mute)}
.cp-venue__kinds{margin-top:10px}
.cp-venue__when{margin-top:12px!important;font-size:14px;color:var(--cp-text-mute)}
.cp-venue__when time{font-family:var(--cp-font-head);font-weight:600;color:var(--cp-text-2)}
.cp-venue__when--next time{color:var(--cp-green)}
.cp-venues__profile{margin:14px 0 0;font-size:14px}
.cp-evlayout__main>.cp-venues__profile{margin:0 0 24px}
.cp-venues__profile a{color:var(--cp-accent);text-decoration:underline;text-decoration-color:var(--cp-accent-line);text-underline-offset:3px}
.cp-venues__profile a:hover{color:var(--cp-accent-hover);text-decoration-color:currentColor}
/* 641–800 px oraz 901–1180 px (prawa kolumna obok panelu miast): przycisk schodzi pod tekst (data | treść + przycisk), żeby kolumna tytułu nie była ściskana */
@media (min-width:641px) and (max-width:800px),(min-width:901px) and (max-width:1180px){
  .cp-event{grid-template-columns:140px minmax(0,1fr)}
  .cp-event__when{grid-row:1 / span 2}
  .cp-event__cta{grid-column:2;justify-self:start;min-width:236px}
}
@media (max-width:640px){
  .cp-event{grid-template-columns:1fr;gap:10px;padding:14px 16px}
  .cp-event__cta{width:100%;margin-top:4px}
  .cp-venues__list{grid-template-columns:1fr}
  .cp-venue{padding:14px 16px}
  .cp-event__when{flex-direction:row;align-items:baseline;gap:10px}
  .cp-event__title{font-size:16px}
}
/* filtr dat i kolejność (assets/js/events.js): zwarty pasek nad listą — Od, Do, „Wyczyść daty”, Kolejność i licznik w jednym rzędzie
   (gdy brakuje miejsca, zawija się do dwóch); bez skryptu kontener zostaje `hidden` */
.cp-events-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-bottom:28px;padding:12px 20px;border:1px solid var(--cp-line-2);background:var(--cp-panel)}
.cp-events-filter[hidden],.cp-event[hidden],.cp-events[hidden],[data-events][hidden],[data-events-none][hidden]{display:none}
.cp-events-filter__group{display:flex;align-items:center;gap:12px}
.cp-events-filter__label{font-family:var(--cp-font-head);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-mute)}
.cp-events-filter__chips{display:flex;flex-wrap:wrap;gap:8px}
.cp-events-filter .cp-chip{min-height:40px;padding:6px 14px;font-size:12px;cursor:pointer;background:transparent}
.cp-events-filter .cp-chip[aria-pressed="true"]{background:var(--cp-accent)}
.cp-events-filter__dates{display:flex;align-items:center;gap:8px}
.cp-events-filter__date{display:flex;align-items:center;gap:8px;font-family:var(--cp-font-head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-text-2)}
.cp-events-filter__date input{min-height:40px;padding:6px 10px;border:1px solid var(--cp-line-input);background:var(--cp-bg);color:var(--cp-text-hi);font:inherit;font-size:14px;letter-spacing:.02em;color-scheme:dark}
.cp-events-filter__date input:hover{border-color:var(--cp-accent-line)}
/* „Wyczyść daty”: mały przycisk tekstowy; bez ustawionej daty niewidoczny (visibility — zostaje w układzie, panel nie zmienia wysokości, a Tab go pomija) */
.cp-events-filter__clear{min-height:40px;padding:4px 6px;border:0;background:none;font-family:var(--cp-font-head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--cp-accent);text-decoration:underline;text-decoration-color:var(--cp-accent-line);text-underline-offset:4px;cursor:pointer}
.cp-events-filter__clear:hover{color:var(--cp-accent-hover);text-decoration-color:currentColor}
.cp-events-filter__clear:not(.is-on){visibility:hidden}
.cp-events-filter__count{margin:0 0 0 auto;font-family:var(--cp-font-head);font-size:13px;letter-spacing:.08em;white-space:nowrap;color:var(--cp-text-mute)}
@media (max-width:640px){
  /* telefon: zwarty panel — „Od”/„Do” obok siebie, pod nimi (stałe miejsce) „Wyczyść daty”, kolejność jako dwa równe przyciski */
  .cp-events-filter{gap:8px;padding:10px 16px;margin-bottom:14px}
  .cp-events-filter__group{flex-direction:column;align-items:stretch;width:100%;gap:6px}
  .cp-events-filter .cp-chip{min-height:44px}
  .cp-events-filter__chips--order{display:grid;grid-template-columns:1fr 1fr}
  .cp-events-filter__chips--order .cp-chip{min-width:0;padding-inline:4px;font-size:11px;letter-spacing:.04em;white-space:nowrap;text-align:center;justify-content:center}
  .cp-events-filter__dates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cp-events-filter__date{flex-direction:row;align-items:center;gap:8px;min-width:0}
  .cp-events-filter__date{font-size:11px}
  .cp-events-filter__date input{flex:1;min-height:44px;min-width:0;padding:6px 6px;font-size:16px;letter-spacing:0}
  /* „Wyczyść daty” stoi w rzędzie etykiety „Termin” (prawy górny róg grupy); w znaczniku zostaje po polach, więc kolejność tabulacji to Od, Do, Wyczyść */
  .cp-events-filter__group:has(>.cp-events-filter__clear){display:grid;grid-template-columns:1fr auto;grid-template-areas:"label clear" "dates dates";align-items:center}
  .cp-events-filter__group:has(>.cp-events-filter__clear)>.cp-events-filter__label{grid-area:label}
  .cp-events-filter__group:has(>.cp-events-filter__clear)>.cp-events-filter__dates{grid-area:dates}
  .cp-events-filter__clear{grid-area:clear;margin-block:-8px;min-height:44px;padding-inline:0 2px}
  .cp-events-filter__count{flex-basis:100%;margin:0;padding-top:8px;border-top:1px solid var(--cp-line-2)}
}
@media (max-width:360px){
  /* 320 px: dwa równe przyciski kolejności zawijają etykiety zamiast je ucinać, pola dat jedno pod drugim */
  .cp-events-filter__chips--order .cp-chip{white-space:normal;line-height:1.2;padding-block:4px}
  .cp-events-filter__dates{grid-template-columns:1fr}
}
/* ≤ 900 px: zamiast lewej kolumny pasek nad listą z równymi przełącznikami w jednym rzędzie — „Miasto”, „Organizator”
   (nagłówki <details>) i „Termin” (przycisk); tyle kolumn, ile przełączników. Z JS pasek przykleja się pod nagłówkiem (jak
   pasek filtrów katalogu), a panele otwierają się pod nim jako nakładka: lista pod spodem nie zmienia położenia. Bez JS: listy
   miast i organizatorów rozwinięte jedna pod drugą w układzie strony, pasek statyczny. */
@media (max-width:900px){
  .cp-evbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-bottom:14px}
  .no-js .cp-evbar{grid-auto-flow:row}
  /* z JS listy wyboru są zwiniętymi przełącznikami — nie ma czego pomijać */
  .js .cp-evbar__skip{display:none}
  .cp-evside{display:contents}
  .js .cp-evbar{position:sticky;top:var(--cp-sticky-top);z-index:10;margin:0 calc(-1*var(--cp-gutter)) 14px;padding:10px var(--cp-gutter);border-bottom:1px solid var(--cp-line-2);background:rgba(8,9,10,.94);backdrop-filter:blur(8px)}
  /* kotwica listy i fokus z klawiatury w treści lądują pod przyklejonym paskiem (69 px), nie za nim. Margines na celach, a nie
     scroll-padding strony — inaczej fokus na samym pasku przewijałby stronę. */
  .js .cp-evlayout__main :is(a,button,[id]){scroll-margin-top:77px}
  .cp-citypick{border:0;background:none}
  .cp-evbar__toggle{display:block;width:100%;min-height:48px;padding:6px 12px;border:1px solid var(--cp-line-3);background:var(--cp-panel);font-family:var(--cp-font-head);text-align:left;cursor:pointer}
  .cp-evbar__toggle:hover,.cp-evbar__toggle[aria-expanded="true"],.cp-citypick__box[open]>.cp-evbar__toggle{border-color:var(--cp-accent-line)}
  .cp-evbar__in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}
  .cp-evbar__in::after{content:"";grid-column:2;grid-row:1 / span 2;width:7px;height:7px;margin:0 2px 3px;border:solid var(--cp-text-mute);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
  .cp-evbar__toggle[aria-expanded="true"] .cp-evbar__in::after,.cp-citypick__box[open] .cp-evbar__in::after{margin-bottom:-4px;border-color:var(--cp-accent);transform:rotate(225deg)}
  .cp-evbar__label{grid-column:1;font-size:10px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text-mute)}
  .cp-evbar__value{grid-column:1;display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;line-height:1.35;letter-spacing:.02em;text-transform:none}
  .cp-evbar__value strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cp-evbar__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--cp-accent)}
  .cp-citypick__search{padding:12px var(--cp-gutter) 8px}
  .cp-citypick__search input{min-height:44px;font-size:16px}
  .cp-citypick__list{max-height:60vh}
  .cp-citypick__list a{min-height:44px;padding:8px var(--cp-gutter)}
  .cp-citypick__none{padding:8px var(--cp-gutter) 16px}
  .no-js .cp-citypick__panel{margin-top:8px;border:1px solid var(--cp-line-2);background:var(--cp-panel)}
  .js :is(.cp-citypick__panel,.cp-events-filter){position:absolute;left:0;right:0;top:100%;z-index:1;margin:0;border:solid var(--cp-line-2);border-width:1px 0;background:var(--cp-panel);box-shadow:0 16px 32px rgba(0,0,0,.6)}
  /* --cp-evbar-room: miejsce pod paskiem do dołu ekranu, ustawiane przez events.js przy otwarciu panelu */
  .js .cp-citypick__panel{display:flex;flex-direction:column;max-height:min(60vh,var(--cp-evbar-room,60vh))}
  .js .cp-citypick__list{flex:1 1 auto;min-height:0;max-height:none}
  .js .cp-events-filter{max-height:var(--cp-evbar-room,70vh);padding-inline:var(--cp-gutter);overflow-y:auto;overscroll-behavior:contain}
  .js .cp-events-filter:not(.is-open){display:none}
  .cp-citypick__mine{height:auto;min-height:44px;margin:0 0 4px;padding:0;border:0;background:none;box-shadow:none}
  .cp-citypick__mine a{margin-right:0;line-height:44px}
}
/* ≤ 520 px (trzy przełączniki po ~90–150 px): etykieta „Org” zamiast „Organizator”, strzałka w rzędzie etykiety, a wartość na
   całą szerokość przełącznika — domyślne „Wszystkie” / „Wszyscy” mieszczą się bez ucinania także przy 320 px; dłuższe nazwy
   kończą się wielokropkiem (pełna wartość zostaje w nazwie dostępnej) */
@media (max-width:520px){
  .cp-evbar__toggle{padding:6px 8px}
  .cp-evbar__in{column-gap:4px}
  .cp-evbar__in::after{grid-row:1;align-self:center;margin:0 1px 2px}
  .cp-evbar__value{grid-column:1 / -1}
  .cp-evbar__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.12em}
  .cp-evbar__long{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cp-evbar__short{display:inline}
}