/* =====================================================================
 * Gym → Historie na širokém okně (PC)
 * ---------------------------------------------------------------------
 * CELÝ soubor je uvnitř @media (min-width: 820px). Na telefonu se z něj
 * neuplatní ani řádek – Historie tam zůstává přesně taková, jaká byla.
 *
 * Všechno je navíc scopované třídou `.hist-obrazovka` (přidává ji
 * js/screens/history.js na svůj kořen). Třídy `.hm-*` totiž sdílí i heatmapa
 * v Půstu a ve Spánku – bez scopu bychom je přestylovali taky.
 *
 * Dvě věci, které tenhle soubor řeší:
 *  1) master–detail: vlevo seznam tréninků, vpravo detail vybraného,
 *  2) heatmapa konzistence jako tři měsíce vedle sebe, s pevným stropem
 *     na velikost buňky (bez stropu roste `aspect-ratio: 1` do 100 px čtverců).
 * ===================================================================== */

@media (min-width: 820px) {

  /* ── 1) Master–detail ─────────────────────────────────────────────
   * Statistiky, konzistence a rozbory zůstávají nahoře přes celou šířku
   * (.hist-horni) – potřebují ji. Dělí se až feed tréninků a detail. */
  .hist-obrazovka .hist-split {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  /* Seznam se drží v dohledu i u dlouhého detailu vpravo. `sticky` se chytne,
   * až se stránka odroluje pod něj; do té doby se chová jako normální sloupec. */
  .hist-obrazovka .hist-sl-seznam {
    position: sticky;
    top: 16px;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 6px;   /* místo pro scrollbar, ať nepřekrývá okraj karet */
  }
  /* Nadpis sloupce zůstává vidět i po odrolování seznamu. */
  .hist-obrazovka .hist-sl-seznam > h2:first-child {
    position: sticky; top: 0; z-index: 1;
    margin-top: 0; padding: 2px 0 8px;
    background: var(--bg);
  }

  .hist-obrazovka .hist-sl-detail { min-width: 0; }

  /* Vybraný trénink – aby bylo poznat, co je vpravo otevřené. */
  .hist-obrazovka .feed-karta-vybrana {
    border-color: var(--accent-ink);
    background: var(--surface-control);
  }

  /* Zástupný text, dokud si uživatel žádný trénink nevybral. */
  .hist-obrazovka .hist-detail-prazdno {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-3);
    min-height: 240px;
    text-align: center;
    border-style: dashed;
    border-color: var(--border-strong);
    box-shadow: none;
  }
  .hist-obrazovka .hist-prazdno-ik { color: var(--text-tertiary); line-height: 0; }
  .hist-obrazovka .hist-detail-prazdno p { max-width: 30ch; margin: 0; }

  /* Detail v pravém sloupci nemá tlačítko Zpět (seznam je pořád vidět vedle),
   * takže hlavička jen zarovná název doleva. */
  .hist-obrazovka .hist-detail-hlava { justify-content: flex-start; margin-bottom: 14px; }

  /* Akční tlačítka detailu jsou navržená na plnou šířku telefonu; přes celý
   * pravý sloupec by z nich byly pruhy přes 600 px. `.btn.block` je flex,
   * takže `width:auto` by nic neudělalo – zkrátí je až max-width. */
  .hist-obrazovka .hist-sl-detail > .btn.block { max-width: 280px; }

  /* ── 2) Heatmapa konzistence: tři měsíce vedle sebe ───────────────
   * `auto-fit` místo natvrdo tří sloupců: v pásmu 820–1000 px (okno mínus
   * boční menu) by tři panely vedle sebe byly užší než na telefonu, takže se
   * radši zalomí na dva a jeden. */
  .hist-obrazovka .hm-mesice-rada {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }
  /* STROP velikosti buňky. `.hm-bunka` má `aspect-ratio: 1` a `width: auto`,
   * takže velikost určuje šířka sloupce mřížky – omezit jde jen panel.
   * 300 px / 7 sloupců (gap 6) = ~37 px na buňku, ne 100 px jako dřív. */
  .hist-obrazovka .hm-mesic-panel {
    width: 100%; max-width: 300px;
    justify-self: center;
  }
  .hist-obrazovka .hm-panel-nadpis {
    font-family: var(--font-nadpis);
    font-size: 14px; font-weight: 590;
    text-transform: capitalize; text-align: center;
    color: var(--muted);
    margin-bottom: 8px;
  }
  /* Rozsah „červen – srpen 2026" v hlavičce se nemá lámat na dva řádky. */
  .hist-obrazovka .hm-vice-mesicu .hm-mesic-nadpis { margin-bottom: 16px; }
  .hist-obrazovka .hm-vice-mesicu .hm-legenda { margin-top: 14px; justify-content: center; }
}