/* ============================================================
   layout.css — rastr hradu, zvětšení a responzivita.

   JEDINÉ místo, kam patří rozměry layoutu. Nepřidávej je do
   style_hogwarts.css (ten je na vzhled komponent) ani inline
   do head.php.

   Načítá se z: head.php, pricnaulice/head.php, soubojak/head.php,
   aaa2.php — tedy všude, kde je <div class="hrad">.
   ============================================================ */

:root {
    /* --- rastr ---------------------------------------------------
       Hodnoty jsou napevno na tom, co web měl vždycky, a schválně
       nejsou dopočítané jedna z druhé: součet sloupců je 756 px,
       main má 760 a .hrad 762, takže v layoutu je historicky ~6 px
       vůle rozpuštěné přes justify-content: center. Vyrovnat ji je
       vědomá změna vzhledu, ne vedlejší efekt refaktoru. */
    --hg-shell: 762px;   /* .hrad — vnější obal */
    --hg-inner: 760px;   /* header / main / footer */
    --hg-side:  162px;   /* postranní sloupec = šířka pozadiblok.jpg */
    --hg-main:  420px;   /* prostřední sloupec */
    --hg-gap:     6px;   /* mezera mezi prostředním a postranním sloupcem */

    /* --- barvy rámečku prostředního sloupce ----------------------
       Odečtené z pozadistred.gif (2px bevel vlevo, 2px vpravo,
       mezi tím jedna barva). Používá je fluidní režim, který se
       bez té dlaždice obejde a není proto vázaný na 420 px. */
    --hg-edge-dark:  #695b38;
    --hg-edge-light: #ece6c2;
    --hg-paper:      #080808;
}


/* ============================================================
   Rastr
   ============================================================ */

.hrad {
    width: var(--hg-shell);
    margin: 0 auto;
}

header,
footer {
    width: var(--hg-inner);
}

main {
    display: flex;
    justify-content: center;

    width: var(--hg-inner);
    overflow: hidden;
}

main #section_levy,
main #section_pravy {
    display: flex;
    flex-direction: column;

    width: var(--hg-side);
    padding: 15px 0 0 0;
    background-image: url('/images/pozadihorni.gif'), url('/images/pozadiblok.jpg'), url('/images/pozadidolni.gif');
    background-position: top, top, bottom;
    background-repeat: no-repeat, repeat-y, no-repeat;
}

main .section_levy_end,
main .section_pravy_end {
    background-image: url('/images/pozadidolni.gif');
    height: 14px;
}

main #section_central {
    margin: 0 var(--hg-gap);
    width: var(--hg-main);
    min-width: var(--hg-main);
    max-width: var(--hg-main);
    background-image: url('/images/pozadistred.gif');
    overflow: hidden;
}

main #section_central_data {
    padding: 0 12px;
    width: var(--hg-main);
}

main .section_central_end {
    background-image: url('/images/dolnistredni.gif');
    margin: 0 var(--hg-gap);
    height: 60px;
}


/* ============================================================
   Zvětšení na monitoru

   Rastr je pevný (762 px) a obsah má přes 300 natvrdo zadaných
   šířek, takže roztáhnout ho nejde. Zoom místo toho škáluje celý
   souřadnicový systém — layout zůstane pixel-perfect, jen větší.
   Je to totéž, co dělá zoom prohlížeče, jen řízené webem.

   --hg-zoom-user  ruční volba uživatele (přepínač v patičce).
                   Když není nastavená, dosadí si každý stupeň svou
                   automatickou hodnotu. Pod 800 px se neuplatní
                   vůbec — tam si velikost řídí mobilní režim.

   Automatika končí na 1,30 (písmo ~16,6 px) schválně. Pohodlná
   velikost písma je zhruba konstantní, ne úměrná šířce monitoru
   — nad 1,30 už to není „konečně čitelné", ale „velké písmo",
   a to má být vědomá volba. Kdo chce víc, má v patičce 145 a 160 %.

   Prahy mají 100+ px rezervu proti šířce zvětšeného layoutu, aby
   zoom nevyvolal vodorovný posuvník a tím oscilaci mezi stupni:
     1,15 → 876 px    1,30 → 991 px

   Firefox < 126 zoom neumí a vykreslí web jako dřív — degradace
   je bezpečná, nic se nerozbije.

   Zvětšení se aplikuje jen na .hrad.hg-zoom. Třídu přidává
   hlavička podle cookie HGZOOM, viz HogwartsCore::LAYOUT_VYCHOZI.
   ============================================================ */

