/* TECH-040 — 4A2 Kempy index page specific styles.
   Importováno PO atlas-base.css + atlas-landing.css (sdílí .hero/.top-bar/.toggle-link).
   Obsahuje:
     - .filter-status (sort + count bar)
     - .camp-grid (responsive list)
     - .camp-grid__item (per-row card s stretched-link + species řádek)
     - .camp-grid__sentinel (infinite scroll loader)

   Sjednocení 2026-05-17: hero + top-bar + toggle-link styly přesunuty
   do atlas-landing.css (sdílené) — landing CSS link injectnut do hlavičky
   kempy templatu. Žádné duplicity, žádný shared base bloat.
*/

/* Sticky controls + filter-toggle pattern přesunut do atlas-base.css (shared landing + kempy index, iter 2.15) */

/* ============================================================
   Filter status — sort + visible count
   (Vyčistit button odstraněn — duplicitní s filter-bar Vyčistit;
   recovery v empty-state zůstává.)
   ============================================================ */
.filter-status {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}
.filter-status strong {
  color: var(--color-fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.filter-status__sort {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-xs);
}

/* ============================================================
   Camp grid — list of camp rows (mobile 1-col, tablet+ 2-col)
   ============================================================ */
.camp-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.camp-grid__loading {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-fg-muted);
  font-style: italic;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
}

/* Per-row camp card — stretched-link pattern: celá karta klikatelná přes
   ::after pseudo-element nad názvem (1 link per card → screen reader čte
   jen jeden interactive element; tab order zachován).
   `position: relative` na item = anchor pro absolutně poziciovaný ::after. */
.camp-grid__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.camp-grid__item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
/* Focus-within: když je tabulkový fokus na vnitřním <a>, zvýrazni celou kartu. */
.camp-grid__item:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.camp-grid__rank {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-primary);
  min-width: 2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.camp-grid__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.camp-grid__name {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-fg);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.camp-grid__name a {
  color: var(--color-fg);
  text-decoration: none;
}
.camp-grid__name a:hover, .camp-grid__name a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}
/* Stretched-link: ::after roztahuje neviditelný click target přes celou kartu.
   Inset 0 + parent position: relative → kompletně překrývá item. */
.camp-grid__name a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.camp-grid__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
}
/* Per-species řádek — top 4 druhy s počty (manifest 1.3.0). */
.camp-grid__species {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  line-height: 1.4;
  /* z-index nad stretched-link ::after — `title` tooltip + budoucí interactive
     elementy (zvýraznění při hoveru jednoho druhu) musí být klikatelné. */
  position: relative;
  z-index: 2;
}
.camp-grid__species strong {
  color: var(--color-fg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.camp-grid__species-more {
  color: var(--color-primary);
  font-weight: 600;
}
/* Heat strip + count — z-index 2 aby title tooltipy fungovaly nad stretched-link. */
.camp-grid__strip {
  min-width: 168px;   /* 12 × 14px cell — labely Bř/Ří/Zá se vejdou na desktop */
  max-width: 220px;
  position: relative;
  z-index: 2;
}
.camp-grid__count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
}
.camp-grid__count-num {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-fg);
  line-height: 1;
}
.camp-grid__count-label {
  font-size: 0.65rem;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-xs);
}

/* Infinite scroll sentinel — placeholder řádek pod gridem, IntersectionObserver
   ho watch-uje a triggeruje appendNextBatch(). Po vyčerpání poolu se odebere. */
.camp-grid__sentinel {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-fg-muted);
  font-size: var(--fs-xs);
  font-style: italic;
  list-style: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  /* Mobile: stack heat-strip pod count + species řádek mezi name a strip. */
  .camp-grid__item {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "rank body    count"
      "rank species count"
      "strip strip  strip";
    gap: var(--space-sm);
    padding: var(--space-sm);
  }
  .camp-grid__rank { grid-area: rank; font-size: var(--fs-base); min-width: 1.5rem; }
  .camp-grid__body { grid-area: body; }
  .camp-grid__species { grid-area: species; }
  .camp-grid__strip { grid-area: strip; min-width: 0; max-width: none; }
  .camp-grid__count { grid-area: count; }

  .filter-status { padding: var(--space-xs) var(--space-sm); gap: var(--space-sm); font-size: var(--fs-xs); }
}

/* ============================================================
   TECH-042 iter 31 — mobile parita hlavičky s landing /.
   Vizuální pravidla extrahovaná z atlas-mobile-sheet.css ř. 49–167
   (landing mobile bottom-sheet redesign), BEZ landing-specific
   overrides (sticky-controls position:fixed, .filter-bar display:none).
   Kempy zachovává inline filter collapse — žádný bottom-sheet modal.
   ============================================================ */

