/* 1. Importar a IBM Plex Mono do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

body {
    /* Mudar a família de fontes para a IBM Plex Mono */
    font-family: 'IBM Plex Mono', Courier, monospace;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Cor base (Quase preto) */
    color: #111111;
}

/* ==========================================
   ESTILOS DE TEXTO & TIPOGRAFIA MONOSPACE
========================================== */

/* Nome na Sidebar (Logo "Hely") */
.sidebar-name {
    font-size: 16px;
    font-weight: 400; 
    letter-spacing: normal; 
    color: #111111;
    text-decoration: none;
}

/* Links do Menu (Work, About) */
.nav-link {
    font-size: 16px; /* Aumentei um pouquinho porque a Courier é mais "fina" */
    font-weight: 400;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Quando passa o rato por cima */
.nav-link:hover {
    color: #111111;
}

/* O Menu Ativo (exatamente como na sua imagem, com sublinhado) */
.nav-link-active {
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 6px; /* Distância do sublinhado para a letra */
    text-decoration-thickness: 1px; /* Espessura fina do traço */
}

/* Links Externos (Email, LinkedIn) no rodapé */
.external-link {
    font-size: 15px;
    color: #6b7280;
}

/* ==========================================
   OS TÍTULOS (ESTILO MÁQUINA DE ESCREVER)
========================================== */

/* O texto principal de introdução */
.intro-box h1 {
    font-size: 16px;      /* Reduzido um pouco para o bloco ficar mais refinado */
    font-weight: 400; 
    line-height: 1.6;    /* BEM MAIS APERTADO: junta as linhas de forma elegante */
    letter-spacing: normal; 
    color: #111111;
    max-width: 100%; 
}

/* Títulos dentro das páginas dos projetos */
#project-title {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    color: #111111;
}

/* Texto descritivo dos projetos */
#project-desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6; 
    color: #4b5563; 
}

/* Ajustes automáticos para ecrãs pequenos (Telemóveis) */
@media (max-width: 768px) {
    .intro-box h1, #project-title {
        font-size: 24px; 
    }
}

/* ==========================================
   LÓGICA DO GRID (ATUALIZADA E BLINDADA)
========================================== */
.flow-layout {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.flow-item {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #f3f4f6; 
    border-radius: 4px;
}

.flow-item img, .flow-item video {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.flow-item:hover img, .flow-item:hover video {
    transform: scale(1.03);
}

/* Tamanho no Telemóvel (Tudo fica 100% para facilitar a leitura) */
.flow-item-full, 
.flow-item-half, 
.flow-item-third, 
.flow-item-two-thirds {
    width: 100%;
}

/* Tamanho no Tablet e Computador */
@media (min-width: 640px) {
    .flow-item-full { 
        width: 100%; 
    }
    .flow-item-half { 
        width: calc(50% - 12px); 
    }
    .flow-item-third { 
        width: calc(33.3% - 16px); /* 1/3 do ecrã */
    }
    .flow-item-two-thirds { 
        width: calc(66.6% - 8px); /* 2/3 do ecrã */
    } 
}
/* ==========================================
   LEGENDA SOBRE A IMAGEM (HOVER OVERLAY)
   ========================================== */

/* Caixa da legenda na parte inferior da imagem */
.project-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Degradê suave do preto 60% transparente até transparente total */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    padding: 24px 20px 16px 20px;
    
    /* Inicialmente escondido ou com opacidade baixa, revelando no hover */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    opacity: 0; /* Começa invisível */
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Quando passa o rato por cima do card do projeto, a legenda sobe e aparece */
.project-card:hover .project-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Tipografia da legenda na fonte do site */
.project-caption-title {
    font-family: 'IBM Plex Mono', Courier, monospace;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.project-caption-category {
    font-family: 'IBM Plex Mono', Courier, monospace;
    font-size: 11px;
    font-weight: 400;
    color: #d1d5db; /* Cinza claro elegante */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ==========================================
   PROTEÇÃO DE IMAGENS E MÍDIA
   ========================================== */
img, video {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
}