/*
 * The Prague Post Archive - styly webu.
 *
 * Barvy a rozmery jsou z navrhu (Titulni strana.dc.html): Archivo na
 * rozhrani, Spectral na nadpisy a text novin, tepla papirova paleta.
 * Prefix pp_ je web, av_ je ctecka prevzata z jadra archivu.
 */

:root {
    --pp-pozadi: oklch(0.985 0.004 90);
    --pp-papir: oklch(0.978 0.011 85);
    --pp-papir-tmavsi: oklch(0.95 0.016 82);
    --pp-bila-sklo: oklch(1 0 0 / .72);
    --pp-text: oklch(0.24 0.015 250);
    --pp-text-teply: oklch(0.24 0.02 60);
    --pp-odstavec: oklch(0.36 0.02 60);
    --pp-tlumene: oklch(0.5 0.02 60);
    --pp-tlumene-studene: oklch(0.52 0.012 250);
    --pp-nadpisek: oklch(0.45 0.015 250);
    --pp-akcent: oklch(0.42 0.07 55);
    --pp-tlacitko: oklch(0.3 0.05 55);
    --pp-tlacitko-hover: oklch(0.36 0.06 55);
    --pp-tecka: oklch(0.62 0.16 40);
    --pp-zvyrazneni: #ffe066;
    --pp-linka: oklch(0.9 0.01 80);
    --pp-linka-tepla: oklch(0.88 0.02 75);
    --pp-linka-sken: oklch(0.86 0.02 80);
    --pp-linka-stitek: oklch(0.87 0.008 248);
    --pp-linka-hneda: oklch(0.76 0.04 70);
    --pp-stin-karta: 0 2px 4px oklch(0.35 0.04 60 / .05), 0 30px 60px -34px oklch(0.35 0.05 60 / .5);
    --pp-stin-sken: 0 1px 2px oklch(0.3 0.04 60 / .08), 0 12px 28px -18px oklch(0.3 0.04 60 / .5);
    --pp-stin-sken-hover: 0 1px 2px oklch(0.3 0.04 60 / .1), 0 18px 36px -16px oklch(0.3 0.04 60 / .6);
    --pp-serif: Spectral, Georgia, "Times New Roman", serif;
    --pp-sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    --pp-okraj: clamp(16px, 5vw, 64px);
    --pp-hlavicka: 104px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 16px;
}

body {
    margin: 0;
    background: var(--pp-pozadi);
    color: var(--pp-text);
    font: 16px/1.55 var(--pp-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

a {
    color: var(--pp-akcent);
    text-decoration: none;
}

a:hover {
    color: var(--pp-tlacitko);
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--pp-akcent);
    outline-offset: 2px;
}

mark {
    background: var(--pp-zvyrazneni);
    color: inherit;
    padding: 0 .1em;
    border-radius: 1px;
}

h1,
h2,
h3,
p {
    margin: 0;
}

.pp_sirka {
    width: min(1600px, 100% - 2 * var(--pp-okraj));
    margin-inline: auto;
}

.pp_i {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* drobny nadpis velkymi pismeny - "YEARS", "INSIDE THIS ISSUE" */

.pp_nadpisek {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pp-nadpisek);
}

.pp_tlumene {
    color: var(--pp-tlumene-studene);
    font-size: 13px;
}

.pp_stitek {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pp-akcent);
}

.pp_stitek_tecka::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-tecka);
    box-shadow: 0 0 0 4px oklch(0.62 0.16 40 / .18);
}

.pp_tlacitko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid var(--pp-tlacitko);
    border-radius: 12px;
    background: var(--pp-tlacitko);
    color: #fff;
    font: 600 14px/1.2 var(--pp-sans);
    cursor: pointer;
}

.pp_tlacitko:hover {
    background: var(--pp-tlacitko-hover);
    border-color: var(--pp-tlacitko-hover);
    color: #fff;
    text-decoration: none;
}

.pp_tlacitko .pp_i {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.pp_tlacitko_obrys {
    background: transparent;
    color: var(--pp-tlacitko);
    border-color: var(--pp-linka-hneda);
}

.pp_tlacitko_obrys:hover {
    background: #fff;
    color: var(--pp-tlacitko);
    border-color: var(--pp-tlacitko);
}

.pp_odkaz_sipka {
    font-size: 14px;
    font-weight: 600;
}


/* --------------------------------------------------------------- sken */


/*
 * Nahled strany. Obal nese pomer viditelne plochy (inline aspect-ratio
 * z OrezZobrazeni), obrazek je s orezem o schovany kraj vetsi a posunuty.
 * Bez orezu obrazek jen vyplni obal.
 */

.pp_sken {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--pp-linka-sken);
    border-radius: 3px;
    background: oklch(0.93 0.04 85);
}

.pp_sken img {
    display: block;
    width: 100%;
    height: auto;
}

.pp_sken img[style] {
    position: absolute;
    max-width: none;
    object-fit: fill;
}

.pp_bez_nahledu {
    aspect-ratio: 1 / 1.37;
}

.pp_stin {
    box-shadow: var(--pp-stin-sken);
    transition: box-shadow .18s, transform .18s;
}


/*
 * V mrizkach maji vsechny nahledy stejny pomer, at radky drzi v lince -
 * skeny se lisi o par procent. Obrazek se pak do obalu vejde pres cover
 * od horniho okraje (hlavicka novin zustane videt).
 */

.pp_mrizka .pp_sken,
.pp_strany .pp_sken,
.pp_aktualni_titulka .pp_sken {
    aspect-ratio: 1 / 1.37 !important;
}

.pp_mrizka .pp_sken img,
.pp_strany .pp_sken img,
.pp_aktualni_titulka .pp_sken img {
    height: 100%;
    object-fit: cover;
    object-position: top;
}


/*
 * Listovani - pri najeti se roh nahledu ohne, jako by se strana chystala
 * otocit. Roh je pseudoelement ctverce v pravem dolnim rohu: dolni
 * trojuhelnik je dalsi list pod strankou, horni rub ohnute strany.
 * Animuje se jen jeho transform (scale od rohu), takze bez prekreslovani.
 * Nabeh ma mirny prekmit, navrat je rovny - s prekmitem by scale pri
 * navratu presel pod nulu a roh by se prevratil.
 */

@media (hover: hover) {
    .pp_karta_cisla .pp_sken::after,
    .pp_karta_strany .pp_sken::after,
    .pp_vysledek_nahled .pp_sken::after,
    .pp_aktualni_titulka .pp_sken::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: 24%;
        aspect-ratio: 1;
        background: linear-gradient(to top left, oklch(0.95 0.03 85) 0, oklch(0.86 0.04 80) 49.6%, oklch(0.7 0.045 72) 50%, oklch(0.87 0.045 82) 62%, oklch(0.96 0.03 88) 100%);
        filter: drop-shadow(-2px -2px 3px oklch(0.3 0.04 60 / .25));
        transform: scale(0);
        transform-origin: 100% 100%;
        transition: transform .28s cubic-bezier(.4, 0, .6, 1);
        pointer-events: none;
    }
    .pp_aktualni_titulka .pp_sken::after {
        width: 17%;
    }
    .pp_karta_cisla:hover .pp_sken::after,
    .pp_karta_strany:hover .pp_sken::after,
    .pp_vysledek_nahled:hover .pp_sken::after,
    .pp_aktualni_titulka:hover .pp_sken::after {
        transform: scale(1);
        transition: transform .6s cubic-bezier(.3, 1.5, .5, 1);
    }
}


/* ----------------------------------------------------------- hlavicka */


/*
 * Hlavicka NENI prilepena. Prilepena s rozmazanim pozadi se pri kazdem
 * posunu prekresluje nad velkym skenem v uvodu - na slabsim telefonu to
 * trhalo rolovanim (navrh: "zadne efekty vazane na scroll").
 */

.pp_hlavicka {
    position: relative;
    z-index: 50;
    background: oklch(1 0 0 / .91);
    border-bottom: 1px solid oklch(0.92 0.01 80 / .8);
}

.pp_hlavicka_obsah {
    display: flex;
    align-items: center;
    gap: 26px;
    width: min(1600px, 100% - 2 * var(--pp-okraj));
    height: var(--pp-hlavicka);
    margin-inline: auto;
}

.pp_znacka {
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    flex: none;
    color: inherit;
}

.pp_znacka:hover {
    text-decoration: none;
}

.pp_znacka img {
    display: block;
    width: auto;
}

