/* ==========================================================================
   Página de projeto (project.php). Usa também service.css (topo, secções, cartões, texto corrido).
   As imagens são "slots" (project_figure() em inc/content.php): cada tipo tem a proporção exata do ficheiro a exportar
   (PROJECT_KINDS), por isso a página não salta quando a imagem chega.
   ========================================================================== */

/* Factos: ano, plataformas, o que fizemos ----------------------------------- */

.prj-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.5rem 3rem;
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--line);
}

.prj-facts dt {
    font-family: var(--font-label);
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-label);
    color: var(--fg-muted);
}

.prj-facts dd {
    margin-top: 0.35rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Subtítulo dentro de uma secção (ex.: "Para quem") */
.prj-sub {
    margin-bottom: 1.25rem;
}

.prj-points {
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Imagens ---------------------------------------------------------------------- */

.shot {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.shot__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: color-mix(in oklab, var(--accent) 6%, var(--bg));
}

.shot__frame picture,
.shot__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shot figcaption {
    font-size: var(--fs-small);
    color: var(--fg-muted);
    text-wrap: balance;
}

/* Proporção de cada tipo = a do ficheiro a exportar (0-imagesizes.md) */
.shot--cover .shot__frame {
    aspect-ratio: 2400 / 1350;
    border-radius: var(--radius);
}

.shot--phone .shot__frame {
    aspect-ratio: 780 / 1690;
    border-radius: 1.6rem;
}

.shot--watch .shot__frame {
    aspect-ratio: 800 / 1000;
    border-radius: 2rem;
}

.shot--hud .shot__frame {
    aspect-ratio: 1488 / 1248; /* os HUD são em paisagem */
    border-radius: 0.75rem;
}

.shot--desktop .shot__frame {
    aspect-ratio: 1920 / 1080; /* ecrã de computador, 16:9 */
    border-radius: 0.75rem;
}

/* Espaço ainda sem imagem (SHOW_IMAGE_SLOTS): o nome do ficheiro e o tamanho a exportar, lidos do HTML */
.shot__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.3rem;
    padding: 0.75rem;
    text-align: center;
    font-family: var(--font-label);
    font-size: 0.8125rem;
    letter-spacing: var(--tracking-label);
    color: var(--fg-muted);
    background: repeating-linear-gradient(135deg, transparent 0 0.6rem, color-mix(in oklab, var(--accent) 9%, transparent) 0.6rem 0.65rem);
    overflow-wrap: anywhere;
}

.shot__empty::before {
    content: attr(data-name);
}

.shot__empty::after {
    content: attr(data-size);
    color: var(--accent);
    font-weight: 600;
}

/* Grelhas por plataforma */
.prj-shots {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: start;
}

.prj-shots--phone {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prj-shots--watch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 56rem;
}

/* HUD em paisagem e cheios de texto pequeno: um por linha, grandes, para se ler (não lado a lado) */
.prj-shots--hud {
    grid-template-columns: minmax(0, 1fr);
    max-width: 72rem;
}

/* Ecrãs de computador (back office): um por linha em mobile, e dois lado a lado a partir de 900 px */
.prj-shots--desktop {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .prj-shots--phone {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .prj-shots--desktop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Três ecrãs de telemóvel (ex.: os 3 níveis de risco do AllRisk): lado a lado a partir de 900 px, numa faixa mais estreita para não ficarem enormes.
   Em mobile são 2 colunas e o terceiro ecrã fica sozinho, centrado, na linha de baixo. */
.prj-shots--phone.prj-shots--three > .shot:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - clamp(1rem, 2.5vw, 1.75rem)) / 2);
}

@media (min-width: 900px) {
    .prj-shots--phone.prj-shots--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 56rem;
    }

    .prj-shots--phone.prj-shots--three > .shot:last-child {
        grid-column: auto;
        justify-self: stretch;
        width: auto;
    }
}

