/* TECH-042 iter 32 — Filter-sheet bottom modal (sdílený mezi landing / a kempy /kempy/).
   Extracted z atlas-mobile-sheet.css ř. 481–600 jako single source of truth — landing
   i kempy mobile UX používá identický modal pro ⚙ Filtry click. Pravidla jsou generic
   (semantic .filter-sheet* + .filter-sheet-backdrop selektory, žádné landing-specific
   binding na .mobile-sheet / .sticky-controls), takže reuse out-of-box.

   JS chování: `atlas-bottom-sheet.js` (IIFE, isMobile guard) move-uje `.filter-bar`
   z původního containeru (.sticky-controls landing / kempy) dovnitř `.filter-sheet__body`
   při open, vrací zpět na close (DOM move zachová event listenery + select state).
   Focus trap, ESC handler, backdrop click, body scroll lock — vše JS-side.

   Body scroll lock NENÍ v CSS — řeší JS `document.body.style.overflow = 'hidden'`.
   Z-index hierarchy: filter-sheet 100 > backdrop 99 (nad main-sheet 20 i top-bar 30).
   Transition: Apple spring curve cubic-bezier(0.32, 0.72, 0, 1) — 250ms sheet, 200ms
   backdrop fade. Reduced-motion respekt řeší atlas-mobile-sheet.css globální blok. */

@media (max-width: 768px) {
  /* ============================================================
     Filter sheet modal — separátní overlay (otevíraný z ⚙ buttonu top baru).
     z-index 100 = nad main sheet (z-index 20) i top bar (z-index 30).
     ============================================================ */
  .filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 85vh;
    height: 85dvh;
    background: var(--color-bg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    /* Default off-screen — open state překlopí na 0. */
    transform: translateY(100%);
    transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(15, 42, 61, 0.16);
  }
  .filter-sheet[data-open="true"] {
    transform: translateY(0);
  }
  /* Bez data-open attribut zůstává hidden — `hidden` atribut v markup zajistí
     no-JS scenario (žádný visible empty modal pokud JS nedoběhne). */

  .filter-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }
  .filter-sheet__header h2 {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--color-fg);
  }
  .filter-sheet__close {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
  }
  .filter-sheet__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  .filter-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-md);
  }
  /* Filter bar uvnitř modal: column layout (větší tap targets, jasná hierarchie). */
  .filter-sheet__body .filter-bar {
    display: flex !important;  /* override .sticky-controls .filter-bar { display: none } */
    flex-direction: column;
    gap: var(--space-md);
    padding: 0;
    background: transparent;
    border: none;
  }
  .filter-sheet__body .filter-bar__chip {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .filter-sheet__footer {
    padding: var(--space-md);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
  }
  .filter-sheet__clear {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;
    background: var(--color-bg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
  }
  .filter-sheet__clear:hover,
  .filter-sheet__clear:focus-visible {
    background: var(--color-primary);
    color: var(--color-white);
  }
  .filter-sheet__clear:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* Backdrop semi-transparent overlay (clickem zavře modal). */
  .filter-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 42, 61, 0.4);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms;
  }
  .filter-sheet-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }
}