/* Página Sobre — docs/specs/core/sobre-tecnologias-e-dados-pessoais.md
   =================================================================== */

/* Secção «Tecnologias»
   --------------------
   Os logótipos são os oficiais das marcas e não podem ser recoloridos (R4). O
   fundo do cartão é neutro de propósito: é aí que a paleta do Abrigo entra,
   à volta e não por cima. */

.tecnologias {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.tecnologia {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "logo nome"
        "logo papel";
    align-items: center;
    column-gap: 14px;
    height: 100%;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.tecnologia:hover,
.tecnologia:focus-visible {
    border-color: var(--color-primary);
}

/* A caixa do logótipo tem largura fixa para os nomes alinharem entre cartões,
   e o `contain` garante que nenhuma marca é distorcida (R6). */
.tecnologia__logo {
    grid-area: logo;
    width: 84px;
    height: 28px;
    object-fit: contain;
    object-position: center;
}

/* Símbolos quadrados (PostgreSQL, Scaleway, Claude Code). À mesma altura dos
   wordmarks ocupariam um terço da área e leriam-se como menos importantes —
   medido, ver §2.2 da especificação de implementação. */
.tecnologia__logo--simbolo {
    width: 84px;
    height: 40px;
}

.tecnologia__nome {
    grid-area: nome;
    font-weight: 700;
    color: var(--color-text);
}

.tecnologia__papel {
    grid-area: papel;
    font-size: 0.875rem;
    color: var(--color-text-soft);
}

/* O disclaimer a seguir aos cartões de «Com que é feito»: o Claude Code não
   corre no Abrigo nem tem parceria com a Anthropic. Ver sobre.html. */
.tecnologias__credito {
    font-size: 0.9375rem;
    color: var(--color-text-soft);
    max-width: 60ch;
}

/* A entrada para as Novidades, no fim da secção «Abrigo Virtual». */
.sobre-novidades {
    margin-bottom: 2rem;
}

/* A ligação para a página de Licenciamento — docs/specs/Licenciamento/pagina-de-licenciamento.md, R3. */
.sobre-licenciamento {
    margin: 2rem 0;
}

/* Secção «Dados pessoais»
   ----------------------- */

.dados-onde {
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    width: 100%;
    max-width: 640px;
}

.dados-onde th,
.dados-onde td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.dados-onde th {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-faint);
    border-bottom-color: var(--color-text-faint);
}

.dados-onde td:last-child {
    white-space: nowrap;
    font-weight: 600;
}

/* Em ecrã estreito o «Onde» deixa de caber ao lado; passa a ficar por baixo,
   em vez de espremer as duas colunas. */
@media (max-width: 480px) {
    .dados-onde,
    .dados-onde thead,
    .dados-onde tbody,
    .dados-onde tr,
    .dados-onde th,
    .dados-onde td {
        display: block;
    }

    .dados-onde thead {
        display: none;
    }

    .dados-onde tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--color-border);
    }

    .dados-onde td {
        border: none;
        padding: 2px 0;
    }

    .dados-onde td:last-child {
        white-space: normal;
        color: var(--color-text-soft);
    }
}