/* ============================================================
   HAJLAJTY — features/filters/assets/filters.css
   ------------------------------------------------------------
   Pasek filtra pod headerem (slice filters): pole szukania + chipsbar + reset +
   komunikat pustego wyniku. Wygląd sportowany z designu (.chipsbar/.chips-scroll/
   .chip/.search/.chips-arrow/.filter-pill), na tych samych tokenach co reszta
   motywu. Zależny od hajlajty-layout (po nim w kolejce). Zero stanu w CSS — stan
   nadaje filters.js klasami (.is-active, .is-hidden-by-filter, .is-empty-by-filter).
============================================================ */

/* ---- Pasek: lepki tuż pod topbarem, na tle strony ---- */
.chipsbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 50;
  background: var(--bg);
}
.chipsbar__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
}
/* Pełna szerokość kolumny — jak main na home/archiwum. layout.css zdejmuje
   centrowanie/max-width `.container` TYLKO z main.container i .footer (≥1100px);
   pasek filtra musi iść tak samo, inaczej zostaje w wąskim pasie --container,
   wycentrowany i przesunięty względem pełnoszerokiej listy kart. Padding-inline
   wraca tu ręcznie (tracony razem z centrowaniem .container). */
@media (min-width: 1100px) {
  .chipsbar__inner.container {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--gutter);
  }
  /* Desktop: `.content` ma WŁASNY scroll i zaczyna się pod statycznym topbarem,
     więc pasek przykleja się do top:0 kolumny. top:var(--topbar-h) (z designu,
     gdzie topbar i pasek dzieliły scroll okna) powodował, że gdy [data-filters]
     rośnie o komunikat „brak wyników", sticky zjeżdżał w dół o wysokość topbara. */
  .chipsbar { top: 0; }

  /* `display: contents` — KLUCZOWE dla sticky chipsbara: bez tego blokiem
     zawierającym `.chipsbar` jest krótki wrapper `[data-filters]` (sam pasek), a
     karty (`<main>`) są jego RODZEŃSTWEM → sticky odkleja się od razu po wyjściu
     paska z kadru. Z `display: contents` wrapper znika z layoutu, więc blokiem
     zawierającym staje się wysoki `.content` (kontener scrolla) i pasek klei się
     NAD przewijanymi kartami. Pigułka „Filtrujesz" zostaje w przepływie treści →
     chowa się przy scrollu (zamierzone). Skanery JS (querySelector w [data-filters])
     działają dalej — display:contents nie usuwa elementu z DOM. */
  .content [data-filters] { display: contents; }
}

/* ---- Środkowa kolumna topbara: pole (desktop) / lupa (mobile) ----
   Topbar to grid 1fr 1fr (logo|ikony); z filtrem przełączamy na
   var(--sidebar-w)|1fr|auto, więc pole jest wypośrodkowane w kolumnie treści
   (MAIN), a logo licuje z lewą krawędzią nad sidebarem. */
body.hajlajty-has-search .topbar__inner {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto;
}
.topbar__center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.topbar .filters-search { max-width: 560px; }
.filters-search__open { display: none; } /* lupa: domyślnie ukryta (desktop) */

@media (max-width: 768px) {
  /* Mobile: pole inline znika, lupa otwiera modal; dosuwamy ją do prawych ikon. */
  .topbar__center { margin-left: auto; }
  .topbar .filters-search { display: none; }
  .filters-search__open { display: grid; }
  .chipsbar { display: none; }            /* pasek chipów zastępuje modal */
}

/* ---- Pole szukania (po drużynach) ---- */
.filters-search {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  height: 46px;
  padding-inline: var(--space-sm) 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.filters-search:focus-within { border-color: var(--accent); background: var(--bg-elev); }
.filters-search > svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.filters-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: var(--text);
  /* ≥16px, żeby iOS Safari NIE auto-zoomował strony przy focusie pola (dotyczy
     obu inputów tej klasy: pole w topbarze desktop + pole w modalu mobile).
     15px wyzwalał zoom → poziomy scroll i „przeskok" headera. Nie ruszamy
     viewport meta (zoom zostaje w rękach usera — dostępność). */
  font-size: 16px;
  font-weight: 500;
}
.filters-search__input::placeholder { color: var(--text-faint); }
.filters-search__input:focus { outline: none; }
/* Precz z natywnym krzyżykiem czyszczenia <input type="search"> (biały, nie do
   ostylowania, niespójny z frontem) — mamy własny .filters-search__clear. */
