/* ══════════════════════════════════════════
   project.css — Luís Almeida
   ══════════════════════════════════════════ */

/* Reset universal: remove margens e padding padrão do browser; box-sizing inclui padding/border na largura total */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variáveis de design — paleta de cores e dimensões reutilizáveis em todo o ficheiro */
:root {
    --white: #ffffff; /* Fundo principal da página */
    --ink: #111010; /* Preto para elementos de alto contraste (não usado no texto principal aqui) */
    --ink-faint: #c0bbb0; /* Bege muito claro — datas, placeholders, separadores */
    --ink-mid: #7a756a; /* Bege médio — textos principais, títulos, botões */
    --dot-off: #e8e4dc; /* Creme suave — fundos de placeholder e bordas */
    --dot-on: #8a7f6f; /* Bege escuro/terra — etiquetas de categoria */
    --surface: #f7f5f2; /* Fundo ligeiramente acinzentado para áreas de preview */
    --bar-height: 44px; /* Altura padrão do footer (e seria da nav se existisse) */
}

/* html e body a 100% de altura: permite que o body use flexbox para empurrar o footer para baixo */
html,
body {
    height: 100%;
}

/* body como coluna flex: main cresce (flex:1) e o footer fica colado ao fundo naturalmente */
body {
    min-height: 100%; /* Garante que a página ocupa pelo menos o ecrã inteiro */
    display: flex; /* Layout em coluna para empurrar footer para baixo */
    flex-direction: column; /* main cresce, footer fica no fim */
    background-color: var(--white);
    color: var(--ink);
    font-family:
        "EB Garamond", Georgia, serif; /* Fonte serif principal do site */
    -webkit-font-smoothing: antialiased; /* Suaviza a renderização das fontes no WebKit */
}

/* Camada de grão/ruído visual sobre toda a página — efeito tipográfico subtil */
body::before {
    content: "";
    position: fixed; /* Fixo: o grão não se move quando a página é deslocada */
    inset: 0; /* Cobre toda a área do viewport (topo, direita, fundo, esquerda) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat; /* Repete o padrão de grão em mosaico */
    background-size: 180px; /* Tamanho de cada azulejo do padrão */
    pointer-events: none; /* A camada não bloqueia cliques ou hover nos elementos abaixo */
    z-index: 0; /* Fica atrás de todo o conteúdo */
    opacity: 0.5; /* Transparência de 50% para não dominar o conteúdo */
}

/* ── ANIMAÇÃO DE ENTRADA ── */
/* Keyframe que move o conteúdo suavemente de baixo para cima enquanto aparece */
@keyframes fadeUp {
    to {
        opacity: 1; /* Estado final: totalmente visível */
        transform: translateY(
            0
        ); /* Estado final: posição natural (sem deslocamento) */
    }
}

/* ── CONTEÚDO PRINCIPAL ── */
.page-content {
    position: relative; /* Necessário para que o z-index funcione (fica à frente do grão) */
    z-index: 1; /* Acima da camada de grão (z-index: 0) */
    flex: 1; /* Cresce para ocupar todo o espaço disponível entre topo e footer */
    padding: 4.5rem 2rem 1.5rem; /* bottom reduzido de 4rem → 1.5rem */
    max-width: 1100px; /* Largura máxima da grelha de cards */
    width: 100%;
    margin: 0 auto; /* Centra horizontalmente o conteúdo */
    opacity: 0; /* Começa invisível — a animação trata do aparecimento */
    transform: translateY(12px); /* Começa ligeiramente deslocado para baixo */
    animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; /* Animação de entrada suave */
}

/* ── CABEÇALHO DA SECÇÃO ── */
/* Flex com espaço entre: título à esquerda, seta de retorno à direita */
.page-header {
    display: flex; /* Coloca título e seta na mesma linha */
    align-items: center; /* Alinha verticalmente ao centro */
    justify-content: space-between; /* Empurra a seta para o extremo direito */
    margin-bottom: 1.5rem; /* Espaço entre o cabeçalho e a linha separadora */
}

