/**
 * mod_mainarticles — Layout CCH News (NSI-1684)
 * @version CVS: 8.6.0
 *
 * Estrutura visual apoiada nos tokens do template CCH
 * (template-shaper-helix-ultimate-cch/css/variaveis.css): cores, tipografia,
 * espaçamentos, raios e container saem de lá, com fallback embutido para o caso
 * de o módulo ser publicado fora do template.
 *
 * A fonte Noto Sans já é carregada pelo template — nada de @import aqui.
 *
 * Todas as regras usam o namespace .cch-news / .cch-news-card: nenhum seletor
 * global (h2, img, a, .card, .row, .container...) é tocado.
 */

.cch-news {
    /* ── Tokens do template ─────────────────────────────────────────────── */
    --cch-news-red: var(--cch-color-brand, #8D1558);
    --cch-news-dark: var(--cch-color-brand-dark, #55123B);
    --cch-news-surface: var(--cch-color-surface, #F5F3F0);
    --cch-news-card-bg: var(--cch-color-F, #FFFFFF);

    /* Hairline do card e cinza do corpo não têm token no template. */
    --cch-news-card-border: #E7E0DA;
    --cch-news-text: #5A4450;

    /* ── Sobrescritos pelos parâmetros do módulo ────────────────────────── */
    --cch-news-eyebrow-color: var(--cch-news-red);
    --cch-news-title-color: var(--cch-news-dark);
    --cch-news-date-color: var(--cch-news-red);
    --cch-news-card-title-color: var(--cch-news-dark);

    /* Estrutura: área completa (faixa) e área da estrutura (conteúdo). */
    --cch-news-bg: var(--cch-news-surface);
    --cch-news-outer-size: 100%;
    --cch-news-inner-size: 1320px;
    --cch-news-inner-bg: transparent;

    /* Recorte por linha (line-clamp), não por caractere. */
    --cch-news-title-lines: 3;
    --cch-news-excerpt-lines: 4;

    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: var(--cch-news-outer-size);
    padding: var(--cch-space-8x, 64px) 0;
    background: var(--cch-news-bg);
    font-family: var(--cch-font-family-base, "Noto Sans", sans-serif);
    font-size: var(--cch-font-size-body-desktop, 16px);
    line-height: var(--cch-line-height-body, 1.5);
    color: var(--cch-news-text);
}

/* ─── Área completa: alinhamento da faixa quando não é largura total ─────── */

.cch-news--outer-full {
    --cch-news-outer-size: 100%;
}

.cch-news--outer-left {
    margin-right: auto;
    margin-left: 0;
}

.cch-news--outer-center {
    margin-right: auto;
    margin-left: auto;
}

.cch-news--outer-right {
    margin-right: 0;
    margin-left: auto;
}

.cch-news *,
.cch-news *::before,
.cch-news *::after {
    box-sizing: border-box;
}

/* ─── Área da estrutura: o container do conteúdo dentro da faixa ─────────── */

.cch-news__wrap {
    max-width: var(--cch-news-inner-size);
    margin: 0 auto;
    padding: 0 var(--cch-space-3x, 24px);
    background: var(--cch-news-inner-bg);
}

.cch-news__wrap--left {
    margin-right: auto;
    margin-left: 0;
}

.cch-news__wrap--center {
    margin-right: auto;
    margin-left: auto;
}

.cch-news__wrap--right {
    margin-right: 0;
    margin-left: auto;
}

/* Com cor de fundo própria a área da estrutura vira caixa e ganha respiro. */
.cch-news__wrap--boxed {
    padding: var(--cch-space-3x, 24px);
    border-radius: var(--cch-radius-md, 16px);
}

/* ─── Cabeçalho da seção ─────────────────────────────────────────────────── */

.cch-news__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cch-space-3x, 24px);
    margin-bottom: var(--cch-space-7x, 56px);
}

.cch-news__header-text {
    flex: 1 1 420px;
    min-width: 0;
}

.cch-news__eyebrow {
    display: inline-block;
    margin: 0 0 var(--cch-space-1x, 8px);
    font-size: var(--cch-font-size-caption-desktop, 12px);
    font-weight: var(--cch-font-weight-bold, 700);
    letter-spacing: var(--cch-letter-spacing-brand, .15em);
    text-transform: uppercase;
    color: var(--cch-news-eyebrow-color);
}

.cch-news__title {
    margin: 0;
    font-size: var(--cch-font-size-h2-desktop, 28px);
    line-height: var(--cch-line-height-h2, 1.25);
    font-weight: var(--cch-font-weight-extrabold, 800);
    color: var(--cch-news-title-color);
}

.cch-news__intro {
    margin: var(--cch-space-1x, 8px) 0 0;
    max-width: 58ch;
    font-size: var(--cch-font-size-body-desktop, 16px);
    line-height: var(--cch-line-height-body, 1.5);
    color: var(--cch-news-text);
}

.cch-news__all-link {
    display: inline-flex;
    align-items: center;
    gap: var(--cch-space-1x, 8px);
    padding: 11px var(--cch-space-3x, 24px);
    border: 1.5px solid var(--cch-news-red);
    border-radius: var(--cch-radius-full, 9999px);
    font-size: var(--cch-font-size-small-desktop, 14px);
    font-weight: var(--cch-font-weight-bold, 700);
    line-height: var(--cch-line-height-tight, 1.16);
    white-space: nowrap;
    text-decoration: none;
    color: var(--cch-news-red);
    background: transparent;
    transition: background-color .2s ease, color .2s ease;
}

.cch-news__all-link:hover,
.cch-news__all-link:focus {
    background: var(--cch-news-red);
    color: var(--cch-color-F, #FFFFFF);
    text-decoration: none;
}

/* ─── Grade ──────────────────────────────────────────────────────────────── */

/*
 * Flexbox com quebra, não grade fixa: a linha acomoda quantos cards couberem na
 * largura real do bloco e, quando não cabe mais de um, cada card ocupa a linha
 * inteira. Media query não resolveria: ela mede a janela, e este bloco também é
 * publicado em posições estreitas — ao lado da linha do tempo de Milestones, por
 * exemplo — onde a janela continua larga.
 */
.cch-news__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cch-space-3x, 24px);
    align-items: stretch;
}

/*
 * O `flex-basis` de um terço é o teto: em larguras grandes cabem três cards por
 * linha, nunca quatro. O `min-width` é o ponto de quebra — abaixo dele o card
 * desce para a linha seguinte e cresce até a largura toda do bloco.
 */
.cch-news__grid > .cch-news-card {
    flex: 1 1 calc((100% - 2 * var(--cch-space-3x, 24px)) / 3);
    min-width: min(100%, var(--cch-news-card-min, 260px));
}

/* ─── Rodapé: o botão "All news" fecha o bloco ───────────────────────────── */

.cch-news__footer {
    margin-top: var(--cch-space-3x, 24px);
}

.cch-news__footer .cch-news__all-link {
    width: 100%;
    justify-content: center;
}

.cch-news__empty {
    margin: 0;
    font-size: var(--cch-font-size-body-desktop, 16px);
    color: var(--cch-news-text);
}

/* ─── Card ───────────────────────────────────────────────────────────────── */

.cch-news-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--cch-news-card-bg);
    border: 1px solid var(--cch-news-card-border);
    border-radius: var(--cch-radius-md, 16px);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cch-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(85, 18, 59, .14);
}

