/* Componente compartilhado: banner principal da Home e capa dos perfis. */
.hero .hero-banner,
.hero .hero-banner.is-default-banner,
.hero .hero-banner.is-custom-banner,
.profile-hero .profile-hero-banner {
    position: relative;
    width: 100%;
    max-width: none;
    height: clamp(200px, 24vw, 340px);
    max-height: none;
    aspect-ratio: auto;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
}

.hero .hero-banner img,
.profile-hero .profile-hero-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
}

.profile-hero .profile-banner-frame {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .hero .hero-banner,
    .hero .hero-banner.is-default-banner,
    .hero .hero-banner.is-custom-banner,
    .profile-hero .profile-hero-banner {
        height: clamp(210px, 30vw, 320px);
    }
}

/* Banners personalizados preenchem a area; a capa institucional continua contain. */
.profile-hero .profile-hero-banner img.profile-banner-slide.is-custom-banner {
    object-fit: cover;
    object-position: center;
    background: #050208;
}

/* Banner salvo pelo editor novo: a composicao ja esta no arquivo.
   A moldura usa a mesma proporcao do editor/export (1920:700) e o arquivo
   preenche a area, sem reaplicar zoom/posicao/rotacao. */
.profile-hero .profile-hero-banner.has-custom-banner,
.profile-hero .profile-hero-banner.has-baked-banner {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1920 / 700;
    max-height: none;
    min-height: 0;
}

@media (max-width: 620px) {
    .profile-hero .profile-hero-banner.has-custom-banner,
.profile-hero .profile-hero-banner.has-baked-banner {
        max-width: none;
        aspect-ratio: 1920 / 700;
    }
}

.profile-hero .profile-hero-banner img.profile-banner-slide.is-custom-banner,
.profile-hero .profile-hero-banner img.profile-banner-slide.is-baked-banner {
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    background: #050208;
}