/* Título "Projects" — em beje médio, itálico, serif */
.page-title {
    font-family: "EB Garamond", Georgia, serif;
    font-size: clamp(
        2rem,
        5vw,
        3rem
    ); /* Tamanho fluido: adapta-se entre 2rem e 3rem */
    font-weight: 400;
    font-style: italic;
    color: var(--ink-mid); /* Bege — consistente com a paleta do main.html */
    line-height: 1.1;
}

/* Seta de retorno (←) no canto superior direito do cabeçalho */
.back-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem; /* Tamanho discreto — não compete com o título */
    color: var(--ink-faint); /* Bege claro no estado normal */
    text-decoration: none; /* Remove sublinhado padrão dos links */
    opacity: 0.6; /* Ligeiramente transparente no estado normal */
    transition:
        color 0.2s ease,
        opacity 0.2s ease; /* Transição suave ao hover */
}

/* Ao passar o rato, a seta fica mais evidente */
.back-arrow:hover {
    color: var(--ink-mid); /* Fica mais escura ao hover */
    opacity: 1; /* Totalmente opaca ao hover */
}

/* Linha horizontal fina que separa o cabeçalho dos filtros */
.section-rule {
    width: 32px; /* Linha curta, discreta */
    height: 1px;
    background: var(--dot-off); /* Cor creme — subtil */
    margin-bottom: 2rem; /* Espaço entre a linha e os botões de filtro */
}

/* ── FILTROS ── */
/* Contentor flexível dos botões de categoria */
.filters {
    display: flex;
    flex-wrap: wrap; /* Passa para a linha seguinte em ecrãs pequenos */
    gap: 0.5rem; /* Espaço entre botões */
    margin-bottom: 2.5rem; /* Espaço entre filtros e grelha de cards */
}

/* Separador "|" entre grupos de filtros — não é clicável */
.filter-sep {
    font-family: "DM Mono", monospace;
    font-size: 1.3rem; /* Aumentado de 0.9rem → separador ainda mais proeminente */
    color: var(--ink-faint);
    user-select: none;
    pointer-events: none;
    padding: 0 0.35rem; /* Espaço lateral ligeiramente maior para respirar */
    line-height: 1; /* Alinha verticalmente com os botões */
}

/* Variante do placeholder-inner que centra um ícone FA em vez de um glifo de texto */
.placeholder-inner--icon {
    display: flex; /* Flexbox para centrar o ícone tanto horizontal como verticalmente */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    width: 100%; /* Ocupa toda a largura do card-preview */
    height: 100%; /* Ocupa toda a altura do card-preview */
    position: absolute; /* Posiciona sobre a área do preview sem deslocar outros elementos */
    inset: 0; /* Equivalente a top:0; right:0; bottom:0; left:0 */
}

/* Ícone fa-sliders centrado no card Brevemente inativo */
.placeholder-icon {
    font-size: 1.6rem; /* Tamanho legível mas discreto */
    color: var(--dot-off); /* Cor creme muito subtil — indica estado inativo */
    pointer-events: none; /* Não captura cliques */
}

/* Estilo base dos botões de filtro */
.filter-btn {
    font-family: "DM Mono", monospace; /* Fonte monospace para os rótulos */
    font-size: 0.55rem;
    font-weight: 300;
    letter-spacing: 0.18em; /* Espaçamento entre letras para aspecto tipográfico */
    text-transform: uppercase; /* Letras maiúsculas */
    color: var(--ink-mid); /* Bege médio — cor dos botões inativos */
    background: none; /* Sem fundo por defeito */
    border: 1px solid var(--dot-off); /* Borda creme subtil */
    border-radius: 2px; /* Cantos ligeiramente arredondados */
    padding: 0.4rem 0.85rem;
    cursor: pointer; /* Muda o cursor para mãozinha ao passar por cima */
    display: inline-flex; /* Permite alinhar ícone e texto na mesma linha */
    align-items: center; /* Alinha verticalmente ícone e texto */
    gap: 0.4em; /* Espaço entre o ícone fa-sliders e a etiqueta de texto */
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

/* Estado hover dos botões de filtro */
.filter-btn:hover {
    color: var(--ink-mid); /* Mantém cor bege mas com borda mais evidente */
    border-color: var(--ink-mid); /* Borda bege escura ao hover */
}

/* Estado activo do botão de filtro seleccionado — fundo creme, borda bege */
.filter-btn.active {
    color: var(--ink-mid); /* Texto bege — consistente com a paleta do main */
    background-color: var(
        --dot-off
    ); /* Fundo creme suave para marcar o estado activo */
    border-color: var(
        --ink-mid
    ); /* Borda bege escura para distinguir dos inativos */
}

/* ── GRELHA DE PROJECTOS ── */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(
        3,
        1fr
    ); /* 3 colunas iguais em ecrãs largos */
    gap: 1.5rem; /* Espaço entre cards */
}

