/* ==========================================
   BLOCO 1: SEÇÃO DE MÍDIA DO DESTINO
   Responsabilidade: Container principal do carousel
   ========================================== */

/* Seção de mídia do destino */
.destination-media-section {
    padding: 60px 0; /* Espaçamento vertical */
    background-color: #f8f9fa; /* Fundo cinza muito claro */
}

/* ==========================================
   BLOCO 2: TÍTULO DA SEÇÃO DE MÍDIA
   Responsabilidade: Cabeçalho do carousel
   ========================================== */

/* Título da seção de mídia */
.destination-media-section h2 {
    text-align: center; /* Centralização do texto */
    margin-bottom: 40px; /* Espaçamento abaixo */
    color: #2c3e50; /* Cor escura */
    font-size: 2.5rem; /* Tamanho grande */
}

/* ==========================================
   BLOCO 3: CONTAINER DO CAROUSEL
   Responsabilidade: Container principal do carousel
   ========================================== */

/* Container principal do carousel */
.media-carousel {
    position: relative; /* Para posicionamento absoluto dos botões */
    max-width: 800px; /* Largura máxima */
    margin: 0 auto; /* Centralização horizontal */
    overflow: hidden; /* Ocultar overflow */
}

/* ==========================================
   BLOCO 4: POSIÇÃO DA SEÇÃO
   Responsabilidade: Posicionamento relativo
   ========================================== */

/* Seção de mídia com posicionamento relativo */
.destination-media-section {
    position: relative; /* Para posicionamento absoluto interno */
}

/* ==========================================
   BLOCO 5: CONTAINER DO CAROUSEL
   Responsabilidade: Container flexível dos slides
   ========================================== */

/* Container flexível dos slides */
.carousel-container {
    display: flex; /* Layout flexbox */
    transition: transform 0.5s ease; /* Transição suave para movimentação */
}

/* ==========================================
   BLOCO 6: SLIDE INDIVIDUAL DO CAROUSEL
   Responsabilidade: Container de cada mídia
   ========================================== */

/* Slide individual do carousel */
.carousel-slide {
    min-width: 100%; /* Largura mínima de 100% */
    display: none; /* Oculto por padrão */
}

/* ==========================================
   BLOCO 7: SLIDE ATIVO
   Responsabilidade: Estado visível do slide
   ========================================== */

/* Slide no estado ativo */
.carousel-slide.active {
    display: block; /* Comportamento de bloco */
}

/* ==========================================
   BLOCO 8: ELEMENTOS DE MÍDIA
   Responsabilidade: Imagens e vídeos nos slides
   ========================================== */

/* iframe e img nos slides */
.carousel-slide iframe,
.carousel-slide img {
    width: 100%; /* Largura total */
    height: 400px; /* Altura fixa */
    object-fit: cover; /* Manter proporções */
    border-radius: 10px; /* Cantos arredondados */
}

/* ==========================================
   BLOCO 9: WRAPPER DO VÍDEO
   Responsabilidade: Container para vídeos
   ========================================== */

/* Wrapper para vídeos */
.video-wrapper {
    position: relative; /* Para posicionamento absoluto do overlay */
}

/* ==========================================
   BLOCO 10: OVERLAY DO VÍDEO
   Responsabilidade: Camada sobre o vídeo
   ========================================== */

/* Overlay para controle de clique em vídeos */
.video-overlay {
    position: absolute; /* Posicionamento absoluto */
    top: 0; /* Posição no topo */
    left: 0; /* Posição à esquerda */
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    background: transparent; /* Transparente */
    z-index: 10; /* Acima do conteúdo */
}

/* ==========================================
   BLOCO 11: BOTÕES DO CAROUSEL
   Responsabilidade: Navegação do carousel
   ========================================== */

/* Botões de navegação do carousel */
.carousel-btn {
    position: absolute; /* Posicionamento absoluto */
    top: 50%; /* Posição vertical central */
    transform: translateY(-50%); /* Centralização vertical */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro semi-transparente */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 10px; /* Espaçamento interno */
    cursor: pointer; /* Cursor pointer */
    font-size: 18px; /* Tamanho da fonte */
    border-radius: 50%; /* Formato circular */
    width: 50px; /* Largura fixa */
    height: 50px; /* Altura fixa */
    display: none; /* Oculto por padrão */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    z-index: 10; /* Acima do conteúdo */
}

/* ==========================================
   BLOCO 12: BOTÃO ANTERIOR
   Responsabilidade: Navegação para slide anterior
   ========================================== */

/* Botão anterior */
.carousel-btn.prev {
    left: 5px; /* Posição à esquerda */
}

/* ==========================================
   BLOCO 13: BOTÃO PRÓXIMO
   Responsabilidade: Navegação para próximo slide
   ========================================== */

/* Botão próximo */
.carousel-btn.next {
    right: 5px; /* Posição à direita */
}

/* ==========================================
   BLOCO 14: HOVER DOS BOTÕES
   Responsabilidade: Efeito visual no hover
   ========================================== */

/* Hover nos botões do carousel */
.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fundo mais escuro */
}