/* TECH-042 — Mobile bottom-sheet redesign Atlas landing page.
 *
 * SCOPE: VŠE uvnitř @media (max-width: 768px). Desktop (>768px) BEZE ZMĚN.
 *
 * Layout switch:
 *   - Desktop: atlas-grid 2:1 (map + ranking sidebar) — beze změn z atlas-landing.css
 *   - Mobile: mapa fixed 100vh full-screen + draggable bottom sheet 3 snap-pointy
 *     (peek/mid/full) + filter sheet modal otvíraný z top bar.
 *
 * No-JS fallback:
 *   .mobile-sheet[hidden] zůstává hidden bez JS → mobile uživatel vidí starý layout
 *   (mapa 50vh + ranking pod ní), atlas-landing.css L611 `@media (max-width: 600px)`
 *   ho už řeší. Klíčová záruka: žádný styling pod `.mobile-sheet[hidden=""]` selektor.
 *
 * Brand tokens (var(--color-*), var(--space-*), var(--radius-*)) z atlas-base.css.
 */

@media (max-width: 768px) {

  /* ============================================================
     Top bar — sticky overlay nad fixed mapou. Background neprůhledný (mapa pod ním
     by jinak svítila skrz). safe-area-inset-top kvůli iOS notch.
     ============================================================ */
  main {
    /* TECH-031 v5: landing sticky-controls je position: sticky (ne fixed) →
       banner v normal flow PŘED sticky-controls je viditelný nahoře, sticky následuje
       (parita s kempy_index.html mobile, kde sticky-controls je už sticky).
       Founderův requirement: banner umístění identické na obou entry pages. */
    padding: 0;
    max-width: 100vw;
  }

  .sticky-controls {
    /* TECH-031 v5: position: fixed → sticky (parita s kempy_index.html.j2). Banner
       v DOM před sticky-controls → na page top, sticky následuje. Při scroll-down
       banner odscrolluje, sticky-controls sticks to top:0 (z-index 30 nad mapou). */
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;  /* nad mapou (z-index 1) i bottom-sheet (z-index 20) */
    background: var(--color-bg);
    /* TECH-042 iter 17 (founder Image #14 vs #15): vertical padding zvětšen aby
       header dýchal jako /kempy/ hero--compact. env(safe-area-inset-top) řeší iOS
       notch — calc s base padding-top zachová minimum spacing aj. bez notch. */
    padding-top: max(var(--space-lg), calc(env(safe-area-inset-top) + var(--space-md)));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-bottom: var(--space-md);
    margin: 0;
    box-shadow: 0 2px 8px rgba(15, 42, 61, 0.08);
  }

  /* Hero (kompaktní) skryt na mobile — title + count + tagline se přesunují do
     `.top-bar__mobile-header` (BUG #6 fix iter 2 — hlavičková parita s /kempy/). */
  .hero,
  .hero--compact {
    display: none;
  }

  /* BUG #6 fix iter 2: ≡ Seznam button v top baru permanently visible na mobile.
     Founder vyžaduje explicit alternativní cestu k seznamu vždy dostupnou (původně
     byl jen na konci full sheet body, což znamená 3 taps cesta na seznam: open sheet
     → swipe full → tap link). Nyní 1 tap přímo z top baru. */
  .top-bar .toggle-link {
    display: inline-flex;
  }

  /* BUG #6 iter 2: mobile-only header block + 2-row top-bar layout.
     Layout (CSS grid 2 columns × 2+ rows, semantic order):
       row 1: header (title + count + tagline) full-width                   [grid-area: header]
       row 2: search (full-width) ............................              [grid-area: search]
       row 3: ⚙ Filtry button (1fr) ........ ≡ Seznam button (1fr)         [grid-area: filter / list]
     Buttons na samostatném řádku pod searchem aby search měl plnou šířku
     (380 px viewport: bez splitu by search měl jen ~200 px = unusable). */
  .top-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "search search"
      "filter list";
    align-items: center;
    gap: var(--space-xs);
    row-gap: var(--space-sm);
  }
  /* TECH-042 iter 17 (founder Image #14 vs #15): IDENTICKÝ styling s /kempy/
     mobile hero--compact (atlas-base.css .hero-title, atlas-landing.css .hero-row
     a .hero-count). Title fs-lg per mobile breakpoint atlas-base.css L692, count
     pill padding xs+md per .hero-count, tagline jako .hero-sub (fs-md regular
     muted). Marginy mezi řádky paritní s hero-row + hero-sub spacing. */
  .top-bar__mobile-header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    /* TECH-031 v7 (Variant C-i, founder feedback 2026-05-21): mobile compactness —
       gap mezi tagline-bottom a search-top reduced z --space-sm (~8 px) →
       --space-xs (~4 px). Combined s tagline shrink + zero margins = ~17–20 px
       total vertical gain v top-bar zone, mapa získá víc above-the-fold prostoru. */
    margin-bottom: var(--space-xs);
  }
  .top-bar__title-row {
    display: flex;
    /* TECH-031 v7 (Variant C-i, founder 2026-05-21): flex-start → flex-end.
       Pill button má min-height 44 px (WCAG 2.5.5 touch target) + hint pod ním
       → meta wrapper ~62 px tall vs title ~27 px. flex-start vytvořilo 35 px
       dead space pod title v title-row → effective gap title↔tagline = ~39 px
       (vs target ≤4 px). flex-end aligne title bottom s meta bottom (= title-row
       bottom) → tagline navazuje bezprostředně, gap = jen line-height half-leading. */
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  /* TECH-045 iter 3.11 (founder image #13, 2026-05-20) — title vlevo, count
     VPRAVO, hint wraps pod count align-right. Parity s atlas-detail.css.
     - .top-bar__title: flex: 1 1 auto — grow-uje a pushne count vpravo
     - .top-bar__count: flex-shrink: 0 + margin-left: auto — fix-size, vpravo
     - .top-bar__hint: margin-left: auto + text-align: right — wraps na další
       řádek, align-right */
  .top-bar__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-fg);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    /* TECH-045 iter 3.14 fix-loop #1 BLOCKER #1: flex 1 1 auto → 1 1 0 + min-width 0.
       1 1 auto držel title na intrinsic width (full text) → grew na 100% parent
       width → meta wrapper wrappnul vlevo (flex-start) místo cíleného right stacku.
       1 1 0 + min-width:0 dovolí title shrink dle dostupného prostoru a nechá
       meta wrapper sedět vpravo na stejném řádku. */
    flex: 1 1 0;
    min-width: 0;
  }
  /* Count pill — paritní s .hero-count (atlas-landing.css L25): padding xs+md,
     fs-sm, font-weight 700, radius-pill.
     TECH-031 v7 (Variant C-i): refactor ze `<span>` na `<button>` na index +
     kempy_index entry pages (modifier `.top-bar__count--compliance`). Base styly
     zachovány — kompat s případnými budoucími `<span>` consumery. */
  .top-bar__count {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: auto;
  }
  /* TECH-031 v7 (Variant C-i): button modifier pro compliance pill na mobile.
     Button reset + flex layout pro 3 children: __icon (✓) + __value + __chevron (▾). */
  .top-bar__count--compliance {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    /* WCAG 2.5.5 touch target — explicit min-height pro mobile. */
    min-height: 2.75rem;
    transition: background-color 150ms ease;
  }
  /* TECH-031 v11 fix (founder feedback 2026-05-22 Image #10): pill internal
     vertical alignment sync — explicit line-height: 1 na value aby `align-items:
     center` na pillu vycentroval midpointy správně. */
  .top-bar__count__icon {
    font-size: var(--fs-base);
    line-height: 1;
  }
  .top-bar__count__value {
    line-height: 1;
  }
  .top-bar__count__chevron {
    font-size: 0.75em;
    line-height: 1;
    margin-left: var(--space-2xs);
    transition: transform 200ms ease;
  }
  .top-bar__count--compliance:hover {
    background: var(--color-primary-hover, #163a55);
  }
  .top-bar__count--compliance:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  .top-bar__count--compliance[aria-expanded="true"] .top-bar__count__chevron {
    transform: rotate(180deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .top-bar__count--compliance,
    .top-bar__count__chevron {
      transition: none;
    }
  }
  .top-bar__hint {
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    font-weight: 400;
    /* TECH-045 iter 3.14: hint je nyní child `.top-bar__meta` (stacked column
       wrapper, atlas-base.css). Force-wrap přes flex-basis 100% už není potřeba —
       column direction parenta sám stackne hint pod count. text-align: right
       zachován jako fallback (a aria-friendly RTL safe). */
    text-align: right;
  }
  /* Tagline = .hero-sub clone (atlas-base.css L428).
     TECH-031 v7 (Variant C-i, founder feedback 2026-05-21): mobile compactness —
     font-size fs-md (20 px) → fs-sm (~14.4 px); line-height lh-relaxed (~1.7) →
     lh-base (1.6). Margin-top 2xs → 0 (gap title↔tagline now from line-height only,
     ≤4 px visual). Spec sekce 3.2 tabulka. */
  .top-bar__tagline {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    font-weight: 400;
    line-height: var(--lh-base);
  }
  .top-bar__search {
    grid-area: search;
    min-width: 0;
  }
  .top-bar .filter-toggle {
    grid-area: filter;
    width: 100%;
    justify-content: center;
    min-height: 44px;
    min-width: 0;
  }
  .top-bar .toggle-link {
    grid-area: list;
    width: 100%;
    justify-content: center;
    min-height: 44px;
    min-width: 0;  /* override .toggle-link { min-width: 110px } z landing.css */
    padding: var(--space-xs) var(--space-sm);
  }

  /* Filter toggle button na mobile vždy visible (žádné auto-collapse přes scroll
     — celá mapa je fixed, scroll už nedává smysl). Iter 2.11 sticky scroll logiku
     vypneme níže (.sticky-controls[data-scrolled] reset). */
  .filter-toggle {
    display: inline-flex;
    gap: var(--space-xs);
  }
  .filter-toggle__glyph {
    font-size: 1.15em;
    line-height: 1;
  }
  /* ▾ chevron na mobile nedává smysl (button neexpanduje inline, otvírá modal) — skryt. */
  .filter-toggle__icon {
    display: none;
  }

  /* Vypnout TECH-040 iter 2.11 auto-collapse — celá mapa je fixed na mobile,
     filter-bar žije v separátním filter-sheet modalu, ne uvnitř .sticky-controls. */
  .sticky-controls[data-scrolled="true"] .filter-toggle {
    display: inline-flex;  /* same as default */
  }
  /* CRITICAL: filter-bar uvnitř .sticky-controls je na mobile hidden (default + scrolled).
     Otevírá se výhradně přes filter-sheet modal, kam ji JS přesouvá. */
  .sticky-controls .filter-bar {
    display: none;
  }

  /* ============================================================
     Mapa — full-screen fixed (100vh / 100dvh fallback pro iOS Safari address bar).
     atlas-grid rozbije grid (display: block), #bubble-map zabere celý viewport.
     ============================================================ */
  .atlas-grid {
    display: block;
    margin: 0;
    gap: 0;
  }
  .atlas-grid__map {
    display: block;
    gap: 0;
  }

  #bubble-map {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;  /* iOS Safari 15.4+ dynamic viewport height — řeší address bar resize */
    width: 100vw;
    min-height: 0;
    border: none;
    border-radius: 0;
    z-index: 1;
  }

  /* Desktop ranking sidebar (.ranking--desktop) skrytý na mobile — duplicitní render
     uvnitř .mobile-sheet__body se použije. JS atlas-filters.js renderuje do obou
     OL listů (matched přes data-manifest-src), takže oba mají aktuální data;
     CSS hide-show zajistí jen jeden visible najednou. */
  .ranking--desktop {
    display: none;
  }

  /* Iter 5: top species + identify-score primary instance skryta na mobile
     (mapa je position: fixed; mobile-sheet body --mobile verze ji nahradí ve full).
     Iter 21 (founder 22:15): .page-footer--main NEzařazen do hidden — místo toho
     udělán z něj persistent bottom strip s NLOD attribution, visible vždy. */
  .top-species--main,
  .identify-score--main {
    display: none;
  }

  /* TECH-042 iter 21: landing-specific overrides — sheet + bubble-map musí
     být NAD persistent footer bar (definovaný v atlas-base.css @media ≤768px,
     pravidlo platí pro VŠECHNY mobile stránky landing/kempy/detail). */
  .mobile-sheet {
    bottom: 28px !important;
  }
  #bubble-map {
    bottom: 28px !important;
    height: auto !important;
  }

  /* ============================================================
     Bottom sheet — draggable 3-snap-point overlay nad fixed mapou.
     Default `hidden` v markup → JS odebere po init. Bez JS sheet zůstává hidden
     a uživatel vidí jen mapu (žádný fallback content na mobile bez JS — degraded
     ale použitelné, mapa je primary use case).
     ============================================================ */
  .mobile-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* 90vh full = horní okraj sheet je na 10% výšky viewportu. */
    height: 90vh;
    height: 90dvh;
    background: var(--color-bg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -4px 16px rgba(15, 42, 61, 0.12);
    z-index: 20;
    /* BUG #2 fix iter 2: touch-action: auto na containeru — drag handlery jsou na
       child elementech (.mobile-sheet__handle + .mobile-sheet__summary) s vlastním
       touch-action: none. Předtím parent `touch-action: none` blokoval native scroll
       uvnitř .mobile-sheet__body v mid/full snap (founder nemohl swipnout ranking listu).
       Pointer Events API + setPointerCapture funguje s touch-action: auto. */
    touch-action: auto;
    /* cubic-bezier(0.32, 0.72, 0, 1) — Apple-style spring-out, decel curve. */
    transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
    /* --sheet-translate řízen JS-em + výchozí hodnoty per snap (níže).
       JS dynamic mode (drag) nastaví --sheet-translate inline + disable transition. */
    transform: translateY(var(--sheet-translate, calc(100% - 120px)));
    will-change: transform;
    /* iOS Safari home indicator — extra padding aby content nepřekrýval indikátor. */
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
  }

  /* Snap-pointy přes data-snap atribut. Sheet je position: fixed; bottom: 0;
     height: 90vh — baseline (bez transform) má sheet bottom na spodku viewportu,
     top na 10vh. Pozitivní translateY posune sheet DOLŮ (mimo viewport).
     Hodnoty jsou RELATIVNÍ k sheet height (100% = 90vh):
       peek → translate = 100% − 120px → vidět jen spodních 120px (handle + summary)
       mid  → translate = 100% − 50vh  → vidět spodních 50vh (handle + summary + ranking)
       full → translate = 0            → sheet plně viditelný */
  .mobile-sheet[data-snap="peek"] { --sheet-translate: calc(100% - 120px); }
  .mobile-sheet[data-snap="mid"]  { --sheet-translate: calc(100% - 50vh); }
  .mobile-sheet[data-snap="mid"]  { --sheet-translate: calc(100% - 50dvh); }
  .mobile-sheet[data-snap="full"] { --sheet-translate: 0; }

  /* JS data-dragging="true" → vypne CSS transition, transform se updatuje per pointermove. */
  .mobile-sheet[data-dragging="true"] {
    transition: none;
  }

  /* ============================================================
     Drag handle — 44×44 tap target (WCAG 2.1 AA), vizuální pill 40×4px přes ::before.
     ============================================================ */
  .mobile-sheet__handle {
    /* Reset button styles (vanilla button vyzobí default browser styling). */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;

    /* Tap target + relative pro ::before positioning. */
    display: block;
    width: 100%;
    min-height: 44px;
    position: relative;
    cursor: grab;
    /* touch-action: none — drag gesto nesmí propagovat na Leaflet pan ani body scroll. */
    touch-action: none;
    flex-shrink: 0;
  }
  .mobile-sheet__handle:active {
    cursor: grabbing;
  }
  /* Visual pill 40×4px centered uvnitř 44px handle (zbytek je transparentní tap area). */
  .mobile-sheet__handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 4px;
    background: var(--color-fg-muted);
    opacity: 0.45;
    border-radius: var(--radius-pill);
    transition: opacity 0.15s;
  }
  .mobile-sheet__handle:hover::before,
  .mobile-sheet__handle:focus-visible::before {
    opacity: 0.8;
  }
  .mobile-sheet__handle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px;
    border-radius: var(--radius-md);
  }

  /* ============================================================
     Summary řádek („2 299 kempů ↑ vytáhni") — visible v peek state,
     skryt v mid/full (header taková informace neopakuje).
     ============================================================ */
  .mobile-sheet__summary {
    text-align: center;
    padding: 0 var(--space-md) var(--space-sm);
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    font-weight: 500;
    flex-shrink: 0;
    /* BUG #2 fix iter 2: summary je drag target (atlas-bottom-sheet.js attachPointerDrag),
       takže potřebuje touch-action: none (zabrání Leaflet pan + body scroll race during drag). */
    touch-action: none;
    cursor: grab;
  }
  .mobile-sheet__summary:active {
    cursor: grabbing;
  }
  .mobile-sheet[data-snap="mid"] .mobile-sheet__summary,
  .mobile-sheet[data-snap="full"] .mobile-sheet__summary {
    /* V mid/full uživatel už vidí ranking → summary by byl redundance. */
    display: none;
  }

  /* ============================================================
     Close button (×) — visible JEN ve full state, pozice top-right.
     V peek/mid je atribut [hidden] (JS toggle), CSS jen styling.
     ============================================================ */
  .mobile-sheet__close {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: max(var(--space-xs), env(safe-area-inset-top));
    right: var(--space-sm);
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-fg);
    border-radius: var(--radius-pill);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;  /* nad body content */
  }
  .mobile-sheet__close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  /* Full state: close button visible (JS odebere `hidden` atribut). */
  .mobile-sheet[data-snap="full"] .mobile-sheet__close[hidden] {
    /* CSS default `hidden` attribute = display: none — full sheet ho JS-em odebere */
  }

  /* ============================================================
     Body — scrollable content. V peek state hidden (jen summary visible),
     v mid limited (jen ranking), v full all (ranking + species + identify + footer).
     ============================================================ */
  .mobile-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    /* BUG #2 fix iter 2: iOS Safari momentum scrolling. Bez něj je swipe v ranking
       listu krátký, končí okamžitě jak prst opustí screen — neutečitelný scroll
       experience na 50-card seznamu. -webkit-overflow-scrolling: touch zapne
       elastic / inertial scroll (iOS native list scroll feel). */
    -webkit-overflow-scrolling: touch;
    /* overscroll-behavior: contain — když user scrollne na konec body, document
       pod tím se nehne (iOS Safari rubber-band defense). */
    overscroll-behavior: contain;
    /* touch-action: auto — drag uvnitř body je scroll, ne sheet drag. */
    touch-action: auto;
    /* TECH-042 iter 12 (founder Image #12): zvýšeno padding-bottom 256px → 360px
       (8× --space-xl 32 = 256 → 12× = 384 minus některá rozumná korekce). Founder
       i po iter 11 vidí poslední card oříznutý protože card s wrapped title má
       ~140px height a fixed sheet body content area končí dříve než scroll-past.
       360px extra room pokrývá double-line card titles + iOS home indicator +
       scroll-bounce + end-of-list visual marker (ranking-card--end). */
    padding: 0 var(--space-md) calc(var(--space-xl) * 12 + env(safe-area-inset-bottom));
  }

  /* Peek state — body skrytý, jen summary řádek visible. */
  .mobile-sheet[data-snap="peek"] .mobile-sheet__body {
    display: none;
  }

  /* TECH-042 iter 21 (founder 2026-05-17 22:15): „na kazde mobilni strance na
     stejnem miste dole". Leaflet attribution custom positioning REVERT — zpět
     na default. Persistent attribution teď žije v `.page-footer--main` jako
     fixed bottom bar (visible na všech mobile pages: landing, /kempy/, camp
     detail). Bottom sheet má padding-bottom = footer height aby ne-překrývalo. */

  /* Mid state — ranking visible, ostatní sekce skryté (uživatel si vytáhne sheet full pro detail). */
  .mobile-sheet[data-snap="mid"] .top-species,
  .mobile-sheet[data-snap="mid"] .identify-score,
  .mobile-sheet[data-snap="mid"] .mobile-sheet__list-link,
  .mobile-sheet[data-snap="mid"] footer {
    display: none;
  }

  /* ============================================================
     Mobile ranking styling — kompaktnější varianta než desktop sidebar.
     ============================================================ */
  .ranking--mobile {
    padding: 0;
    border: none;
    background: transparent;
    margin-bottom: var(--space-md);
  }
  .ranking--mobile .ranking__title {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
    font-size: var(--fs-md);
  }
  .ranking--mobile .ranking__list {
    /* Mobile: žádné max-height — content scrolluje skrz mobile-sheet__body. */
    max-height: none;
    overflow: visible;
  }

  /* Highlighted ranking card (marker click sync) — coral accent ring. */
  .ranking-card--highlighted {
    background: var(--color-bg-soft);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(231, 111, 81, 0.25);
  }

  /* ≡ Seznam link na konci full sheet body. */
  .mobile-sheet__list-link {
    margin: var(--space-lg) 0 var(--space-md);
    text-align: center;
  }
  .mobile-sheet__list-link .toggle-link {
    display: inline-flex;  /* override toggle-link top-bar hide rule výše */
    width: auto;
  }

  /* Filter-sheet rules extrahovány do atlas-filter-sheet.css (iter 32 — sdílený
     pro landing / + kempy /kempy/ mobile). Linkovat v <head> obou templates. */

  /* ============================================================
     Reduced motion — respektovat prefers-reduced-motion (WCAG 2.3.3 + a11y).
     Instant snap, žádné transitions.
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    .mobile-sheet,
    .filter-sheet,
    .filter-sheet-backdrop {
      transition: none;
    }
    .mobile-sheet__handle::before {
      transition: none;
    }
  }
}

/* ============================================================
   Desktop (≥769px) — mobile-sheet + filter-sheet SKRYTÉ.
   Desktop renderuje atlas-grid 2:1 (mapa + ranking) per atlas-landing.css.
   BUG #6 iter 2: skryt také top-bar mobile-header block (desktop má hero--compact
   se stejnou title + count + tagline informací).
   ============================================================ */