/* ── CARD BASE ── */
.project-card {
    display: flex;
    flex-direction: column; /* Preview em cima, info em baixo */
    background: var(--white);
    border: 1px solid var(--dot-off); /* Borda creme subtil */
    border-radius: 6px;
    overflow: hidden; /* Corta o iframe/placeholder nos cantos arredondados */
    transition:
        box-shadow 0.25s ease,
        /* Sombra suave ao hover (apenas em cards com conteúdo) */ opacity 0.3s
            ease; /* Para o efeito de esconder/mostrar via JS */
}

/* Hover em cards COM conteúdo: sombra suave SEM subir (translateY removido a pedido) */
.project-card:not(.project-card--placeholder):hover {
    box-shadow: 0 8px 24px rgba(17, 16, 16, 0.07); /* Sombra delicada — sem mover o card */
}

/* Cards PLACEHOLDER: sem hover visual, sem cursor de ponteiro, sem interacção */
.project-card--placeholder {
    cursor: default; /* Cursor normal — indica que não é clicável */
    pointer-events: none; /* Desactiva TODOS os eventos de rato (hover, clique, etc.) */
}

/* Classe adicionada via JS ao filtrar — esconde cards que não correspondem ao filtro */
.project-card.hidden {
    display: none;
}

/* ── ÁREA DE PRÉ-VISUALIZAÇÃO ── */
.card-preview {
    position: relative; /* Necessário para posicionar o overlay e o iframe em absoluto */
    width: 100%;
    aspect-ratio: 16 / 10; /* Proporção fixa: todos os previews têm a mesma altura */
    overflow: hidden; /* Corta o iframe que ultrapassa os limites */
    background: var(--surface); /* Fundo creme enquanto o iframe carrega */
}

/* iframe dentro do preview: escala 50% para caber na área sem scrollbar */
.card-preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* O dobro da largura... */
    height: 200%; /* ...e da altura... */
    transform: scale(
        0.5
    ); /* ...depois reduzido a metade via transform = pré-visualização */
    transform-origin: top left; /* O ponto de origem da escala é o canto superior esquerdo */
    border: none; /* Remove a borda padrão do iframe */
    pointer-events: none; /* O iframe não recebe cliques — o overlay trata disso */
    background: var(--white);
}

/* Captura de ecrã estática via image.thum.io — substitui o iframe quando o site bloqueia embedding.
   Preenche todo o .card-preview sem distorção, tal como faria um iframe. */
.card-screenshot {
    position: absolute; /* Sobrepõe toda a área do .card-preview */
    inset: 0; /* top/right/bottom/left = 0 — cobre o contentor completamente */
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    object-fit: cover; /* Corta as margens em vez de distorcer — mantém proporções */
    object-position: top; /* Mostra o topo da página, a área mais reconhecível do site */
    display: block; /* Remove o espaço extra que <img> tem por baixo quando inline */
}

/* Placeholder para cards sem URL publicada — fundo creme, só tem o "?" */
.card-preview--placeholder {
    background: var(--surface); /* Fundo ligeiramente acinzentado */
}

/* Contentor interno do placeholder: centra o "?" vertical e horizontalmente */
.placeholder-inner {
    position: absolute;
    inset: 0; /* Ocupa toda a área do card-preview */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Símbolo "?" nos cards sem conteúdo */
.placeholder-glyph {
    font-family:
        "EB Garamond", Georgia, serif; /* Fonte serif do site — coerência tipográfica */
    font-size: 2.5rem; /* Grande o suficiente para ser visível */
    font-style: italic; /* Itálico — harmoniza com o estilo geral */
    color: var(--ink-faint); /* Bege muito claro — discreto */
    user-select: none; /* Impede selecção acidental do símbolo */
}

/* ── OVERLAY (apenas em cards COM conteúdo) ── */
/* Camada invisível sobre o preview que escurece ao hover e redireciona ao clicar */
.card-overlay {
    position: absolute;
    inset: 0; /* Cobre toda a área do card-preview */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 16, 16, 0); /* Começa completamente transparente */
    transition: background 0.25s ease; /* Transição suave para o escurecimento */
    text-decoration: none;
}