@media (min-width:  800px) { :root { --hg-zoom: var(--hg-zoom-user, 1);    } }
@media (min-width: 1000px) { :root { --hg-zoom: var(--hg-zoom-user, 1.15); } }
@media (min-width: 1280px) { :root { --hg-zoom: var(--hg-zoom-user, 1.30); } }

@media (min-width: 762px) {
    .hrad.hg-zoom {
        zoom: var(--hg-zoom);
    }
}


/* ============================================================
   Přepínač velikosti v patičce
   ============================================================ */

.hg-velikost {
    margin: 6px 0 0;
    font-size: x-small;
}

.hg-velikost a {
    display: inline-block;
    margin: 0 1px;
    padding: 1px 5px;
    border: 1px solid #5B5025;
    border-radius: 3px;
    color: #D3CDB8;
    text-decoration: none;
}

.hg-velikost a:hover,
.hg-velikost a:focus {
    color: #ffca91;
    border-color: #ffca91;
    background: rgba(255, 202, 145, .12);
}

.hg-velikost a.aktivni {
    color: #080808;
    background: #D3CDB8;
    border-color: #D3CDB8;
    font-weight: bold;
}


/* ============================================================
   Mobil — pod 762 px

   Práh je šířka layoutu (--hg-shell) mínus 1: skládat se má
   teprve tehdy, když se tři sloupce do okna nevejdou. iPad na
   výšku (810 px) i tablety kolem 780 px tak dostanou klasické
   tři sloupce.

   POZOR: práh nesmí být nad 762. V režimu „klasická" je viewport
   natvrdo width=762, takže vyšší práh by na klasický layout
   pustil mobilní skládání — hlavička by šla přes celou šířku
   a sloupec by zůstal na 432 px, tedy na půl obrazovky.

   Prostřední sloupec se zmenší přesně tak, aby se vešel na šířku
   displeje: 420 px + 2×6 px margin = 432 px. iPhone 14 (390 px)
   → 0,90; Galaxy S21 (360 px) → 0,83; iPhone Pro Max (430 px)
   → 1,0. Dnes je to kvůli viewportu 762 pevných 0,51, takže je
   to zhruba dvojnásobek.

   Postranní sloupce jdou do vysouvacích zásuvek — do 11px odkazů
   ve 162px sloupci se prstem trefit nedá.
   ============================================================ */

/* Zásuvková tlačítka a překryv existují jen na mobilu.
   Musí být před media query — ta specificitu nepřidává, takže
   pozdější pravidlo se stejnou specificitou vyhraje. */
#hg-tlacitko-levy,
#hg-tlacitko-pravy,
#hg-prekryv {
    display: none;
}

@media (max-width: 761px) {

    /* iOS si jinak písmo nafukuje po svém a rozhodí rastr */
    html {
        -webkit-text-size-adjust: 100%;
    }

    .hrad,
    header,
    footer,
    main {
        width: auto;
    }

    main {
        flex-direction: column;
        overflow: visible;
    }

    /* obsah nahoru, postranní panely až za něj */
    main .hg-stred {
        order: -1;
    }

    /*  Hlavička dostane přesně šířku prostředního sloupce a níž
        i stejné zvětšení, takže s ním vždycky lícuje. Bez toho
        šla přes celou obrazovku (má natvrdo width="760"), zatímco
        sloupec zůstal na svých 420 px.                          */
    header {
        width: var(--hg-main);
        margin: 0 auto;
    }

    header img {
        max-width: 100%;
        height: auto;
    }

    /* sloupec na střed, ať sedí pod hlavičkou */
    main #section_central,
    main .section_central_end {
        margin-left: auto;
        margin-right: auto;
    }

    /* pamatováček a mazlíček visí na left:760px / left:100%,
       na mobilu by stránku vytáhli do šířky */
    .hg-ozdoba {
        display: none;
    }


    /* --- zásuvky ------------------------------------------- */

    #hg-tlacitko-levy,
    #hg-tlacitko-pravy {
        display: block;
        position: fixed;
        top: 6px;
        z-index: 1002;

        width: 38px;
        height: 38px;
        padding: 0;

        font: 20px/36px "Arial Narrow", Arial, sans-serif;
        text-align: center;
        color: #D3CDB8;
        background: rgba(8, 8, 8, .85);
        border: 1px solid #5B5025;
        border-radius: 5px;
        cursor: pointer;
    }

    #hg-tlacitko-levy  { left: 6px; }
    #hg-tlacitko-pravy { right: 6px; }

    #hg-prekryv {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;

        background: rgba(0, 0, 0, .6);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }

    body.hg-levy-otevren  #hg-prekryv,
    body.hg-pravy-otevren #hg-prekryv {
        opacity: 1;
        pointer-events: auto;
    }

    /* Bez JS zůstanou postranní sloupce naskládané pod obsahem —
       delší stránka, ale všechno je dosažitelné. Do zásuvek je
       schová teprve layout.js přidáním třídy hg-js na <body>. */
    main #section_levy,
    main #section_pravy {
        margin: 0 auto;
    }

    body.hg-js main #section_levy,
    body.hg-js main #section_pravy {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1001;

        margin: 0;
        width: var(--hg-side);
        overflow-y: auto;
        zoom: 1.4;                    /* aby se do odkazů dalo trefit prstem */
        transition: transform .25s ease;
    }

    body.hg-js main #section_levy  { left: 0;  transform: translateX(-100%); }
    body.hg-js main #section_pravy { right: 0; transform: translateX(100%);  }

    body.hg-js.hg-levy-otevren  main #section_levy,
    body.hg-js.hg-pravy-otevren main #section_pravy {
        transform: none;
    }
}