@media (min-width: 769px) {
  .mobile-sheet,
  .filter-sheet,
  .filter-sheet-backdrop,
  .top-bar__mobile-header {
    display: none !important;
  }
}

/* TECH-045 iter 3.14 fix-loop #1 BLOCKER #2 (2026-05-20): per-page 420px override.
   Pro úzké viewporty (<420px — iPhone SE 1. gen 320px, Galaxy Fold cover 280px)
   redukce snapshot date font na --fs-2xs (~10–11 px), aby se nepřekrýval
   s taglinem. Musí být v atlas-mobile-sheet.css (ne atlas-base.css), jinak by
   ho přebil zdejší `@media (max-width: 768px) { .top-bar__hint { font-size:
   var(--fs-sm) } }` (cascade order — base ruleset, kde 420px žil dřív, je
   loaded před mobile-sheet, ale stejná specificity → wins poslední). */
@media (max-width: 420px) {
  .top-bar__hint {
    font-size: var(--fs-2xs);
  }
}

/* ============================================================
   TECH-031 v7 (Variant C-i) — Compliance popover transformed na bottom-sheet
   na mobile (≤768px). Override base `.compliance-popover` (atlas-base.css,
   position: fixed, JS-anchored desktop) → fixed bottom-sheet modal stretching
   width screenu. Parity s `.filter-sheet` patterns (atlas-filter-sheet.css).

   Spec: docs/design/2026-05-21-compliance-banner-v7-variant-c-refined.md (sekce 2.7).
   ============================================================ */
@media (max-width: 768px) {
  .compliance-popover {
    /* Override desktop position/size — full-width bottom sheet stretching až k bottom */
    top: auto !important;  /* JS inline style override pro mobile */
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    min-width: 0;
    max-width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 16px rgba(15, 42, 61, 0.15);
    padding: var(--space-md);
    z-index: 50;  /* parity s .filter-sheet (atlas-filter-sheet.css) */
    /* Slide-up from bottom animation override */
    animation: compliance-sheet-slide-up 200ms ease-out;
  }

  /* Backdrop visible na mobile — dimms content + tap-to-close target */
  .compliance-sheet-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 45;  /* mezi sticky-controls (30) a sheet (50) */
    /* Fade-in */
    animation: compliance-backdrop-fade 200ms ease-out;
  }
  .compliance-sheet-backdrop[hidden] {
    display: none;
  }

  @keyframes compliance-sheet-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  @keyframes compliance-backdrop-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .compliance-popover,
    .compliance-sheet-backdrop {
      animation: none;
    }
  }
}