/**
 * Banner principal da home (pages/home.php) — slides vindos da tabela `banners`, com a tipografia e os botões
 * do hero do tema (.hero-style7, .hero-subtitle, .hero-title, .th-btn.roxo e setas .icon-box do .hero-7).
 *
 * Arte de referência 1920×1080 (guia no admin: adm/assets/images/banner-guia.svg). Se mudar as áreas abaixo,
 * atualize o guia junto:
 * - computador: banner na proporção da arte (16:9), com no máximo 820px de altura; o texto fica na faixa
 *   esquerda (até ~1080px da arte); em telas largas o topo e a base podem ser cortados em até ~130px;
 * - celular/tablet (até 991px): a arte aparece inteira em cima e o texto vem embaixo, sem sobrepor.
 */
.home-banner {
    --home-banner-altura: min(56.25vw, 820px);
}

/* Todos os slides com a altura do mais alto (o fade do slick empilha os slides). */
.home-banner .slick-track {
    display: flex;
}

.home-banner .slick-slide {
    height: auto;
}

/* Antes do slick iniciar, mostra só o primeiro slide (evita empilhar todos na carga). */
.home-banner-slider:not(.slick-initialized) .home-banner-slide:not(:first-child) {
    display: none;
}

/* Mais específico que ".slick-initialized .slick-slide { display: block }" do slick. */
.home-banner .home-banner-slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--home-banner-altura);
}

/* Mais específico que "img:not([draggable]) { height: auto }" do style.css. */
.home-banner .home-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Véu claro do lado do texto: o título do tema é escuro. */
.home-banner-slide.has-texto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.45) 35%, rgba(255, 255, 255, 0) 60%);
}

.home-banner-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.home-banner-slide.has-link {
    cursor: pointer;
}

.home-banner-container {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.home-banner-content a {
    pointer-events: auto;
}

/* Mesmas fontes do hero do tema; só o respiro vertical muda, já que a altura vem da arte. */
.home-banner .hero-style7 {
    max-width: min(628px, 48vw);
    padding: 60px 0;
}

/* <b>palavra</b> no título do admin = destaque dourado, como o "Ballet" do hero original. */
.home-banner .hero-title b,
.home-banner .hero-title strong {
    color: var(--theme-color);
    font-weight: inherit;
}

.home-banner .hero-subtitle.sem-traco::before,
.home-banner .hero-subtitle.sem-traco::after {
    display: none;
}

/* Entrada do texto a cada troca de slide (mesmo movimento do slideinleft do tema). */
.home-banner-slider.slick-initialized .home-banner-content > * {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.home-banner-slider.slick-initialized .slick-current .home-banner-content > * {
    opacity: 1;
    transform: none;
}

.home-banner-slider.slick-initialized .slick-current .home-banner-content > :nth-child(1) {
    transition-delay: 0.1s;
}

.home-banner-slider.slick-initialized .slick-current .home-banner-content > :nth-child(2) {
    transition-delay: 0.5s;
}

.home-banner-slider.slick-initialized .slick-current .home-banner-content > :nth-child(3) {
    transition-delay: 0.9s;
}

/* Setas: posição e estilo do .hero-7 .icon-box do tema; só garante que fiquem acima dos slides. */
.home-banner .icon-box {
    z-index: 4;
}

/* Bolinhas só no celular/tablet, onde o tema esconde as setas. */
.home-banner-dots {
    display: none;
}

@media (max-width: 991px) {
    .home-banner .home-banner-slide {
        display: block;
        min-height: 0;
    }

    .home-banner .home-banner-img {
        position: relative;
        display: block;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .home-banner-slide.has-texto::before {
        display: none;
    }

    .home-banner .hero-style7 {
        max-width: 100%;
        padding: 40px 0 50px;
    }

    .home-banner .icon-box {
        display: none !important;
    }

    .home-banner-dots {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(56.25vw - 34px);
        z-index: 4;
    }

    .home-banner .home-banner-dots .slick-dots {
        position: static;
        display: flex;
        justify-content: center;
        gap: 14px;
        margin: 0;
        transform: none;
    }

    .home-banner .home-banner-dots .slick-dots li {
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-banner-slider.slick-initialized .home-banner-content > * {
        transition: none;
    }
}