/**
 * Kabát "ps26" — vzhled ročníku 2026 (grafický návrh v pro jachyma/).
 *
 * Rozsah zatím: HOMEPAGE, O NÁS, VYSTUPUJÍCÍ, DOBRÝ VĚDĚT (+ cover na programu). Konzumuje
 * globální tokeny generované ThemeService
 * (--palette-* z palety ročníku, --color-* ze sémantických rolí) — nic z nich
 * neredefinuje. Zde je jen layout/pozice specifické pro letošní návrh.
 *
 * Barvy CTA jsou POZIČNÍ (swatche "tlacitko home prvni/druhe/treti"):
 *   1. tlačítko → --palette-barva-4 (žlutá)
 *   2. tlačítko → --palette-barva-5 (modrá)
 *   3. tlačítko → --palette-barva-6 (růžová)
 * Pořadí/význam tlačítek řídí admin (sort_order). Klíče `barva-N` generuje editor
 * palety podle pořadí, takže přeskládání palety je může posunout — proto má každá
 * var() fallback na barvu z návrhu. Bez něj by tlačítko spadlo na `transparent`
 * (neplatná var() padá na initial hodnotu, ne na `.hero-button`).
 */

/* Pásmo pod coverem — mezera mezi spodní hranou fotky a nadpisem, v návrhu ~35 px
   na 1300px artboardu. Jedna hodnota pro všechny podstránky (per-page paddingy nuluje
   kabát níž), dekorace se posunem drží u jeho spodní hrany, aby nesahaly do textu.

   Výška coveru je vedle toho jediná hodnota, o kterou se opírají stropy dekorací:
   ilustrace smí přerůst přes celou fotku, ale ne nad ni pod navigaci. Na mobilu se
   cover kreslí celý ve vlastním poměru (~3,7:1), tam ji přepisujeme níž. */
:root {
    --ps-cover-band: clamp(1.75rem, 2.75vw, 2.5rem);
    --ps-cover-height: clamp(220px, 42vh, 460px);
}

/* ===================== Hero = jedna obrazovka bez scrollu =====================
   body je flex column už z reset.css. Přepneme jen na 100dvh (reaguje na mobilní
   lištu prohlížeče) a protáhneme flex:1 řetězcem main-content → hero, ať foto
   vyplní zbytek pod lištou. Adaptuje se na LIBOVOLNOU výšku lišty (žádné magické
   číslo), takže žádný přetok ani scroll. */
body.homepage {
    min-height: 100dvh;

    /* Ilustrace data a obličej sedí oba u pravého okraje pod sebou, ale každý měří
       odjinud: datum je absolutní v hero (šířka roste s oknem), obličej je fixed vůči
       viewportu. Na širokém a nízkém okně se proto potkaly. Odvozujeme výšku data
       z jeho šířky (poměr stran assetu 653.81/223.01 ≈ 2.93) a obličej pouštíme až
       pod ni — viz --ps-face-top níž. */
    --ps-date-width: min(42vw, 560px);
    --ps-date-height: calc(var(--ps-date-width) / 2.93);
    /* Výška hlavičky: hero začíná pod ní, obličej se ale měří od horní hrany okna. */
    --ps-nav-height: 4rem;
    --ps-face-top: max(28%, calc(var(--ps-nav-height) + var(--ps-date-height) + 1rem));
}

body.homepage .main-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.homepage .hero-section {
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
}

/* ===================== HERO: datum konání =====================
   Zářící neonový "sen" vystředěný nahoře — jemná žlutá záře jako u ilustrací.
   Bílý text + tmavý stín kvůli čitelnosti na fotu. Při načtení naskočí jako
   neonka, pak cca 1× za 10 s nenápadně problikne (respektuje prefers-reduced-motion). */
body.homepage .hero-date {
    text-shadow:
        0 0 9px rgba(242, 226, 133, 0.9),
        0 0 26px rgba(242, 226, 133, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.55);
    /* 1) při načtení jednou naskočí jako neonka, 2) pak klidný 10s cyklus. */
    animation:
        ps-neon-on 1.8s ease-out both,
        ps-neon-flicker 10s linear 1.8s infinite;
}

/* Rozsvícení neonky při načtení: jedno plynulé naběhnutí + jemné záškuby.
   Záměrně bez plných on/off záblesků — spodek opacity drží na ~0,4, aby to
   nebyl strobo efekt (práh záblesků WCAG 2.3.1). */
