/* =========================================================
   Rivano – text na bannerech titulky

   CO SE OPRAVUJE

   Šablona sází nadpis banneru přes
   `.row.banners-row .extended-banner-texts`: bílý pruh
   (rgba(255,255,255,.7)) přilepený úplně dolů, v něm drobné
   tmavé písmo. Nadpis tím spadne pod tlačítko na samý okraj
   fotky a působí, jako by tam nepatřil.

   Druhá věc: šablona podnadpisu přidává `top: 36px`. Ten posun
   je jen vizuální, v rozvržení místo nezabere, takže se věta
   přelije přes tlačítko pod sebou.

   Třetí věc je pojistka. Obecné `.extended-banner-texts` text
   vystředí přes `top/left: 50%` a `transform: translate(-50%,-50%)`.
   Pravidlo pro `.banners-row` ho pak přesune dolů, ale transform
   po sobě neuklidí – zbylý posun o polovinu šířky odsune text
   460 px doleva, mimo banner. Dokud je slot prázdný, není to
   vidět. Proto se tu transform vynuluje natvrdo.

   Řešení: bílý pruh nahradit tmavým přechodem zdola. Ten drží
   text čitelný na světlé i tmavé fotce a nezakrývá ji jako plný
   pruh. Nadpis, věta a tlačítko pak stojí nad sebou v jednom
   sloupci u levého dolního rohu.
   ========================================================= */

.banners-row .banner-wrapper > a,
.banners-row .carousel-inner .item > a {
    position: relative;
    display: block;
}

/* Selektor je schválně `.row.banners-row` – šablona bílý pruh
   nastavuje přes `.row.banners-row .extended-banner-texts` a se
   slabším selektorem by bílá barva zůstala pod přechodem
   a dělala by přes fotku závoj. */
.row.banners-row .extended-banner-texts {
    /* Tohle je ta oprava – bez ní text uteče mimo banner. */
    transform: none !important;
    background-color: transparent;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;

    padding: 80px 32px 28px;
    text-align: left;

    /* Přechod místo plného pruhu: dole čitelné, nahoře fotka
       zůstane vidět. Tmavý proto, že fotky jsou světlé. */
    background: linear-gradient(to top,
                rgba(20, 14, 11, 0.72) 0%,
                rgba(20, 14, 11, 0.45) 45%,
                rgba(20, 14, 11, 0) 100%);
}

.row.banners-row .extended-banner-title {
    margin: 0;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    /* Jemný stín pod přechodem stačí; 2px 2px 10px dělalo
       na velkém písmu špinavý okraj. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    max-width: 18ch;
    text-wrap: balance;
}

/* Podnadpis – vyplní se, jen když ho v administraci zadáte. */
.row.banners-row .extended-banner-text {
    margin: 0;
    /* Šablona větu posouvá o `top: 36px`. Posun je jen vizuální,
       v rozvržení místo nezabere, takže věta přeteče přes tlačítko
       pod sebou. Musí se vynulovat. */
    position: relative;
    top: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    line-height: 1.45;
    max-width: 34ch;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.row.banners-row .extended-banner-text p {
    margin: 0;
}

/* Tlačítko už stín nepotřebuje, přechod ho nese sám.
   Firemní oranžová se na tmavém přechodu drží líp než černá –
   ta s podkladem splývá. Kdybyste chtěl černé zpátky, změňte
   background na #000 a hover na #333. */
.banners-row .extended-banner-texts .rk-btn--banner {
    position: static;
    box-shadow: none;
    margin-top: 4px;
    background: var(--color-primary, #D06B4D);
}

.banners-row .banner-wrapper > a:hover .rk-btn--banner,
.banners-row .carousel-inner .item > a:hover .rk-btn--banner {
    background: var(--color-secondary, #C65A3A);
}


/* =========================================================
   Boční bannery – poloviční výška, všechno o stupeň menší
   ========================================================= */

/* Selektory musí být aspoň tak silné jako `.row.banners-row …`
   výš, jinak by boční bannery zdědily velké odsazení hlavního. */
.banners-row .next-to-carousel-banners .extended-banner-texts {
    gap: 10px;
    padding: 44px 20px 18px;
}

.banners-row .next-to-carousel-banners .extended-banner-title {
    font-size: 21px;
    max-width: 14ch;
}

/* Boční banner je 208 px vysoký. Nadpis na dva řádky, věta
   a tlačítko se do něj nevejdou – přechod by přerostl fotku.
   Věta se proto na bočních vynechá, i kdyby vyplněná byla. */
.banners-row .next-to-carousel-banners .extended-banner-text {
    display: none;
}


/* =========================================================
   Mobil – banner je nízký, podnadpis se skryje
   ========================================================= */

@media (max-width: 767px) {
    .row.banners-row .extended-banner-texts,
    .banners-row .next-to-carousel-banners .extended-banner-texts {
        gap: 10px;
        padding: 60px 16px 16px;
    }

    .row.banners-row .extended-banner-title,
    .banners-row .next-to-carousel-banners .extended-banner-title {
        font-size: 20px;
        max-width: 16ch;
    }

    /* Na 390 px šířky se nadpis, věta i tlačítko nevejdou,
       aniž by zakryly fotku. Přednost má nadpis a tlačítko. */
    .row.banners-row .extended-banner-text {
        display: none;
    }

    /* Šipky karuselu sedí na mobilu u levého okraje ve svislém
       středu a nadpis do nich najíždí. Text se jim uhne. */
    .banners-row .carousel-inner .extended-banner-texts {
        padding-left: 46px;
    }
}