/* ==========================================================================
   SADA BANNEROV NA ÚVODNEJ STRÁNKE (Trello uopmQTCi, 28. 9. 2026)
   ==========================================================================
   Podľa grafiky karty: na celú šírku hneď pod hlavičkou, vľavo slider
   veľkých bannerov (~60 %), vpravo malé bannery pod sebou; medzi bannermi
   3 px biela medzera. Pozadie stmavené, text biely, tlačidlo v hlavnej
   farbe. Značky: components/home/bannery.blade.php, slider: js/app.js.
   ========================================================================== */
/* Pás na celú šírku, bannery v ňom najviac 1400 px na stred
   (Vojto 30. 9. 2026). */
.bn-pas {
    position: relative;
    /* Hneď pod hlavičkou - .site-main má horný odstup. */
    margin: calc(-1 * var(--space-6, 32px)) 0 var(--space-6, 32px);
    /* Bez vlastného pozadia (Vojto 13. 10. 2026): pozadie za bannermi
       určuje sekcia Vizuálneho editora, v ktorej widget Bannery je -
       nastavenie Farebnosť → Pozadie bannerov je zrušené. */
    background: transparent;
}

.bn-pas > * {
    position: relative;
}

.bn-sada {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    /* Výška bannera z Backendu (Lišta → Všeobecné, 9. 10. 2026) je
       najmenšia výška - stĺpce sa dorovnajú na výšku vyššieho, bez medzier. */
    gap: 3px;
    max-width: 1400px;
    margin: 0 auto;
    background: #FFFFFF;
}

.bn-sada--len-male,
.bn-sada--len-velke {
    grid-template-columns: minmax(0, 1fr);
}

