/* ==========================================================================
   branike/hero — Frontend + Editor štýly
   ========================================================================== */

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.bb-hero {
    position:   relative;
    display:    flex;
    align-items: center;
    min-height: var( --bb-hero-min-h, 500px );
    overflow:   hidden;
    color:      var( --bb-hero-color, inherit );
}

/* ── Pozadie: farba / gradient ───────────────────────────────────────────── */
.bb-hero--bg-color,
.bb-hero--bg-gradient {
    background: var( --bb-hero-bg, transparent );
}

/* ── Pozadie: image fixed ────────────────────────────────────────────────── */
.bb-hero--bg-fixed {
    background-attachment: fixed;
}

/* ── BG layer (image + video) ────────────────────────────────────────────── */
.bb-hero__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
    overflow: hidden;
}

/*
 * `<picture>` je len obal pre `<source media>` (mobilná fotka). `display: contents`
 * ho z rozloženia úplne vyradí, takže `<img>` vnútri sa naďalej pozicuje voči
 * `.bb-hero__bg` presne ako predtým a pravidlá nižšie platia bez zmeny.
 */
.bb-hero__bg-picture {
    display: contents;
}

.bb-hero__bg-img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      var( --bb-hero-img-size, cover );
    object-position: var( --bb-hero-img-pos, center center );
    display:         block;
}

/*
 * 🔴 KTORÁ ČASŤ FOTKY JE VIDIEŤ NA TELEFÓNE.
 *
 * `object-fit: cover` musí pri užšom okne niečo odrezať a bez tohto pravidla
 * reže vždy od stredu — preto z hero bannera ostane prostriedok a to podstatné
 * (tvár, logo, nadpis) odíde za okraj.
 *
 * Vnorený `var()` rieši dedenie bez jediného riadku PHP navyše: keď mobilný
 * výrez nie je nastavený, premenná `--bb-hero-img-pos-m` sa vôbec nevypíše
 * a hodnota spadne na desktopovú. Vypisovať `center center` ako mobilný default
 * by ticho prebilo to, čo je nastavené na desktope.
 */
@media (max-width: 767px) {
    .bb-hero__bg-img {
        object-position: var( --bb-hero-img-pos-m, var( --bb-hero-img-pos, center center ) );
    }

    /*
     * 🔴🔴 BIELE PÁSY NAD FOTKOU A POD ŇOU (nameraté 2026-08-13)
     *
     * `min-height` je jedno číslo v px pre všetky zariadenia. Pri
     * `bgImageSize: contain` klesá výška OBRÁZKA spolu so šírkou okna, ale
     * fixná výška HERA nie — a rozdiel je prázdne miesto:
     *
     *     fotka 1920×2884, hero 1100 px
     *     390 px šírky → obrázok 586 px → 257 px prázdna HORE aj DOLE
     *     360 px šírky → obrázok 541 px → 280 px prázdna HORE aj DOLE
     *
     * Na desktope sa to neprejaví: tam je obrázok vyšší než 1100 px.
     *
     * Vnorený `var()` drží dedenie: keď mobilná výška nie je nastavená,
     * platí desktopová — presne ako doteraz.
     */
    .bb-hero {
        min-height: var( --bb-hero-min-h-m, var( --bb-hero-min-h, 500px ) );
    }

    /*
     * 🔴 Dve triedy v selektore ZÁMERNE (0,2,0). S jednou by mala rovnakú
     * špecifickosť ako pravidlo nad ňou a rozhodovalo by poradie v súbore —
     * teda vec, ktorú refaktor ticho prehodí.
     * [[feedback_same_specificity_means_order_decides]]
     *
     * 🔴 `aspect-ratio` NIE JE strop: keď je obsah (nadpis, tlačidlo) vyšší než
     * pomer, box sa roztiahne podľa neho. Nemôže teda nič odrezať.
     */
    .bb-hero.bb-hero--fit-mobile {
        aspect-ratio: var( --bb-hero-ratio-m );
        min-height:   0;
    }
}