/* Ao passar o rato sobre o preview, o overlay escurece */
.card-preview:hover .card-overlay {
    background: rgba(17, 16, 16, 0.45); /* Escurecimento de 45% */
}

/* Ícone dentro do overlay (globo para Web, pinguim para Linux) */
.overlay-icon {
    color: var(--white); /* Ícone branco sobre fundo escurecido */
    font-size: 1.2rem; /* Tamanho generoso para ser facilmente visível */
    opacity: 0; /* Começa invisível */
    transform: scale(0.8); /* Começa ligeiramente menor */
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* Ao hover, o ícone aparece e cresce suavemente */
.card-preview:hover .overlay-icon {
    opacity: 1;
    transform: scale(1); /* Tamanho natural */
}

/* ── INFORMAÇÃO DO CARD ── */
.card-info {
    padding: 1rem 1.1rem 1.2rem; /* Espaçamento interno generoso */
    flex: 1; /* Cresce para preencher o espaço restante abaixo do preview */
    display: flex;
    flex-direction: column;
    gap: 0.3rem; /* Espaço entre tag, nome e descrição */
}

/* Linha com tag de categoria e ano */
.card-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.1rem;
}

/* Etiqueta de categoria (WEB, LINUX, etc.) */
.card-tag {
    font-family: "DM Mono", monospace;
    font-size: 0.48rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dot-on); /* Bege escuro/terra — distingue-se do texto normal */
}

/* Ano do projecto */
.card-year {
    font-family: "DM Mono", monospace;
    font-size: 0.48rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--ink-faint); /* Bege muito claro — informação secundária */
}

/* Nome do projecto — em itálico serif, beje médio */
.card-name {
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 400;
    font-style: italic;
    color: var(--ink-mid); /* Bege médio — consistente com paleta do main */
    line-height: 1.2;
}

/* Descrição curta do projecto */
.card-desc {
    font-family: "EB Garamond", Georgia, serif;
    font-size: 0.875rem;
    color: var(--ink-mid); /* Bege médio — mesma cor do nome */
    line-height: 1.55;
    margin-top: 0.1rem;
}

/* ── ESTADO VAZIO ── */
/* Mostrado pelo JS quando nenhum card corresponde ao filtro activo */
.empty-state {
    padding: 4rem 0;
    text-align: center;
}

.empty-state p {
    font-family: "DM Mono", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    text-transform: uppercase;
}

/* ── FOOTER ── */
/* Footer estático (não sticky): flui naturalmente no fim da página ao deslocar */
/* Tem margem superior para dar o espaço em baixo pedido */
.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: var(--bar-height); /* Altura fixa igual ao topo */
    margin-top: 1rem; /* Reduzido de 3rem → 1rem para uniformidade com o padding do page-content */
    padding-bottom: 0.75rem; /* Reduzido de 1.5rem → 0.75rem — rodapé mais compacto */
    background-color: var(--white);
}

/* Texto de copyright */
.footer-center {
    font-family: "DM Mono", monospace;
    font-size: 0.55rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--ink-mid);
    white-space: nowrap; /* Impede que o texto quebre em múltiplas linhas */
}

/* Modificador que centra o único filho do footer (o copyright) */
.footer--minimal {
    justify-content: center; /* Centra o span de copyright horizontalmente */
}

/* ── RESPONSIVO ── */
/* Em tablets: 2 colunas */
@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* Passa de 3 para 2 colunas */
    }
}

/* Em telemóveis: 1 coluna, copyright escondido para poupar espaço */
@media (max-width: 560px) {
    .projects-grid {
        grid-template-columns: 1fr; /* Uma coluna em ecrãs pequenos */
    }
    .footer-center {
        display: none; /* Esconde o copyright em ecrãs muito pequenos */
    }
}