/* ------------------------------------------------------------
   Přizpůsobení hlavičky a prostředního sloupce šířce displeje

   Sloupec měří 432 px (420 + 2×6 margin). Plynule by to řešilo
   zoom: calc(100vw / 432px), jenže to CSS neumí — dělit délku
   délkou calc() nedovoluje a zoom délku nebere. Proto schodky.

   Musí pokrýt CELÉ pásmo pod prahem, ne jen telefony. Jinak
   zařízení kolem 700 px dostane skládaný layout, ale sloupec mu
   zůstane na 432 px — tedy na půl obrazovky — zatímco hlavička
   jde přes celou šířku. Proto se škáluje i nahoru.

   Hodnoty jsou spočítané tak, aby 432 × zoom vyšlo pod spodní
   hranici každého pásma; běžné telefony (430, 414, 412, 393,
   390, 375, 360, 320) tak sedí přesně.

   layout.js to pak dorovná na přesnou šířku displeje. Bez JS
   zůstanou schodky, které samy o sobě stačí.
   ------------------------------------------------------------ */

@media (max-width: 761px) { header, main .hg-stred { zoom: 1.60; } }
@media (max-width: 699px) { header, main .hg-stred { zoom: 1.38; } }
@media (max-width: 599px) { header, main .hg-stred { zoom: 1.20; } }
@media (max-width: 519px) { header, main .hg-stred { zoom: 1.08; } }
@media (max-width: 469px) { header, main .hg-stred { zoom: 1.00; } }
@media (max-width: 431px) { header, main .hg-stred { zoom:  .94; } }
@media (max-width: 409px) { header, main .hg-stred { zoom:  .90; } }
@media (max-width: 389px) { header, main .hg-stred { zoom:  .86; } }
@media (max-width: 374px) { header, main .hg-stred { zoom:  .83; } }
@media (max-width: 359px) { header, main .hg-stred { zoom:  .74; } }
@media (max-width: 319px) { header, main .hg-stred { zoom:  .64; } }


/* ============================================================
   Fluidní režim — pro nově psané stránky

   Stránka ho zapne řádkem  $layout_fluid = true;  před
   require "./head.php". Tím se uvolní rastr 420 px a obsah může
   využít šířku okna.

   Prostřední sloupec je ve skutečnosti jen 2px zlatý okraj po
   stranách a #080808 mezi tím — pozadistred.gif má na 416 px
   uprostřed jedinou barvu. Šířka 420 px tedy nikdy nebyla
   vynucená grafikou, jen tím, že ta dlaždice je 420 px široká.

   Okraje se proto berou z téže dlaždice přes border-image
   (výřez 2 px zleva a zprava). Zachová to i jejich svislou
   texturu, kterou by plochý CSS přechod zploštil, a nepotřebuje
   to žádný nový obrázek.

   Krycí grafiky nahoře a dole jsou kreslené a roztáhnout nejdou,
   proto se na širším sloupci zarovnají na střed.

   Stávajících 277 stránek se to nedotkne — bez $layout_fluid
   se chovají přesně jako dřív.
   ============================================================ */