/* Default (desktop ≥769px): mobile header hidden — title + count + tagline
   renderuje `.hero--compact` blok nad top-barem. Bez tohoto pravidla by se
   `.top-bar__mobile-header` zobrazil i na desktopu (default display:block z
   user-agent na <div>) a duplikoval hero obsah. */
.top-bar__mobile-header {
  display: none;
}

@media (max-width: 768px) {
  /* TECH-042 iter 35: <main> padding reset parita s landing / (atlas-mobile-sheet.css
     ř. 24–28). Bez tohoto pravidla dědí kempy default `main { padding: var(--space-md) }`
     z atlas-base.css ř. 101–106 → sticky-controls je posunutý o 16px doprava a 16px dolů
     vs landing (header užší o 32px, top-bar levý okraj 32px místo 16px, top 40px místo
     24px). User vnímá jako „malinko posunuté" při toggle map↔seznam. Landing má fixed
     sticky-controls + main padding 0 → header dotýká hran viewportu. Kempy potřebuje
     stejný main padding reset (zachová sticky behavior, jen smaže edge padding). */
  main {
    padding: 0;
    max-width: 100vw;
  }

  /* TECH-042 iter 34: padding parita sticky-controls s landing / (atlas-mobile-sheet.css
     ř. 31–47). Bez tohoto pravidla má kempy sticky-controls padding 0 (z atlas-base.css
     ř. 555–558) → header byl o ~24px (--space-lg) výš než landing → user vidí „posun
     nahoru" při toggle map↔seznam. Zachováváme `position: sticky` z atlas-base.css
     (kempy list pod sticky-controls scrolluje, NE position: fixed jako landing nad
     mapou). env(safe-area-inset-top) řeší iOS notch. Margin reset přepíše negativní
     `margin: 0 calc(-1 * --space-sm)` z atlas-base.css (landing taky resetuje na 0). */
  .sticky-controls {
    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;
  }

  /* Hero (kompaktní) skryt na mobile — title + count + tagline se přesunují do
     `.top-bar__mobile-header` uvnitř sticky top-baru. */
  .hero,
  .hero--compact {
    display: none;
  }

  /* Mobile 3-row grid layout top-baru:
       row 1: header (title + count + tagline) full-width   [grid-area: header]
       row 2: search (full-width)                            [grid-area: search]
       row 3: ⚙ Filtry (1fr) ........ ▦ Mapa (1fr)          [grid-area: filter / list]
     Buttony 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);
  }

  /* Mobile header — IDENTICKÝ styling s landing atlas-mobile-sheet.css ř. 92–113. */
  .top-bar__mobile-header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    /* TECH-031 v8 fix D parity (founder feedback 2026-05-21): sync s landing v7
       (atlas-mobile-sheet.css ř. 100). Mobile compactness — --space-sm → --space-xs. */
    margin-bottom: var(--space-xs);
  }
  .top-bar__title-row {
    display: flex;
    /* TECH-031 v8 fix D parity: sync s landing v7 (atlas-mobile-sheet.css ř. 104–113).
       Compliance pill button má min-height 44 px → meta wrapper ~62 px > title ~27 px.
       flex-start vytvářel dead space → effective gap title↔tagline ~39 px.
       flex-end aligne title bottom s meta bottom → gap ≤4 px line-height. */
    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 +
     atlas-mobile-sheet.css. */
  .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.
       Parita s atlas-mobile-sheet.css. Title shrinkne dle dostupného prostoru,
       meta wrapper zůstane vpravo na stejném řádku (žádné wrap-left fallback). */
    flex: 1 1 0;
    min-width: 0;
  }
  /* Count pill — paritní s .hero-count (atlas-landing.css). */
  .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 v8 fix: compliance modifier button reset + touch target (parita s
     atlas-mobile-sheet.css ř. 155, který se na kempy nenačítá → tady duplicate).
     Bez tohoto rule kempy mobile pill měl h=29.5px (porušení WCAG 2.5.5 ≥44px).
     Landing + detail mobile pill h=44px (atlas-mobile-sheet.css resp. atlas-detail.css). */
  .top-bar__count--compliance {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 2.75rem;  /* WCAG 2.5.5 touch target */
    transition: background-color 150ms ease;
  }
  /* TECH-031 v11 fix (founder feedback 2026-05-22 Image #10): pill internal
     vertical alignment sync — všechny 3 children (icon/value/chevron) potřebují
     line-height: 1 aby `align-items: center` na pillu reálně vycentroval midpointy
     (bez `line-height: 1` value dědí 1.6 → tall line-box → off-center vs icon/chevron). */
  .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;
    /* TECH-031 v13 fix (founder feedback 2026-05-22 Image #11 vs #12): margin-left
       2 px (--space-2xs) parity s atlas-landing.css ř. 116 + atlas-mobile-sheet.css
       ř. 175. Bez tohoto chevron stojí těsně k value (gap 4 px z parent flex),
       celá content se posunuje 2 px doprava → pill width 101 px (vs landing 103
       px), pill.left 2 px více doprava. Po fix pill width 103 = parity. */
    margin-left: var(--space-2xs);
    transition: transform 200ms ease;
  }
  .top-bar__count--compliance:hover {
    background: var(--color-primary-hover);
  }
  .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` (column wrapper,
       atlas-base.css). Force-wrap přes flex-basis 100% už není potřeba.
       text-align: right zachován jako fallback. */
    text-align: right;
  }
  /* TECH-031 v8 fix D parity: sync s landing v7 (atlas-mobile-sheet.css ř. 207–213).
     Mobile compactness — font-size fs-md → fs-sm; margin-top --space-2xs → 0
     (gap title↔tagline now from line-height only, ≤4 px visual). */
  .top-bar__tagline {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-fg-muted);
    font-weight: 400;
    line-height: var(--lh-base);
  }

  /* Search + 2 buttony plně rozkládají grid areas. */
  .top-bar__search {
    grid-area: search;
    min-width: 0;
  }
  /* `.top-bar .filter-toggle` přepíše scroll-gated visibility z atlas-base.css ř. 604
     (`.sticky-controls[data-scrolled="true"] .filter-toggle { display: inline-flex }`)
     — vyšší specificity (3 selektory vs. 2), aplikuje se VŽDY (i bez scroll). Kempy
     chip má být visible default per founder screenshot. */
  .top-bar .filter-toggle {
    grid-area: filter;
    display: inline-flex;
    width: 100%;
    justify-content: center;
    min-height: 44px;
    min-width: 0;
  }

  /* TECH-042 iter 32: na mobile filter-bar uvnitř .sticky-controls je hidden — chip ⚙ Filtry
     otvírá filter-sheet modal (atlas-bottom-sheet.js), který move-ne .filter-bar dovnitř
     modálu. Po close JS vrátí .filter-bar zpět do .sticky-controls (kde je opět hidden default,
     atlas-filters.js scroll-gated logika pro desktop ≥769px už neaplikuje). */
  .sticky-controls .filter-bar {
    display: none;
  }

  /* ▾ chevron skryt na mobile — chip otvírá modal, ne inline expand (chevron rotate
     transformace už není smysluplná). */
  .filter-toggle__icon {
    display: none;
  }
  .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 atlas-landing.css */
    padding: var(--space-xs) var(--space-sm);
  }
  .filter-toggle__glyph {
    font-size: 1.15em;
    line-height: 1;
  }

  /* TECH-031 v10 fix (founder feedback 2026-05-22): Compliance popover →
     bottom-sheet modal na mobile (parity s landing mapa Image #9). Bez tohoto
     override popover používal desktop position:fixed s JS-anchor (Image #8 broken).
     atlas-mobile-sheet.css se na kempy nenačítá → rules duplikované.
     Spec: docs/design/2026-05-21-compliance-banner-v7-variant-c-refined.md (sekce 2.7). */
  .compliance-popover {
    /* Override desktop position/size — full-width bottom sheet stretching 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 */
    animation: compliance-sheet-slide-up 200ms ease-out;
  }
  .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;
    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;
    }
  }
}

/* TECH-045 iter 3.14 fix-loop #1 BLOCKER #2 (2026-05-20): per-page 420px override.
   Pro úzké viewporty (<420px) redukce snapshot date font na --fs-2xs aby se
   nepřekrýval s taglinem. Per-page placement (ne v atlas-base.css) řeší cascade
   issue — kempy `@media (max-width: 768px)` má .top-bar__hint { font-size:
   var(--fs-sm) } na vyšším řádku, base 420px ho přebíjel jen pokud byl loaded
   po — což nebyl. Per-page 420px wins díky cascade order. */
@media (max-width: 420px) {
  .top-bar__hint {
    font-size: var(--fs-2xs);
  }
}