/* Secção com um só ecrã de telemóvel: o texto de um lado e o ecrã do outro (alterna de lado); em mobile, um por baixo do outro */
.prj-split {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.prj-shots.prj-split__shots {
    grid-template-columns: minmax(0, 1fr);
    max-width: 20rem;
}

@media (min-width: 900px) {
    .prj-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
        gap: clamp(3rem, 6vw, 6rem);
    }

    .prj-split--flip {
        grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    }

    .prj-split--flip .prj-split__shots {
        order: -1;
    }

    .prj-split .prj-split__shots {
        max-width: none;
    }
}

/* Com 2 ou 3 ecrãs (ex.: o envio e a sua confirmação; os 3 níveis de risco) ficam lado a lado. Em mobile são 2 colunas pequenas (o 3.º, se houver, fica
   centrado por baixo). Em ecrã largo o texto fica de um lado e o par ou o trio do outro (alterna de lado); em portátil/tablet (900–1279 px) o texto ia
   ficar estreito, por isso os ecrãs vão por baixo do texto. */
.prj-split--pair .prj-shots.prj-split__shots,
.prj-split--trio .prj-shots.prj-split__shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 30rem;
}

@media (min-width: 900px) {
    .prj-split--trio .prj-shots.prj-split__shots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 56rem;
    }
}

@media (min-width: 900px) and (max-width: 1279.98px) {
    .prj-split--pair,
    .prj-split--pair.prj-split--flip,
    .prj-split--trio,
    .prj-split--trio.prj-split--flip {
        grid-template-columns: minmax(0, 1fr);
    }

    .prj-split--pair.prj-split--flip .prj-split__shots,
    .prj-split--trio.prj-split--flip .prj-split__shots {
        order: 0;
    }

    .prj-split--pair .prj-shots.prj-split__shots {
        max-width: 42rem;
    }
}

@media (min-width: 1280px) {
    .prj-split--pair {
        grid-template-columns: minmax(0, 1fr) minmax(0, 42rem);
    }

    .prj-split--pair.prj-split--flip {
        grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
    }

    .prj-split--trio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 48rem);
    }

    .prj-split--trio.prj-split--flip {
        grid-template-columns: minmax(0, 48rem) minmax(0, 1fr);
    }

    .prj-split--pair .prj-shots.prj-split__shots,
    .prj-split--trio .prj-shots.prj-split__shots {
        max-width: none;
    }
}

/* Temas: um quadro de cores por tema, sobre o fundo do próprio tema ------------------
   As cores são as do brief (superfícies, marca, telemetria), por isso são fixas e não seguem o tema do site; os textos têm o
   contraste calculado à mão (≥ 7:1 o texto, ≥ 4,5:1 o secundário). O raio de borda é o de cada sistema: 4–8 px (tático), 8–12 px (luxo). */

.prj-themes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    max-width: 56rem;
}

.prj-theme {
    display: grid;
    gap: 1.75rem;
    align-content: start;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line-strong);
}

.prj-theme--dark {
    --theme-fg: #eaf1ee;
    --theme-muted: #9fb0a9;
    --theme-radius: 0.4rem;
    background: #090f0e;
}

.prj-theme--light {
    --theme-fg: #0f1513;
    --theme-muted: #475569;
    --theme-radius: 0.75rem;
    background: #ffffff;
}

.prj-theme--linen {
    --theme-fg: #1a1c1a;
    --theme-muted: #54433e;
    --theme-radius: 0.5rem;
    background: #faf9f6;
}

.prj-theme--obsidian {
    --theme-fg: #ffffff;
    --theme-muted: #94a3b8;
    --theme-radius: 1.25rem;
    background: #0a0b0e;
}

.prj-theme--night {
    --theme-fg: #f0f0f5;
    --theme-muted: #a3a3b8;
    --theme-radius: 1rem;
    background: #0a0a0f;
}

.prj-theme--day {
    --theme-fg: #1a1a2e;
    --theme-muted: #4a4a63;
    --theme-radius: 1rem;
    background: #f5f5f8;
}