.cch-news-card__image-link {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.cch-news-card__image {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    background: var(--cch-news-surface);
}

.cch-news-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--cch-space-1x, 8px);
    padding: var(--cch-space-3x, 24px);
}

.cch-news-card__date {
    display: block;
    font-size: var(--cch-font-size-caption-desktop, 12px);
    font-weight: var(--cch-font-weight-bold, 700);
    letter-spacing: var(--cch-letter-spacing-wide, .08em);
    text-transform: uppercase;
    color: var(--cch-news-date-color);
}

.cch-news-card__title {
    margin: 0;
    font-size: var(--cch-font-size-h3-desktop, 18px);
    line-height: var(--cch-line-height-h3, 1.3);
    font-weight: var(--cch-font-weight-bold, 700);
    color: var(--cch-news-card-title-color);

    /* Corta em N linhas inteiras, sem quebrar no meio da última. */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--cch-news-title-lines, 3);
    line-clamp: var(--cch-news-title-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(
        var(--cch-news-title-lines, 3) *
        var(--cch-line-height-h3, 1.3) *
        var(--cch-font-size-h3-desktop, 18px)
    );
}

.cch-news-card__title-link {
    color: inherit;
    text-decoration: none;
}

.cch-news-card__title-link:hover,
.cch-news-card__title-link:focus {
    color: var(--cch-news-red);
}