.bn-sada--len-male .bn-male {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Veľké bannery v jednej bunke mriežky nad sebou (prelínanie) - slider je
   vysoký ako najvyšší z nich (9. 10. 2026, predtým pevných 500 px). */
.bn-slider {
    position: relative;
    display: grid;
    /* minmax(0, …): široký obsah bannera nerozťahuje stĺpec. */
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.bn-slider > .bn {
    grid-area: 1 / 1;
}

.bn-slider.je-tahany {
    cursor: grabbing;
}

.bn-male {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
}

/* --- Jeden banner ------------------------------------------------------------ */
.bn {
    position: relative;
    display: flex;
    min-height: 250px;
    background: #333333 center / cover no-repeat;
    color: #FFFFFF;
}

/* Vrstva cez obrázok len pri „Obrázok prekryť farbou“ (Vojto 5. 10. 2026) -
   bez neho banner bez stmavenia (.bn--prekrytie nižšie). */
.bn::before {
    content: none;
    position: absolute;
    inset: 0;
}

/* Grafický banner nemá text - obrázok bez stmavenia (1. 10. 2026). */
.bn--graficky::before {
    content: none;
}

.bn-obsah {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 560px;
    padding: 30px 40px;
}

/* Veľký banner: obsah dole vľavo; malý: hore vľavo (grafika). */
.bn--velky {
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.bn--velky.je-aktivny {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0s;
    z-index: 1;
}

.bn--velky .bn-obsah {
    padding: 40px 57px 35px;
}

/* Písmo, veľkosť, váha a farba textov: polia Písmo pri banneri v Backende
   (Trello 2iYlmi4F, 29. 9. 2026) - premenné --bn-<pole>-* v štýle bannera.
   Záložné hodnoty = vzhľad pred zavedením polí. */
.bn-podnazov {
    margin: 0 0 6px;
    font-family: var(--bn-podnazov-rodina, inherit);
    font-size: var(--bn-podnazov-velkost, 13px);
    font-weight: var(--bn-podnazov-vaha, 600);
    color: var(--bn-podnazov-farba, #FFFFFF);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
}

.bn .bn-nazov {
    margin: 0 0 16px;
    font-family: var(--bn-nazov-rodina, var(--pismo-h2-rodina, inherit));
    font-size: var(--bn-nazov-velkost, var(--pismo-h2-velkost, 22px));
    font-weight: var(--bn-nazov-vaha, var(--pismo-h2-vaha, 700));
    line-height: 1.2;
    color: var(--bn-nazov-farba, #FFFFFF);
}

/* Text bannera: písmo, veľkosť a farba z HTML editora (Vojto 5. 10. 2026);
   bez nastavení v editore písmo Text z Nastavenia → Písma. */
.bn-text {
    line-height: 1.3;
}

.bn-text p {
    margin: 0;
}

.bn-cena {
    margin: 12px 0 0;
    font-family: var(--bn-cena-rodina, inherit);
    font-size: var(--bn-cena-velkost, 20px);
    font-weight: var(--bn-cena-vaha, 700);
    color: var(--bn-cena-farba, #FFFFFF);
}

.bn-tlacidlo {
    display: inline-flex;
    align-items: center;
    height: 48px;
    margin-top: 16px;
    padding: 0 20px;
    border-radius: 8px;
    /* Farba a štýl textu z banneru (Backend), inak Farebnosť / Písma. */
    background: var(--bn-farba-tlacidla, var(--farba-tlacidla, var(--farba-hlavna, #DB9633)));
    text-decoration: none;
}

.bn .bn-tlacidlo {
    font-family: var(--bn-tlacidlo-rodina, var(--pismo-tlacidlo-rodina, inherit));
    font-size: var(--bn-tlacidlo-velkost, var(--pismo-tlacidlo-velkost, 16px));
    line-height: var(--bn-tlacidlo-riadkovanie, var(--pismo-tlacidlo-riadkovanie, inherit));
    text-decoration: var(--bn-tlacidlo-dekoracia, none);
    font-weight: var(--bn-tlacidlo-vaha, var(--pismo-tlacidlo-vaha, 700));
    color: var(--bn-tlacidlo-farba, var(--pismo-tlacidlo-farba, #FFFFFF));
}

.bn-tlacidlo:hover {
    background: var(--bn-farba-tlacidla-prechod, var(--farba-tlacidla-prechod, var(--farba-hlavna, #DB9633)));
    text-decoration: none;
}

/* Grafický banner (zatiaľ ako doteraz): veľký 500 px, malý 250 px. */
.bn--graficky.bn--velky {
    min-height: 500px;
}

/* --- Tablet a mobil ------------------------------------------------------------ */
@media (max-width: 1023px) {
    .bn-sada {
        grid-template-columns: minmax(0, 1fr);
    }

    .bn--graficky.bn--velky {
        min-height: 380px;
    }

    .bn--graficky.bn--maly {
        min-height: 220px;
    }
}

@media (max-width: 767px) {
    .bn-obsah,
    .bn--velky .bn-obsah {
        padding: 24px 20px;
    }

}

/* Klik na celú plochu bannera (Vojto 5. 10. 2026): odkaz cez celý banner,
   obsah ho neblokuje, tlačidlo ostáva klikateľné. */
.bn-plocha {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.bn--cela-plocha {
    cursor: pointer;
}

.bn--cela-plocha .bn-obsah {
    z-index: 2;
    pointer-events: none;
}

.bn--cela-plocha .bn-obsah a {
    pointer-events: auto;
}

/* Názov s pozadím textu (Backend → Bannery → Nastavenie názvu). */
.bn .bn-nazov--pozadie,
.bn .bn-podnazov.bn-nazov--pozadie,
.bn .bn-cena.bn-nazov--pozadie {
    padding: .1em .35em;
    border-radius: 4px;
}

/* Obrázok prekryť farbou (Backend → Bannery, Vojto 5. 10. 2026): farba
   a krytie z bannera, aj pri grafickom banneri. */
.bn.bn--prekrytie::before {
    content: "";
    background: var(--bn-prekrytie-farba, #000000);
    opacity: var(--bn-prekrytie, .7);
}

/* ==========================================================================
   TEXTOVÝ BANNER - NASTAVENIA Z LIŠTY (Backend → Obsah → Bannery, Vojto
   9. 10. 2026). Rozmery, okraje, písma, farby a tiene sú inline štýly
   (App\Support\BannerDizajn), tu len stavba:
     .bn--t            banner (Všeobecné + Okraje)
       .bn-plocha      odkaz cez celý banner (Klikateľná celá plocha)
       .bn-pozadie     pozadie (farba / prechod), zarovnanie obsahu
         .bn-pozadie-obrazok   obrázok s priehľadnosťou nad farbou
         .bn-blok      obsah so šírkou obsahu: podnadpis, nadpis, text, tlačidlá
   Tlačidlo: farby, tieň a písmo cez premenné --bn-tl-* (aj pri prechode
   myšou), ikona prefarbená maskou (SVG / PNG / WebP s priehľadnosťou).
   ========================================================================== */
.bn.bn--t {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    background: none;
    color: inherit;
}

.bn--t .bn-pozadie {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    box-sizing: border-box;
}

.bn--t .bn-pozadie-obrazok {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

.bn--t .bn-blok {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.bn--t .bn-blok > * {
    max-width: 100%;
    box-sizing: border-box;
}

.bn--t .bn-nadpis {
    line-height: 1.2;
}

.bn--t .bn-podnadpis,
.bn--t .bn-text {
    line-height: 1.3;
}

.bn--t .bn-text p {
    margin: 0;
}

/* Text = Textové okno HTML (Vojto 9. 10. 2026): z Lišty len písmo (inline
   font-family), veľkosť, hrúbku, farbu a ostatné nastavuje editor (inline
   štýly v HTML majú prednosť). Bez nich doterajší predvolený vzhľad textu
   bannera (Banner::predvolenyStyl): 15 px, hrúbka Textu z Nastavenia →
   Písma, biela. Tučné z editora = 700 ako v editore (nie v nadpise - ten má
   hrúbku z Nastavenia → Písma). */
.bn--t .bn-text {
    font-size: 15px;
    font-weight: var(--pismo-text-vaha, 400);
    color: #FFFFFF;
}

.bn--t .bn-text :is(strong, b):not(:is(h1, h2, h3, h4, h5, h6) *) {
    font-weight: 700;
}

.bn--t .bn-tlacidla {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--bn-zarovnanie, flex-start);
    column-gap: 10px;
}

.bn--t .bn-tl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--bn-tl-bg, transparent);
    box-shadow: var(--bn-tl-tien, none);
    font-family: var(--bn-tl-p-rodina, inherit);
    font-size: var(--bn-tl-p-velkost, inherit);
    line-height: var(--bn-tl-p-riadkovanie, 1.2);
    text-decoration: var(--bn-tl-p-dekoracia, none);
    font-weight: var(--bn-tl-p-vaha, inherit);
    color: var(--bn-tl-p-farba, inherit);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.bn--t .bn-tl:hover,
.bn--t .bn-tl:focus-visible,
.bn--t.bn--cela-plocha:hover .bn-tl {
    background-color: var(--bn-tl-bg-h, var(--bn-tl-bg, transparent));
    box-shadow: var(--bn-tl-tien-h, var(--bn-tl-tien, none));
    font-family: var(--bn-tl-h-rodina, var(--bn-tl-p-rodina, inherit));
    font-size: var(--bn-tl-h-velkost, var(--bn-tl-p-velkost, inherit));
    line-height: var(--bn-tl-h-riadkovanie, var(--bn-tl-p-riadkovanie, 1.2));
    text-decoration: var(--bn-tl-h-dekoracia, var(--bn-tl-p-dekoracia, none));
    font-weight: var(--bn-tl-h-vaha, var(--bn-tl-p-vaha, inherit));
    color: var(--bn-tl-h-farba, var(--bn-tl-p-farba, inherit));
    text-decoration: none;
}

.bn--t .bn-tl-ikona,
.bn--t .bn-tl-obrazok {
    flex: none;
    width: 24px;
    height: 24px;
}

.bn--t .bn-tl-obrazok {
    object-fit: contain;
}

.bn--t .bn-tl-ikona {
    background-color: var(--bn-tl-ikona, currentColor);
    -webkit-mask: var(--bn-ik-url) center / contain no-repeat;
    mask: var(--bn-ik-url) center / contain no-repeat;
    transition: background-color .2s ease;
}

.bn--t .bn-tl:hover .bn-tl-ikona,
.bn--t.bn--cela-plocha:hover .bn-tl-ikona {
    background-color: var(--bn-tl-ikona-h, var(--bn-tl-ikona, currentColor));
}

/* Klikateľná celá plocha: odkaz pod obsahom, obsah klik prepustí (odkazy
   v texte ostávajú klikateľné). */
.bn--t.bn--cela-plocha .bn-pozadie {
    z-index: 2;
    pointer-events: none;
}

.bn--t.bn--cela-plocha .bn-text a {
    pointer-events: auto;
}

/* Interakcia (Backend → Bannery, 9. 10. 2026). Textové časti spolu v jednom
   bloku (zarovnanie ako obsah); odkaz na textové časti = vrstva cez blok,
   odkazy v texte nad ňou. Odkaz na pozadie = vrstva pod obsahom, klik
   prepustí všetko okrem tlačidiel a textových častí s odkazom. */
.bn--t .bn-texty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: inherit;
    max-width: 100%;
}

.bn--t .bn-texty > * {
    max-width: 100%;
    box-sizing: border-box;
}

.bn--t .bn-texty-odkaz {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.bn--t .bn-texty:has(.bn-texty-odkaz) .bn-text a {
    position: relative;
    z-index: 2;
}

.bn--t.bn--pozadie-odkaz .bn-pozadie {
    z-index: 2;
    pointer-events: none;
}

.bn--t.bn--pozadie-odkaz :is(.bn-tl, .bn-texty-odkaz, .bn-text a) {
    pointer-events: auto;
}