/**
 * ==========================================================================
 * Ficheiro:  responsive.css
 * Descrição: Estilos para adaptar o site a tablets e telemóveis.
 * Abordagem: Desktop-Down (max-width)
 * ==========================================================================
 *
 * ESTRUTURA:
 * 1. Breakpoint para Tablets e Ecrãs Menores (<= 1024px)
 * - Ajustes gerais de layout, navegação e espaçamento.
 * - Estilos específicos para as páginas Homepage e Sobre.
 *
 * 2. Breakpoint para Telemóveis (<= 768px)
 * - Grandes alterações de layout (coluna única).
 * - Transformação da navegação para uma barra inferior.
 * - Ajustes finos em todas as secções e páginas para legibilidade
 * e usabilidade em ecrãs pequenos.
 * ==========================================================================
 */

/**
 * ==========================================================================
 * 1. BREAKPOINT TABLET (<= 1024px)
 * ==========================================================================
 */
@media (max-width: 1024px) {

    /**
     * 1.1. Ajustes Globais
     * Aumenta o espaçamento lateral para evitar que o conteúdo
     * toque nas bordas do ecrã.
     */
    .section {
        padding: 10vh 5vw;
    }

    /**
     * 1.2. Navegação Superior
     * Oculta elementos irrelevantes em touch e reequilibra o espaço.
     */
    .top-nav {
        /* Garante que o logo (centro) e o relógio (direita) se afastam. */
        justify-content: space-between;
    }

    .mouse-coords {
        /* Coordenadas do rato são inúteis em dispositivos touch. */
        display: none;
    }

    .nav-left,
    .nav-right {
        /* Garante que os containers laterais ocupam o espaço de forma igual. */
        flex: 1;
    }

    .nav-left {
        /* Alinha o conteúdo restante à esquerda (neste caso, nada visível). */
        justify-content: flex-start;
    }

    .nav-center {
        /* Garante que o logo permanece visível e com o seu tamanho original. */
        display: flex;
        flex: 0;
    }

    /**
     * 1.3. Homepage (index.html)
     */
    .main-title {
        /* Melhora a legibilidade em ecrãs mais estreitos, evitando quebras estranhas. */
        line-height: 1.1;
    }

    .astronaut-image {
        /* Ajusta o tamanho da imagem de forma fluida e controlada. */
        width: clamp(200px, 22vw, 280px);
    }

    .about-container {
        /* Reduz o espaçamento entre colunas para um layout mais compacto. */
        gap: 3rem;
    }

    .about-secondary-text {
        /* Permite que o texto ocupe toda a largura disponível, melhorando o fluxo. */
        max-width: 100%;
        margin-left: 0;
        text-align: left;
    }

    /**
     * 1.4. Página Sobre (about.html)
     */
    .light-mode-card {
        /* Ajusta o padding para um melhor espaçamento interno. */
        padding: 3rem;
    }
}

/**
 * ==========================================================================
 * 2. BREAKPOINT TELEMÓVEL (<= 768px)
 * ==========================================================================
 */
