/* ==========================================================================
   MEDIA QUERY: ADAPTAÇÃO PARA DISPOSITIVOS MÓVEIS (Telas até 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* ---- 1. CABEÇALHO & BANNER PRINCIPAL ---- */
    .banner-principal {
        height: auto;               
        padding: 20px 15px;
    }

    .banner-principal nav {
        display: flex;
        flex-direction: column;     
        align-items: center;
        text-align: center;
        gap: 15px;                  
    }

    #mini-logo {
        width: 80px;                
    }

 /* ---- 2. MENU DE NAVEGAÇÃO INTERNO ---- */
    .menu {
        padding: 5px 0 !important;
        height: auto !important; /* Garante que o menu cresça se precisar, sem cortar texto */
    }

    .menu-lista {
        flex-direction: row !important; /* Mantém em linha ou mude para column se preferir uma lista vertical limpa */
        flex-wrap: wrap !important;     /* Se não couber, ele quebra a linha com graça */
        justify-content: center !important;
        gap: 10px !important;
        font-size: 13px !important;     /* Diminui de 19px para 13px para caber nos ecrãs de telemóvel */
        padding: 5px !important;
        margin: 0 !important;
    }

    .menu-lista li {
        width: auto !important;         /* Impede que o item ocupe a tela toda */
        text-align: center !important;
        padding: 2px 5px !important;
    }
    
    /* Ajuste específico para o texto grande do Calendário */
    .menu-lista li a {
        font-size: 13px !important;
        white-space: normal !important; /* Permite que o texto quebre linha dentro do próprio botão se necessário */
    }

    /* ---- 3. CARROSSEL PRINCIPAL FIX (TELEMÓVEL) ---- */
    #carouselExampleIndicators {
        max-height: none !important; 
        height: auto !important;
    }

    /* Regra geral para as imagens do carrossel no telemóvel */
    #carouselExampleIndicators .carousel-item img {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Ajuste específico para o slide do Curso (que é horizontal largo) */
    #banner-destaque-1 img {
        object-fit: contain !important; /* Garante que encolha proporcionalmente como uma faixa, sem cortar os textos das laterais */
    }

    /* Ajuste específico para o slide dos Óculos (que é vertical comprido) */
    #banner-destaque-2 img {
        object-fit: cover !important; 
        max-height: 500px !important; /* Limita a altura para que a imagem vertical não ocupe o ecrã inteiro do telemóvel */
        object-position: top center !important; /* Mantém o foco no topo (rostos e títulos) caso haja algum corte na base */
    }

    /* Regra extra para garantir que os banners verticais de telemóvel ocupem o espaço correto de forma limpa */
    #carouselExampleIndicators .carousel-item img.img-mobile {
        object-fit: cover !important;
        max-height: 550px !important; /* Limita o tamanho vertical para não cobrir a tela inteira de telemóveis pequenos */
    }

    /* Reseta o truque de girar as bolinhas no mobile */
    ol#myCarousel-indicators {
        transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
        -moz-transform: rotate(0deg) !important;
        -ms-transform: rotate(0deg) !important;
        -o-transform: rotate(0deg) !important;
        
        top: auto !important;
        bottom: 15px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        justify-content: center !important;
    }

    /* ---- 4. CONTEÚDO (QUEM SOMOS) & IMAGENS ---- */
    .conteudo {
        flex-direction: column;
    }     

    /* ---- 5. PARCEIROS & GALERIA ---- */
    #parceiros {
        padding: 30px 0;
    }

    .icones-1 {
        margin-top: 0 !important; /* Remove o recuo que esmagava o layout */
    }

    .icones-1 img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .galeria {
        margin-top: 20px !important; /* Ajusta o título da galeria */
    }

    .galeria h1 {
        font-size: 30px;
    }

    /* Correção crucial para os dois carrosséis da galeria não vazarem da tela */
    .container-carrosseis {
        flex-direction: column; /* Empilha um carrossel em cima do outro no celular */
        gap: 40px;             /* Espaçamento entre os carrosséis empilhados */
        align-items: center;
    }

    .legenda {
        font-size: 22px;        /* Diminui o texto gigante da legenda no celular */
        width: 100%;
    }

    /* ---- 6. PRINCIPAIS NOTÍCIAS (TELEMÓVEL) ---- */
    .noticias {
        padding: 20px 15px !important;
    }
    
    .noticias-card {
        flex-direction: column !important; /* Empilha a imagem acima do texto da notícia */
        align-items: center !important;
    }
    
    .noticias-card img {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
    }
    
    .noticias h2, .noticias-texto h3 {
        font-size: 24px !important;
        text-align: center !important;
    }

    /* ---- 7. CORREÇÃO DO CALENDÁRIO (TELEMÓVEL) ---- */
    #calendar {
        width: 100% !important;       /* Remove os 900px fixos e passa a ocupar a largura total do telemóvel */
        max-width: 100% !important;
        padding: 0 10px;              /* Pequeno espaçamento nas bordas para não colar no ecrã */
        overflow-x: auto;             /* Caso o FullCalendar precise de espaço, ele rola apenas o componente, sem quebrar o site */
    }

    /* Ajuste no tamanho do texto e botões do calendário para caberem em ecrãs pequenos */
    .fc .fc-toolbar-title {
        font-size: 18px !important;   /* Diminui o título "Maio 2026" para não quebrar linha de forma feia */
    }

    .fc-button {
        padding: 5px 10px !important; /* Torna os botões ligeiramente menores e mais fáceis de clicar */
        font-size: 14px !important;
    }

    .linha-calendario {
        font-size: 16px !important;   /* Ajusta o texto interno do calendário */
    }

    /* ---- 8. CORREÇÃO QUEM SOMOS & COLABORADORES (TELEMÓVEL) ---- */
    .quem-somos {
        max-width: 100% !important;
        padding: 0 20px !important;   /* Reduz o espaçamento lateral interno para aproveitar o ecrã */
        margin: 30px auto !important; /* Diminui a margem vertical para o conteúdo não ficar muito distante */
    }

    .quemsomos h2, .existe h2, .colab-titulo {
        font-size: 26px !important;   /* Diminui os títulos principais para não quebrarem linhas de forma feia */
    }

    #sandriel {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;      /* Muda de 500px fixos para auto, impedindo que a imagem do grupo fique achatada */
        object-fit: contain !important;
    }

    .colaboradores {
        grid-template-columns: repeat(1, 1fr) !important; /* Altera de 3 colunas para 1 coluna no telemóvel, empilhando os colaboradores */
        gap: 20px !important;
    }

    .colab {
        margin-bottom: 15px !important;
    }
} /* Fim da Media Query */

/* Regras Globais (Funcionam tanto em Computador como em Telemóvel) */
html {
    scroll-behavior: smooth;
}