/**
 * Příchod – stránka Obrlobus a Rozcestník (fáze F3, read/claude/vizual-prichod-plan.md).
 *
 * Načítá se jen ve vzhledu Příchod (pages/obrlobus.php a index.php → $lookStylesheets), až po prichod.css.
 *
 * Obrlobus: nahoře hrdina (název a samostatný text pod nadpisem z administrace – home_hero_text.php) a postava
 * z obrazu Příchod bez pozadí (Jakub 9. 10.: bez mlhy u nohou, působila jako flek). Pod ní karty oblastí v barvách
 * kostýmu (předměty ve scéně – stejné v obou motivech), pak promo bannery, Články a Obrazárium (sekce Úvod
 * zrušena 10. 10.).
 * Cesty dál nabízejí karty oblastí (bez tlačítek v hrdinovi).
 * Pořadí částí řídí CSS (order), markup stránky zůstává jeden pro oba vzhledy.
 *
 * Rozcestník: dlaždice přes celou šířku okna (bez pravidla tlačítek), barvy kostýmu po pořadí.
 */

/* =========================================================================
   1) Pořadí částí stránky Obrlobus
   ========================================================================= */
:root[data-look="prichod"] .obrlobus-home-page main.obrlobus-home {
    display: flex;
    flex-direction: column;
}

:root[data-look="prichod"] .obrlobus-home > .pr-hero { order: 0; }
:root[data-look="prichod"] .obrlobus-home > .obrlobus-signpost { order: 1; }
:root[data-look="prichod"] .obrlobus-home > .obrlobus-promo { order: -1; } /* karusel nad hrdinou (Jakub 11. 10. večer) */
:root[data-look="prichod"] .obrlobus-home > .obrlobus-home-intro-divider { order: 4; }
:root[data-look="prichod"] .obrlobus-home > .obrlobus-articles { order: 5; }
:root[data-look="prichod"] .obrlobus-home > .obrlobus-gallery { order: 6; }

/* =========================================================================
   2) Hrdina s postavou
   ========================================================================= */
:root[data-look="prichod"] .pr-hero {
    --pr-figure-h: clamp(30rem, 82vh, 52rem);
    /* o kolik postava sahá pod dlaždice oblastí: do poloviny výšky lepíku (Jakub 10. 10.; lepíky 11. 10. – velikost viz oddíl 3) */
    --pr-figure-overlap: calc(var(--dash-tile, 9.5rem) / 2);
    position: relative;
    overflow-x: clip; /* nic z hrdiny nesmí rozšířit stránku do stran */
    width: min(100%, var(--content-shell-max, 1280px));
    min-height: calc(var(--pr-figure-h) - var(--pr-figure-overlap));
    margin: 0 auto;
    /* dole mezera mezi textem a dlaždicemi (Jakub 10. 10.: dlouhý úvod končil přímo na dlaždicích) */
    padding: clamp(3rem, 9vh, 6.5rem) var(--page-gutter-right, 1.5rem) clamp(2rem, 5vh, 3.5rem) var(--page-gutter-left, 1.5rem);
    box-sizing: border-box;
}

/* světlo za textem odstraněno (Jakub 10. 10.: okraj oříznutého přechodu působil jako slabý rámeček) */

:root[data-look="prichod"] .pr-hero__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.35rem;
    max-width: min(36rem, 50%);
}

:root[data-look="prichod"] .pr-hero__title {
    margin: 0;
    font-family: var(--pr-font-title);
    font-size: clamp(2.6rem, 6vw, 5.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--pr-ink);
    text-shadow: 0.5px -0.6px 0 var(--pr-ca-red), -0.5px 0.6px 0 var(--pr-ca-cyan);
}

:root[data-look="prichod"] .pr-hero__lead {
    margin: 0;
    max-width: 30rem;
    font-family: var(--font-reading);
    font-size: clamp(1.1rem, 1.6vw, 1.375rem);
    line-height: 1.5;
    color: var(--pr-ink-2);
}

