/* ==========================================
   BLOCO 1: HERO SECTION DO DESTINO
   Responsabilidade: Header com background image
   ========================================== */

/* Seção hero da página de detalhes */
.destination-hero {
    height: 60vh; /* 60% da altura da viewport */
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    text-align: center; /* Texto centralizado */
    color: white; /* Texto branco */
    position: relative; /* Para posicionamento absoluto do pseudo-elemento */
}

/* ==========================================
   BLOCO 2: OVERLAY DO HERO
   Responsabilidade: Camada escura sobre a imagem
   ========================================== */

/* Pseudo-elemento para overlay escuro */
.destination-hero::before {
    content: ''; /* Conteúdo vazio necessário */
    position: absolute; /* Posicionamento absoluto */
    top: 0; /* Posição no topo */
    left: 0; /* Posição à esquerda */
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
}

/* ==========================================
   BLOCO 3: CONTAINER DO HERO
   Responsabilidade: Container centralizado
   ========================================== */

/* Container interno do hero */
.destination-hero .container {
    position: relative; /* Relativo para aparecer sobre o overlay */
    z-index: 1; /* Acima do overlay */
}

/* ==========================================
   BLOCO 4: TÍTULO PRINCIPAL DO HERO
   Responsabilidade: Nome do destino
   ========================================== */

/* Título principal do destino */
.destination-hero h1 {
    font-size: 48px; /* Tamanho grande */
    margin-bottom: 10px; /* Espaçamento abaixo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* ==========================================
   BLOCO 5: DESCRIÇÃO DO HERO
   Responsabilidade: Subtítulo do destino
   ========================================== */

/* Parágrafo de descrição */
.destination-hero p {
    font-size: 20px; /* Tamanho intermediate */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* ==========================================
   BLOCO 6: SEÇÃO DE CONTEÚDO
   Responsabilidade: Container principal do conteúdo
   ========================================== */

/* Seção principal de conteúdo */
.destination-content-section {
    padding: 60px 0; /* Espaçamento vertical */
}

/* ==========================================
   BLOCO 7: GRID DE INFORMAÇÕES
   Responsabilidade: Layout para informações técnicas
   ========================================== */

/* Grid de informações do destino */
.destination-info-grid {
    display: grid; /* Layout em grid */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colunas responsivas */
    gap: 20px; /* Espaçamento entre itens */
    background-color: #f5f5f5; /* Fundo cinza claro */
    padding: 30px; /* Espaçamento interno */
    border-radius: 8px; /* Cantos arredondados */
    margin-bottom: 40px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 8: ITEM INDIVIDUAL DE DETALHE
   Responsabilidade: Container para cada informação
   ========================================== */

/* Item de detalhe individual */
.detail-item {
    text-align: center; /* Centralização do conteúdo */
}

/* ==========================================
   BLOCO 9: ÍCONE DOS DETALHES
   Responsabilidade: Ícone representativo da informação
   ========================================== */

/* Ícone dos detalhes */
.detail-item i {
    font-size: 32px; /* Tamanho grande */
    color: #00B4D8; /* Cor azul da marca */
    margin-bottom: 10px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 10: RÓTULO DO DETALHE
   Responsabilidade: Label da informação
   ========================================== */

/* Rótulo do detalhe */
.detail-label {
    display: block; /* Comportamento de bloco */
    font-weight: 600; /* Peso semi-negrito */
    color: #333; /* Cor escura */
    margin-bottom: 5px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 11: VALOR DO DETALHE
   Responsabilidade: Valor da informação
   ========================================== */

/* Valor do detalhe */
.detail-value {
    color: #666; /* Cor cinza */
    font-size: 14px; /* Tamanho pequeno */
}

/* ==========================================
   BLOCO 12: DESCRIÇÃO DO DESTINO
   Responsabilidade: Texto explicativo longo
   ========================================== */

/* Descrição do destino */
.destination-description {
    line-height: 1.8; /* Altura de linha para legibilidade */
    color: #555; /* Cor escura */
    margin-bottom: 30px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 13: TÍTULOS DA DESCRIÇÃO
   Responsabilidade: Hierarquia de títulos
   ========================================== */

/* Títulos dentro da descrição */
.destination-description h2 {
    font-size: 28px; /* Tamanho intermediate */
    color: #0B3D91; /* Cor azul da marca */
    margin-bottom: 15px; /* Espaçamento abaixo */
}