/* ===== Nastavení na PC – z jednoho 4900px sloupce udělá mřížku ===============
 * Nastavení mělo na širokém okně ~4,5 obrazovky scrollu v jednom sloupci,
 * zatímco vedle byla prázdná plocha. Sekce (nadpis + jeho karty, viz sekce()
 * v js/screens/settings.js) se teď na PC skládají vedle sebe.
 *
 * CELÝ SOUBOR JE UVNITŘ @media (min-width: 820px) – na mobilu (375 px) se
 * nemění vůbec nic. .nast-mriz i .nast-sekce jsou tam obyčejné bloky a protože
 * nemají padding ani rámeček, margin-y skrz ně kolabují jako dřív.
 *
 * POZOR na selektory: router renderuje obrazovku do .screen-obal, který má
 * display:contents. Pro layout neexistuje, ale pro potomkový selektor s „>“
 * ANO – proto se cílí na vlastní kontejner .nast-mriz, ne na #screen > … */

/* ── Sbalovací sekce (jen telefon) ─────────────────────────────────────
 * Nastavení mají na iPhonu SE 8,7 obrazovky scrollu. Sbalené se všech osm
 * nadpisů vejde na jednu a otevření je jedno ťuknutí. Nadpis je teď <button>,
 * takže musí ztratit tlačítkový vzhled a vypadat pořád jako nadpis. */
.nast-prepinac {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 44px;          /* dotykový cíl */
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.nast-sipka {
  display: inline-flex; color: var(--text-tertiary);
  transition: transform .18s var(--ease-out);
}
.nast-sekce.otevrena .nast-sipka { transform: rotate(180deg); }
.nast-sekce:not(.otevrena) > .nast-obsah { display: none; }

@media (min-width: 820px) {
  /* Na PC se nesbaluje – mřížka sloupců má místa dost. Obsah je vidět vždycky
   * bez ohledu na to, co si uživatel naposledy sbalil na telefonu (třída
   * `otevrena` se sem vůbec neplete), a šipka nemá co naznačovat. */
  .nast-sekce > .nast-obsah { display: block; }
  .nast-prepinac { cursor: default; min-height: 0; }
  .nast-sipka { display: none; }

  /* auto-fill + minmax: počet sloupců si okno určí samo (na 1280px vyjdou tři),
   * a nikdy se nezúží pod čitelných 360 px. align-items:start = karty se
   * nenatahují na výšku nejvyšší sekce v řádku. */
  .nast-mriz {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    align-items: start;
  }

  /* Grid item zakládá vlastní formátovací kontext, takže margin-y dětí z něj
   * nevykukují – nadpis první sekce by jinak přidal 22 px navíc dovnitř
   * každého sloupce a spodní margin poslední karty by se přičetl ke gapu. */
  .nast-mriz > .nast-sekce { min-width: 0; }
  .nast-mriz > .nast-sekce > .nast-skup-nadpis { margin-top: 0; }
  .nast-mriz > .nast-sekce > :last-child { margin-bottom: 0; }

  /* Sekce mimo mřížku (O aplikaci, Nebezpečná zóna) zůstávají přes celou šířku,
   * jen se od mřížky odsadí stejnou mezerou. */
  .nast-mriz + .nast-sekce > .nast-skup-nadpis { margin-top: 28px; }

  /* Changelog je souvislý čtený text – drží se čitelné délky řádku i na
   * širokém monitoru (--proza-max, viz css/base.css). */
  .nast-changelog-list,
  .nast-changelog-polozka { max-width: var(--proza-max); }
}