.pp_znacka_lev {
    height: 56px;
}

.pp_znacka_nazev {
    height: 30px;
}

.pp_znacka_archiv {
    display: flex;
    align-items: center;
    align-self: center;
    height: 56px;
    padding-left: 20px;
    border-left: 1px solid var(--pp-linka-hneda);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pp-akcent);
}


/* titulka ma vyssi hlavicku a vetsi znacku */

.titulka {
    --pp-hlavicka: 136px;
}

.titulka .pp_znacka {
    gap: 24px;
}

.titulka .pp_znacka_lev {
    height: 88px;
}

.titulka .pp_znacka_nazev {
    height: 46px;
}

.titulka .pp_znacka_archiv {
    height: 68px;
    padding-left: 24px;
    font-size: 13px;
}

.pp_hledani_hlavicka {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 380px;
    min-width: 0;
    margin-left: auto;
    padding: 0 14px;
    border: 1px solid var(--pp-linka-tepla);
    border-radius: 12px;
    background: #fff;
    color: var(--pp-akcent);
}

.pp_hledani_hlavicka:focus-within {
    border-color: var(--pp-akcent);
}

.pp_hledani_hlavicka input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--pp-text);
    font: 17px var(--pp-serif);
    outline: none;
}

.pp_menu {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
    font-size: 14px;
}

.pp_hledani_hlavicka+.pp_menu {
    margin-left: 0;
}

.pp_menu a {
    color: oklch(0.28 0.03 60);
}

.pp_menu a[aria-current] {
    color: var(--pp-akcent);
    font-weight: 600;
}


/* sbirka na digitalizaci - vyrazne, ale v barvach webu */

.pp_podpora {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--pp-tlacitko);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s;
}

.pp_podpora:hover {
    background: var(--pp-tlacitko-hover);
    color: #fff;
    text-decoration: none;
}

.pp_podpora .pp_i {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
    color: oklch(0.8 0.12 40);
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}

.pp_podpora:hover .pp_i {
    transform: scale(1.18);
}

.pp_podpora_kratke {
    display: none;
}

.pp_jazyky {
    display: flex;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--pp-linka-hneda);
    border-radius: 10px;
    font-size: 12px;
    letter-spacing: .06em;
}

.pp_jazyky a {
    padding: 6px 13px;
    color: oklch(0.38 0.03 60);
}

.pp_jazyky a:hover {
    text-decoration: none;
    background: var(--pp-papir);
}

.pp_jazyky a[aria-current] {
    background: var(--pp-akcent);
    color: #fff;
    font-weight: 700;
}

.pp_menu_tlacitko {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.pp_menu_tlacitko span,
.pp_menu_tlacitko span::before,
.pp_menu_tlacitko span::after {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    background: var(--pp-tlacitko);
    transition: transform .2s, opacity .2s;
}

.pp_menu_tlacitko span {
    top: 21px;
}

.pp_menu_tlacitko span::before,
.pp_menu_tlacitko span::after {
    content: "";
    left: 0;
}

.pp_menu_tlacitko span::before {
    top: -7px;
}

.pp_menu_tlacitko span::after {
    top: 7px;
}

.pp_menu_tlacitko[aria-expanded="true"] span {
    background: transparent;
}

.pp_menu_tlacitko[aria-expanded="true"] span::before {
    transform: translateY(7px) rotate(45deg);
}

.pp_menu_tlacitko[aria-expanded="true"] span::after {
    transform: translateY(-7px) rotate(-45deg);
}


/* --------------------------------------------------------------- uvod */

.pp_uvod {
    position: relative;
    overflow: hidden;
    /* hlavicka je pruhledna a lezi pres horni kraj uvodu */
    margin-top: calc(-1 * var(--pp-hlavicka) - 1px);
    padding: calc(var(--pp-hlavicka) + 32px) 0 24px;
    background: var(--pp-papir);
    border-bottom: 1px solid oklch(0.9 0.018 80);
}

.pp_uvod_sken {
    position: absolute;
    left: 50%;
    top: -120px;
    width: max(2000px, 110vw);
    max-width: none;
    transform: translateX(-50%) rotate(-7deg);
    /* bez blur() a mix-blend-mode z navrhu - na velke plose jsou drahe
       a na svetlem papiru je rozdil proti prosté pruhlednosti minimalni */
    opacity: .36;
    filter: sepia(.3);
    pointer-events: none;
    user-select: none;
}

.pp_uvod_zavoj {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 70% at 82% 45%, oklch(0.985 0.009 85 / .92), oklch(0.98 0.01 85 / .3));
    pointer-events: none;
}


/* karta cisla vlevo (sirsi), text s hledanim vpravo */

.pp_uvod_obsah {
    position: relative;
    display: grid;
    /* karta jen tak siroka, jak potrebuje obsah (titulka + udaje) - bez
       prazdneho mista vpravo; zbytek dostane text */
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(40px, 3.4vw, 64px);
    align-items: start;
}


/* zadne cislo jeste neni verejne (pred prvnim vydanim) - text dostane celou
   sirku; jinak by spadl do prvniho sloupce "auto" a s container-type by mel 0 */

.pp_uvod_obsah:not(:has(.pp_uvod_cislo)) {
    grid-template-columns: minmax(0, 820px);
}

.pp_uvod_text {
    order: 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    container-type: inline-size;
}

.pp_uvod_cislo {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/*
 * Nadpis je zlomeny za carkou (pp_zlom_nadpisu) a kazda polovina ma byt
 * na jednom radku. Velikost proto hlida i sirka sloupce (cqi = 1 % sirky
 * .pp_uvod_text): "The Prague Post, issue by issue," potrebuje asi
 * 13,6 em, 7,2cqi mu necha kousek rezervy. Pod 22 px uz nejde - radsi
 * zalomit.
 */

.pp_uvod h1 {
    font: 400 max(22px, min(clamp(30px, 1.6vw + 23px, 54px), 7.2cqi))/1.05 var(--pp-serif);
    letter-spacing: -0.015em;
    text-wrap: pretty;
}

.pp_uvod_perex {
    margin-top: 18px;
    font-size: 21px;
    line-height: 1.5;
    color: var(--pp-odstavec);
    text-wrap: pretty;
}


/* text z redakce - odstavce, odkazy */

.pp_uvod_perex>* {
    margin: 0;
}

.pp_uvod_perex>*+* {
    margin-top: .6em;
}

.pp_uvod_perex a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pp_uvod_pocty {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-tlumene-studene);
}

.pp_lomitko {
    color: oklch(0.78 0.01 250);
}


/* hledani - velke pole na titulce a na strance vysledku */

.pp_hledani {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 880px;
    margin-top: 36px;
    padding: 8px;
    border: 1px solid var(--pp-linka-tepla);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 0 oklch(1 0 0 / .8) inset, 0 2px 4px oklch(0.35 0.04 60 / .06), 0 24px 48px -24px oklch(0.35 0.05 60 / .45);
}

.pp_hledani:focus-within {
    border-color: oklch(0.72 0.05 60);
}

.pp_hledani_pole {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 0 18px;
    color: var(--pp-akcent);
    cursor: text;
}

.pp_hledani_pole .pp_i {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}

.pp_hledani_pole input {
    flex: 1;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    background: none;
    color: var(--pp-text);
    font: 21px/1.3 var(--pp-serif);
    outline: none;
}

.pp_hledani_pole input::placeholder {
    color: oklch(0.6 0.02 60);
    opacity: 1;
}

.pp_hledani_pole input::-webkit-search-cancel-button {
    cursor: pointer;
}

.pp_hledani_pole kbd {
    padding: 3px 7px;
    border: 1px solid var(--pp-linka-tepla);
    border-radius: 5px;
    font: 11px var(--pp-sans);
    color: oklch(0.55 0.02 60);
}

.pp_hledani_rok {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    margin: 10px 0;
    padding-left: 6px;
    border-left: 1px solid oklch(0.9 0.015 75);
}

.pp_hledani_rok select {
    appearance: none;
    padding: 8px 30px 8px 12px;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b4a3a' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: oklch(0.36 0.03 60);
    font: 14px var(--pp-sans);
    cursor: pointer;
}

.pp_hledani button {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 12px;
    background: var(--pp-tlacitko);
    color: #fff;
    font: 600 15px var(--pp-sans);
    letter-spacing: .02em;
    cursor: pointer;
}

.pp_hledani button:hover {
    background: var(--pp-tlacitko-hover);
}

