/* Branike Blocks — Video Player styles */

/* ── Aspect ratio wrappers ───────────────────────────────────────────────── */
.bb-player-wrap { position: relative; width: 100%; }
.bb-player-wrap--16-9 { aspect-ratio: 16 / 9; }
.bb-player-wrap--4-3  { aspect-ratio: 4  / 3; }
.bb-player-wrap--1-1  { aspect-ratio: 1  / 1; }
.bb-player-wrap--9-16 { aspect-ratio: 9  / 16; max-width: 360px; margin: 0 auto; }

/* ── Player container ────────────────────────────────────────────────────── */
.bb-player {
    position: absolute;
    inset: 0;
    background: #000;
    border-radius: inherit; /* dedí od .bb-player-wrap (používateľom nastavené) */
    overflow: hidden;
}
/* Default border-radius pre standalone video (bez stĺpca) */
.bb-player-wrap:not([style*="border-radius"]) .bb-player {
    border-radius: 8px;
}

/* ── SEO poster img (skrytý, len pre alt text + crawlery) ───────────────── */
.bb-player__poster-seo {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ── Poster overlay ──────────────────────────────────────────────────────── */
.bb-player__poster {
    position: absolute;
    inset: 0;
    background: #1a1a1a center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: opacity .2s;
}
.bb-player__poster:hover { opacity: .9; }

.bb-player__play-btn {
    background: none; border: none; padding: 0;
    cursor: pointer; line-height: 0;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
    transition: transform .15s;
}
.bb-player__play-btn:hover { transform: scale(1.1); }
.bb-player__play-btn svg   { width: 80px; height: 80px; display: block; }

/* ── Loading / error ─────────────────────────────────────────────────────── */
.bb-player__loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.bb-player__error {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #ff6b6b; text-align: center; padding: 2rem; font-size: .9rem;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.bb-spinner {
    display: inline-block; width: 32px; height: 32px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #fff; border-radius: 50%;
    animation: bb-spin .7s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }

/* ── Placeholder (editor — bez media / bez licencie) ─────────────────────── */
.bb-player-placeholder {
    width: 100%; aspect-ratio: 16 / 9;
    background: #f0f0f0; border-radius: 8px;
}
.bb-player-placeholder--empty { background: #fafafa; border: 2px dashed #ddd; }

/* ── YouTube postMessage player ──────────────────────────────────────────── */
.bb-yt {
    position: absolute; inset: 0;
    background: #000; overflow: hidden;
    border-radius: 8px; user-select: none;
}

/* iframe: orezanie len hore/dole (nie boky).
 * Dôvod: YouTube pridá čierne pásy hore/dole pretože iframe je o 110px
 * vyšší ako 16:9 container. Naša 55px orezie presne tieto pásy — video
 * obsah je 100% viditeľný. Horizontálne orezanie by odstraňovalo aj obsah videa.
 * Matematika: container 16:9 → iframe = container_h + 110px → YT black bar = 55px každý.
 */
.bb-yt__iframe {
    position: absolute;
    top: -55px;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% + 110px);
    border: 0;
    pointer-events: none; /* YT neklikateľné — controls prevezmú všetko */
}


.bb-yt__overlay {
    position: absolute; inset: 0;
    z-index: 2; cursor: pointer;
}

/* Controls */
.bb-yt__controls {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 3;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
    opacity: 0; transition: opacity .25s;
    pointer-events: none;
}
.bb-yt:hover              .bb-yt__controls,
.bb-yt.ctrl-visible       .bb-yt__controls,
.bb-yt.is-paused          .bb-yt__controls {
    opacity: 1; pointer-events: auto;
}

.bb-yt__btn {
    background: none; border: none; padding: 4px;
    color: #fff; cursor: pointer; line-height: 0;
    flex-shrink: 0; border-radius: 4px;
    transition: color .15s;
}
.bb-yt__btn svg        { width: 22px; height: 22px; display: block; }
.bb-yt__btn:hover      { color: #1d9958; }
.bb-yt__btn--fs svg    { width: 18px; height: 18px; }

/* Progress */
.bb-yt__prog-wrap   { flex: 1; }
.bb-yt__prog-track  {
    position: relative; height: 4px;
    background: rgba(255,255,255,.25); border-radius: 2px;
    cursor: pointer; transition: height .1s;
}
.bb-yt__prog-track:hover { height: 6px; }

.bb-yt__prog-fill {
    height: 100%; background: #1d9958; border-radius: 2px;
    pointer-events: none; transition: width .15s linear; max-width: 100%;
}
.bb-yt__prog-track:hover .bb-yt__prog-fill { background: #25c46e; }

.bb-yt__seek {
    position: absolute; inset: -8px 0;
    width: 100%; height: calc(100% + 16px);
    opacity: 0; cursor: pointer; margin: 0;
}

.bb-yt__time {
    color: rgba(255,255,255,.9); font-size: 11px;
    white-space: nowrap; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.bb-yt__vol {
    width: 64px; height: 3px;
    accent-color: #1d9958; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 480px) { .bb-yt__vol { display: none; } }

/* Rýchlosť */
.bb-yt__speed-wrap { position: relative; flex-shrink: 0; }
.bb-yt__btn--speed {
    font-size: 11px; font-weight: 700; min-width: 28px;
    color: rgba(255,255,255,.85); letter-spacing: -.02em;
}
.bb-yt__btn--speed:hover { color: #1d9958; }

.bb-yt__speed-menu {
    display: none; position: absolute;
    bottom: calc(100% + 8px); right: 50%; transform: translateX(50%);
    background: rgba(18,18,18,.97);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; padding: 4px 0; min-width: 80px;
    box-shadow: 0 4px 20px rgba(0,0,0,.5); z-index: 10;
}
.bb-yt__speed-menu.is-open { display: block; }
.bb-yt__speed-opt {
    display: block; width: 100%; padding: 6px 16px;
    background: none; border: none;
    color: rgba(255,255,255,.8); font-size: 13px;
    text-align: center; cursor: pointer; transition: background .1s, color .1s;
}
.bb-yt__speed-opt:hover    { background: rgba(255,255,255,.08); color: #fff; }
.bb-yt__speed-opt.is-active { color: #1d9958; font-weight: 700; }

/* ── Vimeo embed ─────────────────────────────────────────────────────────── */
.bb-embed-16x9 {
    position: absolute; inset: 0;
    border-radius: 8px; overflow: hidden; background: #000;
}
.bb-embed-16x9 iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0; display: block;
}

/* ── HTML5 video / audio ─────────────────────────────────────────────────── */
.bb-html5-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; display: block;
    background: #000; border-radius: 8px;
}
.bb-audio-wrap {
    width: 100%; padding: 1.25rem; box-sizing: border-box;
    background: #1a1a1a; border-radius: 8px;
}
.bb-audio-player { width: 100%; }

/* ── Caption ─────────────────────────────────────────────────────────────── */
.bb-player-caption {
    display: block; text-align: center;
    font-size: .85rem; color: #666;
    margin-top: .5rem;
}

/* ── Editor preview styles ───────────────────────────────────────────────── */
.bb-editor-preview {
    position: relative; width: 100%;
    background: #1a1a1a; border-radius: 8px; overflow: hidden;
}
.bb-editor-preview--16-9 { aspect-ratio: 16 / 9; }
.bb-editor-preview--4-3  { aspect-ratio: 4  / 3; }
.bb-editor-preview--1-1  { aspect-ratio: 1  / 1; }
.bb-editor-preview--9-16 { aspect-ratio: 9  / 16; max-width: 360px; margin: 0 auto; }

.bb-editor-preview__has-media { position: absolute; inset: 0; }

.bb-editor-preview__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
}
.bb-editor-preview__badge {
    background: rgba(29,96,56,.9); color: #fff;
    font-size: 13px; font-weight: 600;
    padding: 6px 14px; border-radius: 20px;
}
.bb-editor-preview__empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRANIKE COLUMNS — Frontend styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Columns wrapper ─────────────────────────────────────────────────────── */
/* Šírky a gap sú CSS custom properties nastavené inline na elemente.         */
/* Responsive overrides cez media queries čítajú --bb-*-tab / --bb-*-mob.    */
/* ── Outer wrapper — positioning context, bg, spacing ───────────────────── */
/* position:relative je tu vždy — zaručuje containing block pre dividers     */
/* nezávisle od display:grid na .bb-columns (inner grid).                    */
.bb-columns-wrap {
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

/* ── Inner grid — čisté CSS grid, žiadne dividers vo vnútri ─────────────── */
/* ŽIADNY z-index tu — inak by sa stal stacking context a izoloval by deti.
   Lift hover (z-index:3) musí byť v rovnakom stacking contexte ako dividers (z-index:2). */
.bb-columns {
    display:              grid;
    box-sizing:           border-box;
    width:                100%;
    grid-template-columns: var(--bb-gtc, 1fr);
    gap:                  var(--bb-gap, 24px);
    align-items:          var(--bb-ai, start);
}
@media (max-width: 1024px) {
    .bb-columns {
        grid-template-columns: var(--bb-gtc-tab, var(--bb-gtc, 1fr));
        gap:                   var(--bb-gap-tab, var(--bb-gap, 16px));
    }
}
@media (max-width: 600px) {
    .bb-columns {
        grid-template-columns: var(--bb-gtc-mob, var(--bb-gtc-tab, var(--bb-gtc, 1fr)));
        gap:                   var(--bb-gap-mob, var(--bb-gap-tab, var(--bb-gap, 16px)));
    }
}

/* Vertical align na wrap úrovni */
.bb-columns-wrap.bb-va-top     > .bb-columns { align-items: start;   }
.bb-columns-wrap.bb-va-center  > .bb-columns { align-items: center;  }
.bb-columns-wrap.bb-va-bottom  > .bb-columns { align-items: end;     }
.bb-columns-wrap.bb-va-stretch > .bb-columns { align-items: stretch; }

/* ── Vertical align helpers ──────────────────────────────────────────────── */
/* bb-va-* selektory sú teraz na .bb-columns-wrap > .bb-columns (viď vyššie) */

/* ── Column ──────────────────────────────────────────────────────────────── */
.bb-column {
    box-sizing:  border-box;
    min-width:   0; /* dôležité pre grid overflow */
    position:    relative;
}

.bb-column__inner {
    position: relative;
    z-index:  1;
    height:   100%;
}

.bb-column__overlay {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    border-radius:  inherit;
    z-index:        0;
}

/* ── Column vertical align overrides ─────────────────────────────────────── */
.bb-col-va-top     { align-self: start;   }
.bb-col-va-center  { align-self: center;  }
.bb-col-va-bottom  { align-self: end;     }
.bb-col-va-stretch { align-self: stretch; }

/* ── Mobile order ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .bb-col-order-1  { order: 1;  }
    .bb-col-order-2  { order: 2;  }
    .bb-col-order-3  { order: 3;  }
    .bb-col-order-4  { order: 4;  }
    .bb-col-order-5  { order: 5;  }
    .bb-col-order-6  { order: 6;  }
    .bb-col-order-7  { order: 7;  }
    .bb-col-order-8  { order: 8;  }
    .bb-col-order-9  { order: 9;  }
    .bb-col-order-10 { order: 10; }
    .bb-col-order-11 { order: 11; }
    .bb-col-order-12 { order: 12; }
}

/* ── Conditional visibility ──────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .bb-hide-desktop { display: none !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .bb-hide-tablet  { display: none !important; }
}
@media (max-width: 600px) {
    .bb-hide-mobile  { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BRANIKE COLUMNS — Editor styles
   ───────────────────────────────────────────────────────────────────────────── */

/* Preset tlačidlá grid */
.bb-preset-grid {
    display:         flex;
    flex-wrap:       wrap;
    gap:             4px;
    margin-bottom:   4px;
}

/* Editor grid wrapper */
.bb-columns-editor-wrap { position: relative; }
.bb-columns-editor-grid { position: relative; }

/* ── Drag handle ─────────────────────────────────────────────────────────── */
.bb-drag-handles-layer {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        100;
}

.bb-drag-handle {
    position:        absolute;
    top:             0;
    bottom:          0;
    width:           16px;
    transform:       translateX(-50%);
    cursor:          col-resize;
    pointer-events:  all;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         100;
    opacity:         0;
    transition:      opacity .15s;
}

.bb-drag-handle::after {
    content:       '';
    display:       block;
    width:         4px;
    height:        40px;
    max-height:    60%;
    border-radius: 4px;
    background:    #1565C0;
    box-shadow:    0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.25);
}

/* Zobraz drag handle pri hover na columns wrapper */
.bb-columns-editor-wrap:hover .bb-drag-handle,
.bb-columns-editor-wrap:focus-within .bb-drag-handle {
    opacity: 1;
}

.bb-drag-handle:hover::after,
.bb-drag-handle:active::after {
    background: #0d47a1;
    height:     60px;
}

/* ── Column visibility badge v editore ───────────────────────────────────── */
.bb-col-visibility-badge {
    position:      absolute;
    top:           4px;
    right:         4px;
    background:    rgba(0,0,0,.6);
    color:         #fff;
    font-size:     10px;
    padding:       2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index:       10;
    line-height:   1.4;
}

/* ── Editor: 1px border obrys stĺpcov ───────────────────────────────────── */
/* Zobrazí sa len v Gutenberg editore, nie na frontende                       */
.editor-styles-wrapper .bb-column {
    outline:        1px dashed #c5c5c5;
    outline-offset: -1px;
    min-height:     48px;
}

/* Pri selectnutí stĺpca — modrý obrys (WP core štýl) */
.editor-styles-wrapper .bb-column.is-selected,
.editor-styles-wrapper .bb-column.has-child-selected {
    outline-color: #007cba;
}

/* Hover — jemne viditeľnejší */
.editor-styles-wrapper .bb-column:hover {
    outline-color: #999;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRANIKE BLOCKS — Editor block highlight colors
   Modrá = Branike brand, hover čierna (inverted), selected modrá
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inserter ikona farba — overridy pre BRANIKE kategóriu */
.editor-block-list-item[data-type^="branike/"] .block-editor-block-icon,
.block-editor-inserter__block-list .block-editor-block-types-list__item[data-type^="branike/"] .block-editor-block-icon {
    color: #1565C0;
}

/* Hover na inserter položke — čierna */
.block-editor-inserter__block-list .block-editor-block-types-list__item[data-type^="branike/"]:hover .block-editor-block-icon {
    color: #000;
}

/* Toolbar ikona Branike Stĺpec / Stĺpce — modrá border pri selected */
.editor-styles-wrapper .bb-column.is-selected > .block-editor-block-list__block-edit::before,
.editor-styles-wrapper [data-type="branike/column"].is-selected > .block-editor-block-list__block-edit::before {
    outline-color: #1565C0 !important;
    box-shadow: 0 0 0 1px #1565C0 !important;
}

/* Block selection outline — modrá Branike namiesto WP default */
.editor-styles-wrapper .bb-column.is-selected {
    outline-color: #1565C0 !important;
}
.editor-styles-wrapper .bb-column:hover {
    outline-color: #000 !important;
}

/* Branike Stĺpce wrapper — modrý label v toolbar */
.block-editor-block-list__layout [data-type="branike/columns"] > .block-editor-block-list__block-edit > .block-editor-block-toolbar,
.block-editor-block-list__layout [data-type="branike/column"] > .block-editor-block-list__block-edit > .block-editor-block-toolbar {
    border-color: #1565C0;
}

/* ── Biela ikona keď je Branike blok selected (modrý toolbar) ─────────────── */
/* WP toolbar má tmavé pozadie pri selected — ikona musí byť biela            */
.block-editor-block-contextual-toolbar [data-type^="branike/"] .block-editor-block-icon svg,
.block-editor-block-toolbar [data-type^="branike/"] .block-editor-block-icon svg {
    fill: #fff;
    color: #fff;
}

/* Fallback — ikona v zoznamovom zobrazení pri selected */
.block-editor-list-view-tree .block-editor-list-view-block.is-selected .block-editor-block-icon {
    color: #fff !important;
}
.block-editor-list-view-tree .block-editor-list-view-block.is-selected .block-editor-block-icon svg {
    fill: #fff !important;
}

/* ── Column hover efekty ─────────────────────────────────────────────────── */
.bb-col-hover-scale,
.bb-col-hover-lift,
.bb-col-hover-glow,
.bb-col-hover-shine {
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    will-change: transform;
    cursor: pointer;
}

/* Scale — zväčší sa pri hover */
.bb-col-hover-scale:hover {
    transform: scale(1.03);
    z-index: 2;
}

/* Lift — zdvihne sa (tieň + posun nahor) */
/* z-index:3 > divider z-index:2 → stĺpec sa zdvihne NAD divider */
.bb-col-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
    z-index: 3;
}

/* Glow — FIX: čistý farebný tieň BEZ pohybu */
.bb-col-hover-glow {
    transition: box-shadow 0.35s ease;
}
.bb-col-hover-glow:hover {
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25),
                0 8px 32px rgba(21, 101, 192, 0.40) !important;
    z-index: 2;
}

/* Shine — svetelný prúžok prebehne cez stĺpec */
.bb-col-hover-shine {
    overflow: hidden;
}
.bb-col-hover-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.55s ease;
    pointer-events: none;
    z-index: 3;
}
.bb-col-hover-shine:hover::after {
    transform: translateX(100%);
}

/* Tilt — 3D náklon riadi JS (CSS custom properties --bb-tilt-x, --bb-tilt-y) */
.bb-col-hover-tilt {
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.1s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.bb-col-hover-tilt:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
}
/* JS nastavuje inline transform, CSS pridáva perspective cez parent */
.bb-col-hover-tilt {
    transform: perspective(800px)
               rotateX(var(--bb-tilt-x, 0deg))
               rotateY(var(--bb-tilt-y, 0deg));
}

/* ── Hover Transform (translate/scale/rotate cez CSS vars) ──────────────── */
/* Nastavené inline cez PHP keď sú hodnoty nenulové. Neovplyvňuje performance —
   transform sa vždy spúšťa na GPU (compositor thread). */
.bb-column[style*="--bb-htx"],
.bb-column[style*="--bb-hty"],
.bb-column[style*="--bb-hsc"],
.bb-column[style*="--bb-hro"] {
    transition: transform var(--bb-htd, 300ms) ease-out,
                box-shadow var(--bb-htd, 300ms) ease-out;
    will-change: transform;
}
.bb-column[style*="--bb-htx"]:hover,
.bb-column[style*="--bb-hty"]:hover,
.bb-column[style*="--bb-hsc"]:hover,
.bb-column[style*="--bb-hro"]:hover {
    transform: translateX(var(--bb-htx, 0px))
               translateY(var(--bb-hty, 0px))
               scale(var(--bb-hsc, 1))
               rotate(var(--bb-hro, 0deg));
}

/* ── Stretched link — celý stĺpec klikateľný ────────────────────────────── */
/* Pseudo-element prekryje celú plochu stĺpca. Vnútorné linky ostanú funkčné
   (majú z-index 1) cez position:relative na .bb-column__inner-content.      */
.bb-column--linked {
    position: relative;
    cursor: pointer;
}

.bb-column--linked > .bb-column__link {
    position: absolute;
    inset: 0;
    z-index: 0;
    text-indent: -9999px;
    overflow: hidden;
    border-radius: inherit;
}

/* Vnútorný obsah stĺpca musí byť nad stretched linkom */
.bb-column--linked > :not(.bb-column__link) {
    position: relative;
    z-index: 1;
}

/* Responsive padding — CSS custom properties ──────────────────────────────── */
/* Tablet (max 1024px) */
@media (max-width: 1024px) {
    .bb-column[style*="--bb-col-p-tab"] {
        padding: var(--bb-col-p-tab);
    }
}

/* Mobile (max 600px) */
@media (max-width: 600px) {
    .bb-column[style*="--bb-col-p-mob"] {
        padding: var(--bb-col-p-mob);
    }
}

/* ── Parallax pozadie — CSS scroll-driven animation ─────────────────────── */
/* Funguje v Chrome/Edge/Safari. Staršie prehliadače: bez animácie (graceful) */
@supports (animation-timeline: view()) {
    .bb-col-parallax {
        overflow: hidden;
    }
    .bb-col-parallax {
        background-attachment: fixed;
    }
}

/* Fallback pre prehliadače bez scroll-driven: jemný scale pre hĺbku */
@supports not (animation-timeline: view()) {
    .bb-col-parallax {
        background-attachment: scroll;
    }
}

/* ── Video pozadie stĺpca ────────────────────────────────────────────────── */
.bb-column--has-video-bg {
    overflow: hidden;
    position: relative;
}

.bb-column__video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* ── Overlap dividers — sekcia musí mať overflow:visible ────────────────── */
/* Divider presahuje von zo sekcie. Susedná sekcia ostáva na svojom mieste.  */
.bb-columns-wrap--overlap {
    overflow: visible;
    /* z-index pre správne vrstvy pri overlap medzi sekciami */
    isolation: isolate;
}

/* ── Shape dividers ──────────────────────────────────────────────────────── */
/* Wrapper je absolute, inline style nastavuje výšku + pozíciu (top/bottom).
   Táto trieda zaručuje správne vrstvy a pointer-events aj bez inline stylu. */
.bb-divider {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    line-height: 0; /* eliminuje medzeru pod SVG (inline-block artefakt) */
}

.bb-divider--top {
    top: 0;
}

.bb-divider--bottom {
    bottom: 0;
}

.bb-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRANIKE BLOCKS — Entrance animácie (scroll-triggered, Intersection Observer)
   Princíp: stĺpec sa štartuje v "hidden" stave (opacity:0 + transform).
   JS pridá triedu .bb-anim-in → spustí transition na bežné hodnoty.
   DÔLEŽITÉ: počiatočný stav je nastavený CSS triednami (nie JS), čo zabraňuje
   FOUC pri SSR. JS trieda .bb-anim-ready sa pridá pred IO — guard.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Počiatočné stavy (pred animáciou) ───────────────────────────────────── */
/* Trieda bb-anim-ready zabraňuje bliknutiu — nastavuje počiatočný stav až
   po načítaní JS (nie pri SSR). Bez JS stĺpce zostanú normálne viditeľné.
   z-index:1 zabraňuje tomu, aby transform vytvoril stacking context NIŽŠÍ
   ako dividers (z-index:2) v isolation:isolate sekcii. Cielené, len pre
   animované stĺpce — neovplyvňuje ostatné .bb-column elementy. */
.bb-anim-ready[data-bb-anim] {
    z-index: 1;
}

.bb-anim-ready[data-bb-anim="fade-in"]    { opacity: 0; }
.bb-anim-ready[data-bb-anim="slide-up"]   { opacity: 0; transform: translateY(40px); }
.bb-anim-ready[data-bb-anim="slide-left"] { opacity: 0; transform: translateX(-50px); }
.bb-anim-ready[data-bb-anim="slide-right"]{ opacity: 0; transform: translateX(50px); }
.bb-anim-ready[data-bb-anim="scale-in"]   { opacity: 0; transform: scale(0.88); }
.bb-anim-ready[data-bb-anim="blur-in"]    { opacity: 0; filter: blur(10px); }
.bb-anim-ready[data-bb-anim="curtain"]    { opacity: 1; -webkit-clip-path: inset(0% 100% 0% 0%); clip-path: inset(0% 100% 0% 0%); }
.bb-anim-ready[data-bb-anim="flip-3d"]    { opacity: 0; transform: perspective(800px) rotateY(90deg); }
.bb-anim-ready[data-bb-anim="glitch"]     { opacity: 0; }
.bb-anim-ready[data-bb-anim="elastic"]    { opacity: 0; transform: translateY(50px) scale(0.9); }
.bb-anim-ready[data-bb-anim="slide-down"] { opacity: 0; transform: translateY(-40px); }
.bb-anim-ready[data-bb-anim="slice"]      {
    opacity: 0;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    transform: translateY(-20px);
}

/* ── Animovaný stav (.bb-anim-in) — cieľové hodnoty ─────────────────────── */
/* DÔLEŽITÉ: clip-path TU NIE JE — curtain/slice používajú clip-path pre      */
/* svoju animáciu. Ak by tu bolo clip-path:none !important, !important tier    */
/* by prebil aj špecifickejšie pravidlá aj keyframe animácie (CSS spec).       */
.bb-anim-ready.bb-anim-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* ── Transitions — per typ ───────────────────────────────────────────────── */
.bb-anim-ready[data-bb-anim="fade-in"]    { transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="slide-up"]   { transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                          transform var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="slide-down"] { transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                          transform var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="slide-left"] { transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                          transform var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="slide-right"]{ transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                          transform var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="scale-in"]   { transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                          transform var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="blur-in"]    { transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                          filter var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="flip-3d"]    { transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                          transform var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out);
                                            transform-style: preserve-3d; }
.bb-anim-ready[data-bb-anim="elastic"]    { transition: opacity var(--bb-anim-dur, 700ms) cubic-bezier(0.34, 1.56, 0.64, 1),
                                                          transform var(--bb-anim-dur, 700ms) cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Curtain + Slice: clip-path transition (inset/polygon → cieľová hodnota)    */
/* Bez !important — globálne pravidlo clip-path:none bolo odstránené,          */
/* specifickejšie pravidlo (3 selektory vs 2) vyhráva cascade normálne.       */
.bb-anim-ready[data-bb-anim="curtain"]    { -webkit-transition: -webkit-clip-path var(--bb-anim-dur, 700ms) var(--bb-anim-ease, ease-out),
                                                                    clip-path var(--bb-anim-dur, 700ms) var(--bb-anim-ease, ease-out);
                                            transition: clip-path var(--bb-anim-dur, 700ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="curtain"].bb-anim-in { -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); }

.bb-anim-ready[data-bb-anim="slice"]      { -webkit-transition: -webkit-clip-path var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out);
                                            transition: opacity var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                        clip-path var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out),
                                                        transform var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out); }
