/* ==========================================================================
   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.
   ========================================================================== */
/* Čierny 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);
    /* Nastavenia → Farebnosť → Pozadie bannerov (Trello N2JudpPQ, 29. 9. 2026
       20:11): prechod dvoch farieb so stredom z posuvníka Prechod farieb,
       predvolene čierna. */
    background: linear-gradient(
        180deg,
        var(--bannery-hore, #000000) 0%,
        var(--bannery-prechod, 50%),
        var(--bannery-dole, #000000) 100%
    );
}

/* Obrázok Pozadie bannera nad prechodom vo vlastnej vrstve - priehľadnosť
   a veľkosť z posuvníkov, zmenšený sa opakuje (ako pozadie hlavičky). */
.bn-pas::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bannery-obrazok, none) center / var(--bannery-obrazok-velkost, auto) repeat;
    opacity: var(--bannery-obrazok-nepriehladnost, 1);
    pointer-events: none;
}

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

.bn-sada {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    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));
    grid-auto-rows: 250px;
}

.bn-slider {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

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

.bn-male {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 3px;
    min-height: 500px;
}

/* --- 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 {
    position: absolute;
    inset: 0;
    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));
    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;
}

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

    .bn-slider {
        min-height: 380px;
    }

    .bn-male {
        min-height: 0;
        grid-auto-rows: minmax(220px, auto);
    }
}

@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);
}