/*
 * Este arquivo CSS contém estilos específicos para a página "Dulcineia",
 * incluindo ajustes de layout, dimensionamento de imagens em carrossel e
 * a funcionalidade de lightbox.
 */

/* Estilos originais que você já tinha */
.et_pb_row_30 {
    background-image: url(https://i61filmes.com.br/img/capas/dulcineia-page-02.png);
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    top: -50px;
    bottom: auto;
}

/* IMPORTANTE: Ajuste para a coluna da imagem */
/* A linha 'background-image' abaixo foi comentada/removida para evitar conflito
   com a tag <img> dentro do carrossel, que agora preenche o espaço. */
.et_pb_column_33 {
    /* background-image: url(https://i61filmes.com.br/img/capas/dulcineia-page-02.png); /* Linha removida/comentada */
    border-radius: 15px 0 0 15px;
    overflow: hidden;
    width: 45% !important;

    /* Novas propriedades para preencher o espaço vertical e centralizar o conteúdo */
    height: 100%; /* Garante que a coluna ocupe 100% da altura disponível pela linha */
    display: flex; /* Transforma a coluna em um contêiner flexível */
    flex-direction: column; /* Organiza os itens internos em coluna */
    justify-content: center; /* ALINHA O CONTEÚDO VERTICALMENTE AO CENTRO */
}

/* --- NOVOS ESTILOS PARA DIMENSIONAMENTO DA IMAGEM E ALINHAMENTO --- */

/* Garante que a linha que contém as colunas (texto e carrossel) use flexbox
   e que as colunas tenham a mesma altura, esticando verticalmente. */
.et_pb_row_28.et_pb_equal_columns {
    display: flex;
    align-items: stretch; /* Faz com que as colunas se estiquem para ter a altura do conteúdo mais alto */
}

/* Garante que os elementos internos do carrossel preencham a altura disponível */
.image-carousel-container,
.swiper-container,
.swiper-wrapper,
.swiper-slide {
    height: 100%; /* Faz com que o contêiner do carrossel e seus slides preencham a altura da coluna */
    width: 100%;
}

/* Estiliza as imagens dentro dos slides do carrossel */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra toda a área do slide sem distorcer, cortando se necessário */
    display: block; /* Remove espaços extras abaixo da imagem */
}

/* --- ESTILOS PARA OS BOTÕES DE NAVEGAÇÃO DO SWIPER --- */

.swiper-button-next,
.swiper-button-prev {
    opacity: 1 !important; /* Força a visibilidade */
    visibility: visible !important; /* Força a visibilidade */
    z-index: 100; /* Garante que estejam acima da imagem e de outros elementos */
    color: #ffffff; /* Cor dos ícones das setas */
    font-size: 30px; /* Tamanho do ícone */
    width: 40px; /* Largura do botão */
    height: 40px; /* Altura do botão */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente para os botões */
    border-radius: 50%; /* Torna os botões redondos */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* Posicionamento absoluto dentro do swiper-container */
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%); /* Ajusta para centralizar perfeitamente */
    cursor: pointer;
}

.swiper-button-prev {
    left: 10px; /* Distância da borda esquerda */
}

.swiper-button-next {
    right: 10px; /* Distância da borda direita */
}

/* Se os ícones não aparecerem, adicione regras para gerar o conteúdo (use se tiver FontAwesome ou similar) */
/* Você precisará ter a Font Awesome vinculada no seu HTML para que estes ícones funcionem. */
.swiper-button-prev::after {
    content: '\f053'; /* Código Unicode para seta para a esquerda (Font Awesome 5 Free) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Para ícones sólidos Font Awesome */
}

.swiper-button-next::after {
    content: '\f054'; /* Código Unicode para seta para a direita (Font Awesome 5 Free) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Para ícones sólidos Font Awesome */
}

/* --- ESTILOS PARA O LIGHTBOX CUSTOMIZADO --- */

.custom-lightbox-overlay {
    display: none; /* Escondido por padrão, será exibido via JavaScript */
    position: fixed; /* Fixado na tela */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo semi-transparente escuro */
    z-index: 10000; /* Garante que fique acima de todos os outros elementos */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-direction: column; /* Coloca imagem e legenda em coluna */
    overflow-y: auto; /* Adiciona rolagem se a imagem for muito grande */
    padding: 20px; /* Preenchimento interno */
    box-sizing: border-box; /* Inclui o padding na largura/altura total */
}

.custom-lightbox-content {
    max-width: 90%; /* Largura máxima da imagem */
    max-height: 80vh; /* Altura máxima da imagem (80% da altura da viewport) */
    display: block;
    object-fit: contain; /* Redimensiona a imagem para caber completamente na área, mantendo a proporção */
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
}

.custom-lightbox-caption {
    position: absolute; /* Permite posicionar a legenda de forma mais flexível */
    bottom: 20px; /* Distância da parte inferior */
    width: 100%; /* Ocupa a largura total */
    text-align: center;
    color: #fff; /* Cor do texto da legenda */
    font-size: 1.2em; /* Tamanho da fonte */
    z-index: 10001; /* Garante que a legenda apareça acima da imagem e da sobreposição */
    padding: 0 20px; /* Adiciona um pouco de padding lateral */
    box-sizing: border-box; /* Inclui o padding no cálculo da largura */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Adiciona sombra para melhor legibilidade */
}

.custom-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff; /* Cor do "X" */
    font-size: 40px; /* Tamanho do "X" */
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    z-index: 10001; /* Fica acima da imagem */
}

/* Oculta os botões do Swiper quando o lightbox customizado estiver ativo */
/* Isso evita que os botões do carrossel apareçam por cima do lightbox */
/* A regra específica para 'display: flex' verifica se o overlay está visível */
.custom-lightbox-overlay[style*="display: flex"] ~ .image-carousel-container .swiper-button-next,
.custom-lightbox-overlay[style*="display: flex"] ~ .image-carousel-container .swiper-button-prev {
    display: none !important;
}

/* Esconde o lightbox antigo (dg-carousel-lightbox) se não for mais usado */
.dg-carousel-lightbox {
    display: none !important;
}