.cch-news-card__excerpt {
    margin: 0;
    font-size: var(--cch-font-size-small-desktop, 14px);
    line-height: var(--cch-line-height-body, 1.5);
    color: var(--cch-news-text);

    /* Corta em N linhas inteiras, sem quebrar no meio da última. */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--cch-news-excerpt-lines, 4);
    line-clamp: var(--cch-news-excerpt-lines, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(
        var(--cch-news-excerpt-lines, 4) *
        var(--cch-line-height-body, 1.5) *
        var(--cch-font-size-small-desktop, 14px)
    );
}

.cch-news-card__readmore {
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--cch-space-2x, 16px);
    font-size: var(--cch-font-size-small-desktop, 14px);
    font-weight: var(--cch-font-weight-bold, 700);
    text-decoration: none;
    color: var(--cch-news-red);
}

.cch-news-card__readmore:hover,
.cch-news-card__readmore:focus {
    color: var(--cch-news-dark);
    text-decoration: underline;
}

/* Complemento acessível do "Read more" — o link precisa dizer para onde vai. */
.cch-news-card__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Responsivo ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cch-news {
        padding: var(--cch-space-7x, 56px) 0;
        font-size: var(--cch-font-size-body-mobile, 14px);
    }

    .cch-news__wrap {
        padding: 0 var(--cch-space-2x, 16px);
    }

    .cch-news__wrap--boxed {
        padding: var(--cch-space-2x, 16px);
    }

    .cch-news__header {
        align-items: flex-start;
        margin-bottom: var(--cch-space-3x, 24px);
    }

    .cch-news__eyebrow {
        font-size: var(--cch-font-size-caption-mobile, 11px);
    }

    .cch-news__title {
        font-size: var(--cch-font-size-h2-mobile, 24px);
    }

    .cch-news__intro,
    .cch-news__empty {
        font-size: var(--cch-font-size-body-mobile, 14px);
    }

    .cch-news__grid {
        gap: var(--cch-space-2x, 16px);
    }

    .cch-news-card__title {
        font-size: var(--cch-font-size-h3-mobile, 16px);
        max-height: calc(
            var(--cch-news-title-lines, 3) *
            var(--cch-line-height-h3, 1.3) *
            var(--cch-font-size-h3-mobile, 16px)
        );
    }

    .cch-news-card__date {
        font-size: var(--cch-font-size-caption-mobile, 11px);
    }

    .cch-news-card__excerpt,
    .cch-news-card__readmore,
    .cch-news__all-link {
        font-size: var(--cch-font-size-small-mobile, 12px);
    }

    .cch-news-card__excerpt {
        max-height: calc(
            var(--cch-news-excerpt-lines, 4) *
            var(--cch-line-height-body, 1.5) *
            var(--cch-font-size-small-mobile, 12px)
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .cch-news-card,
    .cch-news__all-link {
        transition: none;
    }

    .cch-news-card:hover {
        transform: none;
    }
}