.bb-hero__bg-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── Overlay — inline background + voliteľný blend mode ─────────────────── */
.bb-hero__overlay {
    position:       absolute;
    inset:          0;
    z-index:        1;
    pointer-events: none;
}

/* ── Grain / noise texture ───────────────────────────────────────────────── */
.bb-hero__grain {
    position:            absolute;
    inset:               0;
    z-index:             2;
    pointer-events:      none;
    background-size:     200px 200px;
    background-repeat:   repeat;
    mix-blend-mode:      overlay;
}

/* ── Inner wrapper ───────────────────────────────────────────────────────── */
.bb-hero__inner {
    position:   relative;
    z-index:    3;
    width:      100%;
    max-width:  var( --wp--style--global--content-size, 1200px );
    margin:     0 auto;
    padding:    var( --bb-hero-pad, 80px ) clamp( 16px, 5vw, 48px );
    display:    flex;
    align-items: center;
    gap:        var( --bb-hero-split-gap, 48px );
    box-sizing: border-box;
}

.alignfull .bb-hero__inner {
    max-width: none;
    padding-inline: clamp( 24px, 6vw, 80px );
}

/* ── Content oblasť ─────────────────────────────────────────────────────── */
.bb-hero__content {
    max-width: var( --bb-hero-max-c, 640px );
    width:     100%;
    flex:      1 1 auto;
}

/* ── Voľné umiestnenie obsahu nad obrázkom ───────────────────────────────── */
/*
 * 🔴 PREČO: keď klient dodá banner so ZAPEČENÝM textom, obsah vycentrovaný
 * doprostred ten text prekryje. Toto ho dovolí posadiť do prázdneho miesta na
 * fotke. Súradnice sú v PERCENTÁCH, takže bod drží aj keď sa obrázok zmenší.
 *
 * 🔴🔴 `position: static` na `__inner` je tu KĽÚČOVÉ, nie kozmetika. `__inner`
 * je `position: relative` a je zúžený na `max-width: 1200px` plus vlastný
 * padding. Keby ostal pozicovaný, percentá by sa počítali z NEHO — teda
 * z užšieho stĺpca — a bod by na fotke sedel inde, než kam ho používateľ dal.
 * Súradnicová sústava musí byť CELÝ hero, lebo obrázok je cez celý hero.
 */
.bb-hero--pos-free .bb-hero__inner {
    position: static;
    padding:  0;
}

.bb-hero--pos-free .bb-hero__content {
    position:  absolute;
    left:      var( --bb-hero-cx, 50% );
    top:       var( --bb-hero-cy, 50% );
    transform: translate( -50%, -50% );
    z-index:   3;                       /* nad prekryvom aj nad zrnom */
    width:     max-content;
    /* Nikdy nesmie pretiecť z fotky von — 32 px je rezerva na okraje. */
    max-width: min( var( --bb-hero-max-c, 640px ), calc( 100% - 32px ) );
    margin:    0;
}

@media (max-width: 767px) {
    /*
     * Mobilný bod sa DEDÍ z desktopu, kým sa nenastaví vlastný — rovnako ako
     * výrez fotky. Vnorený `var()` to rieši bez jediného riadku PHP navyše.
     */
    .bb-hero--pos-free .bb-hero__content {
        left: var( --bb-hero-cx-m, var( --bb-hero-cx, 50% ) );
        top:  var( --bb-hero-cy-m, var( --bb-hero-cy, 50% ) );
    }

    /*
     * Poistka pre úzke displeje: obsah späť do bežného toku. Na telefóne sa
     * tlačidlo do prázdneho miesta v bannere často jednoducho nezmestí bez
     * prekrytia — a vtedy je lepšie mať ho pod fotkou než cez text.
     *
     * 🔴 Dve triedy v selektore ZÁMERNE (0,2,0): pravidlo vyššie má jednu
     * a muselo by sa spoliehať na poradie v súbore.
     */
    .bb-hero--pos-free.bb-hero--pos-flow-m .bb-hero__content {
        position:  static;
        transform: none;
        width:     100%;
        max-width: var( --bb-hero-max-c, 640px );
    }
    .bb-hero--pos-free.bb-hero--pos-flow-m .bb-hero__inner {
        padding: var( --bb-hero-pad, 80px ) clamp( 16px, 5vw, 48px );
    }
}