.prj-theme--paper {
    --theme-fg: #1c1a19;
    --theme-muted: #575453;
    --theme-radius: 0; /* o site tem cantos retos */
    background: #f3f2f2;
}

.prj-theme--ink {
    --theme-fg: #f5f2f0;
    --theme-muted: #b9b6b4;
    --theme-radius: 0;
    background: #151312;
}

.prj-theme {
    border-radius: var(--theme-radius);
    color: var(--theme-fg);
}

.prj-theme__t {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.prj-swatches {
    display: grid;
    gap: 1.5rem;
}

.prj-swatches dt {
    margin-bottom: 0.6rem;
    font-family: var(--font-label);
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-label);
    color: var(--theme-muted);
}

.prj-swatches dd {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.prj-swatch-item {
    display: grid;
    gap: 0.4rem;
    justify-items: start;
}

.prj-swatch {
    width: 4rem;
    height: 4rem;
    border-radius: var(--theme-radius);
    border: 1px solid color-mix(in oklab, var(--theme-fg) 22%, transparent);
    background: var(--sw);
}

.prj-swatch-item code {
    font-family: var(--font-label);
    font-size: var(--fs-small);
    color: var(--theme-muted);
}

/* Botões do fim da página */
.prj-end {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* Um só quadro de cores (ex.: Iberian Estates): não precisa de ocupar a largura toda */
.prj-themes:has(.prj-theme:only-child) {
    max-width: 30rem;
}

/* Índice da página, navegação entre projetos e fim do artigo --------------------------- */

/* Âncoras: ao chegar por #<id> o título não fica debaixo do header */
.prj-body [id] {
    scroll-margin-top: var(--header-h);
}

.prj-toc {
    padding-block: clamp(1.75rem, 4vw, 3rem);
}

/* Telemóvel: uma só linha que se desliza na horizontal (16 entradas empilhadas seriam um ecrã inteiro) */
.prj-toc__list {
    counter-reset: toc;
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem calc(var(--gutter) * -1) 0;
    padding: 0.25rem var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}

.prj-toc__list::-webkit-scrollbar {
    display: none;
}

.prj-toc__list li {
    flex: none;
    scroll-snap-align: start;
}

.prj-toc__link {
    counter-increment: toc;
    display: inline-flex;
    gap: 0.6em;
    align-items: baseline;
    max-width: 78vw;
    padding: 0.4em 0.75em;
    border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
    border-radius: 0.25rem;
    font-family: var(--font-label);
    font-size: 0.9375rem;
    letter-spacing: var(--tracking-label);
    white-space: normal;
    transition: background-color 0.3s var(--ease);
}

.prj-toc__link::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--accent);
    font-weight: 600;
}

.prj-toc__link:hover,
.prj-toc__link:focus-visible {
    background: color-mix(in oklab, var(--accent) 16%, transparent);
}

@media (min-width: 900px) {
    /* Computador: lista numerada em 3 colunas, com um filete por linha */
    .prj-toc__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 clamp(1.5rem, 3vw, 3rem);
        margin: 0.75rem 0 0;
        padding: 0;
        overflow: visible;
    }

    .prj-toc__list li {
        border-top: 1px solid var(--line);
    }

    .prj-toc__link {
        display: flex;
        width: 100%;
        max-width: none;
        padding: 0.65em 0.25em;
        border: 0;
        border-radius: 0;
        font-size: 1rem;
    }
}

/* Botão flutuante: "ir para o fim" no início da página e "voltar ao topo" mais abaixo (project-dock.js) */
.prj-dock {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 50;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    color: var(--fg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.prj-dock.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.prj-dock:hover,
.prj-dock:focus-visible {
    border-color: var(--accent);
}

.prj-dock .icon {
    grid-area: 1 / 1;
    width: 1.25rem;
    height: 1.25rem;
}

.prj-dock__up {
    display: none;
}

.prj-dock.is-up .prj-dock__up {
    display: block;
}

.prj-dock.is-up .prj-dock__down {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .prj-dock {
        transition: none;
    }
}