/*
 * Wirtualny spacer - blok acf/acf-block-spacer.
 *
 * Dwa układy na jednym markupie: .spacer.is-pelna (panorama na całą szerokość, treść
 * nałożona) i .spacer.is-polowa (grafika obok kolumny z tekstem). Scena - czyli atrapa
 * albo wczytana ramka - jest w obu ta sama, różni je tylko wymiarowanie.
 */

/*
 * Tlo to ten sam gradient, co w bloku "Hero podstrony" (acf-block-item-hero.css) -
 * sekcja ma nalezec do tej samej rodziny co gora strony. Konsekwencja jest taka, ze
 * uklad 50/50 stoi teraz na ciemnym tle, wiec jego typografia jest jasna, nie granatowa.
 */
.spacer {
    position: relative;
    padding: 80px 20px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(900px 620px at 8% 18%, rgba(37, 86, 168, .55) 0%, rgba(37, 86, 168, 0) 62%),
        radial-gradient(760px 560px at 78% 8%, rgba(20, 64, 140, .65) 0%, rgba(20, 64, 140, 0) 60%),
        radial-gradient(680px 520px at 62% 96%, rgba(200, 16, 46, .32) 0%, rgba(200, 16, 46, 0) 60%),
        radial-gradient(1100px 700px at 100% 60%, rgba(10, 32, 73, .9) 0%, rgba(10, 32, 73, 0) 70%),
        linear-gradient(160deg, #123566 0%, #0E2A57 46%, #0A1F45 100%);
}

/*
 * Pelna szerokosc: panorama i tak przykrywa cale tlo, wiec gradient zostaje tylko
 * jako podklad na czas ladowania zrzutu - stad zerowe wypelnienie.
 */
.spacer.is-pelna {
    padding: 0;
}

/* SCENA: atrapa ze zrzutem, po kliknięciu podmieniana na ramkę ze spacerem */

.spacer .spacer-scena {
    position: relative;
    overflow: hidden;
    background-color: #0e2a57;
}

.spacer .spacer-zrzut,
.spacer .spacer-iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.spacer .spacer-zrzut {
    object-fit: cover;
}

.spacer .spacer-iframe {
    border: 0;
}

/* PRZYCISK ODTWARZANIA NA SCENIE */

/*
 * Motyw ma globalną regułę `button { height: 4.8rem; border-radius: 1rem; background: ... }`
 * (dist/assets/index.css), więc wygląd musi być tu wypisany jawnie.
 */
.spacer .spacer-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 40px rgba(10, 31, 69, 0.35);
    cursor: pointer;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    z-index: 2;
}

.spacer .spacer-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background-color: #fff;
}

.spacer .spacer-play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* Trójkąt z krawędzi - lekko przesunięty, żeby wyglądał na wyśrodkowany w kole. */
.spacer .spacer-play-ikona {
    display: block;
    margin-left: 6px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 19px solid #e0121e;
}

/* TREŚĆ */