/*  Rozšíření platí až od 800 px. Pod tím by calc() vyšlo skoro
    na nulu (na 390px telefonu 390 − 388 = 2 px) a sloupec by se
    složil — na mobilu se proto i fluidní stránka chová jako
    každá jiná: naskládá se pod sebe a zmenší na šířku displeje.

    Dělení --hg-zoom je nutné: uvnitř zvětšené větve je 100vw
    pořád viewport v CSS pixelech, takže bez přepočtu by se při
    zoomu 1,45 stránka roztáhla na 1,45násobek okna a naskočil by
    vodorovný posuvník.                                          */
/*  Práh 800, ne 762: v pásmu 762–799 by na sloupec zbylo míň
    než 420 px, clamp by ho vytáhl zpět na 420 a layout by
    o pár pixelů přetekl. Fluidní režim se tedy zapíná až tam,
    kde má opravdu co rozšiřovat.                             */
@media (min-width: 800px) {
    .hg-fluid {
        --hg-shell: auto;
        --hg-inner: auto;
        --hg-main:  clamp(420px, calc(100vw / var(--hg-zoom)
                                      - 2 * var(--hg-side)
                                      - 4 * var(--hg-gap)
                                      - 40px), 1100px);
    }

    .hg-fluid header,
    .hg-fluid footer {
        text-align: center;
    }
}

.hg-fluid main #section_central {
    min-width: 0;
    max-width: none;

    background-image: none;
    background-color: var(--hg-paper);

    border-left:  2px solid transparent;
    border-right: 2px solid transparent;
    border-image: url('/images/pozadistred.gif') 0 2 0 2 repeat;
}

.hg-fluid main #section_central_data {
    width: auto;
}

/* krycí grafiky 420×60 jdou na střed širšího sloupce */
.hg-fluid main #section_central > img {
    margin-left: auto;
    margin-right: auto;
}

.hg-fluid main .section_central_end {
    background-repeat: no-repeat;
    background-position: top center;
}


/* ============================================================
   Stará tabulková generace

   Godrikův důl, quidditch, zp/, turnaj/, školní rada. Nemají
   .hrad ani flexbox rastr — jen <table width="762"> (školní rada
   vlastní design kolem 760 px) a starý /style.css.

   Dostávají proto samotné zvětšení, bez rastru: obal
   <div class="hg-stara"> je hned za <body> a zavírá se v end.php.
   Zoom sedí na tom obalu, ne na <body>, schválně — jednak by se
   zvětšovala i kamenná textura pozadí, jednak by se do zvětšené
   větve dostal i drag&drop duch, kterého godrikuvdul/vybaveni.php
   připojuje na document.body a pozicuje podle e.clientX.

   Skládání pod sebe tu nedává smysl: tabulky mají chybějící <tr>
   a rowspany, takže na ně CSS spolehlivě nedosáhne. Na mobilu se
   proto celých 762 px jen zmenší na šířku displeje. Není to velká
   výhra (dnes prohlížeč zmenšuje z výchozích 980 px, takže se
   využije 78 % obrazovky místo 100 %), ale je to bez rizika.
   Pořádné mobilní rozložení téhle generace je samostatná práce
   a chce přepsat ty tabulky.
   ============================================================ */

@media (min-width: 762px) {
    .hg-stara.hg-zoom {
        zoom: var(--hg-zoom);
    }
}

/* Zmenšení celých 762 px na šířku displeje. Stejná logika jako
   u schodků prostředního sloupce výš, jen jiná výchozí šířka;
   layout.js to zase dorovná přesně. */
@media (max-width: 761px) { .hg-stara.hg-zoom { zoom: .91; } }
@media (max-width: 699px) { .hg-stara.hg-zoom { zoom: .78; } }
@media (max-width: 599px) { .hg-stara.hg-zoom { zoom: .68; } }
@media (max-width: 519px) { .hg-stara.hg-zoom { zoom: .61; } }
@media (max-width: 469px) { .hg-stara.hg-zoom { zoom: .56; } }
@media (max-width: 431px) { .hg-stara.hg-zoom { zoom: .53; } }
@media (max-width: 409px) { .hg-stara.hg-zoom { zoom: .51; } }
@media (max-width: 389px) { .hg-stara.hg-zoom { zoom: .49; } }
@media (max-width: 374px) { .hg-stara.hg-zoom { zoom: .47; } }
@media (max-width: 359px) { .hg-stara.hg-zoom { zoom: .41; } }
@media (max-width: 319px) { .hg-stara.hg-zoom { zoom: .36; } }