/* ==========================================================================
   MOBILE.CSS
   Eu junto aqui tudo o que é específico de ecrãs pequenos (telemóveis e
   tablets em modo retrato). Uso rem/%/clamp em vez de valores fixos para
   que isto funcione bem em qualquer tamanho e sistema operativo — não é
   só "um telemóvel", são dezenas de tamanhos diferentes.

   Regra geral: nada aqui pode partir o desktop, porque tudo vive dentro
   do media query abaixo.
   ========================================================================== */

/* ======================================================================
   0. ELEMENTOS EXCLUSIVOS DO MOBILE — escondidos por defeito.
   Isto tem de viver FORA da media query: sem isto, estes blocos (que só
   fazem sentido em ecrã pequeno) apareciam também no desktop, duplicados
   ao lado da versão desktop equivalente (cartão rotativo, marquee de
   texto, diagrama orbital). Dentro da media query lá em baixo é que eu
   volto a mostrá-los.
   ====================================================================== */
.nav-icon-mobile,
.stats-mobile-carrossel,
.divisor-brilho-mobile,
.tech-mobile-mask,
.tech-mobile-scroll,
.habilidades-mobile-lista {
    display: none;
}

/* ==========================================================================
   MEDIA QUERY — a partir daqui, tudo só se aplica em ecrãs ATÉ 899px de
   largura (telemóveis e tablets em modo retrato). Em ecrãs maiores, o
   navegador ignora este bloco inteiro, por isso o desktop nunca é afetado.
   É assim que o mesmo site se adapta a tamanhos diferentes (design "responsivo").
   ========================================================================== */