.pp_hledani button .pp_i {
    display: none;
}


/* titulka: nahore pole, pod nim rocnik pres celou sirku a tlacitko */

.pp_hledani_titulka {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: none;
    padding: 10px;
    border: 1.5px solid oklch(0.8 0.03 70);
    box-shadow: 0 1px 0 oklch(1 0 0 / .8) inset, 0 2px 4px oklch(0.35 0.04 60 / .06), 0 28px 56px -26px oklch(0.35 0.05 60 / .55);
}

.pp_hledani_titulka .pp_hledani_pole {
    padding: 0 12px;
}

.pp_hledani_titulka .pp_hledani_pole .pp_i {
    width: 26px;
    height: 26px;
}

.pp_hledani_titulka .pp_hledani_pole input {
    padding: 16px 0;
    font-size: 24px;
}

.pp_hledani_radek {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
}

.pp_hledani_titulka .pp_hledani_rok {
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
}

.pp_hledani_titulka .pp_hledani_rok select {
    width: 100%;
    padding: 14px 40px 14px 16px;
    border-radius: 12px;
    background-color: oklch(0.97 0.01 80);
    background-position: right 16px center;
    font-size: 15px;
}

.pp_hledani_titulka button {
    min-height: 50px;
    padding: 0 34px;
    font-size: 17px;
}


/*
 * Bez vyberu rocniku ($pp_hledani_vyber_roku) nizsi, pole a tlacitko
 * v jednom radku. Jen nad 640 px - telefon ma vlastni jednoradkovou verzi.
 */

@media (min-width: 641px) {
    .pp_hledani_titulka.pp_hledani_jednoradkove {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 6px;
    }
    .pp_hledani_titulka.pp_hledani_jednoradkove .pp_hledani_pole {
        flex: 1;
        padding: 0 10px 0 16px;
    }
    .pp_hledani_titulka.pp_hledani_jednoradkove .pp_hledani_pole .pp_i {
        width: 22px;
        height: 22px;
    }
    .pp_hledani_titulka.pp_hledani_jednoradkove .pp_hledani_pole input {
        padding: 10px 0;
        font-size: 20px;
    }
    .pp_hledani_titulka.pp_hledani_jednoradkove .pp_hledani_radek {
        display: contents;
    }
    .pp_hledani_titulka.pp_hledani_jednoradkove button {
        min-height: 46px;
        padding: 0 28px;
        font-size: 16px;
    }
}

.pp_navrhy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.pp_navrhy span {
    margin-right: 4px;
    font-size: 13px;
    color: var(--pp-tlumene-studene);
}

.pp_navrhy a {
    white-space: nowrap;
    padding: 7px 14px;
    border: 1px solid var(--pp-linka-stitek);
    border-radius: 999px;
    background: #fff;
    color: oklch(0.3 0.015 250);
    font-size: 13px;
}

.pp_navrhy a:hover {
    border-color: var(--pp-akcent);
    color: var(--pp-akcent);
    text-decoration: none;
}


/* karta aktualniho cisla */


/* titulka vlevo pres oba radky, vpravo nahore udaje, dole pristi cislo */

.pp_aktualni {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 0 32px;
    padding: 22px;
    border: 1px solid oklch(0.9 0.015 80);
    border-radius: 24px;
    background: oklch(1 0 0 / .75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--pp-stin-karta);
}

.pp_aktualni_titulka {
    display: block;
    grid-row: 1 / span 2;
    align-self: start;
}


/*
 * Titulka se pri najeti mirne zvedne. Stin je na pseudoelementu a meni se
 * jen jeho pruhlednost - animuje se tedy jen transform a opacity, ktere
 * prohlizec zvladne bez prekreslovani.
 */

.pp_aktualni_titulka .pp_sken {
    border-radius: 4px;
    box-shadow: 0 2px 4px oklch(0.3 0.04 60 / .1), 0 22px 40px -20px oklch(0.3 0.04 60 / .6);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.pp_aktualni_titulka {
    position: relative;
}

.pp_aktualni_titulka::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 4px;
    box-shadow: 0 34px 60px -26px oklch(0.3 0.04 60 / .7);
    opacity: 0;
    transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1);
}

.pp_aktualni_titulka:hover .pp_sken {
    transform: translateY(-4px);
}

.pp_aktualni_titulka:hover::after {
    opacity: 1;
    transform: translateY(-4px);
}

.pp_aktualni_info {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
    padding: 8px 14px 0 0;
}

.pp_aktualni_hlava {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp_aktualni .pp_stitek {
    font-size: 14px;
}

.pp_aktualni .pp_stitek_tecka::before {
    width: 10px;
    height: 10px;
}

.pp_aktualni_cislo {
    font: 400 72px/.95 var(--pp-serif);
    letter-spacing: -0.02em;
    color: oklch(0.22 0.02 60);
}

.pp_aktualni_cislo a {
    color: inherit;
}

.pp_aktualni_cislo a:hover {
    color: var(--pp-akcent);
    text-decoration: none;
}

.pp_aktualni_datum {
    font: 400 28px/1.25 var(--pp-serif);
    color: oklch(0.3 0.02 60);
}

.pp_aktualni_meta {
    font-size: 16px;
    color: var(--pp-tlumene);
}

.pp_aktualni .pp_tlacitko {
    gap: 12px;
    padding: 18px 32px;
    border-radius: 14px;
    font-size: 17px;
}

.pp_aktualni .pp_tlacitko .pp_i {
    width: 19px;
    height: 19px;
}


/*
 * Pulzujici tecka u "Vyslo". Kruh se rozepne a vytrati - jen transform
 * a opacity na malem prvku, takze bezi v kompozitoru a nic neprekresluje.
 */

.pp_aktualni .pp_stitek_tecka {
    position: relative;
}

.pp_aktualni .pp_stitek_tecka::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--pp-tecka);
    animation: pp_pulz 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
    pointer-events: none;
}

@keyframes pp_pulz {
    0% {
        transform: scale(1);
        opacity: .55;
    }
    70% {
        transform: scale(3.2);
        opacity: 0;
    }
    100% {
        transform: scale(3.2);
        opacity: 0;
    }
}


/* pristi cislo - posledni radek karty, oddeleny linkou */

.pp_dalsi_cislo {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 20px 14px 0 0;
    padding-top: 20px;
    border-top: 1px solid oklch(0.9 0.015 80);
}

.pp_dalsi_nahled {
    flex: none;
    width: 92px;
    aspect-ratio: 1 / 1.37 !important;
    box-shadow: 0 6px 14px -8px oklch(0.3 0.04 60 / .5);
}

.pp_dalsi_nahled img {
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: grayscale(.5);
    opacity: .8;
}


/* titulku cisla, ktere jeste nevyslo, jadro nevyda - misto ni papir se lvem */

.pp_dalsi_nahled.pp_bez_nahledu {
    background: var(--pp-papir-tmavsi);
}

.pp_dalsi_nahled.pp_bez_nahledu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(img/pp-lev.svg) center / 48% auto no-repeat;
    opacity: .22;
}


/* ochutnavka pres lva; jen na koukani - neklika se, netahne, neoznacuje */

.pp_dalsi_nahled.pp_bez_nahledu img {
    position: relative;
    z-index: 1;
    width: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.pp_dalsi_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp_dalsi_info .pp_nadpisek {
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--pp-tlumene);
}

.pp_dalsi_cislo_c {
    font: 400 32px/1 var(--pp-serif);
    color: oklch(0.26 0.02 60);
}

.pp_dalsi_datum {
    font-size: 18px;
    color: oklch(0.32 0.02 60);
}

.pp_dalsi_kdy {
    font-size: 14px;
    color: var(--pp-tlumene);
}


/* ------------------------------------------------------ animace uvodu */


/*
 * Pri nacteni uvod jemne vyjede: karta, pak text, hledani a rocniky.
 * Jednou, kratce, jen opacity a transform. Tlacitka a odkazy reaguji na
 * najeti. Kdo ma v systemu omezeny pohyb, nevidi nic z toho (dole).
 */