.bb-anim-ready[data-bb-anim="slice"].bb-anim-in   { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
                                                     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }

/* ── Glitch — špeciálny prípad s @keyframes ──────────────────────────────── */
/* Glitch používa animation (nie transition) — JS len pridá .bb-anim-in */
@keyframes bb-glitch-in {
    0%   { opacity: 0; transform: translateX(0);    clip-path: inset(40% 0 60% 0); }
    10%  { opacity: 1; transform: translateX(-4px); clip-path: inset(20% 0 70% 0); }
    20%  { opacity: 1; transform: translateX( 4px); clip-path: inset(60% 0 20% 0); }
    30%  { opacity: 1; transform: translateX(-2px); clip-path: inset(10% 0 80% 0); }
    40%  { opacity: 1; transform: translateX( 2px); clip-path: inset(0); }
    50%  { opacity: 1; transform: translateX(-1px); clip-path: inset(0); }
    100% { opacity: 1; transform: translateX(0);    clip-path: inset(0); }
}

.bb-anim-ready[data-bb-anim="glitch"].bb-anim-in {
    animation: bb-glitch-in var(--bb-anim-dur, 600ms) var(--bb-anim-ease, ease-out) both;
}

/* ── Rešpektovanie preferencií prístupnosti ──────────────────────────────── */
/* prefers-reduced-motion: vypnúť všetky animácie a transitions              */
@media (prefers-reduced-motion: reduce) {
    .bb-anim-ready[data-bb-anim],
    .bb-anim-ready[data-bb-anim].bb-anim-in {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}