@keyframes ps-neon-on {
    0% { opacity: 0; text-shadow: none; }
    15% { opacity: 0.55; text-shadow: 0 0 6px rgba(242, 226, 133, 0.4); }
    24% { opacity: 0.4; text-shadow: 0 0 4px rgba(242, 226, 133, 0.3); }
    34% { opacity: 0.85; text-shadow: 0 0 10px rgba(242, 226, 133, 0.6), 0 2px 6px rgba(0, 0, 0, 0.55); }
    44% { opacity: 0.55; text-shadow: 0 0 6px rgba(242, 226, 133, 0.4), 0 2px 6px rgba(0, 0, 0, 0.55); }
    56% { opacity: 1; text-shadow: 0 0 14px rgba(242, 226, 133, 0.9), 0 0 34px rgba(242, 226, 133, 0.65), 0 2px 6px rgba(0, 0, 0, 0.55); }
    68% { opacity: 0.8; text-shadow: 0 0 8px rgba(242, 226, 133, 0.5), 0 2px 6px rgba(0, 0, 0, 0.55); }
    100% {
        opacity: 1;
        text-shadow:
            0 0 9px rgba(242, 226, 133, 0.9),
            0 0 26px rgba(242, 226, 133, 0.55),
            0 2px 6px rgba(0, 0, 0, 0.55);
    }
}

/* Klidná zář, pak krátký neonový záblesk na konci 10s cyklu (~0,4 s). */
@keyframes ps-neon-flicker {
    0%, 90%, 100% {
        opacity: 1;
        text-shadow:
            0 0 9px rgba(242, 226, 133, 0.9),
            0 0 26px rgba(242, 226, 133, 0.55),
            0 2px 6px rgba(0, 0, 0, 0.55);
    }
    91% { opacity: 0.55; text-shadow: 0 0 4px rgba(242, 226, 133, 0.35), 0 2px 6px rgba(0, 0, 0, 0.55); }
    92% { opacity: 1; text-shadow: 0 0 10px rgba(242, 226, 133, 0.95), 0 0 30px rgba(242, 226, 133, 0.6), 0 2px 6px rgba(0, 0, 0, 0.55); }
    93% { opacity: 0.6; text-shadow: 0 0 4px rgba(242, 226, 133, 0.35), 0 2px 6px rgba(0, 0, 0, 0.55); }
    94.5% { opacity: 1; text-shadow: 0 0 12px rgba(242, 226, 133, 1), 0 0 34px rgba(242, 226, 133, 0.65), 0 2px 6px rgba(0, 0, 0, 0.55); }
}

/* Nahraná ilustrace data — v návrhu sedí vpravo nahoře nad obličejem, ne na středu.
   Záři má zapečenou v assetu, z neonky si bere jen náběh a probliknutí (opacita
   z keyframes; text-shadow v nich je na <img> neúčinný). */
body.homepage .hero-date-image {
    top: 0;
    right: 3%;
    left: auto;
    transform: none;
    width: var(--ps-date-width);
    max-width: none;
    animation:
        ps-neon-on 1.8s ease-out both,
        ps-neon-flicker 10s linear 1.8s infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.homepage .hero-date,
    body.homepage .hero-date-image {
        animation: none;
    }
}

/* ===================== CTA tlačítka: JEN barva (poziční) =====================
   Tvar/velikost drží base .hero-button z homepage.css. Přebarvíme bg i border,
   a držíme barvu i na :hover (jinak by base hover přepnul na globální button-hover). */