@keyframes pp_vyjed {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.pp_aktualni,
.pp_uvod_text>*,
.pp_roky_lista {
    animation: pp_vyjed .9s cubic-bezier(.2, .7, .2, 1) both;
}


/* animuje se karta sama, ne jeji obal - pruhledny obal by vypnul
   rozmazani pod kartou a na konci animace by poskocilo */

.pp_aktualni {
    animation-delay: .05s;
}

.pp_uvod_text> :nth-child(1) {
    animation-delay: .15s;
}

.pp_uvod_text> :nth-child(2) {
    animation-delay: .22s;
}

.pp_uvod_text> :nth-child(3) {
    animation-delay: .28s;
}

.pp_uvod_text> :nth-child(4) {
    animation-delay: .34s;
}

.pp_uvod_text> :nth-child(5) {
    animation-delay: .40s;
}

.pp_roky_lista {
    animation-delay: .45s;
}


/* sipka v tlacitku se pri najeti posune dopredu */

.pp_tlacitko .pp_i,
.pp_hledani button .pp_i {
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}

.pp_tlacitko:hover .pp_i,
.pp_hledani button:hover .pp_i {
    transform: translateX(3px);
}

.pp_tlacitko,
.pp_hledani button {
    transition: background-color .2s, border-color .2s;
}

.pp_hledani {
    transition: border-color .2s;
}

.pp_navrhy a {
    transition: border-color .2s, color .2s;
}

.pp_roky_pas a {
    transition: color .2s, border-color .2s;
}


/* -------------------------------------------------------------- roky */


/* pruh rocniku na papire uvodu, pod kartou a hledanim */

.pp_roky_lista {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 28px;
    padding: 4px 24px;
    border: 1px solid oklch(0.9 0.015 80);
    border-radius: 14px;
    background: oklch(1 0 0 / .7);
}

.pp_roky_lista .pp_nadpisek {
    flex: none;
}

.pp_roky_lista .pp_roky_pas {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    border-bottom-color: oklch(0.88 0.015 80);
}

.pp_roky_vse {
    flex: none;
    font-size: 13px;
}

.pp_roky {
    padding-top: 8px;
}

.pp_sekce_hlava {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.pp_sekce_hlava a {
    font-size: 13px;
}

.pp_roky_pas {
    display: flex;
    margin-top: 14px;
    overflow-x: auto;
    border-bottom: 1px solid var(--pp-linka);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.pp_roky_pas a {
    /* jako v navrhu ctrnact sloupcu na sirku; kdyz je rocniku min,
       zustanou vlevo, kdyz vic, pas se posouva do strany */
    flex: 1 0 84px;
    max-width: calc(100% / 14);
    padding: 10px 0 12px;
    border-bottom: 2px solid transparent;
    text-align: center;
    font: 20px var(--pp-serif);
    color: oklch(0.55 0.012 250);
}

.pp_roky_pas a:hover {
    color: var(--pp-akcent);
    text-decoration: none;
}

.pp_roky_pas a[aria-current] {
    color: var(--pp-tlacitko);
    font-weight: 600;
    border-bottom-color: var(--pp-tlacitko);
}

.pp_rocnik_vypis {
    transition: opacity .15s;
}

.pp_rocnik_vypis.pp_nacita {
    opacity: .45;
}

.pp_sekce_radek {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
}

.pp_nadpis_sekce {
    font: 400 28px/1.2 var(--pp-serif);
}

.pp_mrizka {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 32px 24px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.pp_karta_cisla,
.pp_karta_strany {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--pp-text);
}

.pp_karta_cisla:hover,
.pp_karta_strany:hover {
    text-decoration: none;
    color: var(--pp-text);
}

.pp_karta_cisla:hover .pp_stin,
.pp_karta_strany:hover .pp_stin {
    box-shadow: var(--pp-stin-sken-hover);
    transform: translateY(-2px);
}

.pp_karta_popis {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.pp_karta_popis strong {
    font-weight: 600;
}

.pp_karta_popis span {
    color: var(--pp-tlumene-studene);
    text-align: right;
}

.pp_karta_rok {
    font: 600 20px var(--pp-serif);
}

.pp_prazdno {
    margin-top: 24px;
    color: var(--pp-tlumene-studene);
}


/* ------------------------------------------------------------ projekt */

.pp_projekt {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 72px;
    margin-top: 96px;
    padding-top: 40px;
    border-top: 1px solid var(--pp-linka);
}

.pp_projekt_citat {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pp_citat {
    font: 400 clamp(26px, 1.4vw + 14px, 40px)/1.15 var(--pp-serif);
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.pp_citat_autor {
    margin-top: -4px;
    font-size: 15px;
    letter-spacing: .02em;
    color: var(--pp-tlumene);
}

.pp_projekt_text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 34px;
    font-size: 17px;
    line-height: 1.65;
    color: oklch(0.36 0.015 250);
    text-wrap: pretty;
}

.pp_projekt_text p {
    margin: 0;
}


/* ------------------------------------------------------------ paticka */

.pp_paticka {
    margin-top: 80px;
    padding: 64px 0 40px;
    background: var(--pp-papir-tmavsi);
    color: oklch(0.3 0.03 60);
}

.pp_paticka_obsah,
.pp_paticka_spodek {
    width: min(1600px, 100% - 2 * var(--pp-okraj));
    margin-inline: auto;
}


/* sloupcu je 3-4 podle toho, co je k dispozici (pristi cislo, kontakt) */

.pp_paticka_obsah {
    display: grid;
    grid-template-columns: 1.4fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 40px;
}

.pp_paticka_znacka {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp_paticka_logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pp_paticka_logo img {
    display: block;
    width: auto;
}

.pp_paticka_logo img:first-child {
    height: 44px;
}

.pp_paticka_logo img:last-child {
    height: 21px;
}

.pp_paticka_znacka p {
    max-width: 300px;
    font-size: 13px;
    line-height: 1.6;
    color: oklch(0.38 0.03 60);
}

.pp_paticka_sloupec {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.pp_paticka_sloupec h2 {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pp-akcent);
}

.pp_paticka_sloupec a,
.pp_paticka_spodek a {
    color: oklch(0.26 0.03 60);
}

.pp_paticka_site {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.pp_paticka_site a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid oklch(0.8 0.035 70);
    border-radius: 50%;
    color: oklch(0.24 0.03 60);
    transition: background-color .2s, border-color .2s, color .2s;
}

.pp_paticka_site a:hover {
    background: var(--pp-tlacitko);
    border-color: var(--pp-tlacitko);
    color: #fff;
}

.pp_paticka_site .pp_i {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.pp_i_plna {
    fill: currentColor;
    stroke: none;
}

.pp_paticka_dalsi {
    gap: 4px;
}

.pp_paticka_dalsi h2 {
    margin-bottom: 10px;
}

.pp_paticka_dalsi_c {
    font: 400 24px/1.15 var(--pp-serif);
    color: oklch(0.22 0.03 60);
}

.pp_paticka_dalsi_kdy {
    margin-top: 4px;
    color: oklch(0.4 0.03 60);
}

.pp_paticka_spodek {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 48px;
    padding-top: 18px;
    border-top: 1px solid oklch(0.8 0.035 70);
    font-size: 12px;
    color: oklch(0.4 0.03 60);
}

.pp_paticka_jazyky {
    display: flex;
    gap: 18px;
}

.pp_paticka_spodek {
    align-items: center;
}


/* copyright a "Powered by" - na sirce vedle sebe s teckou, na telefonu pod sebou */

.pp_paticka_autor {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}

.pp_paticka_autor>span+span::before {
    content: "·";
    margin: 0 10px;
}

.pp_paticka_autor a {
    text-decoration: underline;
    text-decoration-color: oklch(0.7 0.04 70);
    text-underline-offset: 3px;
}

.pp_paticka_autor a:hover {
    text-decoration-color: currentColor;
}


/* "Nainstalovat aplikaci" - ukaze ho skript, kdyz prohlizec instalaci nabizi */

.pp_instalace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid oklch(0.72 0.04 70);
    border-radius: 999px;
    background: transparent;
    color: oklch(0.26 0.03 60);
    font: 600 12px/1.2 var(--pp-sans);
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}

.pp_instalace[hidden] {
    display: none;
}

.pp_instalace .pp_i {
    width: 15px;
    height: 15px;
}

.pp_instalace:hover {
    background: oklch(0.93 0.02 80);
    border-color: oklch(0.6 0.05 65);
}


/* ------------------------------------------------------ vnitrni strany */

.pp_stranka {
    padding-top: 40px;
}

.pp_drobky {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--pp-tlumene-studene);
}

.pp_drobky a {
    color: var(--pp-tlumene-studene);
}

.pp_drobky a:hover {
    color: var(--pp-akcent);
}

.pp_drobky span[aria-hidden] {
    color: oklch(0.78 0.01 250);
}

.pp_drobky [aria-current] {
    color: var(--pp-text);
}

.pp_stranka_hlava {
    margin-top: 18px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pp-linka);
}

.pp_stranka_hlava h1 {
    font: 400 clamp(32px, 2vw + 20px, 48px)/1.1 var(--pp-serif);
    letter-spacing: -0.01em;
}

.pp_stranka_meta {
    margin-top: 10px;
    font-size: 14px;
    color: var(--pp-tlumene-studene);
}

.pp_rocnik_hlava {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 6px 28px;
}

.pp_rocnik_hlava .pp_stranka_meta {
    grid-column: 1 / -1;
}

.pp_rocnik_rok {
    font-size: clamp(48px, 3vw + 30px, 76px) !important;
    line-height: 1 !important;
}

.pp_listovani_roky {
    display: flex;
    gap: 18px;
    padding-bottom: 8px;
    font: 18px var(--pp-serif);
}


/* cislo */

.pp_cislo_hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
}

.pp_rubriky {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 8px;
    vertical-align: 1px;
}

.pp_rubriky span {
    padding: 2px 8px;
    border: 1px solid var(--pp-linka-stitek);
    border-radius: 999px;
    background: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--pp-akcent);
}

.pp_cislo_akce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.pp_hledani_cislo {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    max-width: 100%;
    padding: 0 14px;
    border: 1px solid var(--pp-linka-tepla);
    border-radius: 12px;
    background: #fff;
    color: var(--pp-akcent);
}

.pp_hledani_cislo:focus-within {
    border-color: var(--pp-akcent);
}

.pp_hledani_cislo input {
    flex: 1;
    min-width: 0;
    padding: 11px 0;
    border: 0;
    background: none;
    font: 16px var(--pp-serif);
    color: var(--pp-text);
    outline: none;
}

.pp_listovani_cisel {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.pp_listovani_cisel a,
.pp_listovani_cisel>span[aria-hidden] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
}

.pp_listovani_cisel a:hover {
    background: var(--pp-papir-tmavsi);
    text-decoration: none;
}

.pp_listovani_cisel>span[aria-hidden] {
    color: oklch(0.82 0.01 250);
}

.pp_listovani_stav {
    padding: 0 6px;
    color: var(--pp-tlumene-studene);
    white-space: nowrap;
}

.pp_strany {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 32px 24px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.pp_karta_strany .pp_karta_popis span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-akcent);
}

.pp_cislo_sousedni {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--pp-linka);
}

