/* Projekt Adra3 — skořápka aplikace.
 *
 * Desktop >= 1100 px: levý pruh 260 px + hlavní sloupec.
 * Tablet 768–1099 px: pruh se sbalí do horní lišty.
 * Mobil < 768 px: přilepená horní lišta a běžná rozbalovací nabídka.
 *
 * CSS Grid pro skořápku, flexbox uvnitř. Bez frameworku.
 */

@layer layout;

@layer layout {
  .app-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    /* Na mobilu jsou to dva řádky nad sebou: lišta a obsah. Bez tohoto
       si oba rovným dílem rozdělí zbytek ze `min-height: 100vh`, takže
       na krátké stránce (prázdný výpis) vznikne pod lištou obří prázdný
       pruh. Lišta má být vysoká podle obsahu, zbytek patří obsahu. */
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }

  /* Položky gridu mají ve výchozím stavu `min-width: auto`, takže je
     širší obsah (tabulka, dlouhý kód, nezalomitelné slovo) roztáhne nad
     šířku stolce a celá stránka se začne posouvat do strany. Na mobilu
     to navíc vytlačí přepínač nabídky mimo obrazovku. `min-width: 0`
     tomu brání a musí být na KAŽDÉ položce gridu. */
  .app-shell > *,
  .record-layout > * {
    min-width: 0;
  }

  .app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .app-content {
    flex: 1;
    width: 100%;
    max-width: var(--width-main);
    margin-inline: auto;
    padding: var(--space-6) var(--space-5) var(--space-7);
  }

  .app-footer {
    max-width: var(--width-main);
    width: 100%;
    margin-inline: auto;
    padding: var(--space-5);
    border-top: 1px solid var(--rule-faint);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
  }

  /* --- Postranní pruh / horní lišta -------------------------------------- */

  .site-rail {
    background: var(--surface-panel);
    border-bottom: 1px solid var(--border-structural);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .site-rail__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
  }

  .site-rail__panel {
    display: none;
    padding: 0 var(--space-5) var(--space-5);
  }

  .site-rail__panel[data-open="true"] {
    display: block;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-control);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-condensed);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    font-size: var(--text-2xs);
  }

  .nav-toggle:hover {
    border-color: var(--accent-brass);
  }

  /* Bez JS se nabídka nemá jak rozbalit, proto je pak vidět rovnou
     a přepínač zmizí. Web musí fungovat i bez skriptu. */
  .no-js .nav-toggle {
    display: none;
  }

  .no-js .site-rail__panel {
    display: block;
  }

  @media (min-width: 1100px) {
    .app-shell {
      grid-template-columns: var(--width-rail) minmax(0, 1fr);
      /* Na desktopu stojí pruh a obsah vedle sebe, tedy jediný řádek. */
      grid-template-rows: auto;
    }

    .site-rail {
      position: sticky;
      top: 0;
      align-self: start;
      height: 100vh;
      overflow-y: auto;
      border-bottom: 0;
      border-inline-end: 1px solid var(--border-structural);
      display: flex;
      flex-direction: column;
    }

    .site-rail__bar {
      display: block;
      padding: var(--space-5);
    }

    .site-rail__panel,
    .no-js .site-rail__panel {
      display: block;
      flex: 1;
      padding-inline: var(--space-5);
    }

    .nav-toggle {
      display: none;
    }

    .app-content {
      padding: var(--space-7) var(--space-6);
    }
  }

  /* --- Dvousloupcový detail (jen na širokém displeji) --------------------- */

  .record-layout {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }

  @media (min-width: 1400px) {
    .record-layout {
      grid-template-columns: minmax(0, 1fr) 18rem;
      align-items: start;
    }
  }

  .record-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
  }

  /* Portrét a emblém stojí v postranním sloupci, ale ten se pod 1400 px
     zalomí pod obsah a roztáhne se na celou šířku. Bez stropu by pak
     portrét 3:4 zabral přes 1200 px na výšku a stránka by začínala
     obrázkem místo složkou. Strop je na rámečku, ne na obrázku —
     obrázek se tak přizpůsobí i na 360 px. */
  .record-aside > .image-frame {
    width: 100%;
    max-width: 20rem;
  }

  /* Obálka mise ani zástupný obrázek nemají dominovat stránce. Strop je
     na obalu, ne na obrázku — obrázek se pak přizpůsobí i na 360px. */
  .cover-frame {
    max-width: 34rem;
  }

  .section-stack > * + * {
    margin-top: var(--space-6);
  }
}