/* ── Badge / chip ────────────────────────────────────────────────────────── */
.bb-hero__badge {
    display:          inline-flex;
    align-items:      center;
    padding:          4px 14px;
    border-radius:    999px;
    font-size:        0.78rem;
    font-weight:      600;
    letter-spacing:   0.04em;
    text-transform:   uppercase;
    margin-bottom:    16px;
    line-height:      1.5;
}

/* ── Layout: center ─────────────────────────────────────────────────────── */
.bb-hero--layout-center .bb-hero__inner {
    justify-content: center;
}
.bb-hero--layout-center .bb-hero__content {
    margin: 0 auto;
}

/* ── Layout: left ────────────────────────────────────────────────────────── */
.bb-hero--layout-left .bb-hero__inner {
    justify-content: flex-start;
}

/* ── Layout: right ───────────────────────────────────────────────────────── */
.bb-hero--layout-right .bb-hero__inner {
    justify-content: flex-end;
}

/* ── Text alignment ──────────────────────────────────────────────────────── */
.bb-hero--align-center .bb-hero__content { text-align: center; }
.bb-hero--align-right  .bb-hero__content { text-align: right;  }
.bb-hero--align-left   .bb-hero__content { text-align: left;   }

.bb-hero--align-center .bb-hero__badge { display: block; text-align: center; }

/* ── Split layout ────────────────────────────────────────────────────────── */
.bb-hero--split .bb-hero__inner {
    display:               grid;
    grid-template-columns: var( --bb-hero-split-cols, 1fr 1fr );
    gap:                   var( --bb-hero-split-gap, 48px );
    align-items:           center;
}

.bb-hero--split .bb-hero__content {
    max-width: none;
}

.bb-hero--layout-split-right .bb-hero__split-image {
    order: -1;
}

/* ── Split obrázok ───────────────────────────────────────────────────────── */
.bb-hero__split-image {
    overflow:      hidden;
    border-radius: var( --bb-hero-img-r, 12px );
    flex-shrink:   0;
}

.bb-hero__split-image img {
    display:      block;
    width:        100%;
    height:       auto;
    object-fit:   cover;
    aspect-ratio: var( --bb-hero-img-ratio );
}