.pp_cislo_sousedni a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--pp-text);
}

.pp_cislo_sousedni a:hover {
    text-decoration: none;
}

.pp_cislo_sousedni a:hover strong {
    color: var(--pp-akcent);
}

.pp_cislo_sousedni .pp_vpravo {
    text-align: right;
    align-items: flex-end;
}

.pp_cislo_sousedni .pp_nadpisek {
    font-size: 11px;
}


/* hledani */

.pp_hledani_stranka .pp_hledani_velke {
    margin-top: 0;
    max-width: 980px;
}

.pp_vysledky_obal {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    margin-top: 40px;
}

.pp_vysledky_obal.pp_bez_facet {
    grid-template-columns: minmax(0, 1fr);
}

.pp_facety summary {
    display: none;
}

.pp_facety {
    align-self: start;
    position: sticky;
    top: 24px;
}

.pp_faceta+.pp_faceta {
    margin-top: 28px;
}

.pp_faceta ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.pp_faceta a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    font-size: 14px;
    color: oklch(0.3 0.015 250);
}

.pp_faceta a:hover {
    background: var(--pp-papir-tmavsi);
    text-decoration: none;
}

.pp_faceta a[aria-current] {
    background: var(--pp-tlacitko);
    color: #fff;
}

.pp_faceta a[aria-current] .pp_pocet {
    color: oklch(1 0 0 / .75);
}

.pp_pocet {
    color: var(--pp-tlumene-studene);
    font-variant-numeric: tabular-nums;
}

.pp_faceta_pozn {
    margin-top: 28px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pp-tlumene-studene);
}

.pp_vysledky_hlava {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pp-linka);
}

.pp_vysledky_hlava h1 {
    font: 400 15px/1.4 var(--pp-sans);
    color: var(--pp-tlumene-studene);
}

.pp_vysledky_hlava h1 strong {
    color: var(--pp-text);
    font-weight: 600;
}

.pp_stitky {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp_stitky a {
    display: inline-flex;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--pp-tlacitko);
    color: #fff;
    font-size: 13px;
}

.pp_stitky a:hover {
    background: var(--pp-tlacitko-hover);
    text-decoration: none;
}

.pp_vysledky_seznam {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp_vysledek {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid var(--pp-linka);
}

.pp_vysledek_nahled .pp_sken {
    border-radius: 3px;
}

.pp_vysledek_nahled:hover .pp_stin {
    box-shadow: var(--pp-stin-sken-hover);
}

.pp_vysledek_telo {
    max-width: 78ch;
}

.pp_vysledek_kde {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-tlumene-studene);
}

.pp_vysledek_kde span+span::before {
    content: "·";
    margin: 0 8px;
    color: oklch(0.78 0.01 250);
}

.pp_rubrika {
    font-weight: 600;
    color: var(--pp-akcent);
}

.pp_vysledek_text {
    margin-top: 10px;
    font: 17px/1.6 var(--pp-serif);
    color: oklch(0.28 0.015 250);
    overflow-wrap: anywhere;
}

.pp_vysledek_akce {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 12px;
    font-size: 14px;
}

.pp_vysledek_akce a:first-child {
    font-weight: 600;
}

.pp_strankovani {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    font-size: 14px;
}

.pp_strankovani a,
.pp_strankovani span[aria-current] {
    min-width: 40px;
    padding: 9px 12px;
    border: 1px solid var(--pp-linka-tepla);
    border-radius: 10px;
    text-align: center;
    color: oklch(0.3 0.015 250);
}

.pp_strankovani a:hover {
    border-color: var(--pp-akcent);
    color: var(--pp-akcent);
    text-decoration: none;
}

.pp_strankovani span[aria-current] {
    background: var(--pp-tlacitko);
    border-color: var(--pp-tlacitko);
    color: #fff;
    font-weight: 600;
}

.pp_vypustka {
    padding: 0 4px;
    color: var(--pp-tlumene-studene);
}


/* stavy: prazdne hledani, chyba, 404 */

.pp_stav {
    max-width: 640px;
    padding: 40px 0;
}

.pp_stav h1,
.pp_stav h2 {
    margin: 6px 0 12px;
    font: 400 clamp(26px, 1vw + 20px, 34px)/1.15 var(--pp-serif);
}

.pp_stav>p {
    color: var(--pp-odstavec);
    line-height: 1.6;
}

.pp_stav>p+p {
    margin-top: 12px;
}

.pp_stav_prazdny {
    padding-top: 28px;
}

.pp_stav_akce {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px !important;
}

.pp_stav_ikona {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid oklch(0.55 0.15 35);
    border-radius: 50%;
    color: oklch(0.55 0.15 35);
    font-weight: 700;
}


/* clanek - o projektu */

.pp_clanek {
    max-width: 760px;
    margin-top: 18px;
}

.pp_clanek h1 {
    font: 400 clamp(34px, 2vw + 22px, 52px)/1.08 var(--pp-serif);
    letter-spacing: -0.01em;
}

.pp_clanek>.pp_citat {
    margin-top: 28px;
    color: var(--pp-akcent);
}

.pp_clanek>.pp_citat>* {
    margin: 0;
}

.pp_clanek_perex {
    margin-top: 20px;
    font-size: 19px;
    color: var(--pp-odstavec);
}

.pp_clanek_text {
    margin-top: 28px;
    font: 19px/1.7 var(--pp-serif);
    color: oklch(0.28 0.015 250);
}

.pp_clanek_text p {
    margin: 0 0 1em;
}

.pp_clanek_text h2 {
    margin: 1.6em 0 .5em;
    font: 600 13px/1.3 var(--pp-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pp-nadpisek);
}

.pp_clanek_text img {
    height: auto;
    border-radius: 4px;
}


/*
 * Clanek ze sablony platformy (clanky_v2) - klasicky i z page builderu.
 * Nadpis a popis jako u vestaveneho textu, bloky builderu (.area =
 * sloupce, .block = text/nadpis/obrazek/galerie/tlacitko) v barvach webu.
 */

