/*
|--------------------------------------------------------------------------
| Pattern: Hero2
|--------------------------------------------------------------------------
|
| Layout rules for hero promo swiper so all slides share the expected
| height behavior of SliderHP: the row stretches, the media fills the
| available height, and the content column stays vertically centered.
|
*/

.js-hero2-promo.swiper {
    overflow: hidden;
}

.js-hero2-promo .swiper-wrapper {
    height: auto;
}

.js-hero2-promo .swiper-slide {
    display: flex;
    height: auto;
}

[data-hero2-promo-slide-inner] {
    flex: 1 1 auto;
}

[data-hero2-promo-media] > img {
    display: block;
}

/* Solo mobile: respiro tra CTA e immagine nel flusso in colonna. Da md in su
   il pannello ha py simmetrico nel markup (QA 181) e nessun pb extra, cosi'
   il testo resta centrato nella fascia. */
[data-hero2-solution-panel] {
    padding-bottom: 12px;
}

@media (min-width: 768px) {
    [data-hero2-solution-panel] {
        padding-bottom: 0;
    }
}

/* Hero2 dark: text button must be white like SliderHP */
.block-hero2[data-hero-theme="dark"] .btn-text-button,
.block-hero2[data-hero-theme="dark"] .btn-text-button:hover,
.block-hero2[data-hero-theme="dark"] .btn-text-button:active,
.block-hero2[data-hero-theme="dark"] .btn-text-button:focus,
.block-hero2[data-hero-theme="dark"] .btn-text-button:focus-visible {
    color: var(--color-white);
}


@media (min-width: 1280px) {
    [data-hero2-promo-slide-inner] {
        min-height: 664px;
    }

    [data-hero2-promo-panel] {
        height: auto;
    }

    [data-hero2-promo-media] {
        height: auto;
    }

    [data-hero2-promo-media] > img {
        position: absolute;
        inset: 0;
    }
}