/**
 * Branike Buttons — Frontend + Editor styles
 */

.bb-buttons {
    display: flex;
    flex-direction: var(--bb-btn-dir, row);
    flex-wrap: var(--bb-btn-wrap, wrap);
    justify-content: var(--bb-btn-justify, flex-start);
    align-items: center;
    gap: var(--bb-btn-gap, 12px);
}

@media (max-width: 1024px) {
    .bb-buttons {
        gap: var(--bb-btn-gap-tab, 10px);
    }
}

@media (max-width: 767px) {
    .bb-buttons {
        gap: var(--bb-btn-gap-mob, 8px);
    }
}

/* Vertical layout — tlačidlá na celú šírku */
.bb-buttons--vertical {
    align-items: flex-start;
}

.bb-buttons--vertical .bb-button {
    width: 100%;
    justify-content: center;
}

/* ── Mobil: ZALOMIŤ, nie zmrštiť ──────────────────────────────────
 *
 * `.bb-button` má `white-space: nowrap` (button/style.css) a flex položka
 * má predvolený `flex-shrink: 1`. Kombinácia je zradná: keď sa dve tlačidlá
 * vedľa seba nezmestia, prehliadač ich NAJPRV zmrští pod šírku ich vlastného
 * textu — a keďže text sa nesmie zalomiť, jednoducho sa OREŽE. Na druhý
 * riadok sa nezalomia nikdy, hoci `.bb-buttons` má `flex-wrap: wrap`.
 *
 * Namerané na branike.com pri šírke 390 px (2026-07-31):
 *   „Chcem Branike Stays"             216 px / potrebuje 217 px  → orezané
 *   „Kompletný sprievodca v príručke" 219 px / potrebuje 265 px  → orezané
 * Na desktope sa chyba neprejaví vôbec.
 *
 * `flex-shrink: 0` vráti pôvodný zámer: tlačidlo si drží svoju šírku a
 * skupina ho zalomí na nový riadok.
 *
 * 🔴 Špecificita: (0,2,0) prebije základné `.bb-button` (0,1,0), ale
 * NEprebije `.bb-buttons.is-style-stretch .bb-button` (0,3,0) — štýl
 * „stretch" zmršťuje zámerne a musí si to udržať.
 */
.bb-buttons .bb-button {
    flex-shrink: 0;
    max-width:   100%;
}

/* Keď je aj jediné tlačidlo širšie než celý riadok, `nowrap` by ho pustil
 * von z obrazovky. Pod týmto zlomom teda text radšej zalomíme — orezaný
 * popis tlačidla je horší než dvojriadkové tlačidlo. */
@media (max-width: 480px) {
    .bb-buttons .bb-button {
        white-space: normal;
        text-align:  center;
    }
}

/* ── 🔴🔴 NA MOBILE SA `--bb-btn-wrap: nowrap` IGNORUJE ────────────────────
 *
 * Brani, 2026-08-03: „minule si opravoval buttony že vyliezajú a celé to
 * posúva stránku vľavo vpravo a teraz je tam to isté."
 *
 * Mal pravdu a stojí za to zapísať, PREČO sa to vrátilo — oprava z 07-31
 * totiž funguje presne tak, ako mala.
 *
 * `flex-shrink: 0` vyššie odstránilo OREZÁVANIE textu: tlačidlo si drží
 * svoju šírku a skupina ho má zalomiť. Lenže zalomiť sa dá len vtedy, keď má
 * kontajner `flex-wrap: wrap` — a ten sa berie z `--bb-btn-wrap`, ktorú si
 * autor nastavuje v editore. Pri `nowrap` teda `flex-shrink: 0` problém
 * PRESUNUL: namiesto orezaného textu tlačidlo vytečie z obrazovky a stránka
 * začne ísť do strán. Komentár vyššie tvrdí, že „`.bb-buttons` má
 * `flex-wrap: wrap`" — to platí len pre PREDVOLENÚ hodnotu.
 *
 * Odmerané na branike.com v iframe 390 px (2026-08-03):
 *   `--bb-btn-wrap: nowrap`, kontajner 302 px, tlačidlá 240 + 172 px
 *   → `scrollWidth 426` proti `clientWidth 390`, teda **36 px do strany**.
 *
 * 🔴 Preto sa `nowrap` pod zlomom NEREŠPEKTUJE. Na 390 px nie je situácia,
 * v ktorej by bolo správne pustiť tlačidlá von zo stránky — vodorovné
 * posúvanie rozbije celý web, nielen tú jednu skupinu. Na desktope, kde má
 * `nowrap` zmysel, zostáva autorova voľba nedotknutá.
 *
 * 🔴 Bez `!important`: pravidlo má rovnakú špecificitu ako základné
 * `.bb-buttons` (0,1,0) a stojí v súbore neskôr, takže vyhrá poradím.
 * Overené v prehliadači — `flex-wrap` vyšlo `wrap` a `scrollWidth` klesol
 * na 390. [[feedback_css_rule_must_win_not_exist]]
 *
 * ── 🔴🔴 767 → 1199 px (2026-09-09) ────────────────────────────────────────
 *
 * Brani našiel na branike.com to isté o jeden zlom vyššie: orbit karta
 * z pravého stĺpca prekrývala tlačidlo „Prečo Branike". Orbit za to nemohol —
 * prekryl len to, čo mu do stĺpca vliezlo.
 *
 * Odmerané v prehliadači (hero, `--bb-btn-wrap: nowrap`, tlačidlá 300 + 10 + 214
 * = 524 px):
 *     okno 1152 → stĺpec 559 px  ✅ sedí
 *     okno 1100 → stĺpec 530 px  · pretečenie 5 px
 *     okno  940 → stĺpec 418 px  · pretečenie 106 px, orbit tlačidlo PREKRÝVA
 *
 * 🔴 PRIZNANÝ KOMPROMIS: skutočná podmienka nie je „úzke okno", ale
 * „tlačidlá sú širšie než KONTAJNER". Zlom podľa viewportu to povedať nevie —
 * úzky stĺpec na širokom okne (tri stĺpce, sidebar) ostane rozbitý. Platné
 * riešenie je container query nad `.bb-buttons`, čo si vyžaduje
 * `container-type: inline-size` na `.bb-column` a premeranie containmentu na
 * viacerých stránkach. Zapísané ako otvorené; 1199 px je poistka, nie oprava
 * príčiny.
 *
 * ⚪ Nad 1200 px ostáva autorova voľba `nowrap` nedotknutá — tam sa dvojica
 * tlačidiel do stĺpca zmestí.
 */
@media (max-width: 1199px) {
    .bb-buttons {
        flex-wrap: wrap;
    }
}

/* ── Block Styles ─────────────────────────────────────────────── */

/* is-style-stack — tlačidlá pod sebou (column) */
.bb-buttons.is-style-stack {
    flex-direction: column;
    align-items:    flex-start;
}
.bb-buttons.is-style-stack .bb-button {
    width: 100%;
    justify-content: center;
}

/* is-style-stretch — každé tlačidlo rovnakú šírku, vypĺňa riadok */
.bb-buttons.is-style-stretch {
    justify-content: stretch;
}
.bb-buttons.is-style-stretch .bb-button {
    flex:            1 1 0;
    justify-content: center;
}