/* =============================================================================
   Salient Hero Overlay – shoe-style.css  v1.1.0
   ============================================================================= */

/* ── Kontener ─────────────────────────────────────────────────────────────── */

.shoe-hero-overlay {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    /* overflow:hidden ustawiany inline via PHP */
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ── Lewa kolumna ─────────────────────────────────────────────────────────── */

.shoe-left-panel {
    position: relative;
    z-index: 2;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    /* width, background-color, justify-content – inline via PHP */
}

.shoe-left-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* padding – inline via PHP */
}

/* ── Prawa kolumna ────────────────────────────────────────────────────────── */

.shoe-right-panel {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    /* width, background-image, background-position – inline via PHP */
}

/* ── Wideo w tle ──────────────────────────────────────────────────────────── */

.shoe-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
}

/* ── Nakładka kolorystyczna na zdjęcie / wideo ────────────────────────────── */

.shoe-right-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* background-color (rgba) – inline via PHP */
}

/* ── Placeholder tytułu ────────────────────────────────────────────────────
   Niewidoczny element rezerwujący pionową przestrzeń dla absolutnego tytułu.
   Na mobile staje się widocznym tytułem.

   BUGFIX #2: margin-bottom ustawiany inline (domyślnie -0.4em) – kompensuje
   nadmierne połowiczne-prowadzenie (half-leading) line-height, zbliżając
   opis do tytułu bez potrzeby manualnego ustawiania line-height na 0.4.
   ─────────────────────────────────────────────────────────────────────────── */

.shoe-title-placeholder {
    visibility: hidden;
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    word-break: break-word;
    /* font-size, margin-bottom – inline via PHP */
}

/* ── Warstwa tytułu nakładkowego ──────────────────────────────────────────── */

.shoe-title-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/*
 * BUGFIX #1 – przycinanie ogonków:
 * clip-path: inset() obcina dokładnie na granicy border-box elementu.
 * Przy line-height 1.05 ogonki liter (g, p, y, ą, ę) wypadają PONIŻEJ
 * tej granicy i były ucinane do połowy.
 *
 * Rozwiązanie: PHP podaje wartość -0.35em jako top i bottom w inset().
 * Ujemna wartość ROZSZERZA obszar widoczności poza granicę elementu.
 * clip-path: inset(-0.35em RIGHT% -0.35em 0)
 *                  ↑ rozszerz w górę   ↑ rozszerz w dół
 *
 * Dzięki temu ogonki/wzniesienia są zawsze widoczne.
 */

.shoe-title {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    font-weight: 700;
    line-height: 1.05;
    word-break: break-word;
    /*
     * top         – ustawiane przez JS (syncTitles): pozycja placeholdera
     * padding-left – ustawiane przez JS: computed paddingLeft .shoe-left-inner
     * font-size    – inline via PHP
     * clip-path    – inline via PHP (z ujemnymi offsetami ±0.35em)
     */
}

/* ── Etykieta / kicker ────────────────────────────────────────────────────── */

.shoe-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    /* color – inline via PHP */
}

/* ── Opis ─────────────────────────────────────────────────────────────────── */

