/**
 * Ficha técnica pública.
 *
 * Densa e escaneável: o leitor veio buscar um dado específico numa lista de dezenas. Nada
 * de card inflado, nada de badge por linha. Cores e fonte vêm do tema; aqui só estrutura,
 * espaçamento e divisórias discretas.
 *
 * Tudo escopado em .affiliate-specs — nenhum seletor global.
 */

.affiliate-specs {
    margin: 2rem 0;
}

.affiliate-specs__title {
    font-size: 1.375rem;
    margin: 0 0 1rem;
}

/**
 * Duas colunas quando há espaço horizontal: uma ficha de 50 linhas numa coluna só é uma
 * rolagem enorme ao lado de espaço vazio.
 *
 * COLUNAS CSS E NÃO GRID, de propósito. Com grid, cada linha da grade fica com a altura do
 * item mais alto: um grupo de 11 características ao lado de um de 4 abre um buraco branco
 * até a próxima linha começar. O fluxo de múltiplas colunas não tem linhas — o conteúdo
 * escorre e o navegador equilibra as alturas sozinho, que é o efeito que masonry daria,
 * sem JavaScript nenhum.
 *
 * A ordem de leitura passa a ser vertical (desce a primeira coluna, depois a segunda), que
 * é como uma ficha técnica é percorrida de qualquer forma.
 */
.affiliate-specs__grid {
    column-gap: 2rem;
}

@media (min-width: 768px) {
    .affiliate-specs__grid {
        column-count: 2;
    }

    /* Grupo único: as colunas descem para as linhas.
       O contêiner volta a uma coluna (senão o grupo indivisível ficaria espremido
       em metade da largura) e é a <dl> que se divide em duas. Cada par nome/valor
       continua inteiro, porque quebrar um par ao meio entre colunas deixaria o
       rótulo órfão do seu valor. */
    .affiliate-specs__grid--unico {
        column-count: 1;
    }

    .affiliate-specs__grid--unico .affiliate-specs__list {
        column-count: 2;
        column-gap: 2rem;
    }

    .affiliate-specs__grid--unico .affiliate-specs__row {
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
}

.affiliate-specs__group {
    min-width: 0;
    /* Um grupo nunca é partido no meio entre duas colunas. */
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    /* Substitui o gap vertical que o grid dava. */
    margin-bottom: 1.5rem;
}

.affiliate-specs__group:last-child {
    margin-bottom: 0;
}

.affiliate-specs__group-title {
    font-size: .9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 .5rem;
    padding-bottom: .375rem;
    border-bottom: 2px solid rgba(128, 128, 128, .3);
}

.affiliate-specs__list {
    margin: 0;
    padding: 0;
}

/**
 * Rótulo à esquerda, valor à direita. O rótulo recebe um fundo sutil para o olho encontrar
 * a linha certa quando percorre a coluna, que é como uma ficha técnica é lida.
 */
.affiliate-specs__row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 0 .75rem;
    border-bottom: 1px solid rgba(128, 128, 128, .2);
}

.affiliate-specs__row:last-child {
    border-bottom: 0;
}

.affiliate-specs__name,
.affiliate-specs__value {
    margin: 0;
    padding: .5rem .5rem .5rem 0;
    font-size: .9375rem;
    line-height: 1.4;
    /* Valores como listas longas de processadores quebram dentro da célula. */
    overflow-wrap: anywhere;
}

.affiliate-specs__name {
    font-weight: 600;
    opacity: .75;
    padding-left: .5rem;
    background: rgba(128, 128, 128, .06);
}

/**
 * No celular as duas colunas ficariam com ~140px cada e tanto o rótulo quanto o valor
 * quebrariam em várias linhas. Empilhado, cada um usa a largura inteira.
 */
@media (max-width: 575px) {
    .affiliate-specs__row {
        grid-template-columns: minmax(0, 1fr);
        padding: .5rem 0;
    }

    .affiliate-specs__name {
        background: transparent;
        padding: 0;
        font-size: .8125rem;
        opacity: .65;
    }

    .affiliate-specs__value {
        padding: .125rem 0 0;
    }
}