/* obtékání postavy (Jakub 10. 10.): na počítači text nemá pevnou šířku, řádky končí 2rem před obrysem postavy –
   neviditelný plovoucí prvek .pr-hero__shape s shape-outside staví obrlobus-home.js podle obrysu obrázku (data-shape).
   Strop 46rem drží čitelnou délku řádku tam, kde postava nezasahuje (nad hlavou). Bez skriptu platí původní šířky. */
:root[data-look="prichod"] .pr-hero__shape {
    display: none;
    float: right;
    pointer-events: none;
}

@media (min-width: 769px) {
    :root[data-look="prichod"] .pr-hero__text:has(> .pr-hero__shape) {
        display: block;
        max-width: none;
    }

    :root[data-look="prichod"] .pr-hero__text:has(> .pr-hero__shape) .pr-hero__title {
        margin-bottom: 1.35rem;
    }

    :root[data-look="prichod"] .pr-hero__text:has(> .pr-hero__shape) .pr-hero__lead {
        max-width: 46rem;
    }
}

/* postava: stojí vpravo, pevná výška (nezávislá na délce textu), nohy zasahují pod karty oblastí */
:root[data-look="prichod"] .pr-hero__stage {
    position: absolute;
    z-index: 1;
    /* ukotvená ke spodku hrdiny: vždy sahá o --pr-figure-overlap pod dlaždice, i když je úvodní text dlouhý */
    top: auto;
    bottom: calc(-1 * var(--pr-figure-overlap));
    right: clamp(0rem, 3vw, 3rem);
    height: var(--pr-figure-h);
    width: min(46%, 40rem);
    pointer-events: none;
}