.filters-search__input::-webkit-search-cancel-button,
.filters-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.filters-search__clear {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.filters-search__clear:hover { background: var(--surface-2); color: var(--text); }
.filters-search__clear svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.filters-search__clear[hidden] { display: none; }

/* ---- Chipsbar: strzałki + przewijany pasek chipów ---- */
.chips-wrap { position: relative; }
.chips-scroll {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-block: 2px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.chips-scroll::-webkit-scrollbar { height: 8px; }
.chips-scroll::-webkit-scrollbar-track { background: transparent; }
.chips-scroll::-webkit-scrollbar-thumb { background: transparent; }
.chips-scroll:hover { scrollbar-color: var(--scrollthumb) transparent; }
.chips-scroll:hover::-webkit-scrollbar-thumb { background: var(--scrollthumb); border-radius: var(--r-pill); }
.chips-scroll.is-grabbing { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.chips-scroll.is-grabbing .chip { pointer-events: none; }

/* ---- Chip ---- */
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.chip:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.chip:active { transform: scale(0.96); }
.chip .country-flag { flex: 0 0 auto; height: 18px; width: auto; border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.22); }
.chip__check {
  width: 0; height: 16px; overflow: hidden;
  display: inline-flex; align-items: center; opacity: 0;
  transition: width var(--t-fast), opacity var(--t-fast);
}
.chip__check svg { width: 16px; height: 16px; stroke: var(--accent-ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.is-active .chip__check { width: 16px; opacity: 1; }

/* ---- Strzałki przewijania (desktop) ---- */
.chips-arrow {
  position: absolute;
  top: 41.5%; transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.chips-arrow.is-visible { opacity: 1; pointer-events: auto; }
.chips-arrow:hover { background: var(--surface-2); }
.chips-arrow.prev { left: -30px; }
.chips-arrow.next { right: -40px; }
.chips-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Komunikat pustego wyniku ---- */
.filters-empty {
  margin-block: var(--space-md);
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}
.filters-empty[hidden] { display: none; }
.filters-empty__reset {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- Stany filtra (nadawane przez JS) ---- */
.is-hidden-by-filter { display: none !important; }
/* Pusta-po-filtrze sekcja: .section (home/archiwa) lub jawny [data-filter-section]
   (terminarz: sekcja dnia — bez piggybacku na .section). JS toggluje na closest. */
.section.is-empty-by-filter,
[data-filter-section].is-empty-by-filter { display: none; }
/* Zawężanie chipów drużyn wpisanym tekstem (żeby szukana drużyna była od razu
   widoczna, bez scrollowania paska). */
.chip.is-hidden { display: none; }

/* ---- Mobile: strzałki bezużyteczne przy dotyku/dragu ---- */
@media (max-width: 768px) {
  .chips-arrow { display: none; }
}

/* ============================================================
   Pigułka aktywnego filtra (desktop + mobile) + pełnoekranowy modal (mobile).
   Pigułka zastąpiła przycisk „Wyczyść filtry": pokazuje nazwy filtrowanych drużyn
   i czyści filtr. Markup/wygląd z designu (.filter-pill, .search-overlay).
============================================================ */

/* ---- Pigułka aktywnego filtra ---- */
.filter-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: var(--space-sm) var(--gutter) 0;
  padding: 6px 8px 6px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.filter-pill[hidden] { display: none; }
.filter-pill__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-pill__txt b { color: var(--accent); font-weight: 700; }
.filter-pill__clear {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.filter-pill__clear:hover { background: var(--surface-hover); color: var(--text); }
.filter-pill__clear:active { transform: scale(0.92); }
.filter-pill__clear svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }

/* ---- Pełnoekranowy modal wyszukiwania (mobile) ---- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--gutter) 0;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--t-med), visibility var(--t-med), transform var(--t-med);
}
.search-overlay.is-open { opacity: 1; visibility: visible; transform: none; }
.search-overlay__head { display: flex; align-items: center; gap: var(--space-2xs); min-height: var(--topbar-h); }
.search-overlay__back { flex: 0 0 auto; }
.search-overlay__head .search {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--space-2xs);
  height: 46px;
  padding-inline: var(--space-sm) 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.search-overlay__head .search:focus-within { border-color: var(--accent); background: var(--bg-elev); }
.search-overlay__head .search > svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.search-overlay__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.search-overlay__grid {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  align-content: start;
  padding-block: var(--space-3xs) var(--space-2xs);
}
.search-overlay__grid .chip { width: 100%; height: 48px; justify-content: flex-start; }
.search-overlay__grid .chip__check { margin-left: auto; }
.search-overlay__foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: var(--space-2xs) 0 max(var(--space-xs), env(safe-area-inset-bottom));
  background: var(--bg);
}
.search-overlay__apply {
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: filter var(--t-fast), transform var(--t-fast);
}
.search-overlay__apply:hover { filter: brightness(1.05); }
.search-overlay__apply:active { transform: scale(0.985); }
/* Modal to wyłącznie tryb mobilny — na desktopie nie istnieje. */
@media (min-width: 769px) { .search-overlay { display: none; } }