@media (max-width: 768px) {
    /**
     * 2.1. Navegação
     */

    /* --- Navegação Superior --- */
    .nav-left {
        /* O relógio, que estava aqui, é ocultado para simplificar a barra. */
        display: none;
    }

    .nav-center,
    .nav-right {
        /* Ocupam o espaço disponível de forma igual. */
        flex: 1;
    }

    .nav-center {
        /* O logo alinha-se à esquerda. */
        justify-content: flex-start;
    }

    .nav-right {
        /* O menu hamburger (ou outro item) alinha-se à direita. */
        justify-content: flex-end;
    }

    /* --- Navegação Mobile: botão toggle + pill expansível --- */

    /* Container: fixo no canto inferior direito */
    .vertical-nav {
        position: fixed;
        top: auto;
        bottom: 1.5rem;
        right: 1.2rem;
        left: auto;
        width: auto;
        background-color: transparent;
        border-top: none;
        transform: none !important;
        z-index: 1000;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .vertical-nav.is-visible {
        transform: none !important;
    }

    /* Pill de nav: escondida por defeito, aparece ao abrir */
    .nav-list {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        padding: 0.6rem 0.4rem !important;
        margin: 0 !important;
        gap: 0.2rem !important;
        border: 1px solid var(--border-color-dark) !important;
        border-radius: 30px !important;
        background-color: var(--bg-card-color) !important;
        /* Estado fechado */
        opacity: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        transform: translateY(10px) scale(0.95) !important;
        transition: opacity 0.25s ease, max-height 0.3s ease, transform 0.25s ease !important;
    }

    /* Estado aberto */
    .vertical-nav.mobile-open .nav-list {
        opacity: 1 !important;
        max-height: 400px !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
        overflow: visible !important;
    }

    .nav-item {
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: unset !important;
        background: transparent !important;
        border-radius: 50% !important;
        width: 38px !important;
        height: 38px !important;
    }

    .nav-item a,
    .nav-item .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        color: var(--text-muted) !important;
        padding: 0 !important;
        flex-direction: column !important;
    }

    .nav-item .nav-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
    }

    .nav-item .nav-icon i {
        font-size: 0.95rem !important;
        color: var(--text-muted) !important;
        display: block !important;
    }

    .nav-item .nav-text {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .nav-item:hover .nav-text {
        display: none !important;
    }

    /* Botão toggle (hamburger / X) */
    .mobile-nav-toggle {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background-color: var(--bg-card-color);
        border: 1px solid var(--border-color-dark);
        color: var(--text-muted);
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
        flex-shrink: 0;
    }

    .vertical-nav.mobile-open .mobile-nav-toggle {
        color: var(--text-color);
        background-color: #2a2a2a;
    }

    /**
     * 2.2. Ajustes Globais de Secções
     */
    footer {
        /* Garante que o rodapé não se sobrepõe a outros elementos posicionados. */
        z-index: 1;
    }

    /* Aumenta a área de toque e o espaçamento de botões comuns. */
    .btn-view-all,
    .btn-send-message {
        margin-top: 1rem;
    }

    /**
     * 2.3. Homepage (index.html)
     */

    /* --- Secção: Introdução --- */
    .text-overlay {
        top: 35%;
        /* Sobe o texto no mobile */
    }

    .subtitle-text {
        font-size: 1.1rem;
        width: 90%;
    }

    .main-title {
        font-size: clamp(2.6rem, 12vw, 3.6rem);
    }

    /* Em mobile, chávena fica estática no banner, sem seguir o scroll */
    #helmet-container,
    .astronaut-container {
        position: absolute !important;
        bottom: 20% !important;
        left: 50% !important;
        top: auto !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 6 !important;
    }

    #helmet-container .coffee-link {
        pointer-events: none;
        /* Desativa o link back-to-top em mobile */
    }

    /* --- Títulos das secções: mais pequenos no mobile --- */
    .section-title,
    .animated-title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }

    /* --- Competências: título centrado --- */
    #specialties .section-title {
        text-align: center;
        width: 100%;
    }

    /* --- Secção: Sobre Mim --- */
    .about-container {
        /* Converte o layout para uma única coluna, empilhando o conteúdo. */
        flex-direction: column;
        align-items: flex-start;
    }

    .about-headline h1 {
        /* Reduz o título para se ajustar ao ecrã e alinha à esquerda. */
        font-size: clamp(2.2rem, 9vw, 2.8rem);
        text-align: left;
    }

    .about-secondary-text {
        padding-top: 1rem;
    }

    .about-highlights {
        text-align: left;
    }

    .about-highlights strong {
        /* Força os títulos a quebrarem a linha para melhor estrutura. */
        display: block;
        margin-top: 1rem;
    }

    #typewriter-target span[style*="margin-left"] {
        /* Remove espaçamento extra gerado por JavaScript, que quebra o layout. */
        display: none;
    }

    /* --- Secção: Projetos --- */
    .projects-column-layout {
        /* Layout de coluna única para a secção de projetos. */
        flex-direction: column;
        gap: 2rem;
    }

    #index-projects .projects-column-left {
        text-align: center;
        margin: 0 auto;
    }

    #index-projects .section-title {
        font-size: clamp(3rem, 10vw, 3.5rem);
    }

    .projects-column-right {
        margin: 0 auto;
        width: 100%;
    }

    .project-list {
        /* Remove a borda superior, que será aplicada a cada item individualmente. */
        border-top: none;
        width: 100%;
    }

    .project-list-item {
        /* Adiciona um separador a cada projeto e centra o seu conteúdo. */
        padding: 2rem 0;
        border-top: 1px solid var(--border-color-dark);
        align-items: center;
    }

    .project-list-item:hover .project-image-container {
        /* Desativa o efeito de imagem flutuante, pois não há hover em mobile. */
        display: none;
    }

    #index-projects .btn-view-all {
        align-self: center;
    }

    /* --- Secção: Playground (Marquee) --- */
    #playground {
        padding: 10vh 0;
        overflow: hidden;
    }

    .playground-container-wrapper {
        gap: 2.5rem;
    }

    .playground-container {
        /* Remove só a rotação — o width: 150vw e overflow: hidden mantêm-se do desktop */
        transform: none;
    }

    .playground-card {
        width: 180px;
        height: 180px;
    }

    #specialties {
        padding-bottom: 4vh;
        min-height: auto;
    }

    #contact {
        padding-top: 4vh;
        min-height: auto;
    }

    /* --- Secção: Competências (Tabela Periódica) --- */
    .specialties-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 2rem 0 !important;
    }

    .periodic-grid {
        /* Grelha de 2 colunas com distribuição uniforme */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reset de TODOS os posicionamentos nth-child do desktop */
    .periodic-grid .grid-item,
    .periodic-grid .grid-item:nth-child(1),
    .periodic-grid .grid-item:nth-child(2),
    .periodic-grid .grid-item:nth-child(3),
    .periodic-grid .grid-item:nth-child(4),
    .periodic-grid .grid-item:nth-child(5),
    .periodic-grid .grid-item:nth-child(6),
    .periodic-grid .grid-item:nth-child(7),
    .periodic-grid .grid-item:nth-child(8),
    .periodic-grid .grid-item:nth-child(9),
    .periodic-grid .grid-item:nth-child(10),
    .periodic-grid .grid-item:nth-child(11),
    .periodic-grid .grid-item:nth-child(12),
    .periodic-grid .grid-item:nth-child(13),
    .periodic-grid .grid-item:nth-child(14),
    .periodic-grid .grid-item:nth-child(15),
    .periodic-grid .grid-item:nth-child(16) {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
        padding: 0.5rem !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .periodic-grid .grid-item strong {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;
    }

    .periodic-grid .grid-item span {
        font-size: 0.55rem !important;
        margin-top: 0.2rem !important;
    }

    .periodic-grid .grid-item::before {
        font-size: 0.5rem !important;
        top: 0.3rem !important;
        left: 0.4rem !important;
    }

    /**
     * 2.4. Página Sobre (about.html)
     */

    /* --- Secção: Hero --- */
    #about-hero {
        /* Altura adaptável ao conteúdo para evitar overflows em ecrãs curtos. */
        height: auto;
        min-height: 80vh;
        padding-top: 8vh;
        padding-bottom: 10vh;
    }

    .hero-v3-grid {
        /* Converte para coluna única e centra os itens. */
        grid-template-columns: 1fr;
        justify-items: center;
        height: auto;
        gap: 1rem;
    }

    .hero-v3-image-container {
        /* Posiciona a imagem no topo da grelha. */
        grid-row: 1;
        grid-column: 1;
        max-width: 360px;
    }

    .hero-v3-text-container {
        /* Posiciona o texto abaixo, centrado. */
        grid-row: 2;
        grid-column: 1;
        text-align: center;
        align-items: center;
        padding-left: 0;
    }

    .hero-v3-text-container h1 {
        font-size: clamp(3rem, 15vw, 4.5rem);
    }

    .hero-v3-text-container h2,
    .hero-v3-supertitle {
        margin-left: 0;
        text-align: center;
    }

    /* Agrupa os meta-dados (ano e local) e posiciona-os abaixo do texto. */
    .hero-v3-meta-location,
    .hero-v3-meta-year {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin-top: -1rem;
        /* Aproxima os itens, corrigido de -1 para -1rem. */
    }

    .hero-v3-meta-location {
        grid-row: 3;
    }

    .hero-v3-meta-year {
        grid-row: 4;
    }

    /* --- Secções de Conteúdo (Bio, Experiência) --- */
    .section-content,
    .bio-content,
    .about-experience {
        /* Layout de coluna única e largura controlada para legibilidade. */
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        max-width: 85vw;
    }

    .bio-left {
        margin-bottom: 1rem;
    }

    .experience-year {
        width: 95vw;
        flex: auto;
    }

    /* --- Secção: Interesses --- */
    .light-mode-card {
        flex-direction: column;
        padding: 2rem;
    }

    /* --- Secção: Eu Fora dos Pixeis (About) --- */
    #about-interests .light-mode-card-content {
        flex-direction: column !important;
        padding: 2rem 1.5rem !important;
        gap: 1.5rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #about-interests .interests-left {
        min-width: auto !important;
        text-align: center !important;
        width: 100% !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #about-interests .interests-left h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }

    #about-interests .interests-left p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    #about-interests .interests-right-gallery {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        order: 2 !important;
        padding: 0.5rem !important;
    }

    #about-interests .polaroid {
        width: 100% !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: rotate(0deg) !important;
        margin: 0 !important;
        padding: 0.4rem 0.4rem 1.5rem 0.4rem !important;
        box-sizing: border-box !important;
    }

    #about-interests .polaroid:nth-child(1),
    #about-interests .polaroid:nth-child(2),
    #about-interests .polaroid:nth-child(3),
    #about-interests .polaroid:nth-child(4),
    #about-interests .polaroid:nth-child(5),
    #about-interests .polaroid:nth-child(6) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: rotate(0deg) !important;
    }

    #about-interests .polaroid img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    #about-interests .polaroid span,
    #about-interests .polaroid::after {
        font-size: 0.6rem !important;
        text-align: center !important;
        display: block !important;
        margin-top: 0.3rem !important;
    }

    /**
     * 2.5. Páginas de Projetos (Listagem e Detalhe)
     */

    /* --- Listagem (projects.html) --- */
    #projects.section {
        padding-top: 20vh;
    }

    #project-filters {
        /* Permite que os botões de filtro quebrem a linha se não couberem. */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    #project-filters .section-title {
        font-size: var(--font-size-h2);
    }

    .filter-btn {
        /* Evita que o texto dos botões se parta em duas linhas. */
        white-space: nowrap;
    }

    #projects .project-list-item {
        align-items: center;
        text-align: center;
    }

    #projects .project-tags {
        justify-content: center;
    }

    /* --- Detalhe (project-single.html) --- */
    .project-main {
        width: 85vw;
        margin: 0 auto;
        padding: 15vh 0;
    }

    #project-title {
        font-size: clamp(2.8rem, 10vw, 3.5rem);
    }

    .project-details-grid {
        /* Grelha de 2 colunas para os detalhes, melhorando o uso do espaço. */
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
        text-align: left;
    }

    .project-full-description {
        margin-bottom: 5vh;
    }

    .project-gallery {
        /* Galeria de imagens em coluna única. */
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 5vh;
    }

    .project-navigation {
        /* Navegação entre projetos em linha, com setas nas pontas. */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    /* Oculta o texto para uma navegação mais compacta, focada nos ícones. */
    .project-navigation .nav-arrow .nav-text {
        display: none;
    }

    .project-navigation .nav-arrow .arrow {
        font-size: 1.5rem;
        /* Aumenta o tamanho da seta para facilitar o toque. */
    }

    /* Garante a ordem correta dos elementos de navegação com flexbox. */
    #prev-project-link {
        order: 1;
    }

    .nav-all {
        order: 2;
    }

    #next-project-link {
        order: 3;
    }

    /**
     * 2.6. Secção/Página de Contactos
     */
    .retro-window {
        padding: 2rem;
    }

    .form-step {
        margin: 0;
        gap: 0;
    }

    .conversational-form {
        font-size: clamp(1.5rem, 5vw, 1.8rem);
    }

    .confirmation-buttons {
        /* Botões empilhados para facilitar o toque. */
        flex-direction: column;
        gap: 0.5rem;
    }

    /**
     * 2.7. Rodapé (Footer)
     */
    .footer-content {
        /* Layout de coluna única e conteúdo centrado. */
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
        padding-bottom: 2rem;
        margin: 0 auto;
    }

    .footer-column {
        align-items: center;
    }

    .footer-title-column {
        /* Títulos tornam-se redundantes neste layout e são ocultados. */
        display: none;
    }

    .footer-logo span {
        margin-top: 0.5rem;
    }

    /**
     * 2.8. Página Playground (Modal)
     */
    #modal .modal-content {
        /* Adapta o modal para um layout vertical com scroll. */
        flex-direction: column;
        height: 80vh;
        overflow-y: auto;
        padding: 1.5rem;
    }

    #modal .modal-right-column {
        /* O texto aparece no topo. */
        order: 1;
        flex: 0;
    }

    #modal .modal-left-column {
        /* As imagens aparecem abaixo do texto. */
        order: 2;
        padding-right: 0;
    }

    #modal-gallery-container img {
        max-height: none;
        /* Permite que a imagem use o espaço necessário. */
    }
}