.pp_clanek_pb {
    max-width: 960px;
}

.pp_clanek_pb .nadpis_clanku h1 {
    margin: 0;
}

.pp_clanek_pb .popis_clanku {
    margin-top: 28px;
    font: 400 clamp(22px, 1vw + 16px, 30px)/1.3 var(--pp-serif);
    color: var(--pp-akcent);
    text-wrap: pretty;
}

.pp_clanek_pb .popis_clanku>* {
    margin: 0;
}

.pp_clanek_pb .clanek,
.pp_clanek_pb .pb_page {
    margin-top: 28px;
    font: 19px/1.7 var(--pp-serif);
    color: oklch(0.28 0.015 250);
}

.pp_clanek_pb .clanek p,
.pp_clanek_pb .blok_text p {
    margin: 0 0 1em;
}

.pp_clanek_pb .blok_text>.obsah> :last-child {
    margin-bottom: 0;
}

.pp_clanek_pb .clanek h2,
.pp_clanek_pb .blok_text h2 {
    margin: 1.6em 0 .5em;
    font: 600 13px/1.3 var(--pp-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pp-nadpisek);
}

.pp_clanek_pb .clanek a,
.pp_clanek_pb .blok_text a {
    color: var(--pp-akcent);
    text-underline-offset: 3px;
}

.pp_clanek_pb .pb_page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-inline: 0;
}

.pp_clanek_pb .area {
    display: flex;
    gap: 32px;
    width: 100%;
}

.pp_clanek_pb .area_column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-width: 0;
}

.pp_clanek_pb .block {
    position: relative;
    min-width: 0;
}

.pp_clanek_pb .blok_heading * {
    margin: 0;
}

.pp_clanek_pb .nadpis {
    font: 400 clamp(26px, 1vw + 18px, 34px)/1.15 var(--pp-serif);
    letter-spacing: -0.01em;
    color: var(--pp-text);
}

.pp_clanek_pb .nadpis_h3,
.pp_clanek_pb .nadpis_h4 {
    font-size: 22px;
}

.pp_clanek_pb .block img,
.pp_clanek_pb .primarni_obrazek img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}

.pp_clanek_pb .primarni_obrazek {
    margin: 0 0 28px;
}

.pp_clanek_pb .blok_gallery .vypis {
    gap: 12px;
}

.pp_clanek_pb .blok_gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
}

.pp_clanek_pb .blok_gallery img {
    height: 100%;
}

.pp_clanek_pb .btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    border-radius: 12px;
    background: var(--pp-tlacitko);
    color: #fff;
    font: 600 15px var(--pp-sans);
    text-decoration: none;
}

.pp_clanek_pb .btn:hover {
    background: var(--pp-tlacitko-hover);
    color: #fff;
    text-decoration: none;
}


/* klasicky clanek ma levy a pravy sloupec (text / obrazek, galerie) */

.pp_clanek_pb:has(>.right_side figure,
>.right_side .fotogalerie) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 48px;
    max-width: 1200px;
}

.pp_clanek_pb .right_side:not(:has(*)) {
    display: none;
}

.pp_clanek_pb>.pp_clanek_pocty {
    grid-column: 1 / -1;
}

