/**
 * Hero da home — full-bleed: a arte preenche 100% da largura e da área do carrossel.
 * Banners expansíveis (ex.: 1920×817) usam object-fit: cover (sem faixas azuis).
 */
#hero-section {
    width: 100%;
}

#hero-section .home-hero-carousel {
    --hero-max-h: min(78vh, 720px);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    aspect-ratio: 1920 / 820;
    max-height: var(--hero-max-h);
    background-color: #025ca3;
}

@supports (height: 1dvh) {
    #hero-section .home-hero-carousel {
        --hero-max-h: min(78dvh, 720px);
    }
}

#hero-section .home-hero-carousel .hero-slide-layer,
#hero-section .home-hero-carousel .hero-slide-layer a,
#hero-section .home-hero-carousel .hero-slide-layer img {
    width: 100%;
    height: 100%;
}

#hero-section .home-hero-carousel .hero-slide-layer img {
    display: block;
    object-fit: cover;
    object-position: center center;
}

#hero-section .home-hero-fallback {
    min-height: clamp(320px, 42.7vw, 720px);
    max-height: min(78vh, 720px);
}

#hero-section .home-hero-fallback .home-hero-fallback__title {
    font-size: clamp(1.375rem, 4vw + 0.5rem, 3rem);
    line-height: 1.15;
}

#hero-section .home-hero-fallback .home-hero-fallback__subtitle {
    font-size: clamp(0.9375rem, 1.5vw + 0.65rem, 1.25rem);
}

/**
 * Mobile: as artes da capa têm texto/CTA no terço esquerdo e foto no direito.
 * Com cover + aspect mais “alto” que a arte, o crop lateral é inevitável —
 * ancoramos à esquerda para não cortar título nem botão.
 */
@media (max-width: 640px) {
    #hero-section .home-hero-carousel {
        aspect-ratio: 16 / 10;
        max-height: min(56vh, 420px);
    }

    #hero-section .home-hero-carousel .hero-slide-layer img {
        object-position: left center;
    }

    #hero-section .home-hero-fallback {
        min-height: clamp(280px, 70vw, 420px);
    }
}

/* Tablets estreitos: mesmo risco de crop no texto embutido na arte */
@media (min-width: 641px) and (max-width: 900px) {
    #hero-section .home-hero-carousel .hero-slide-layer img {
        object-position: left center;
    }
}