/* slider.css (ou dentro do teu input.css na layer components) */

@layer components {

    .slider-offset-base {
        @apply !relative !-top-[200px] mt-[30px];
    }


    .slider-offset-fix {
        @apply slider-offset-base h-[200px];
    }

    .slider-bg-base {
        @apply bg-cover bg-top bg-no-repeat;
    }

    .slider-item-image {
        @apply slider-offset-base slider-bg-base w-full h-[calc(100vh+25px)];
    }

    .slider-video-container {
        @apply slider-bg-base relative cursor-pointer;
    }


    .slider-title {
        @apply text-white text-[48px];
    }
}

@layer components {

    .swiper-container {
        @apply w-full h-full relative overflow-hidden list-none p-0 z-10;
    }

    .swiper-wrapper {
        @apply relative w-full h-full z-10 flex transition-transform box-content;
    }

    .swiper-slide {
        @apply flex-shrink-0 w-full h-full relative transition-all;
    }


    .article-thumbnail {
        @apply relative w-full h-[500px] bg-cover bg-center bg-no-repeat flex items-center justify-center;
    }

        .article-thumbnail h2 {
            @apply text-white text-4xl font-bold uppercase tracking-widest drop-shadow-md px-4 text-center;
        }


            .article-thumbnail h2 span {
                @apply bg-black/40 px-4 py-2 rounded-sm backdrop-blur-sm;
            }

    .ds-none {
        @apply hidden;
    }
}

@layer components {

    .custom-swiper-root {
        @apply w-full h-screen relative overflow-hidden;
    }

    .custom-swiper-wrapper {
        @apply flex w-full h-full z-10;
    }

    .custom-swiper-slide {
        @apply w-full h-full flex-shrink-0 relative;
    }


    .custom-slide-content {
        @apply w-full h-full flex items-center justify-center;
        @apply bg-cover bg-center bg-no-repeat;
        background-image: var(--bg-image, none);
    }

    .custom-slide-title {
        @apply text-white text-4xl font-bold uppercase drop-shadow-md;
    }

    .custom-slide-text-bg {
        @apply bg-black/30 px-4 py-2 rounded;
    }


    .custom-pagination-hidden {
        @apply hidden;
    }
}



.font-jost {
    font-family: 'Jost', sans-serif; 
}


.font-dosis {
    font-family: 'Dosis-Lighter', sans-serif;
    font-weight: 300; 
}


.font-jost {
    font-family: 'Jost', sans-serif;
}

.customer-logos .slide img {
    max-width: 100%;
    height: auto;
    display: block;
}

@layer utilities {
    .font-jost {
        font-family: 'Jost', sans-serif; 
    }
}


.prose img {
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.prose p {
    margin-bottom: 1rem;
    line-height: 1.75;
}





.hidden {
    display: none !important;
}

#modal-review {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    min-width: 300px;
}

.audio-li-tag {
    cursor: pointer;
    padding: 5px;
}

    .audio-li-tag:hover {
        background-color: #f0f0f0;
    }

    .audio-li-tag.active {
        font-weight: bold;
        color: blue;
    }





/* Estrutura Base */
.cms-slider-container .carousel-item {
    min-height: 32rem;
    position: relative;
}

.image-container, .video-container {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Posicionamento Dinâmico via CSS Variables (definidas pelo JS) */
.carousel-caption-wrapper {
    position: absolute;
    transform: translateY(-50%);
    width: 100%;
    z-index: 10;
    text-align: center; /* Default */
}

/* Lógica de Posicionamento */
[data-h-pos="0"] .carousel-caption-wrapper {
    left: 0;
    right: 0;
    margin: auto;
}

[data-h-pos="-30"] .carousel-caption-wrapper {
    text-align: left;
    left: 10%;
}

[data-h-pos="60"] .carousel-caption-wrapper {
    text-align: right;
    right: 10%;
}

/* Tipografia */
.slider-title {
    font-weight: bold;
    text-transform: uppercase;
}

/* O container que viste preto nas imagens */
.image-container {
    position: relative;
    width: 100%;
    height: 600px; /* Garante uma altura mínima para não colapsar */
    min-height: 32rem;
    overflow: hidden;
    background-color: #1a1a1a; /* O preto que viste */
}

    /* A imagem que o JS vai colocar lá dentro */
    .image-container img.dynamic-img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Faz o efeito de background-size: cover */
        transform: translate(-50%, -50%);
        z-index: 1;
        display: block;
    }

.carousel-caption-wrapper {
    z-index: 10; /* Garante que o texto fica por cima da imagem */
}