/*
 * Widgets.HomePageParallax - public stylesheet.
 *
 * Every selector is scoped beneath .hpp-root, the widget's own root element, so a matching hpp-* class
 * elsewhere on the page receives none of these styles. Prefixing alone would only make collisions unlikely;
 * the descendant boundary makes them impossible.
 *
 * The previous inline version leaked in two ways: a page-wide `body { margin: 0; color: #000 }` that overrode
 * the theme's body colour across the whole homepage, and a bare `.section` rule that collided with the theme's
 * own `.section`. Both are gone. The widget keeps its own black text through the scoped rule below - owner
 * decision on review finding HPP05-R01, option (c) - so slide text is unchanged while the rest of the homepage
 * returns to the theme colour.
 */

.hpp-root {
    /* ile kolejna sekcja nachodzi na poprzednią */
    --hpp-overlap: 0vh;
    /* punkt ostrości: nadpisywany per sekcja atrybutem style, domyślnie wyśrodkowanie */
    --hpp-focal: 50% 50%;

    /* Kolor tekstu slajdów. Wcześniej wymuszany globalnie regułą `body`, co zmieniało całą stronę główną;
       teraz obowiązuje wyłącznie wewnątrz widgetu. */
    color: #000;
}

.hpp-root .hpp-stack {
    position: relative;
    padding: 0 0;
}

.hpp-root .hpp-section {
    /* 100vh first as the fallback, then svh for browsers that support it.
       svh rather than dvh on purpose: dvh grows and shrinks as mobile browser chrome retracts, and in a
       position:sticky full-height hero that reflow is itself visible movement - the very thing this step
       removes. svh keeps the box stable. */
    height: 100vh;
    height: 100svh;
    position: relative;
    margin-top: calc(var(--hpp-overlap) * -1);
    box-sizing: border-box;
    margin-bottom: auto;
    padding: 0;
}

/* żeby pierwsza sekcja nie była „ucięta” overlapem */
.hpp-root .hpp-section:first-child {
    margin-top: 0;
}

.hpp-root .hpp-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
    background: #111;
}

/* <picture> to tylko opakowanie - pozycjonowanym elementem pozostaje <img> */
.hpp-root .hpp-picture {
    display: contents;
}

.hpp-root .hpp-img {
    position: absolute;
    inset: -10% 0; /* zapas, żeby nie było pustych krawędzi przy przesuwaniu */
    width: 120%;
    height: 120%;
    object-fit: cover;
    transform: translate3d(0, 0, 0);
    object-position: var(--hpp-focal);
}

/* will-change jest kosztowny, więc ustawiamy go tylko na sekcji aktualnie animowanej (patrz JS) */
.hpp-root .hpp-section--active .hpp-img {
    will-change: transform;
}

@media (max-width: 767.98px) {
    .hpp-root .hpp-img {
        object-position: var(--hpp-focal-mobile, var(--hpp-focal));
    }
}

/* opcjonalny overlay dla czytelności tekstu */
.hpp-root .hpp-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15), rgba(0, 0, 0, .55));
    pointer-events: none;
}

/*
 * Cały slajd bywa odnośnikiem. Link jest rodzeństwem treści, a nie jej opakowaniem - tekst slajdu to zaufany
 * rich text, który sam zawiera odnośniki, a zagnieżdżanie <a> w <a> jest w HTML niedozwolone (HPP06-R06).
 * Rozciągamy go więc na całą sekcję. z-index 2 stawia go nad obrazem i overlayem, ale pod .vertical-middle
 * (motyw daje mu z-index 3), więc odnośniki w treści pozostają na wierzchu.
 */
.hpp-root .hpp-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: inherit;
    text-decoration: none;
}

/*
 * Na slajdzie z odnośnikiem kliknięcie w obszar tekstu ma trafić w link całego slajdu, więc blok treści
 * przepuszcza zdarzenia wskaźnika. Elementy naprawdę interaktywne wewnątrz treści odzyskują je i - będąc
 * wyżej w stosie - wygrywają z rozciągniętym odnośnikiem.
 */
.hpp-root .hpp-sticky--linked > .vertical-middle {
    pointer-events: none;
}

.hpp-root .hpp-sticky--linked > .vertical-middle a,
.hpp-root .hpp-sticky--linked > .vertical-middle area,
.hpp-root .hpp-sticky--linked > .vertical-middle button,
.hpp-root .hpp-sticky--linked > .vertical-middle input,
.hpp-root .hpp-sticky--linked > .vertical-middle label,
.hpp-root .hpp-sticky--linked > .vertical-middle select,
.hpp-root .hpp-sticky--linked > .vertical-middle summary,
.hpp-root .hpp-sticky--linked > .vertical-middle textarea,
.hpp-root .hpp-sticky--linked > .vertical-middle [role="button"],
.hpp-root .hpp-sticky--linked > .vertical-middle [tabindex]:not([tabindex="-1"]) {
    pointer-events: auto;
}

.hpp-root .hpp-link:hover,
.hpp-root .hpp-link:focus {
    color: inherit;
    text-decoration: none;
}

/* Widoczny fokus na dowolnym tle - jasny pierścień z ciemną obwódką */
.hpp-root .hpp-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
    box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .55);
}

/*
 * Reduced motion: żadnych przesunięć. Zdefiniowane także w CSS, żeby obraz był stabilny nawet zanim
 * JavaScript się wykona - skrypt dodatkowo nie zapisuje wtedy w ogóle transformacji.
 */
@media (prefers-reduced-motion: reduce) {
    .hpp-root .hpp-img {
        transform: none !important;
        transition: none !important;
    }

    .hpp-root .hpp-section--active .hpp-img {
        will-change: auto;
    }
}