/* ------------------------------------------------------------------------- */
/* ZÁKLADNÍ STYLY A ROZLOŽENÍ GRIDU */
/* ------------------------------------------------------------------------- */

body {
    /* Ponecháme nastavenou šířku 750px (max-width gridu) */
    max-width: 750px;
    width: 90%;
    margin: 0 auto;
    font: 1em sans-serif;
    background-color: #f8f8f8;
    color: #333;
    line-height: 1.6;
}

/* Nastavíme pro nav a .postheader maximální šířku 
   odpovídající sloupci .main (3fr / 4fr * 750px) */

nav, .postheader {
    /* Flexibilní šířka: 3fr (75%) z celkové max-width 750px */
    max-width: 75%; 
    
    /* Vypočtená šířka pro 750px je 562.5px. Můžete použít i calc(): */
    /* max-width: calc((3 / 4) * 750px); */
    
    /* Centrování: Zarovnáme je s levým sloupcem Gridu, který je zarovnán doleva */
    margin-left: 0;
    margin-right: auto;
}

nav {
    padding-top: 1em;
    padding-bottom: 1em;
}

/* Ponecháme ostatní styly .postheader beze změny */
.postheader {
    padding: 1em;
    background-color: beige;
    color: black;
    font: 0.8em mono;
}

/* Ostatní základní styly (h1, h2, p, atd.) zůstávají nezměněny */

h1 {
    font-family: serif;
    color: black;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

h2, h3 {
    font-family: serif;
    font-style: italic;
    color: black;
}

nav {
    padding-top: 1em;
    padding-bottom: 1em;
}

p {
    margin: 0 0 1em 0;
}

.poem {
    margin-left: 2em;
    font-style: italic;
}

.refs {
    padding: 0em 0.5em 0em 0.5em;
}

blockquote {
    font-style: italic;
}

.postheader {
    padding: 1em;
    background-color: beige;
    color: black;
    font: 0.8em mono;
}

pre {
    display: block;
    overflow-x: scroll;
    white-space: pre;
    padding: 2em 1em;
    background-color: black;
    color: white;
}

code {
    background-color: beige;
    padding: 1pt;
}

ul {
    list-style-type: square;
}

.reflist {
    list-style-type: none;
    padding-left: 1em;
    padding-bottom: 1em;
    margin: 0;
    color: tomato;
}

sup {
    font-size: 0.8rem;
    /* vertical-align: super; */
    vertical-align: 0.2em;
    line-height: 0;
}

.footnote-toggle {
    text-decoration: none;
    color: tomato;
}

a {
    color: tomato;
}

a:hover, a:active {
    color: tan;
}

img {
    max-width: 100%;
}

.aside_bq {
    color: tomato;
}

footer {
    padding: 1em 0;
    color: grey;
}

/* ------------------------------------------------------------------------- */
/* NOVÉ STYLY PRO MARGINÁLIE (Grid Layout) */

.grid {
    /* Celková šířka včetně místa pro marginálie */
    max-width: 750px; 
    margin: 0 auto;
    padding: 2rem 0; 

    display: grid;
    /* Rozložení: 75% hlavní obsah, 25% marginálie */
    grid-template-columns: 3fr 1fr; 
    gap: 2rem; 
    position: relative; /* Kontext pro absolutní pozicování poznámek */
}

.main {
    grid-column: 1;
}

.marginalia {
    grid-column: 2;
    position: relative; /* Pozice relativní, ale poznámky jsou absolutní vůči .grid */
    min-width: 150px; 
}

/* ------------------------------------------------------------------------- */
/* STYLY PRO POZNÁMKY A REFERENCE */

/* Reference (odkaz v textu) */
.note-ref { 
    text-decoration: none;
    color: tomato; 
    font-size: 0.8rem; 
    vertical-align: super;
    line-height: 0;
}

/* Marginálie - Absolutně pozicovaná */
/* PŘEPRACUJEME STYLY PRO POZNÁMKY (.note) */

.note { 
    position: absolute; 
    right: 0;
    width: 100%; 

    /* Vertikální padding zmenšen */
    padding: 0.25em 0.8em; 
    
    /* border-left: 3px solid tomato; */ 
    /* background-color: #FFE4E0; */ 
    color: tomato;
    font: 0.75em sans-serif;
    /* font-size: 0.85em; */ 
    /* color: #333; */ 
    margin: 0; 
    
    /* ODSTRANĚNO: display: flex; a align-items: baseline; */
    
    /* Zajišťuje, že obsah <p> (a float) nepřeteče ven */
    overflow: hidden; 
}

/* Stylování nadpisu <h4> v poznámce */
.note h4 {
    /* KLÍČOVÁ ZMĚNA: Použití float pro obtékání textem */
    float: left;
    
    margin: 0; 
    padding: 0;
    padding-right: 0.5em; /* Mezera mezi číslem a textem */
    
    /* Zajištění, že se float aplikuje správně */
    display: inline-block; 
}

/* Stylování prvního odstavce <p> v poznámce */
.note p:first-of-type {
    /* Resetování marginů pro těsné navázání na h4 */
    margin: 0;
}

/* Skryjeme původní fallback/vyskakovací styly */
.footnote {
    display: none !important;
}
.footnotes.hidden {
    display: none !important;
}

/* ------------------------------------------------------------------------- */
/* RESPONZIVNÍ DESIGN (Fallback pod text) */
/* ------------------------------------------------------------------------- */

@media (max-width: 900px) { 
    
    /* Vrátíme šířku na plnou, když je Grid v jednom sloupci */
    nav, .postheader {
        max-width: 100%;
        margin-left: auto; /* Centrování */
        margin-right: auto;
    }
    .grid {
        grid-template-columns: 1fr; /* Jeden sloupec */
        gap: 1rem;
    }
    .marginalia {
        grid-column: 1;
        position: static; /* Poznámky se vrací do toku dokumentu */
    }
    .note {
        position: static; /* Poznámky se chovají jako blokové prvky */
        width: 95%;
        margin-top: 1.0rem; 
        /* margin-top: 1.5rem; */ 
        border-left: none;
        /* border-top: 3px solid tomato; /* Místo levého okraje */ */
        
        /* Zrušíme flexbox a vrátíme se k normálnímu bloku */
        display: block;
    }
    .note h4, .note p:first-of-type {
        /* Resetování flex chování pro mobilní zobrazení */
        flex-shrink: initial;
        flex-grow: initial;
        display: block; 
    }
    .note h4 {
        padding-right: 0.5em;
        /* margin-bottom: 0.25em; /* Malá mezera pod hlavičkou */ */
        margin-bottom: 0; /* Žádná mezera pod hlavičkou */
    }
}