/**
 * gi-carousel.css
 * Estilos para o carousel de imagens de fundo do banner da homepage.
 * Funciona em conjunto com gi-carousel.js e os templates header-banner.php
 * / home-slider.php de todos os temas.
 */

/* ------------------------------------------------------------------ *
 * Wrapper: cobre toda a seção do banner como fundo                    *
 * ------------------------------------------------------------------ */
.gi-carousel-wrapper {
    position: absolute;
    inset: 0;           /* top/right/bottom/left: 0 */
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Cada slide é um div com background-image inline                     *
 * ------------------------------------------------------------------ */
.gi-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    opacity: 0;
    transition: opacity 1800ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Slide entrando: aparece suavemente por cima */
.gi-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Slide anterior: fica visível por baixo enquanto o novo faz fade in.
   Sem transição no prev — só precisa ser visível como base estável. */
.gi-slide.prev {
    opacity: 1;
    z-index: 1;
    transition: none;
}

/* ------------------------------------------------------------------ *
 * Botões de navegação prev / next                                     *
 * ------------------------------------------------------------------ */
.gi-carousel-prev,
.gi-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: all;
    cursor: pointer;

    background: rgba(0, 0, 0, 0.35);
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding: 12px 16px;
    border-radius: 2px;

    transition: background 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.gi-carousel-prev:hover,
.gi-carousel-next:hover {
    background: rgba(0, 0, 0, 0.6);
}

.gi-carousel-prev {
    left: 14px;
}

.gi-carousel-next {
    right: 14px;
}

/* ------------------------------------------------------------------ *
 * Garante que a seção pai do carousel seja o contexto de             *
 * posicionamento (qualquer section que contenha gi-carousel-wrapper) *
 * ------------------------------------------------------------------ */

/* Para temas que não declaram position:relative na section do banner */
section:has(> .gi-carousel-wrapper) {
    position: relative;
    overflow: hidden;
}

.frontpage-banner,
.home-slider-section {
    position: relative;
    overflow: hidden;
}

/* O conteúdo interno (título, slogan) deve ficar acima do carousel */
.frontpage-banner .banner-content,
.home-slider-section .banner-content,
.frontpage-banner > *:not(.gi-carousel-wrapper):not(.gi-carousel-prev):not(.gi-carousel-next),
.home-slider-section > *:not(.gi-carousel-wrapper):not(.gi-carousel-prev):not(.gi-carousel-next) {
    position: relative;
    z-index: 5;
}

/* ------------------------------------------------------------------ *
 * Responsivo — esconde botões em telas muito pequenas                 *
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
    .gi-carousel-prev,
    .gi-carousel-next {
        padding: 8px 10px;
        font-size: 16px;
    }
}