.spacer .spacer-eyebrow {
    margin: 0 0 20px 0;
    font-family: "Figtree-Medium", sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.spacer .spacer-eyebrow::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    margin-top: 10px;
    background-color: var(--main-color-2, #c12030);
}

.spacer .spacer-tytul {
    margin: 0 0 20px 0;
    font-family: "Figtree-Medium", sans-serif;
    font-size: clamp(2.6rem, 2.8vw, 3.6rem);
    line-height: 1.3;
    font-weight: 500;
}

.spacer .spacer-opis {
    margin: 0 0 30px 0;
    font-size: 1.6rem;
    line-height: 1.75;
    max-width: 34em;
}

.spacer .spacer-btn {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    height: auto;
    padding: 15px 32px;
    border: 0;
    border-radius: 10px;
    background-color: #e0121e;
    font-family: "Figtree-Medium", sans-serif;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.spacer .spacer-btn:hover {
    background-color: #c1101a;
}

.spacer .spacer-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* UKŁAD 50/50 */

.spacer.is-polowa .spacer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    align-items: center;
}

.spacer.is-polowa .spacer-scena {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
}

.spacer.is-polowa .spacer-eyebrow {
    color: #8fb2ea;
}

.spacer.is-polowa .spacer-tytul {
    color: #fff;
}

.spacer.is-polowa .spacer-opis {
    color: #c2d3f0;
}

/* UKŁAD NA CAŁĄ SZEROKOŚĆ */

.spacer.is-pelna .spacer-pelna {
    position: relative;
}

.spacer.is-pelna .spacer-scena {
    height: min(70vh, 640px);
    min-height: 420px;
}

/*
 * Nakładka przepuszcza kliknięcia (pointer-events: none), żeby nie blokowała panoramy
 * po jej wczytaniu; sama kolumna z tekstem je odzyskuje.
 */
.spacer.is-pelna .spacer-nakladka {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    background: linear-gradient(to right, rgba(8, 24, 54, 0.92) 0%, rgba(8, 24, 54, 0.75) 34%, rgba(8, 24, 54, 0.15) 62%, rgba(8, 24, 54, 0) 100%);
}

/* Po wczytaniu spaceru nakładka musi zniknąć - inaczej przykryłaby sterowanie panoramą. */
.spacer.is-pelna .spacer-scena.is-loaded + .spacer-nakladka {
    display: none;
}

.spacer.is-pelna .spacer-tresc {
    pointer-events: auto;
    max-width: 30em;
    color: #fff;
}

.spacer.is-pelna .spacer-eyebrow {
    color: #8fb2ea;
}

.spacer.is-pelna .spacer-tytul {
    color: #fff;
}

.spacer.is-pelna .spacer-opis {
    color: #c2d3f0;
}

/* Kółko odtwarzania odsunięte w prawo, żeby nie wchodziło w kolumnę z tekstem. */
.spacer.is-pelna .spacer-play {
    left: auto;
    right: 12%;
    transform: translateY(-50%);
}

.spacer.is-pelna .spacer-play:hover {
    transform: translateY(-50%) scale(1.08);
}

/* RESPONSYWNOŚĆ */

@media (max-width: 1024px) {
    .spacer.is-polowa .spacer-inner {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    .spacer.is-pelna .spacer-scena {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    /*
     * Przy jednej kolumnie tekst na panoramie robi się nieczytelny - nakładka staje się
     * pełnym przyciemnieniem, a treść wraca pod scenę... a ściślej: zostaje na niej,
     * ale wyrównana do dołu i na ciemniejszym tle.
     */
    .spacer.is-pelna .spacer-nakladka {
        align-items: flex-end;
        background: linear-gradient(to top, rgba(8, 24, 54, 0.95) 0%, rgba(8, 24, 54, 0.8) 45%, rgba(8, 24, 54, 0.25) 100%);
    }

    .spacer.is-pelna .spacer-tresc {
        max-width: none;
        padding-bottom: 34px;
    }

    /* Nad tekstem kółko zasłaniałoby panoramę - wystarczy przycisk w treści. */
    .spacer.is-pelna .spacer-play {
        display: none;
    }
}

@media (max-width: 640px) {
    .spacer {
        padding: 50px 20px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .spacer.is-pelna {
        padding: 0;
        margin-left: -15px;
        margin-right: -15px;
    }

    .spacer .spacer-play {
        width: 66px;
        height: 66px;
    }

    .spacer .spacer-play-ikona {
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 16px;
    }

    .spacer .spacer-opis {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }

    .spacer.is-polowa .spacer-scena {
        aspect-ratio: 3 / 2;
    }
}

@media (prefers-reduced-motion: reduce) {

    .spacer .spacer-play,
    .spacer .spacer-btn {
        transition: none;
    }

    .spacer .spacer-play:hover {
        transform: translate(-50%, -50%);
    }

    .spacer.is-pelna .spacer-play:hover {
        transform: translateY(-50%);
    }
}

/* Trybu ciemnego nie nadpisujemy - blok jest ciemny w obu ukladach. */