/* ── Accentová farba pre vnorené bloky ──────────────────────────────────── */
.bb-hero { --bb-accent: var(--bb-hero-accent, var(--wp--preset--color--accent, #7C3AED)); }

/* ── Animácia — celý content naraz ──────────────────────────────────────── */
.bb-hero-anim-ready:not( .bb-hero-anim--stagger ) .bb-hero__content {
    opacity:     0;
    will-change: opacity, transform;
}

.bb-hero-anim--fade-up:not( .bb-hero-anim--stagger ) .bb-hero__content {
    transform:  translateY( 28px );
    transition: opacity .7s ease, transform .7s ease;
}

.bb-hero-anim--fade-in:not( .bb-hero-anim--stagger ) .bb-hero__content {
    transition: opacity .8s ease;
}

.bb-hero-anim-visible:not( .bb-hero-anim--stagger ) .bb-hero__content {
    opacity:   1;
    transform: none;
}

/* ── Animácia — stagger (každý child zvlášť) ─────────────────────────────── */
.bb-hero-anim--stagger.bb-hero-anim-ready .bb-hero__badge,
.bb-hero-anim--stagger.bb-hero-anim-ready .bb-hero__content > * {
    opacity:     0;
    will-change: opacity, transform;
}

.bb-hero-anim--stagger.bb-hero-anim--fade-up.bb-hero-anim-ready .bb-hero__badge,
.bb-hero-anim--stagger.bb-hero-anim--fade-up.bb-hero-anim-ready .bb-hero__content > * {
    transform:  translateY( 24px );
    transition: opacity .6s ease, transform .6s ease;
}

.bb-hero-anim--stagger.bb-hero-anim--fade-in.bb-hero-anim-ready .bb-hero__badge,
.bb-hero-anim--stagger.bb-hero-anim--fade-in.bb-hero-anim-ready .bb-hero__content > * {
    transition: opacity .7s ease;
}

/* Oneskorenia pre stagger — badge + prvých 6 childs */
.bb-hero-anim--stagger .bb-hero__badge               { transition-delay:  0ms  !important; }
.bb-hero-anim--stagger .bb-hero__content > *:nth-child(1) { transition-delay: 80ms  !important; }
.bb-hero-anim--stagger .bb-hero__content > *:nth-child(2) { transition-delay: 180ms !important; }
.bb-hero-anim--stagger .bb-hero__content > *:nth-child(3) { transition-delay: 280ms !important; }
.bb-hero-anim--stagger .bb-hero__content > *:nth-child(4) { transition-delay: 360ms !important; }
.bb-hero-anim--stagger .bb-hero__content > *:nth-child(5) { transition-delay: 440ms !important; }
.bb-hero-anim--stagger .bb-hero__content > *:nth-child(6) { transition-delay: 520ms !important; }

.bb-hero-anim--stagger.bb-hero-anim-visible .bb-hero__badge,
.bb-hero-anim--stagger.bb-hero-anim-visible .bb-hero__content > * {
    opacity:   1;
    transform: none;
}

/* ── Scroll indicator ────────────────────────────────────────────────────── */
.bb-hero__scroll {
    position:         absolute;
    bottom:           24px;
    left:             50%;
    transform:        translateX( -50% );
    z-index:          3;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            40px;
    height:           40px;
    animation:        bb-hero-bounce 2s ease-in-out infinite;
    color:            currentColor;
    opacity:          0.7;
}

.bb-hero__scroll-arrow {
    width:  24px;
    height: 24px;
}

@keyframes bb-hero-bounce {
    0%, 100% { transform: translateX( -50% ) translateY( 0 );    }
    50%       { transform: translateX( -50% ) translateY( 8px );  }
}

/* ── Editor — BG video placeholder ─────────────────────────────────────── */
.bb-hero__bg-video-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #111;
    color:           #fff;
    font-size:       13px;
    opacity:         0.7;
}

/* ── Editor — split placeholder ─────────────────────────────────────────── */
.bb-hero__split-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      200px;
    background:      #e2e8f0;
    color:           #94a3b8;
    font-size:       13px;
    border-radius:   var( --bb-hero-img-r, 12px );
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {

    .bb-hero--split .bb-hero__inner {
        grid-template-columns: 1fr;
    }

    .bb-hero--layout-split-right .bb-hero__split-image {
        order: 0;
    }

    .bb-hero__content {
        max-width: 100%;
    }

    .bb-hero__scroll {
        bottom: 12px;
    }
}

/* ── Reduce motion ───────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {

    .bb-hero-anim-ready .bb-hero__content,
    .bb-hero-anim-ready .bb-hero__badge,
    .bb-hero-anim-ready .bb-hero__content > *,
    .bb-hero-anim-visible .bb-hero__content,
    .bb-hero-anim-visible .bb-hero__badge,
    .bb-hero-anim-visible .bb-hero__content > * {
        opacity:    1;
        transform:  none;
        transition: none;
    }

    .bb-hero__scroll {
        animation: none;
    }
}