@media (max-width: 899px) {

    /* ======================================================================
       0. BASE — impedir scroll horizontal acidental
       ====================================================================== */
    html, body { overflow-x: hidden; max-width: 100%; }

    /* ======================================================================
       1. NAVBAR — MENU HAMBÚRGUER
       ----------------------------------------------------------------------
       O PORQUÊ: com 5 páginas, o menu em linha deixou de caber no telemóvel
       (o conteúdo precisava de ~412px e um telemóvel dá 360-390px). O botão
       de CV ficava cortado. Podia ter apertado os espaçamentos, mas isso
       encolheria os alvos de toque abaixo dos 44px e voltaria a rebentar
       assim que acrescentasse outra página.

       Solução: o menu passa a abrir num painel por baixo da barra.
       ====================================================================== */
    .navbar {
        padding: 0.85rem 1.1rem;
        /* position: relative para o painel do menu se posicionar em relação
           a esta barra (com position: absolute). */
        position: fixed;
    }

    .navbar-logo img { height: 2.2rem; }

    /* O botão hambúrguer aparece (no desktop está display: none) */
    .btn-hamburguer {
        display: flex;
        order: 3;   /* empurra-o para o fim da barra, à direita do CV */
    }

    /* ---- O MENU passa a ser um painel que desce ---- */
    .navbar-menu {
        /* Sai do fluxo da barra e passa a flutuar por baixo dela */
        position: absolute;
        top: 100%;          /* começa onde a navbar acaba */
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0;
        background: var(--caixa);
        border-bottom: 1px solid var(--borda);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

        /* Fechado por defeito: invisível e "recolhido" para cima.
           Não uso display:none porque isso impediria a animação. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    /* Aberto: o JavaScript põe esta classe na navbar */
    .navbar.menu-aberto .navbar-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Cada link ocupa uma linha inteira, com ícone + texto */
    .navbar-menu a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.9rem;
        padding: 0.9rem 1.4rem;
        min-height: 48px;
        border-radius: 0;
    }

    /* No painel, o TEXTO volta a aparecer (é um menu, não uma barra de ícones) */
    .navbar-menu a span { display: inline; font-size: 0.95rem; }

    /* A regra base esconde o ícone (.nav-icon-mobile { display: none }).
       Uso o seletor pai para ganhar em especificidade, em vez de !important. */
    .navbar-menu a .nav-icon-mobile {
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        filter: brightness(0) invert(1);
        opacity: 0.75;
        flex-shrink: 0;
        transition: opacity 0.25s ease, filter 0.25s ease;
    }

    /* Página ativa: ícone e texto em roxo, com uma barra à esquerda */
    .navbar-menu a.ativo {
        background: rgba(var(--accent-rgb), 0.08);
        border-left: 3px solid var(--roxo);
    }
    .navbar-menu a.ativo .nav-icon-mobile {
        opacity: 1;
        filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(105%);
    }
    .navbar-menu a.ativo span { color: var(--roxo); font-weight: 600; }

    /* O pontinho do desktop não faz sentido num menu em lista */
    .navbar-menu a.ativo::after { display: none; }

    /* ---- As 3 barras viram um X quando o menu abre ---- */
    .navbar.menu-aberto .btn-hamburguer span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .navbar.menu-aberto .btn-hamburguer span:nth-child(2) {
        opacity: 0;   /* a barra do meio desaparece */
    }
    .navbar.menu-aberto .btn-hamburguer span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Botão CV — fica visível na barra, ao lado do hambúrguer */
    .btn-cv {
        padding: 0.5rem 0.85rem;
        font-size: 0.78rem;
        gap: 0.35rem;
        min-height: 44px;
        order: 2;
    }

    body.light-mode .navbar-menu a .nav-icon-mobile { filter: brightness(0); }
    body.light-mode .navbar-menu a.ativo .nav-icon-mobile {
        filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(190deg) brightness(105%);
    }

    /* ======================================================================
       2. FOOTER — mesmo do desktop, só com respiro ajustado
       ====================================================================== */
    .footer {
        padding: 1.1rem 1.3rem;
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    /* ======================================================================
       3. SIDEBAR DE DEFINIÇÕES (cor + língua) — mantenho o mesmo
          componente do desktop; só reduzo ligeiramente para caber melhor
       ====================================================================== */
    /* A pega é alta mas estreita (14px). No telemóvel isso é difícil de
       acertar com o dedo, por isso alargo-a para 22px — continua discreta,
       mas ganha uma área de toque confortável. */
    .handle-definicoes {
        height: 88px;
        width: 22px;
    }
    .definicoes-menu.active ~ .handle-definicoes { height: 44px; }

    /* ======================================================================
       4. HOME — Hero
       ====================================================================== */
    .hero {
        grid-template-columns: 1fr;
        padding: 6.5rem 1.3rem 2.5rem;
        gap: 0;
        min-height: 0;
        text-align: center;
    }

    /* Sem ilustração no mobile — só o texto, como pedido */
    .hero-direita { display: none; }

    .hero-esquerda {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-saudacao, .hero-eusou { font-size: 0.95rem; }

    .hero-nome {
        font-size: clamp(2.2rem, 9vw, 2.9rem);
        min-height: 0;
    }

    .hero-cargo { font-size: 1.05rem; text-align: center; }

    .hero-descricao {
        font-size: 0.88rem;
        max-width: 420px;
        text-align: center;
    }

    /* O cartão rotativo do desktop dá lugar ao carrossel das 3 estatísticas */
    .cartao-rotativo { display: none; }

    .btn-ver-projetos { margin: 0 auto; }

    /* ------ Carrossel das 3 estatísticas ------ */
    .stats-mobile-carrossel {
        display: flex;
        gap: 0.8rem;
        width: 100%;
        max-width: 420px;
        margin: 1.1rem 0 1.8rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* O padding vertical tem de chegar para o cartão ativo, que cresce
           (scale 1.06) e sobe (translateY -4px) — sem isto, o overflow-x:auto
           também corta o eixo vertical e a parte de cima do cartão fica cortada */
        padding: 0.9rem 0.3rem 0.3rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .stats-mobile-carrossel::-webkit-scrollbar { display: none; }

    .stats-mobile-card {
        flex: 0 0 calc(33.333% - 0.55rem);
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        padding: 1.1rem 0.6rem;
        border-radius: 0.8rem;
        border: 1px solid var(--borda-suave);
        background: var(--caixa);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .stats-mobile-card img {
        width: 1.5rem;
        height: 1.5rem;
        opacity: 0.6;
        filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(105%);
        transition: opacity 0.4s ease;
    }

    .stats-mobile-numero {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--texto-2);
        transition: color 0.4s ease, font-size 0.4s ease;
    }

    .stats-mobile-label {
        font-size: 0.66rem;
        color: var(--texto-2);
        text-align: center;
        line-height: 1.3;
        /* Sem opacidade extra: a combinação com o fundo escuro já não
           passava no contraste mínimo (WCAG AA) — a cor sozinha já
           basta para diferenciar do cartão em destaque, mais abaixo */
    }

    /* O cartão em destaque (o JS troca isto a cada 2.6s) fica maior e roxo */
    .stats-mobile-card.stats-mobile-ativo {
        border-color: var(--roxo);
        box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.4);
        transform: translateY(-4px) scale(1.06);
    }

    .stats-mobile-card.stats-mobile-ativo img { opacity: 1; }
    .stats-mobile-card.stats-mobile-ativo .stats-mobile-numero { color: var(--roxo-claro); font-size: 1.5rem; }
    .stats-mobile-card.stats-mobile-ativo .stats-mobile-label { color: var(--texto); }

    /* ------ Divisor "Tecnologias que utilizo" (mobile) ------ */
    .marquee-tech { display: none; }

    .divisor-brilho-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        max-width: 480px;
        margin: 0.5rem auto 1.4rem;
        padding: 0 1.3rem;
    }

    .divisor-linha-mobile {
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--roxo) 50%, transparent);
        opacity: 0.6;
    }

    .divisor-texto-mobile {
        color: var(--roxo-claro);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        white-space: nowrap;
    }

    /* ------ Carrossel de tecnologias com ícone a cores — desliza sozinho ------ */
    .tech-mobile-mask {
        display: block;
        width: 100%;
        overflow: hidden;
        padding: 0.6rem 0 1.6rem;
    }

    .tech-mobile-scroll {
        display: flex;
        align-items: center;
        gap: 1.3rem;
        width: max-content;
        padding: 0 1.3rem;
        /* Da direita para a esquerda, tal como o marquee de texto do desktop */
        animation: deslizarTechMobile var(--tech-mobile-dur, 22s) linear infinite;
        will-change: transform;
    }

    @keyframes deslizarTechMobile {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    /* Pausa no toque/hover, tal como o marquee do desktop */
    .tech-mobile-mask:hover .tech-mobile-scroll { animation-play-state: paused; }

    .tech-mobile-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
    }

    .tech-mobile-icone { width: 1.9rem; height: 1.9rem; object-fit: contain; }

    .tech-mobile-nome {
        font-size: 0.66rem;
        font-weight: 600;
        color: var(--texto-2);
        white-space: nowrap;
    }

    .tech-mobile-separador { display: flex; align-items: center; flex-shrink: 0; }

    .tech-mobile-separador img {
        width: 0.4rem;
        height: 0.4rem;
        filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(110%);
    }

    /* A Home mobile termina nas tecnologias — o resto (projetos em
       destaque, jornada, contactos) fica só na versão desktop */
    .projetos-destaque,
    .jornada,
    main > .contactos {
        display: none;
    }

    /* ======================================================================
       5. HABILIDADES — cartões planos em vez do diagrama orbital
       ====================================================================== */
    .orbital-grelha { display: none; }

    .habilidades-mobile-lista {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 2rem;
    }

    .categoria-card-mobile {
        background: var(--caixa);
        border: 1px solid var(--borda-suave);
        border-radius: 0.9rem;
        padding: 1.3rem;
    }

    .categoria-card-mobile-header {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 1.1rem;
    }

    .categoria-card-mobile-icone {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 0.6rem;
        background: rgba(var(--accent-rgb), 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .categoria-card-mobile-icone img {
        width: 1.35rem;
        height: 1.35rem;
        filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(250deg) brightness(105%);
    }

    .categoria-card-mobile-icone.icone-mono img { filter: brightness(0) invert(1); }
    body.light-mode .categoria-card-mobile-icone.icone-mono img {
        filter: invert(45%) sepia(90%) saturate(2500%) hue-rotate(190deg) brightness(105%);
    }

    .categoria-card-mobile-header h2 { font-size: 1rem; font-weight: 700; color: var(--texto); }
    .categoria-card-mobile-header p  { font-size: 0.76rem; color: var(--texto-2); margin-top: 0.15rem; }

    .skills-badges-mobile-mask {
        width: 100%;
        overflow: hidden;
    }

    .skills-badges-mobile {
        display: flex;
        gap: 0.6rem;
        width: max-content;
        /* Da direita para a esquerda, tal como o carrossel de tecnologias
           da Home — cada categoria tem a sua própria velocidade,
           calculada no JS conforme o número de skills */
        animation: deslizarSkillsMobile var(--skills-mobile-dur, 16s) linear infinite;
        will-change: transform;
    }

    @keyframes deslizarSkillsMobile {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    .categoria-card-mobile:hover .skills-badges-mobile { animation-play-state: paused; }

    /* Cada badge: só o nome, com a borda na cor da própria tecnologia
       (ou um tom pastel, no caso das Habilidades Pessoais) */
    .skill-badge-mobile {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0.5rem 0.85rem;
        border-radius: 0.55rem;
        border: 1.5px solid var(--badge-cor, var(--roxo));
        background: color-mix(in srgb, var(--badge-cor, var(--roxo)) 10%, transparent);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--texto);
        white-space: nowrap;
    }

    /* ======================================================================
       6. PROJETOS — cartões na horizontal (imagem + texto lado a lado),
          3 por página (o JS já trata da paginação)
       ====================================================================== */
    .filtros-projetos {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.4rem;
        margin-bottom: 1.6rem;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .filtros-projetos::-webkit-scrollbar { display: none; }
    .filtro-pill { flex-shrink: 0; }

    .carrossel-projetos-wrapper { gap: 0.4rem; }

    .projetos-pagina-grid { gap: 0.9rem; }

    /* O cartão inteiro vira uma linha: imagem à esquerda, texto à direita */
    .projeto-card-pagina {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .projeto-card-pagina .projeto-card-imagem {
        width: 34%;
        height: auto;
        flex-shrink: 0;
    }

    .projeto-card-pagina .projeto-card-corpo {
        flex: 1;
        min-width: 0;
        padding: 0.85rem 0.9rem;
    }

    .projeto-card-pagina .projeto-card-corpo h3 { font-size: 0.92rem; }
    .projeto-card-pagina .projeto-card-corpo p {
        font-size: 0.72rem;
        -webkit-line-clamp: 2;
        margin-bottom: 0.55rem;
    }

    .projeto-card-pagina .projeto-badges { gap: 0.3rem; margin-bottom: 0.65rem; }
    .projeto-card-pagina .tech-badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; }

    /* Os dois botões (Demo e GitHub) dividem a largura disponível em partes
       iguais. Antes ficavam a tamanho natural e o GitHub batia na borda do
       cartão, porque a coluna de texto é estreita.

       Sem o prefixo .projeto-card-pagina, para apanhar também o carrossel da
       Home, que usa a mesma estrutura de cartão mas outra classe. */
    .projeto-card-botoes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .btn-projeto {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.45rem 0.4rem;
        font-size: 0.68rem;
        gap: 0.3rem;
        min-width: 0;   /* deixa o botão encolher dentro da sua coluna */
    }

    /* ======================================================================
       7. CONTACTOS — reordeno com CSS "order": formulário primeiro,
          depois o divisor, depois os 4 quadrados; sem o painel de
          "Resposta Rápida" nem o valor por baixo da Localização
       ====================================================================== */
    .contactos-pagina {
        display: flex;
        flex-direction: column;
        /* stretch, não center: senão os filhos encolhem ao tamanho do
           conteúdo e sobra margem morta dos lados. */
        align-items: stretch;
    }

    .contactos-pagina .mensagem-secao  { order: 1; margin-top: 0; }
    .contactos-pagina .divisor-brilho  { order: 2; margin: 2rem 0 1.6rem; }
    .contactos-pagina .contactos-grid  { order: 3; }

    /* Escondo o painel "Resposta Rápida" — só o formulário fica no mobile */
    .resposta-rapida-card { display: none; }

    .mensagem-form { padding: 1.3rem; }

    /* Os 4 quadrados: só ícone + título, sem o valor por baixo
       (ex: sem o texto da localização) */
    .contacto-card span { display: none; }

    /* Três dos cartões são <a> e o quarto é <div>. Um <a> é inline e encolhe
       ao conteúdo, por isso ficavam com larguras diferentes (166 vs 186px).
       Com width: 100% preenchem todos a célula do grid por igual. */
    .contacto-card { width: 100%; }

    /* Dois por linha, a dividir a largura em partes exatamente iguais.

       Uso minmax(0, 1fr) e não 1fr: o 1fr respeita o tamanho mínimo do
       conteúdo, e como "Localização" é uma palavra larga, essa coluna
       esticava (166px vs 186px). O minmax(0, ...) deixa a coluna encolher
       abaixo do conteúdo e aí sim ficam iguais. */
    .contactos-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.9rem;
        width: 100%;
        max-width: none;
    }

    /* ======================================================================
       8. FAIXA FINAL (banner-final) — presente em Habilidades/Projetos/
          Contactos/Documentação; só empilho para caber no ecrã estreito
       ====================================================================== */
    .banner-final {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        padding: 1.3rem;
        text-align: left;
    }

    .banner-final .btn-banner-final { width: 100%; justify-content: center; }

    /* ======================================================================
       9. PÁGINA PÚBLICA DE DOCUMENTAÇÃO
       ====================================================================== */
    .doc-card-grid { gap: 0.7rem; }
    .doc-seccao-texto { padding: 0 0.3rem; }

    /* ======================================================================
       PÁGINA PERCURSO — mobile
       O "Quem sou" passa de 2 colunas (texto | foto) para 1 coluna. Uso a
       propriedade "order" para inverter a ordem visual: no telemóvel a foto
       aparece PRIMEIRO (por cima do texto), mesmo estando depois no HTML.
       ====================================================================== */
    .quem-sou-wrapper {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .quem-sou-foto {
        order: -1;          /* põe a foto antes do texto */
        max-width: 260px;
        margin: 0 auto;     /* centra a foto */
    }

    .quem-sou-texto p { font-size: 0.9rem; line-height: 1.8; }

    .percurso-seccao-titulo { font-size: 1.4rem; margin-bottom: 1.5rem; }
    .pagina-subtitulo { font-size: 0.9rem; margin-bottom: 1.8rem; }

    /* Jornada vertical: marcadores mais pequenos para caberem bem */
    .jornada-v-item {
        grid-template-columns: 44px 1fr;
        gap: 1rem;
        padding-bottom: 1.8rem;
    }
    .jornada-v-marcador { width: 36px; height: 36px; }
    .jornada-v-marcador img { width: 1rem; height: 1rem; }
    .jornada-v-item::before { left: 18px; top: 38px; }
    .jornada-v-conteudo h3 { font-size: 1rem; }
    .jornada-v-conteudo p { font-size: 0.85rem; }

    /* Formação e autodidata: uma coluna só */
    .formacao-lista { grid-template-columns: 1fr; gap: 1rem; }
    .autodidata-cards { grid-template-columns: 1fr; gap: 1rem; }
    .formacao-card, .autodidata-card { padding: 1.2rem; }

    .autodidata-remate {
        font-size: 1rem;
        margin-top: 1.8rem;
    }

}