:root[data-look="prichod"] .pr-hero__figure {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
    /* křídla pláště končí v souboru u kraje plátna → rozplynou se; dole se postava plynule ztrácí
       (spodních 20 % od průhledné po plnou), aby se prolnula s kartami oblastí pod ní (Jakub 10. 10.) */
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
        linear-gradient(0deg, transparent 0%, #000 20%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
        linear-gradient(0deg, transparent 0%, #000 20%);
    mask-composite: intersect;
    /* barevný posun: postava je vpravo od ohniska → třásně míří ven */
    filter: drop-shadow(0.9px 0.1px 0 var(--pr-ca-red)) drop-shadow(-0.9px -0.1px 0 var(--pr-ca-cyan));
}

/* =========================================================================
   3) Karty oblastí = lepíky (Jakubovy kresby sticker notes, 11. 10.) – barvy kostýmu v obou motivech
   Lepík je čtverec: obrázek assets/images/prichod/notes/lepik-*.svg je oříznutý na tvar lístku (preserveAspectRatio
   none) a leží v ::before přes celou dlaždici. Vržený stín dělá web (--pr-note-shadow v prichod.css), stínování
   a zrno jsou v SVG. --dash-n = počet dlaždic (pages/obrlobus.php).
   ========================================================================= */
:root[data-look="prichod"] .obrlobus-home {
    --dash-gap: clamp(0.6rem, 1.1vw, 1rem);
    /* velikost lepíku: řada vyplní šířku obsahu s malými mezerami (Jakub 11. 10.: větší lepíky, menší rozestupy),
       nejvýš 22rem – při málo dlaždicích by byly obří, pak se řada vystředí */
    --dash-tile: min(22rem, (min(var(--content-shell-max, 1280px), 100vw) - var(--page-gutter-left, 1.5rem) - var(--page-gutter-right, 1.5rem) - (var(--dash-n, 4) - 1) * var(--dash-gap)) / var(--dash-n, 4));
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-signpost {
    position: relative;
    z-index: 3;
    overflow-x: clip; /* natočené lepíky u okraje telefonu nesmí rozšířit stránku do stran */
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-signpost__inner {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-grid {
    grid-template-columns: repeat(var(--dash-n, 4), var(--dash-tile));
    justify-content: center;
    gap: var(--dash-gap);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card {
    --card-ink: #f2f4f5;
    --card-num: #d4a52c;
    --note: url("../../images/prichod/notes/lepik-antracit-2.svg");
    --note-r: -2.2deg;
    position: relative;
    isolation: isolate;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.35rem;
    aspect-ratio: 1;
    min-height: 0;
    padding: 12% 12% 13% !important;
    text-align: left;
    background: none !important;
    color: var(--card-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-box-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    rotate: var(--note-r); /* vlastnost rotate – transform používá odkrývání karet (listing-cards.js) */
    transition: rotate 0.25s ease, translate 0.25s ease;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--note) center / 100% 100% no-repeat;
    filter: var(--pr-note-shadow);
    pointer-events: none;
    transition: filter 0.25s ease;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card[data-signpost="postavy"],
:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card:not([data-signpost]):nth-child(4n + 2) {
    --note: url("../../images/prichod/notes/lepik-zelena-1.svg");
    --note-r: 1.6deg;
    --card-num: #57b784;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card[data-signpost="lokace"],
:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card:not([data-signpost]):nth-child(4n + 3) {
    --note: url("../../images/prichod/notes/lepik-bila-4.svg");
    --note-r: 2.4deg;
    --card-ink: #1b1b1b;
    --card-num: #1c342c;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card[data-signpost="obrazarium"],
:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card:not([data-signpost]):nth-child(4n + 4) {
    --note: url("../../images/prichod/notes/lepik-modra-3.svg");
    --note-r: -1.1deg;
    --card-ink: #f2f4f5;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card .obrlobus-dash-card__value {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.4vw, 2.75rem);
    font-weight: 700;
    color: var(--card-num) !important;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card .obrlobus-dash-card__label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--card-ink) !important;
}

/* telefon a tablet: karty oblastí bez animace „vyjetí“ (Jakub 10. 10.: při scrollu problikávaly). Odkrývání
   (listing-cards.js) je na dotykových zařízeních schovává a znovu ukazuje, kdykoli opustí obrazovku – i když
   Safari při scrollu mění výšku lišty – a animovaná průhlednost pod pásem rozostření (.pr-site-band) bliká.
   Hranice 1024 px = stejná jako mobilní odkrývání v listing-cards.js. */
@media (max-width: 1024px) {
    :root[data-look="prichod"] .obrlobus-home .obrlobus-signpost .obrlobus-dash-card.js-listing-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }
}

/* telefon a tablet (Jakub 11. 10. večer): lepíky bez animace – ani narovnání po klepnutí */
@media (max-width: 1024px), (hover: none) {
    :root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card,
    :root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card::before {
        transition: none !important;
    }

    :root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card:is(:hover, :focus-visible, :active) {
        rotate: var(--note-r);
        translate: none;
    }

    :root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card:is(:hover, :focus-visible, :active)::before {
        filter: var(--pr-note-shadow);
    }
}

/* najetí: lepík se narovná, zvedne a stín se prodlouží */
:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.is-revealed:hover,
:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.is-revealed:focus-visible {
    rotate: 0deg;
    translate: 0 -4px;
    filter: none !important;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.is-revealed:hover::before,
:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.is-revealed:focus-visible::before {
    filter: var(--pr-note-shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card,
    :root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.obrlobus-dash-card::before {
        transition: none;
    }
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card:focus-visible {
    outline: 2px dashed var(--pr-ink);
    outline-offset: 4px;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card.is-centered-last {
    grid-column: auto;
}

/* =========================================================================
   4) Promo bannery, nadpisy, články, Obrazárium
   ========================================================================= */
:root[data-look="prichod"] .obrlobus-home .obrlobus-promo {
    margin-top: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-promo__viewport {
    border-radius: var(--pr-card-radius) !important;
    overflow: hidden;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.6);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-promo__dot {
    border-radius: 999px !important;
    background: var(--pr-track) !important;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-promo__dot.is-active {
    background: var(--pr-link) !important;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-home-intro-divider {
    display: none;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-section__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--pr-ink);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__media,
:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__media img,
:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__media-placeholder,
:root[data-look="prichod"] .obrlobus-home .gallery-card__media {
    border-radius: var(--pr-card-radius) !important;
    -webkit-mask: none !important;
    mask: none !important;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__media {
    overflow: hidden;
    box-shadow: 0 18px 34px -20px rgba(0, 0, 0, 0.55);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__media-placeholder {
    background: linear-gradient(170deg, #2a553e, #1c342c) !important;
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--pr-ink);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__meta {
    color: var(--pr-muted);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__excerpt {
    color: var(--pr-ink-2);
}

:root[data-look="prichod"] .obrlobus-home .obrlobus-articles__more {
    color: var(--pr-link) !important;
    font-weight: 600;
}

/* =========================================================================
   5) Telefon a tablet: text nahoře, postava pod ním
   ========================================================================= */
@media (max-width: 768px) {
    :root[data-look="prichod"] .pr-hero {
        min-height: 0;
        padding-top: clamp(1.75rem, 6vh, 3rem);
        padding-bottom: 0; /* postava pod textem sahá za dlaždice – mezeru nedělá hrdina */
    }

    :root[data-look="prichod"] .pr-hero__text {
        max-width: none;
        gap: 1.1rem;
    }

    :root[data-look="prichod"] .pr-hero__stage {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: min(72vh, 34rem);
        /* telefon (Jakub 12. 10.): postava končí v třetině výšky horní řady lepíků (lepíky ji překryjí jen tou třetinou) */
        margin: 1.25rem auto calc(-1 * var(--dash-tile) / 3);
    }

    /* telefon: lepíky 2 × 2 přes šířku obsahu */
    :root[data-look="prichod"] .obrlobus-home {
        --dash-tile: calc((100vw - var(--page-gutter-left, 16px) - var(--page-gutter-right, 16px) - var(--dash-gap)) / 2);
    }

    :root[data-look="prichod"] .obrlobus-home .obrlobus-dash-grid {
        grid-template-columns: repeat(2, var(--dash-tile));
    }

    /* lichý počet karet: poslední lepík stejně velký, na střed */
    :root[data-look="prichod"] .obrlobus-home .obrlobus-dash-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: var(--dash-tile);
    }
}


/* =========================================================================
   6) Rozcestník – dlaždice přes celou šířku okna v barvách kostýmu
   Jakub 8. 10.: dlaždice od kraje ke kraji (kvůli efektu posunu při najetí),
   bez pravidla tlačítek a polí – žádné zaoblení ani mezery.
   ========================================================================= */
:root[data-look="prichod"] .banner-container {
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

:root[data-look="prichod"] .banner-container .banner {
    --fill: #2a553e;
    --banner-ink: #f2f4f5;
    border-radius: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-box-image: none !important;
    box-shadow: none !important;
}

:root[data-look="prichod"] .banner-container .banner:nth-of-type(5n + 2) {
    --fill: #2c2c2c;
}

:root[data-look="prichod"] .banner-container .banner:nth-of-type(5n + 3) {
    --fill: #f2f4f5;
    --banner-ink: #1b1b1b;
}

:root[data-look="prichod"] .banner-container .banner:nth-of-type(5n + 4) {
    --fill: #23323d;
    --banner-ink: #f2f4f5;
}

:root[data-look="prichod"] .banner-container .banner:nth-of-type(5n + 5) {
    --fill: #357a52;
}

:root[data-look="prichod"] .banner-container .banner .banner-content,
:root[data-look="prichod"] .banner-container .banner .reveal-visual {
    border-radius: 0 !important;
}

/* plocha dlaždice = barva kostýmu (obrázek z administrace ji překryje) */
:root[data-look="prichod"] .banner-container .banner .banner-content {
    background-color: var(--fill) !important;
}

:root[data-look="prichod"] .banner-container .banner .banner-content h2 {
    font-family: var(--pr-font-title) !important;
    font-weight: 700 !important; /* theme-light.css dává 500 !important */
    letter-spacing: -0.005em;
    color: var(--banner-ink) !important;
    text-shadow: 0.5px -0.5px 0 var(--pr-ca-red), -0.5px 0.5px 0 var(--pr-ca-cyan);
}

:root[data-look="prichod"] .banner-container .banner:focus-visible {
    outline: 2px dashed var(--banner-ink);
    outline-offset: -6px;
}