/* ==========================================
   BLOCO 1: HEADER DA PÁGINA DE PACOTES
   Responsabilidade: Estilizar cabeçalho principal com background e layout
   ========================================== */

/* Cabeçalho da seção de pacotes com altura proporcional */
.packages-header {
    height: 40vh; /* 40% da altura da viewport */
    min-height: 300px; /* Altura mínima para consistência */
    
    /* Background com imagem e overlay escuro para legibilidade */
    background-image:  url('../imagens/fotos-banner/banner-pacotes.png');
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    
    /* Layout flexbox para centralização */
    display: flex;
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    text-align: center; /* Texto centralizado */
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 2: CONTEÚDO DO HEADER
   Responsabilidade: Estilizar texto dentro do header
   ========================================== */

/* Container do conteúdo do header com largura máxima */
.packages-header-content {
    max-width: 800px; /* Limitar largura para legibilidade */
    padding: 0 20px; /* Espaçamento lateral responsivo */
}

/* Título principal do header */
.packages-header-content h1 {
    font-size: 36px; /* Tamanho grande para impacto */
    margin-bottom: 15px; /* Espaçamento abaixo do título */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para destaque */
}

/* Parágrafo de descrição do header */
.packages-header-content p {
    font-size: 18px; /* Tamanho moderado para descrição */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra sutil */
}

/* ==========================================
   BLOCO 3: SEÇÃO DE FILTROS
   Responsabilidade: Interface para filtragem de pacotes
   ========================================== */

/* Seção de filtros com fundo diferenciado */
.filter-section {
    background-color: #f5f5f5; /* Fundo cinza claro para separação */
    padding: 30px 0; /* Espaçamento vertical */
}

/* ==========================================
   BLOCO 4: FORMULÁRIO DE FILTROS
   Responsabilidade: Layout em grid para campos de filtro
   ========================================== */

/* Container do formulário com grid responsivo */
.filter-form {
    display: grid; /* Layout em grid moderno */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colunas responsivas */
    gap: 20px; /* Espaçamento entre campos */
    align-items: end; /* Alinhamento inferior dos elementos */
}

/* ==========================================
   BLOCO 5: GRUPOS DE FILTROS
   Responsabilidade: Containers para campos de entrada
   ========================================== */

/* Container vertical para cada campo de filtro */
.filter-group {
    display: flex; /* Layout flexbox */
    flex-direction: column; /* Elementos em coluna */
}

/* ==========================================
   BLOCO 6: RÓTULOS DOS FILTROS
   Responsabilidade: Identificação dos campos de filtro
   ========================================== */

/* Rótulos dos campos de filtro */
.filter-group label {
    font-weight: 500; /* Peso semi-negrito */
    margin-bottom: 8px; /* Espaçamento abaixo do rótulo */
    color: #333; /* Cor escura para boa legibilidade */
}

/* ==========================================
   BLOCO 7: CAMPOS DE ENTRADA DOS FILTROS
   Responsabilidade: Estilização de inputs e selects
   ========================================== */

/* Campos de seleção e entrada */
.filter-group select,
.filter-group input {
    padding: 10px; /* Espaçamento interno */
    border: 1px solid #ddd; /* Borda sutil */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 14px; /* Tamanho de fonte adequado */
}

/* ==========================================
   BLOCO 8: BOTÃO DE SUBMISSÃO DO FILTRO
   Responsabilidade: Execução da filtragem
   ========================================== */

/* Botão principal de filtrar */
.filter-submit {
    background-color: #00B4D8; /* Azul secundário */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 10px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    cursor: pointer; /* Cursor pointer */
    font-weight: 500; /* Peso semi-negrito */
    transition: background-color 0.3s; /* Animação de cor */
    box-sizing: border-box; /* Modelo de box consistente */
    line-height: 1; /* Altura de linha */
    height: 38px; /* Altura fixa */
}

/* Efeito hover no botão de filtrar */
.filter-submit:hover {
    background-color: #0096c7; /* Azul mais escuro */
}

/* ==========================================
   BLOCO 9: BOTÃO DE RESET DO FILTRO
   Responsabilidade: Limpar filtros aplicados
   ========================================== */

/* Botão de reset dos filtros */
.filter-reset {
    background-color: #f8f9fa; /* Fundo cinza muito claro */
    color: #333; /* Texto escuro */
    border: 1px solid #ddd; /* Borda sutil */
    padding: 10px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    cursor: pointer; /* Cursor pointer */
    font-weight: 500; /* Peso semi-negrito */
    transition: all 0.3s; /* Animação geral */
    text-decoration: none; /* Remover sublinhado */
    text-align: center; /* Centralização do texto */
    display: inline-block; /* Comportamento de bloco em linha */
    box-sizing: border-box; /* Modelo de box consistente */
    line-height: 1; /* Altura de linha */
    height: 38px; /* Altura fixa */
}

/* Efeito hover no botão de reset */
.filter-reset:hover {
    background-color: #e9ecef; /* Fundo mais escuro */
}

/* ==========================================
   BLOCO 10: SEÇÃO DE PACOTES EM DESTAQUE
   Responsabilidade: Container para grid de pacotes
   ========================================== */

/* Seção principal de pacotes */
.featured-packages {
    padding: 60px 0; /* Espaçamento vertical generoso */
}

/* ==========================================
   BLOCO 11: TÍTULOS DE SEÇÃO
   Responsabilidade: Hierarquia visual para seções
   ========================================== */

/* Container do título da seção */
.section-title {
    text-align: center; /* Centralização */
    margin-bottom: 40px; /* Espaçamento abaixo */
}

/* Títulos das seções */
.section-title h2 {
    color: #0B3D91; /* Azul corporativo */
    font-size: 32px; /* Tamanho intermediate */
    margin-bottom: 15px; /* Espaçamento abaixo */
}

/* Parágrafos descritivos das seções */
.section-title p {
    color: #666; /* Cinza médio */
    max-width: 700px; /* Largura máxima para legibilidade */
    margin: 0 auto; /* Centralização horizontal */
}

/* ==========================================
   BLOCO 12: GRID DE PACOTES
   Responsabilidade: Layout em grid para cards de pacotes
   ========================================== */

/* Container grid para pacotes */
.featured-grid {
    display: grid; /* Layout em grid moderno */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colunas responsivas */
    gap: 30px; /* Espaçamento entre cards */
}

/* ==========================================
   BLOCO 13: CARDS DE PACOTES
   Responsabilidade: Apresentação visual de cada pacote
   ========================================== */

/* Cards individuais de pacotes */
.package-card {
    background-color: white; /* Fundo branco */
    border-radius: 8px; /* Cantos arredondados */
    overflow: hidden; /* Ocultar conteúdo que extrapola */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: transform 0.3s; /* Animação de transformação */
}

/* Efeito hover nos cards */
.package-card:hover {
    transform: translateY(-10px); /* Elevação no hover */
}

/* ==========================================
   BLOCO 14: IMAGEM DOS PACOTES
   Responsabilidade: Área de destaque da imagem do pacote
   ========================================== */

/* Container da imagem do pacote */
.package-image {
    height: 200px; /* Altura fixa */
    overflow: hidden; /* Ocultar conteúdo que extrapola */
    position: relative; /* Para posicionamento absoluto de elementos filhos */
}

/* ==========================================
   BLOCO 15: IMAGEM DOS PACOTES
   Responsabilidade: Estilização da imagem
   ========================================== */

/* Imagens dos pacotes */
.package-image img {
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    object-fit: cover; /* Manter proporções da imagem */
    transition: transform 0.5s; /* Animação de transformação */
}

/* Efeito hover na imagem */
.package-card:hover .package-image img {
    transform: scale(1.05); /* Escala sutil no hover */
}

/* ==========================================
   BLOCO 16: BADGE DE NÍVEL DO PACOTE
   Responsabilidade: Indicador visual do nível de surf
   ========================================== */

/* Badge de nível do pacote */
.package-level {
    position: absolute; /* Posicionamento absoluto */
    top: 15px; /* Distância do topo */
    right: 15px; /* Distância da direita */
    background-color: rgba(0, 180, 216, 0.9); /* Azul semi-transparente */
    color: white; /* Texto branco */
    padding: 5px 10px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 12px; /* Tamanho pequeno */
    font-weight: 500; /* Peso semi-negrito */
}

/* ==========================================
   BLOCO 17: CONTEÚDO DOS CARDS
   Responsabilidade: Área de texto e informações do pacote
   ========================================== */

/* Container do conteúdo textual */
.package-content {
    padding: 20px; /* Espaçamento interno */
}

/* ==========================================
   BLOCO 18: TÍTULO DO PACOTE
   Responsabilidade: Nome do pacote com hierarquia visual
   ========================================== */

/* Título do pacote */
.package-title {
    font-size: 20px; /* Tamanho intermediate */
    color: #0B3D91; /* Azul corporativo */
    margin-bottom: 5px; /* Espaçamento abaixo */
    font-weight: 600; /* Peso semi-negrito */
}

/* ==========================================
   BLOCO 19: DESTINO DO PACOTE
   Responsabilidade: Localização geográfica com ícone
   ========================================== */

/* Localização do pacote */
.package-destination {
    color: #666; /* Cinza médio */
    font-size: 14px; /* Tamanho pequeno */
    margin-bottom: 10px; /* Espaçamento abaixo */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
}

/* Ícone de localização */
.package-destination i {
    margin-right: 5px; /* Espaçamento à direita do ícone */
    color: #00B4D8; /* Azul secundário */
}

/* ==========================================
   BLOCO 20: DETALHES DO PACOTE
   Responsabilidade: Layout para duração e preço
   ========================================== */

/* Container dos detalhes (duração e preço) */
.package-details {
    display: flex; /* Layout flexbox */
    justify-content: space-between; /* Distribuição space-between */
    margin-bottom: 15px; /* Espaçamento abaixo */
    padding-bottom: 15px; /* Espaçamento interno abaixo */
    border-bottom: 1px solid #eee; /* Borda inferior sutil */
}

/* ==========================================
   BLOCO 21: DURAÇÃO E PREÇO
   Responsabilidade: Colunas individuais para duração e preço
   ========================================== */

/* Colunas de duração e preço */
.package-duration,
.package-price {
    display: flex; /* Layout flexbox */
    flex-direction: column; /* Elementos em coluna */
    align-items: center; /* Centralização horizontal */
}

/* ==========================================
   BLOCO 22: RÓTULOS E VALORES
   Responsabilidade: Estilização de rótulos e valores
   ========================================== */

/* Rótulos dos detalhes */
.detail-label {
    font-size: 12px; /* Tamanho pequeno */
    color: #666; /* Cinza médio */
    margin-bottom: 5px; /* Espaçamento abaixo */
}

/* Valores dos detalhes */
.detail-value {
    font-weight: 600; /* Peso semi-negrito */
    color: #333; /* Texto escuro */
}

/* Preço com estilo diferenciado */
.package-price .detail-value {
    color: #00B4D8; /* Azul secundário */
    font-size: 18px; /* Tamanho maior */
}

/* ==========================================
   BLOCO 23: DESCRIÇÃO DO PACOTE
   Responsabilidade: Texto descritivo com limitação de altura
   ========================================== */

/* Descrição do pacote com limitação de altura */
.package-description {
    color: #666; /* Cinza médio */
    font-size: 14px; /* Tamanho pequeno */
    line-height: 1.6; /* Altura de linha para legibilidade */
    margin-bottom: 20px; /* Espaçamento abaixo */
    max-height: 4.8em; /* Altura máxima */
    overflow: hidden; /* Ocultar texto que extrapola */
    text-overflow: ellipsis; /* Adicionar reticências */
    display: -webkit-box; /* Para suporte webkit */
    line-clamp: 3; /* Limitar a 3 linhas */
    -webkit-box-orient: vertical; /* Orientação vertical webkit */
}

/* ==========================================
   BLOCO 24: BOTÃO DO PACOTE
   Responsabilidade: Ação principal do card
   ========================================== */

/* Botão principal do pacote */
.package-button {
    display: block; /* Comportamento de bloco */
    background-color: #0B3D91; /* Azul corporativo */
    color: white; /* Texto branco */
    text-align: center; /* Centralização do texto */
    padding: 10px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    font-weight: 500; /* Peso semi-negrito */
    transition: background-color 0.3s; /* Animação de cor */
}

/* Efeito hover no botão */
.package-button:hover {
    background-color: #072a66; /* Azul mais escuro */
}

/* ==========================================
   BLOCO 25: SEÇÃO DE TODOS OS PACOTES
   Responsabilidade: Container adicional para paginação
   ========================================== */

/* Seção com todos os pacotes */
.all-packages {
    padding: 60px 0; /* Espaçamento vertical */
    background-color: #f9f9f9; /* Fundo cinza muito claro */
}

/* ==========================================
   BLOCO 26: PAGINAÇÃO
   Responsabilidade: Navegação entre páginas de resultados
   ========================================== */

/* Container da paginação */
.pagination {
    display: flex; /* Layout flexbox */
    justify-content: center; /* Centralização horizontal */
    margin-top: 40px; /* Espaçamento acima */
}

/* ==========================================
   BLOCO 27: ITENS DE PAGINAÇÃO
   Responsabilidade: Números da paginação
   ========================================== */

/* Itens individuais da paginação */
.pagination-item {
    width: 40px; /* Largura fixa */
    height: 40px; /* Altura fixa */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    margin: 0 5px; /* Espaçamento horizontal */
    border-radius: 4px; /* Cantos arredondados */
    background-color: white; /* Fundo branco */
    color: #333; /* Texto escuro */
    font-weight: 500; /* Peso semi-negrito */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: all 0.3s; /* Animação geral */
    text-decoration: none; /* Remover sublinhado */
}

/* Efeito hover nos itens da paginação */
.pagination-item:hover {
    background-color: #e9ecef; /* Fundo mais escuro */
}

/* Item ativo da paginação */
.pagination-item.active {
    background-color: #00B4D8; /* Azul secundário */
    color: white; /* Texto branco */
}

/* Item desabilitado da paginação */
.pagination-item.disabled {
    opacity: 0.5; /* Transparência */
    cursor: not-allowed; /* Cursor not-allowed */
    pointer-events: none; /* Desabilitar eventos */
}

/* ==========================================
   BLOCO 28: ESTADO SEM PACOTES
   Responsabilidade: Mensagem quando não há resultados
   ========================================== */

/* Container para quando não há pacotes */
.no-packages {
    text-align: center; /* Centralização */
    padding: 40px; /* Espaçamento interno */
    background-color: #f8f9fa; /* Fundo cinza claro */
    border-radius: 8px; /* Cantos arredondados */
    margin: 20px 0; /* Espaçamento vertical */
}

/* Título do estado vazio */
.no-packages h3 {
    color: #0B3D91; /* Azul corporativo */
    margin-bottom: 10px; /* Espaçamento abaixo */
}

/* Parágrafo do estado vazio */
.no-packages p {
    color: #666; /* Cinza médio */
    margin-bottom: 20px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 29: LAYOUT PRINCIPAL
   Responsabilidade: Ajustes de padding para layout
   ========================================== */

/* Elemento main com ajuste de padding */
main {
    padding-top: 0; /* Sem padding superior */
}

/* Container geral */
.container {
    max-width: 1200px; /* Largura máxima */
    margin: 0 auto; /* Centralização horizontal */
    padding: 0 20px; /* Espaçamento lateral */
}

/* ==========================================
   BLOCO 30: RESPONSIVIDADE TABLET
   Responsabilidade: Adaptação para telas médias
   ========================================== */

/* Media query para tablets */
@media (max-width: 992px) {
    /* Grid de filtros com 2 colunas */
    .filter-form {
        grid-template-columns: repeat(2, 1fr); /* Duas colunas */
    }
}

/* ==========================================
   BLOCO 31: RESPONSIVIDADE MOBILE
   Responsabilidade: Adaptação para smartphones
   ========================================== */

/* Media query para smartphones */
@media (max-width: 768px) {
    /* Reduzir tamanho do título do header */
    .packages-header-content h1 {
        font-size: 28px; /* Tamanho menor */
    }

    /* Reduzir tamanho do título da seção */
    .section-title h2 {
        font-size: 28px; /* Tamanho menor */
    }
}

/* ==========================================
   BLOCO 32: RESPONSIVIDADE MOBILE PEQUENO
   Responsabilidade: Adaptação para telas muito pequenas
   ========================================== */

/* Media query para telas pequenas */
@media (max-width: 576px) {
    /* Grid de filtros com 1 coluna */
    .filter-form {
        grid-template-columns: 1fr; /* Uma coluna */
    }

    /* Paginação com wrap */
    .pagination {
        flex-wrap: wrap; /* Permitir quebra de linha */
    }
}