@media (max-width: 860px) {
    .pp_clanek_pb .area {
        flex-direction: column;
        gap: 18px;
    }
    .pp_clanek_pb:has(>.right_side figure,
    >.right_side .fotogalerie) {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

.pp_clanek_pocty {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--pp-linka);
    font-size: 14px;
    color: var(--pp-tlumene-studene);
}


/* ------------------------------------------------------------- mensi */

@media (max-width: 1500px) {
    .pp_mrizka,
    .pp_strany {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .pp_aktualni {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        column-gap: 28px;
        padding: 20px;
    }
    .pp_aktualni_cislo {
        font-size: 62px;
    }
    .pp_aktualni_datum {
        font-size: 26px;
    }
    .pp_dalsi_nahled {
        width: 80px;
    }
    .pp_hledani_titulka .pp_hledani_pole input {
        font-size: 22px;
    }
    .pp_uvod_perex {
        font-size: 19px;
    }
}

@media (max-width: 1280px) {
     :root {
        --pp-hlavicka: 88px;
    }
    .pp_znacka_lev {
        height: 48px;
    }
    .pp_znacka_nazev {
        height: 26px;
    }
    .pp_znacka_archiv {
        height: 48px;
    }
    .titulka {
        --pp-hlavicka: 112px;
    }
    .titulka .pp_znacka {
        gap: 20px;
    }
    .titulka .pp_znacka_lev {
        height: 72px;
    }
    .titulka .pp_znacka_nazev {
        height: 38px;
    }
    .titulka .pp_znacka_archiv {
        height: 56px;
        padding-left: 20px;
        font-size: 12px;
    }
    .pp_uvod {
        padding-top: calc(var(--pp-hlavicka) + 40px);
    }
    .pp_uvod_obsah {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .pp_uvod_text {
        order: 1;
    }
    .pp_uvod_cislo {
        order: 2;
        max-width: 820px;
    }
    .pp_mrizka,
    .pp_strany {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .pp_hledani_hlavicka {
        flex-basis: 280px;
    }
}

@media (max-width: 1080px) {
    .pp_menu {
        gap: 18px;
    }
    .pp_hledani_hlavicka {
        display: none;
    }
    .pp_hledani_hlavicka+.pp_menu {
        margin-left: auto;
    }
    .pp_vysledky_obal {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .pp_facety {
        position: static;
    }
    .pp_facety summary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border: 1px solid var(--pp-linka-tepla);
        border-radius: 999px;
        background: #fff;
        font-size: 14px;
        cursor: pointer;
        list-style: none;
    }
    .pp_facety summary::-webkit-details-marker {
        display: none;
    }
    .pp_facety summary::before {
        content: "+";
        font-weight: 700;
        color: var(--pp-akcent);
    }
    .pp_facety[open] summary::before {
        content: "−";
    }
    .pp_facety[open] {
        padding-bottom: 8px;
    }
    .pp_facety[open] .pp_faceta:first-of-type {
        margin-top: 20px;
    }
    .pp_faceta ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .pp_faceta a {
        margin: 0;
        border: 1px solid var(--pp-linka-tepla);
        border-radius: 999px;
        background: #fff;
    }
    .pp_faceta_pozn {
        display: none;
    }
    .pp_projekt {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 72px;
    }
    .pp_projekt_text {
        padding-top: 0;
    }
    .pp_paticka_obsah {
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-flow: row;
    }
    .pp_paticka_znacka {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
     :root,
    .titulka {
        --pp-hlavicka: 72px;
    }
    .pp_hlavicka {
        background: oklch(0.985 0.01 85 / .86);
    }
    .pp_hlavicka_obsah {
        gap: 14px;
    }
    .pp_znacka,
    .titulka .pp_znacka {
        gap: 12px;
    }
    .pp_znacka_lev,
    .titulka .pp_znacka_lev {
        height: 38px;
    }
    .pp_znacka_nazev,
    .titulka .pp_znacka_nazev {
        height: 20px;
    }
    .pp_znacka_archiv,
    .titulka .pp_znacka_archiv {
        display: none;
    }
    .pp_menu_tlacitko {
        display: block;
    }
    .pp_podpora {
        padding: 8px 14px;
        font-size: 13px;
    }
    .pp_podpora_dlouhe {
        display: none;
    }
    .pp_podpora_kratke {
        display: inline;
    }
    .pp_jazyky {
        margin-left: auto;
        border: 0;
        border-radius: 0;
    }
    .pp_jazyky a {
        padding: 6px 7px;
    }
    .pp_jazyky a[aria-current] {
        background: none;
        color: var(--pp-akcent);
    }
    /* menu se na telefonu otevira jako panel pod hlavickou */
    .pp_menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 8px var(--pp-okraj) 16px;
        background: var(--pp-pozadi);
        border-bottom: 1px solid var(--pp-linka);
        box-shadow: 0 24px 40px -24px oklch(0.3 0.04 60 / .35);
        font-size: 17px;
    }
    .pp_menu.pp_otevreno {
        display: flex;
    }
    .pp_menu a {
        padding: 14px 0;
        border-bottom: 1px solid var(--pp-linka);
    }
    .pp_menu>a:last-of-type {
        border-bottom: 0;
    }
    .pp_mrizka,
    .pp_strany {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 16px;
    }
}

@media (max-width: 640px) {
    .pp_uvod {
        padding: calc(var(--pp-hlavicka) + 32px) 0 28px;
    }
    .pp_uvod_sken {
        top: -60px;
        width: 720px;
    }
    .pp_uvod_zavoj {
        background: linear-gradient(180deg, oklch(0.985 0.009 85 / .15) 0, oklch(0.985 0.009 85 / .78) 140px);
    }
    .pp_uvod_perex {
        margin-top: 12px;
        font-size: 15px;
    }
    .pp_uvod_pocty {
        gap: 4px 14px;
        margin-top: 12px;
        font-size: 11px;
    }
    .pp_uvod_obsah {
        gap: 24px;
    }
    .pp_hledani {
        margin-top: 22px;
        padding: 6px 6px 6px 0;
        border-radius: 14px;
    }
    .pp_hledani_pole {
        gap: 10px;
        padding: 0 12px 0 16px;
    }
    .pp_hledani_pole .pp_i {
        width: 20px;
        height: 20px;
    }
    .pp_hledani_pole input {
        padding: 10px 0;
        font-size: 17px;
    }
    .pp_hledani_pole kbd,
    .pp_hledani_rok {
        display: none;
    }
    .pp_hledani button {
        width: 44px;
        min-height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
    }
    .pp_hledani button .pp_tl {
        display: none;
    }
    .pp_hledani button .pp_i {
        display: block;
    }
    /* titulka: na telefonu zase jeden radek - pole a sipka, bez rocniku */
    .pp_hledani_titulka {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--pp-linka-tepla);
        box-shadow: 0 2px 4px oklch(0.35 0.04 60 / .06), 0 18px 36px -20px oklch(0.35 0.05 60 / .45);
    }
    .pp_hledani_titulka .pp_hledani_pole {
        flex: 1;
        padding: 0 12px 0 16px;
    }
    .pp_hledani_titulka .pp_hledani_pole .pp_i {
        width: 20px;
        height: 20px;
    }
    .pp_hledani_titulka .pp_hledani_pole input {
        padding: 10px 0;
        font-size: 17px;
    }
    .pp_hledani_radek {
        display: contents;
    }
    .pp_hledani_titulka button {
        min-height: 44px;
        padding: 0;
    }
    .pp_navrhy {
        gap: 8px;
        margin-top: 14px;
    }
    .pp_navrhy span {
        display: none;
    }
    .pp_navrhy a {
        padding: 7px 14px;
    }
    .pp_aktualni {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 0 16px;
        padding: 16px;
        border-radius: 18px;
        background: #fff;
    }
    .pp_aktualni_info {
        gap: 12px;
        padding: 0;
        justify-content: space-between;
    }
    .pp_aktualni_hlava {
        gap: 8px;
    }
    .pp_stitek,
    .pp_aktualni .pp_stitek {
        font-size: 10px;
        letter-spacing: .16em;
        gap: 8px;
    }
    .pp_stitek_tecka::before,
    .pp_aktualni .pp_stitek_tecka::before {
        width: 7px;
        height: 7px;
        box-shadow: 0 0 0 3px oklch(0.62 0.16 40 / .18);
    }
    .pp_aktualni .pp_stitek_tecka::after {
        width: 7px;
        height: 7px;
        margin-top: -3.5px;
    }
    /* karta je na telefonu bila - rozmazani pod ni by jen stalo vykon */
    .pp_aktualni {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .pp_aktualni_cislo {
        font-size: 30px;
        line-height: 1;
    }
    .pp_aktualni_datum {
        font: 13px/1.45 var(--pp-sans);
        color: var(--pp-odstavec);
    }
    .pp_aktualni_meta {
        display: none;
    }
    .pp_aktualni .pp_tlacitko {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }
    .pp_aktualni .pp_tlacitko .pp_i {
        width: 15px;
        height: 15px;
    }
    /* titulka jen v prvnim radku, pristi cislo pres celou sirku karty */
    .pp_aktualni_titulka {
        grid-row: 1;
    }
    .pp_dalsi_cislo {
        grid-column: 1 / -1;
        gap: 14px;
        margin: 16px 0 0;
        padding-top: 14px;
    }
    .pp_dalsi_nahled {
        width: 44px;
    }
    .pp_dalsi_info {
        gap: 3px;
    }
    .pp_dalsi_info .pp_nadpisek {
        font-size: 10px;
    }
    .pp_dalsi_cislo_c {
        font: 600 14px/1.3 var(--pp-sans);
    }
    .pp_dalsi_datum {
        font-size: 14px;
    }
    .pp_dalsi_kdy {
        font-size: 12px;
    }
    /* rocniky na telefonu bez pruhu: nadpis a "vse" nahore, pas pod nimi */
    .pp_roky_lista {
        flex-wrap: wrap;
        gap: 4px 16px;
        justify-content: space-between;
        margin-top: 24px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .pp_roky_lista .pp_nadpisek {
        font-size: 11px;
    }
    .pp_roky_lista .pp_roky_pas {
        flex-basis: 100%;
        order: 3;
    }
    .pp_roky {
        padding-top: 0;
    }
    .pp_roky_pas a {
        flex: 0 0 64px;
        max-width: none;
        font-size: 17px;
    }
    .pp_nadpis_sekce {
        font-size: 22px;
    }
    .pp_sekce_radek {
        margin-top: 24px;
    }
    .pp_mrizka,
    .pp_strany {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 14px;
        margin-top: 14px;
    }
    .pp_karta_popis {
        font-size: 12px;
    }
    .pp_projekt {
        margin-top: 48px;
        padding-top: 24px;
    }
    .pp_projekt_text {
        font-size: 15px;
    }
    .pp_paticka {
        margin-top: 48px;
        padding: 36px 0 28px;
    }
    .pp_paticka_obsah {
        gap: 28px 16px;
    }
    .pp_paticka_spodek {
        margin-top: 28px;
    }
    .pp_stranka {
        padding-top: 24px;
    }
    .pp_cislo_akce {
        width: 100%;
    }
    .pp_cislo_akce .pp_tlacitko {
        flex: 1 1 auto;
    }
    .pp_hledani_cislo {
        width: 100%;
        order: 3;
    }
    .pp_listovani_cisel {
        margin-left: auto;
    }
    .pp_rubriky {
        display: flex;
        margin: 10px 0 0;
    }
    .pp_vysledek {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 0;
    }
    .pp_vysledek_kde {
        font-size: 11px;
        letter-spacing: .06em;
    }
    .pp_vysledek_text {
        font-size: 16px;
    }
    .pp_cislo_sousedni {
        grid-template-columns: 1fr;
    }
    .pp_cislo_sousedni .pp_vpravo {
        text-align: left;
        align-items: flex-start;
    }
}


/*
 * Hlavicka s tlacitkem sbirky (uplne vpravo) - aby se vse veslo do radku:
 * polozky menu se nezalamuji, tlacitko se od 1280 px zkrati na "Donate",
 * od 1080 px zmizi popisek "Archive" u loga a na malem telefonu se
 * prepinac jazyku presune do menu (.pp_menu_jazyky).
 */

.pp_menu a {
    white-space: nowrap;
}

.pp_menu_jazyky {
    display: none;
}


/* jen nad 860 px - pod tim ma hlavicka vlastni (telefonni) rozlozeni */

@media (max-width: 1500px) and (min-width: 861px) {
    .pp_hlavicka_obsah {
        gap: 20px;
    }
    .pp_menu {
        gap: 20px;
    }
}

@media (max-width: 1280px) {
    .pp_podpora_dlouhe {
        display: none;
    }
    .pp_podpora_kratke {
        display: inline;
    }
}

@media (max-width: 1080px) and (min-width: 861px) {
    .pp_hlavicka_obsah,
    .pp_menu {
        gap: 16px;
    }
    .pp_znacka_archiv,
    .titulka .pp_znacka_archiv {
        display: none;
    }
    /* titulka: znacka jako na vnitrnich strankach, jinak se radek nevejde */
    .titulka .pp_znacka {
        gap: 20px;
    }
    .titulka .pp_znacka_lev {
        height: 56px;
    }
    .titulka .pp_znacka_nazev {
        height: 30px;
    }
}

@media (max-width: 860px) {
    .pp_hlavicka_obsah {
        gap: 12px;
    }
    .pp_menu_tlacitko {
        flex: none;
    }
}

@media (max-width: 480px) {
    .pp_hlavicka_obsah {
        gap: 10px;
    }
    .pp_znacka,
    .titulka .pp_znacka {
        gap: 10px;
    }
    .pp_znacka_nazev,
    .titulka .pp_znacka_nazev {
        height: 18px;
    }
    .pp_jazyky {
        display: none;
    }
    .pp_podpora {
        margin-left: auto;
        padding: 8px 12px;
    }
    .pp_menu_jazyky {
        display: flex;
        gap: 18px;
        padding-top: 14px;
        font-size: 15px;
    }
    .pp_menu .pp_menu_jazyky a {
        padding: 0;
        border: 0;
        color: oklch(0.38 0.03 60);
    }
    .pp_menu .pp_menu_jazyky a[aria-current] {
        color: var(--pp-akcent);
        font-weight: 700;
    }
}

@media (max-width: 400px) {
    .pp_znacka_lev,
    .titulka .pp_znacka_lev {
        height: 32px;
    }
    .pp_znacka_nazev,
    .titulka .pp_znacka_nazev {
        height: 16px;
    }
}


/* nejuzsi telefony: ze sbirky jen srdce (popisek nese aria-label) */

@media (max-width: 340px) {
    .pp_podpora {
        padding: 9px;
    }
    .pp_podpora_kratke {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}


/* ===================================================================
 * Ctecka - prevzata z jadra archivu (public/archiv.css), v barvach webu.
 * Strukturalni pravidla (kniha, lupa, prepis) jsou zamerne stejna,
 * komentare u nich vysvetluji, proc jsou takova.
 * =================================================================== */

.av_app {
    --av-pozadi: oklch(0.21 0.012 60);
    --av-lista: oklch(0.17 0.01 60);
    --av-text: oklch(0.94 0.012 85);
    --av-tlumene: oklch(0.72 0.02 75);
    --av-linka: oklch(0.36 0.018 60);
    --av-hover: oklch(0.27 0.015 60);
}

.av_app *,
.av_app *::before,
.av_app *::after {
    box-sizing: border-box;
}

.av_ikony {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.av_i {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: currentColor;
}

.av_ctecka {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    background: var(--av-pozadi);
    font-family: var(--pp-sans);
}


/* lista musi byt nad knihou - listy flipbooku pri otaceni presahuji */

.av_ctecka_lista,
.av_lupa_lista {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: var(--av-lista);
    color: var(--av-text);
    font-size: 14px;
}

.av_ctecka_nazev {
    font: 400 18px/1.2 var(--pp-serif);
}

.av_ctecka_strana,
.av_lupa_popis {
    color: var(--av-tlumene);
    font-variant-numeric: tabular-nums;
}

.av_lupa_popis {
    font-weight: 600;
    color: var(--av-text);
}

.av_zavrit,
.av_lupa_ven,
.av_lupa_zavrit,
.av_prepis_ven,
.av_prepis_kopie,
.av_prepis_zavrit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--av-linka);
    border-radius: 10px;
    background: none;
    color: var(--av-text);
    font: 500 14px var(--pp-sans);
    white-space: nowrap;
    cursor: pointer;
}

.av_zavrit {
    margin-left: auto;
}

.av_zavrit:hover,
.av_lupa_ven:hover,
.av_lupa_zavrit:hover,
.av_prepis_ven:hover,
.av_prepis_kopie:hover,
.av_prepis_zavrit:hover {
    background: var(--av-hover);
}

.av_lupa_ven:disabled {
    opacity: .35;
    cursor: default;
}

.av_lupa_ven {
    margin-left: auto;
}

.av_lupa_ven+.av_zavrit {
    margin-left: 0;
}


/* ZADNE odsazeni na .av_kniha - knihovna si meri vnejsi sirku a knihu by
   postavila o odsazeni sirsi, nez je misto. Vzduch dela az .av_stred. */

.av_stred {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    min-width: 0;
    padding: 18px 16px 0;
}

.av_kniha {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    padding: 0;
}

.av_kniha .stf__wrapper {
    max-width: 100%;
    margin: 0 auto;
}

.av_kniha.stf__parent {
    text-align: center;
}

.av_strana {
    background: #efe7d6;
    overflow: hidden;
}

.av_zvyrazneni {
    position: absolute;
    background: rgba(255, 224, 102, .42);
    outline: 1px solid rgba(180, 120, 0, .55);
    pointer-events: none;
}

.av_cil {
    position: absolute;
    background: rgba(255, 138, 0, .3);
    outline: 2px solid #ff8a00;
    pointer-events: none;
}

.av_ovladani {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--av-pozadi);
    color: var(--av-tlumene);
}

.av_ovladani button,
.av_lupa_listovani button,
.av_nalezy button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--av-linka);
    border-radius: 10px;
    background: none;
    color: var(--av-text);
    cursor: pointer;
}

.av_ovladani button .av_i,
.av_lupa_listovani button .av_i {
    width: 20px;
    height: 20px;
}

.av_ovladani button:hover,
.av_lupa_listovani button:hover,
.av_nalezy button:hover {
    background: var(--av-hover);
}

.av_ovladani button:disabled,
.av_lupa_listovani button:disabled {
    opacity: .35;
    cursor: default;
}

.av_napoveda {
    font-size: 12px;
    letter-spacing: .02em;
}


/* hledani v otevrenem cisle */

.av_ctecka_hledani {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 260px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--av-linka);
    border-radius: 10px;
    background: var(--av-pozadi);
    color: var(--av-tlumene);
}

.av_ctecka_hledani:focus-within {
    border-color: oklch(0.7 0.08 60);
}

.av_ctecka_hledani input {
    flex: 1;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--av-text);
    font: 15px var(--pp-serif);
    outline: none;
}