.shoe-description {
    font-size: 0.93rem;
    line-height: 1.65;
}
.shoe-description p           { margin: 0 0 0.7em; }
.shoe-description p:last-child { margin-bottom: 0; }
.shoe-description strong,
.shoe-description b            { font-weight: 700; }
.shoe-description em,
.shoe-description i            { font-style: italic; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */

.shoe-cta-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.25rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.shoe-cta-link,
.shoe-cta-link-2 {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 2px;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    /* color – inline via PHP */
}

.shoe-cta-link:hover,
.shoe-cta-link:focus,
.shoe-cta-link-2:hover,
.shoe-cta-link-2:focus {
    opacity: 0.55;
    outline: none;
}

/* =============================================================================
   ANIMACJE WEJŚCIA  (Intersection Observer w JS dodaje klasę .shoe-in-view)
   ============================================================================= */

/* ── Prędkości ── */
.shoe-speed-fast  { --shoe-dur: 0.5s; }
.shoe-speed-normal{ --shoe-dur: 0.8s; }
.shoe-speed-slow  { --shoe-dur: 1.2s; }

/* ── Stan wyjściowy (niewidoczne, przed animacją) ── */

/* Tytuł – slide-fade i title-only: wjeżdża z lewej */
.shoe-animate.shoe-anim-slide-fade .shoe-title-a,
.shoe-animate.shoe-anim-slide-fade .shoe-title-b,
.shoe-animate.shoe-anim-title-only .shoe-title-a,
.shoe-animate.shoe-anim-title-only .shoe-title-b {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    -webkit-transition:
        opacity   var(--shoe-dur, 0.8s) ease,
        -webkit-transform var(--shoe-dur, 0.8s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition:
        opacity   var(--shoe-dur, 0.8s) ease,
        transform var(--shoe-dur, 0.8s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Tytuł – fade: prosty fade */
.shoe-animate.shoe-anim-fade .shoe-title-a,
.shoe-animate.shoe-anim-fade .shoe-title-b {
    opacity: 0;
    -webkit-transition: opacity var(--shoe-dur, 0.8s) ease;
    transition: opacity var(--shoe-dur, 0.8s) ease;
}

/* Treść – slide-fade i fade: fade + unoszenie w górę */
.shoe-animate.shoe-anim-slide-fade .shoe-description,
.shoe-animate.shoe-anim-slide-fade .shoe-cta-wrap,
.shoe-animate.shoe-anim-slide-fade .shoe-kicker,
.shoe-animate.shoe-anim-fade .shoe-description,
.shoe-animate.shoe-anim-fade .shoe-cta-wrap,
.shoe-animate.shoe-anim-fade .shoe-kicker {
    opacity: 0;
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
    -webkit-transition:
        opacity   var(--shoe-dur, 0.8s) ease,
        -webkit-transform var(--shoe-dur, 0.8s) ease;
    transition:
        opacity   var(--shoe-dur, 0.8s) ease,
        transform var(--shoe-dur, 0.8s) ease;
}

/* Zdjęcie – fade + lekki zoom-out */
.shoe-animate .shoe-right-panel {
    opacity: 0;
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    -webkit-transition:
        opacity   var(--shoe-dur, 0.8s) ease,
        -webkit-transform var(--shoe-dur, 0.8s) ease;
    transition:
        opacity   var(--shoe-dur, 0.8s) ease,
        transform var(--shoe-dur, 0.8s) ease;
}

/* ── Stan końcowy (po wejściu w widok) ── */

.shoe-in-view .shoe-title-a,
.shoe-in-view .shoe-title-b {
    opacity: 1 !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
}

.shoe-in-view .shoe-kicker {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    -webkit-transition-delay: 0.05s !important;
    transition-delay: 0.05s !important;
}

.shoe-in-view .shoe-description {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    -webkit-transition-delay: 0.25s !important;
    transition-delay: 0.25s !important;
}

.shoe-in-view .shoe-cta-wrap {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    -webkit-transition-delay: 0.4s !important;
    transition-delay: 0.4s !important;
}

.shoe-in-view .shoe-right-panel {
    opacity: 1 !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
}

/*
 * Paralaksa: po wejściu w widok wyłączamy transition na transform prawego panelu
 * żeby paralaksa (zmiana background-position przez JS) była płynna, bez skoku.
 */
.shoe-in-view[data-parallax="yes"] .shoe-right-panel {
    -webkit-transition: opacity var(--shoe-dur, 0.8s) ease !important;
    transition: opacity var(--shoe-dur, 0.8s) ease !important;
}

/* =============================================================================
   RESPONSIVE – Mobile (≤ 768 px)
   ============================================================================= */

@media (max-width: 768px) {

    .shoe-hero-overlay {
        -webkit-box-orient: vertical !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
    }

    .shoe-left-panel {
        width: 100% !important;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        /* wymuś wyświetlenie treści bez flex-stretch rozciągania */
        -ms-flex-negative: 1;
        flex-shrink: 1;
    }

    .shoe-right-panel {
        width: 100% !important;
        height: 56vw;
        min-height: 200px;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        /* wyłącz transform z paralaksy na mobile */
        -webkit-transform: none !important;
        transform: none !important;
    }

    /* Ukryj nakładkowy tytuł – nie ma sensu bez horyzontalnego layoutu */
    .shoe-title-layer {
        display: none !important;
    }

    /* Pokaż placeholder jako normalny tytuł */
    .shoe-title-placeholder {
        visibility: visible !important;
        font-size: clamp(1.8rem, 8vw, 3.5rem) !important;
        white-space: normal !important;
        word-break: break-word;
        margin-bottom: 0 !important; /* reset ujemnego marginesu na mobile */
        /* color – inline via PHP (title_color_left) */
    }

    /* Wyłącz animacje na mobile (unikamy problemów z clip-path na malym ekranie) */
    .shoe-animate .shoe-title-a,
    .shoe-animate .shoe-title-b,
    .shoe-animate .shoe-description,
    .shoe-animate .shoe-cta-wrap,
    .shoe-animate .shoe-kicker,
    .shoe-animate .shoe-right-panel {
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-transition: none !important;
        transition: none !important;
    }
}