/*
===================================================================
  REGRAS DE RESPONSIVIDADE
===================================================================
*/

/* Para Desktops Menores e Tablets em modo Paisagem (até 1024px) */
@media (max-width: 1024px) {
    /* Ajusta o tamanho dos carrosséis para ocupar mais espaço */
    .main-swiper, .thumbs-swiper,
    .main-swiper-noticias, .thumbs-swiper-noticias {
        width: 90%;
    }

    /* Diminui o título da página de notícia */
    .titulo-noticia {
        font-size: 2.2rem;
    }
}


/* Para Tablets em modo Retrato e Celulares Maiores (até 768px) */
@media (max-width: 768px) {
    /* --- Banner Principal (Home) --- */
    #home .display-4 {
        font-size: 2.5rem; /* Diminui o título principal */
    }
    #home .tagline-capa {
        font-size: 1.8rem; /* Diminui o subtítulo */
    }

    /* --- CORREÇÃO PARA A PREVISÃO DO TEMPO --- */
    #container-previsao {
        flex-direction: column; /* Empilha o bloco 'agora' e o 'semana' */
        gap: 20px;
    }
    .tempo-bloco {
        justify-content: center; /* Centraliza os itens internos */
    }
    #previsao-semana {
        flex-wrap: wrap; /* Permite que os dias da semana quebrem a linha se necessário */
    }
    .divisor-vertical {
        width: 80%;
        height: 1px; /* Transforma o divisor em uma linha horizontal */
        margin: 10px 0;
    }
    /* ------------------------------------------- */
    
    /* --- Carrosséis (Promoções e Notícias) --- */
    .main-swiper, .main-swiper-noticias {
        width: 95%;
        height: 350px; /* Diminui a altura */
    }
    .thumbs-swiper, .thumbs-swiper-noticias {
        width: 95%;
        height: 80px; /* Diminui a altura das miniaturas */
    }

    /* --- Página de Contato (Modelo Figma) --- */
    .contato-imagem-fundo {
        display: none; /* Esconde a imagem lateral para ganhar espaço */
    }
    .contato-form-container {
        padding: 2rem; /* Diminui o espaçamento interno do formulário */
    }
    
    /* --- Título das Seções --- */
    h2.text-center {
        font-size: 1.8rem;
    }
}


/* Para Celulares (até 480px) */
@media (max-width: 480px) {
    /* --- Banner Principal (Home) --- */
    #home .display-4 {
        font-size: 2rem;
    }
    #home .tagline-capa {
        font-size: 1.5rem;
    }

    /* --- Carrosséis (Promoções e Notícias) --- */
    .main-swiper, .main-swiper-noticias {
        height: 280px; /* Deixa o carrossel ainda mais baixo */
    }
    .thumbs-swiper, .thumbs-swiper-noticias {
        height: 70px;
    }
    .thumbs-swiper .swiper-slide, .thumbs-swiper-noticias .swiper-slide {
        /* Garante que as 3 miniaturas apareçam mesmo em telas pequenas */
        width: 33.33% !important;
    }

    /* --- Página de Contato (Modelo Figma) --- */
    .form-title {
        font-size: 2rem;
    }
    .form-subtitle {
        font-size: 1rem;
    }
    /* Empilha os campos de nome/sobrenome e email/telefone */
    .contato-form-container .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* --- Título da Notícia na página de detalhe --- */
    .titulo-noticia {
        font-size: 1.8rem;
    }

    #previsao-semana {
    width: 100%;
    justify-content: center;
    }

    /* Diminui o espaçamento entre os dias */
    .dia-previsao-detalhado {
        padding: 0 8px; /* Reduz o padding lateral de 15px para 8px */
    }

    /* Diminui um pouco o tamanho da fonte das temperaturas */
    .dia-previsao-detalhado .temperaturas {
        font-size: 0.9rem;
    }
    .dia-previsao-detalhado:last-child {
    display: none;
    }
    /*
    ===================================================================
    AJUSTES DE RESPONSIVIDADE PARA TELAS GRANDES (DESKTOPS)
    ===================================================================
    */

    /* Aplica as regras abaixo apenas se a tela tiver 1400px de largura ou mais */
    @media (min-width: 1400px) {

        /* Aumenta a altura dos carrosséis principais */
        .main-swiper,
        .main-swiper-noticias {
            height: 600px; /* Você pode ajustar este valor como preferir */
        }

        /* Aumenta um pouco a altura das miniaturas para acompanhar */
        .thumbs-swiper,
        .thumbs-swiper-noticias {
            height: 120px;
        }

    }


    /* Aplica as regras abaixo para telas EXTRA GRANDES, como monitores ultrawide */
    @media (min-width: 1800px) {

        /* Aumenta AINDA MAIS a altura dos carrosséis */
        .main-swiper,
        .main-swiper-noticias {
            height: 1000px; /* Você pode ajustar este valor como preferir */
        }
    }
}

/*
===================================================================
  DESATIVA O CLIQUE DO LIGHTBOX APENAS EM TELAS GRANDES (DESKTOP)
===================================================================
*/

/* A regra abaixo só se aplica a telas com 769px de largura ou MAIS */
@media (min-width: 769px) {

    /* Seleciona todos os links do lightbox dentro dos slides */
    .swiper-slide .glightbox {
        pointer-events: none; /* Torna o link "à prova de cliques" */
        cursor: default; /* Remove a "mãozinha" do mouse */
    }

}