.av_ctecka_hledani input::placeholder {
    color: oklch(0.6 0.02 70);
}

.av_nalezy {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.av_nalezy button {
    width: 34px;
    height: 34px;
}

.av_nalez_stav {
    min-width: 5.5em;
    text-align: center;
    color: var(--av-text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}


/* lupa */

.av_lupa {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    background: oklch(0.16 0.01 60);
    font-family: var(--pp-sans);
}

.av_lupa_listovani {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.av_lupa_zavrit {
    margin-left: auto;
}

.av_lupa_plocha {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    overscroll-behavior: contain;
    touch-action: none;
}

.av_lupa_plocha img {
    user-select: none;
    -webkit-user-drag: none;
}

.av_lupa_strana {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.av_lupa_strana img {
    display: block;
    width: 100%;
    height: auto;
}

.av_listovani {
    display: grid;
    gap: 12px;
    overflow: auto;
    max-height: 100%;
}

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


/* prepis strany */

.av_ctecka.av_s_prepisem .av_stred {
    padding-right: min(440px, 45vw);
}

.av_prepis {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9600;
    width: min(440px, 45vw);
    display: flex;
    flex-direction: column;
    background: oklch(0.19 0.012 60);
    border-left: 1px solid var(--av-linka);
    color: var(--av-text);
    font-family: var(--pp-sans);
}

.av_prepis_lista {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--av-linka);
    font-size: 13px;
}

.av_prepis_popis {
    color: var(--av-tlumene);
    margin-right: auto;
}

.av_prepis_text {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px 18px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font: 16px/1.6 var(--pp-serif);
    user-select: text;
    -webkit-user-select: text;
}

@media (max-width: 900px) {
    .av_prepis {
        width: 100%;
        border-left: 0;
    }
    .av_ctecka.av_s_prepisem .av_stred {
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    .av_ctecka_lista,
    .av_lupa_lista {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
    }
    .av_ctecka_nazev {
        flex: 1 1 100%;
        font-size: 16px;
    }
    .av_ctecka_hledani {
        flex: 1 1 140px;
    }
    .av_nalez_stav {
        min-width: 4em;
    }
    .av_napoveda {
        display: none;
    }
    .av_stred {
        padding: 10px 8px 0;
    }
    /* na uzkem zustane u tlacitek jen ikona - nazev nese aria-label */
    .av_zavrit,
    .av_lupa_ven,
    .av_lupa_zavrit,
    .av_prepis_ven,
    .av_prepis_kopie,
    .av_prepis_zavrit {
        padding: 7px 10px;
        gap: 0;
    }
    .av_zavrit .av_tl,
    .av_lupa_ven .av_tl,
    .av_lupa_zavrit .av_tl,
    .av_prepis_ven .av_tl {
        display: none;
    }
    .av_i {
        width: 18px;
        height: 18px;
    }
}


/* dodatky  */

.qr_code {
    max-width: 189px;
}