body.homepage .hero-button:nth-child(1),
body.homepage .hero-button:nth-child(1):hover {
    background: var(--palette-barva-4, #f2e285);
    border-color: var(--palette-barva-4, #f2e285);
}

body.homepage .hero-button:nth-child(2),
body.homepage .hero-button:nth-child(2):hover {
    background: var(--palette-barva-5, #bcd3e8);
    border-color: var(--palette-barva-5, #bcd3e8);
}

body.homepage .hero-button:nth-child(3),
body.homepage .hero-button:nth-child(3):hover {
    background: var(--palette-barva-6, #e8c7d7);
    border-color: var(--palette-barva-6, #e8c7d7);
}

/* ===================== Ilustrace =====================
   Kompozice přes foto. Assety mají zapečenou záři — žádný glow/filtr v CSS.
   Leží pod tlačítky (z-index 5 < 10), takže je CTA překrývají jako v návrhu. */
body.homepage .decorative-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* sasanka — vlevo dole, přetéká přes dav a záměrně i pod řadu tlačítek */
body.homepage .decorative-top-left-wrapper {
    display: block;
    top: auto;
    bottom: -1rem;
    left: -1rem;
    width: 44%;
    max-width: 620px;
    height: auto;
    aspect-ratio: 1400 / 1188;
}

/* obličej — vpravo, střední výška; nikdy ne výš než pod datum */
body.homepage .decorative-top-right-wrapper {
    top: var(--ps-face-top);
    right: 0;
    left: auto;
    width: 27%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 921 / 1600;
}

/* ===================== RESPONSIVE (mobile-first priorita) ===================== */
@media (max-width: 768px) {
    /* Tlačítka se skládají na střed dole → sasanku zvedneme do dolní levé části
       NAD ně (jinak ji plné bloky překryjí). Drží se ~pozice z návrhu (vlevo dole). */
    body.homepage .decorative-top-left-wrapper {
        width: 68%;
        left: -1rem;
        bottom: auto;
        top: 36%;
    }

    /* Datum je na mobilu širší, takže i vyšší — spodní hranu hlídá pořád --ps-face-top. */
    body.homepage {
        --ps-date-width: 66vw;
        --ps-face-top: max(16%, calc(var(--ps-nav-height) + var(--ps-date-height) + 1rem));
    }

    body.homepage .decorative-top-right-wrapper {
        width: 40%;
    }

    body.homepage .hero-date-image {
        right: 2%;
    }
}

@media (max-width: 480px) {
    body.homepage {
        --ps-date-width: 76vw;
    }

    body.homepage .decorative-top-left-wrapper {
        width: 76%;
        top: 38%;
    }

    body.homepage .decorative-top-right-wrapper {
        width: 46%;
    }
}

/* =====================================================================
   STRÁNKA "O NÁS" — cover + velký nadpis + 2 kompoziční dekorace
   ===================================================================== */

/* Cover zůstává v kontejneru (max-width 1200 z base) jako v návrhu — jen vyšší. */
.onas-page .cover-section {
    min-height: var(--ps-cover-height);
}

/* Řádek je široký přesně jako text nadpisu, takže se tvář vedle něj kotví na jeho
   pravou hranu, ať přijde z CMS jakkoli dlouhý název. */
.onas-page .page-title-row {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

/* Vodorovný clip až na celé stránce (viewport, ne kontejner): tvář za dlouhým
   názvem z CMS ani pták přečnívající pravou hranu coveru nesmí vyrobit vodorovný
   scroll — u kraje okna se křídlo usekne, stejně jako je ořízlé v návrhu.
   Svisle nic, dekorace rostou přes cover nahoru. */
.onas-page {
    overflow-x: clip;
    overflow-y: visible;
}

/* Pásmo cover→nadpis jako padding (viz vystupující): vlastní padding stránky by mezeru
   rozjel proti ostatním podstránkám a margin na nadpisu by ze sekce vytekl i s kotvou
   ptáka, který na její horní hraně visí. */
.onas-page .content-section {
    padding-top: var(--ps-cover-band);
}

/* Dekorace mají zapečenou záři — žádný glow/filtr v CSS. */
.onas-page .onas-deco {
    display: block;
    position: absolute;
    height: auto;
    pointer-events: none;
}

/* Žlutá tvář — akcent těsně vpravo za nadpisem; v návrhu sahá horní třetinou do
   fotky a bradou k účaří nadpisu. Kotva za spodní hranu řádku drží bradu nad
   odstavcem, do coveru tvář dosáhne svou výškou. */
.onas-page .onas-deco--face {
    z-index: 0;
    left: 100%;
    bottom: 0;
    margin-left: clamp(0.5rem, 1vw, 1rem);
    /* Řádek je úzký jako nadpis, takže `max-width: 100%` z resetu by tvář srazil
       na jeho šířku — tady se měří na okno, ne na rodiče. */
    max-width: none;
    width: clamp(160px, 19vw, 280px);
    /* Poměr je jen rezervace místa; asset jde z adminu, takže bez `contain` by se
       jinak ořezaná kresba roztáhla (viz 8881995 u dobrý vědět). */
    aspect-ratio: 1184 / 1200;
    object-fit: contain;
    object-position: bottom left;
}

/* Červený pták — visí ze spodní hrany coveru vpravo, v návrhu skoro polovinou
   pod fotkou. translateY drží spodek nad odstavcem (níž než pásmo smí, protože
   nadpis je vlevo a text pod ním začíná až za ocasem). */
.onas-page .onas-deco--bird {
    z-index: 2;
    top: 0;
    /* Záporný right = přesah přes pravou hranu coveru do okraje stránky (v návrhu
       ~35 px); na užším okně ho clip na .onas-page usekne u kraje viewportu. */
    right: clamp(-2.75rem, -2.5vw, -1.5rem);
    width: clamp(200px, 25vw, 390px);
    aspect-ratio: 1200 / 1470;
    object-fit: contain;
    object-position: bottom right;
    transform: translateY(-63%);
}

@media (max-width: 768px) {
    .onas-page .onas-deco--face {
        width: clamp(120px, 28vw, 170px);
    }

    .onas-page .onas-deco--bird {
        width: clamp(140px, 32vw, 210px);
        transform: translateY(-66%);
    }
}

/* =====================================================================
   STRÁNKA "PROGRAM" (harmonogram) — jen cover
   =====================================================================
   Layout stránky zůstává základní (seznam čas + interpret); z kabátu bereme
   jen cover a stejný odstup nadpisu jako na ostatních podstránkách. */
.lineup-page .cover-section {
    min-height: var(--ps-cover-height);
}

/* Pásmo jen když cover opravdu je — bez fotky se sekce nerenderuje a mezera
   pod hlavičkou by neměla co odsazovat. */
.lineup-page .cover-section + .page-header .page-title {
    padding-top: var(--ps-cover-band);
}

/* =====================================================================
   STRÁNKA "VYSTUPUJÍCÍ" — cover + velký nadpis + dvojice tváří pod coverem
   ===================================================================== */

.vystupujici-page .cover-section {
    min-height: var(--ps-cover-height);
}

/* Pásmo cover→nadpis jako padding, ne margin na nadpisu: page-header nemá padding
   ani border, takže by mu horní margin dítěte vytekl ven (collapsing) a posunul dolů
   i jeho hranu — a s ní kotvu absolutně pozicované dekorace. Stejně to dělá dobrý
   vědět níž. */
.vystupujici-page .page-header {
    padding-top: var(--ps-cover-band);
}

/* Typografii nadpisu řeší globální h1 (core/typography.css). */
.vystupujici-page .page-title {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

/* Dvojice tváří je jeden asset — v návrhu visí ze spodní hrany coveru napravo
   od nadpisu, větší částí přes foto. Procentní šířka i posun jsou vůči
   page-headeru (stejný kontejner jako cover), takže kompozice drží od mobilu
   po širokou plochu. Záře je zapečená v assetu — žádný filtr v CSS. */
.vystupujici-page .vystupujici-deco {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    /* 32 %, ne 25 % z návrhu: náš nadpis „vystupující" je širší než „program"
       v PDF a levé tykadlo mu nesmí křížit poslední písmena — nejtěsněji je
       kolem 1024 px, kde nadpis (px+vw) roste rychleji než kontejner. */
    left: 32%;
    width: 40%;
    height: auto;
    max-height: calc(var(--ps-cover-height) + var(--ps-cover-band));
    object-fit: contain;
    object-position: bottom left;
    transform: translateY(-54%);
    pointer-events: none;
}

@media (max-width: 768px) {
    /* Kotva spodní hranou na konec pásma (jako dobrý vědět): nadpis tu má skoro celou
       šířku a s procentním posunem se s ním tykadla na některé šířce vždycky potkala.
       Strop výšky drží dekoraci pod horní hranou fotky. */
    .vystupujici-page .vystupujici-deco {
        left: auto;
        right: 0;
        width: 54%;
        margin-top: var(--ps-cover-band);
        transform: translateY(-100%);
        object-position: bottom right;
    }
}

/* =====================================================================
   STRÁNKA "DOBRÝ VĚDĚT" — cover + velký nadpis + 2 kompoziční dekorace
   ===================================================================== */

.dobry-vedet-page .cover-section {
    min-height: var(--ps-cover-height);
}

/* Horní mezera dělá „pásmo" pro dekorace visící z coveru, ať nelezou do textu.
   Typografii nadpisu řeší globální h1 (core/typography.css). */
.dobry-vedet-page .main-title {
    position: relative;
    z-index: 3;
    margin-top: 0;
}

/* Podnadpisy sekcí (kudy k nám, ubytování) — lowercase jako v návrhu. */
.dobry-vedet-page .section-title,
.dobry-vedet-page .section-content h3 {
    text-transform: lowercase;
}

/* Pásmo pro dekorace visící z coveru. Na ostatních podstránkách ho dělá horní
   mezera nadpisu, tady ale `main_title` nemusí být vyplněný a text by pak začal
   hned pod coverem — pásmo proto drží sekce sama, ať dekorace nikdy nespadne
   do odstavce. */
.dobry-vedet-page .content-section {
    padding-top: var(--ps-cover-band);
}

/* Assety mají zapečenou záři i barevnost — žádný blend ani filtr (base je
   používá kvůli loňským ilustracím na bílém pozadí).
   Kotvíme spodní hranou: translateY(-100%) posadí ilustraci nad obsah a
   margin-top ji spustí dolů. V návrhu obě ilustrace padají až vedle nadpisu,
   proto pásmo + drop (~úroveň spodku nadpisu); horizontálně jsou za jeho koncem,
   do plné šířky textu pod nadpisem nedosáhnou — bez ohledu na výšku assetu.
   Strop výšky je cover + pásmo. Výška ilustrace se totiž odvíjí od šířky okna,
   kdežto cover od jeho výšky (vh) — na nízkém a širokém okně by jinak přerostla
   horní hranu fotky a schovala se pod navigaci. */
.dobry-vedet-page .dobry-vedet-deco {
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    height: auto;
    /* drop = o kolik spadnou pod pásmo, k úrovni nadpisu (na mobilu míň). */
    max-height: calc(var(--ps-cover-height) + var(--ps-cover-band) + clamp(3rem, 7vw, 6rem));
    margin-top: calc(var(--ps-cover-band) + clamp(3rem, 7vw, 6rem));
    transform: translateY(-100%);
    pointer-events: none;
    mix-blend-mode: normal;
    filter: none;
    /* Šířka je pevná (%), výšku shora usekává strop — bez `contain` by se
       kresba o ten rozdíl stlačila. Takhle se místo toho zmenší celá v poměru.
       Obrázky jsou z adminu, takže kdy strop zabere, závisí na nahraném assetu —
       proto se každá dekorace kotví tou hranou, ke které ji váže kompozice. */
    object-fit: contain;
}

/* Shluk uprostřed — spadne pod cover mezi nadpis a text. */
.dobry-vedet-page .dobry-vedet-deco--1 {
    left: 36%;
    width: 33%;
    object-position: bottom left;
}

/* Vysoká figura u pravého okraje — leží na coveru, dolů sahá jen do pásma. */
.dobry-vedet-page .dobry-vedet-deco--2 {
    right: 0;
    width: 30%;
    object-position: bottom right;
}

@media (max-width: 768px) {
    /* Bez dropu: nadpis tu zabírá skoro celou šířku, takže vedle něj dekorace
       nevyjdou — končí v pásmu nad ním. Strop výšky jde z --ps-cover-height. */
    .dobry-vedet-page .dobry-vedet-deco {
        margin-top: var(--ps-cover-band);
        max-height: calc(var(--ps-cover-height) + var(--ps-cover-band));
    }

    .dobry-vedet-page .dobry-vedet-deco--1 {
        left: 0;
        width: 42%;
    }

    .dobry-vedet-page .dobry-vedet-deco--2 {
        width: 34%;
    }
}

/* =====================================================================
   COVER NA MOBILU — celá fotka místo výřezu (všechny podstránky)
   =====================================================================
   Cover fotky jsou široké pásy (~3,7:1). Base je kreslí přes object-fit: cover
   do pevné výšky, což na úzkém displeji ukáže jen ~polovinu šířky ukotvenou
   vlevo — často nezajímavý kraj záběru. Do 768 px proto pevnou výšku pouštíme
   a obrázek necháme téct v jeho vlastním poměru: nic se neořízne a není co
   konfigurovat. Dekorace visí ze spodní hrany coveru dál, ty jsou kotvené
   k page-headeru. */
@media (max-width: 768px) {
    :root {
        --ps-cover-height: 27vw;
    }

    .onas-page .cover-section,
    .lineup-page .cover-section,
    .vystupujici-page .cover-section,
    .dobry-vedet-page .cover-section {
        min-height: 0;
    }

    .onas-page .cover-image,
    .lineup-page .cover-image,
    .vystupujici-page .cover-image,
    .dobry-vedet-page .cover-image {
        position: static;
        height: auto;
    }
}