/**
 * mod_mainarticles — Layout CCH Milestones (NSI-1684)
 * @version CVS: 8.6.0
 *
 * Linha do tempo com accordion, apoiada nos tokens do template CCH
 * (template-shaper-helix-ultimate-cch/css/variaveis.css), 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.
 *
 * Namespace exclusivo .cch-milestones / .cch-milestone. Nenhuma regra global e
 * nenhuma sobrescrita de classe do Bootstrap: só o `.collapse` do próprio
 * Bootstrap é usado, sem ser redefinido.
 */

.cch-milestones {
    --cch-ms-red: var(--cch-color-brand, #8D1558);
    --cch-ms-dark: var(--cch-color-brand-dark, #55123B);
    --cch-ms-surface: var(--cch-color-surface, #F5F3F0);
    --cch-ms-card-bg: var(--cch-color-F, #FFFFFF);

    /* Hairlines e cinzas de apoio não têm token no template. */
    --cch-ms-card-border: #E7D5DF;
    --cch-ms-divider: #F0E2EA;
    --cch-ms-text: #3D2A35;
    --cch-ms-muted: var(--cch-color-brand-neutral, #B5ACA1);

    /*
     * Geometria da linha do tempo. Com box-sizing border-box o `dot` é o
     * diâmetro TOTAL do marcador, borda inclusa.
     *
     * O deslocamento horizontal e o topo são derivados do diâmetro, de modo que
     * mudar `--cch-ms-dot` mantém o marcador centrado no trilho e na mesma
     * altura: basta trocar um número.
     */
    --cch-ms-rail: 3px;
    --cch-ms-rail-left: 11px;
    --cch-ms-dot: 23px;
    --cch-ms-gutter: 34px;

    /* Centro do trilho: 11 + 1,5 = 12,5px. */
    --cch-ms-dot-offset: calc(
        var(--cch-ms-rail-left) + var(--cch-ms-rail) / 2 - var(--cch-ms-dot) / 2
    );

    /* Centro vertical do marcador, na altura do badge. */
    --cch-ms-dot-center-y: 33.5px;

    /* Sobrescritos pelos parâmetros do módulo, iguais aos do CCH News. */
    --cch-ms-eyebrow-color: var(--cch-ms-red);
    --cch-ms-title-color: var(--cch-ms-dark);
    --cch-ms-date-color: var(--cch-ms-red);
    --cch-ms-card-title-color: var(--cch-ms-dark);

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

    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: var(--cch-ms-outer-size);
    padding: var(--cch-space-8x, 64px) 0;
    background: var(--cch-ms-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-ms-text);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.cch-milestones__header {
    margin-bottom: var(--cch-space-7x, 56px);
}

.cch-milestones__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-ms-eyebrow-color);
}

.cch-milestones__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-ms-title-color);
}

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

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

/* ─── Trilho da linha do tempo ───────────────────────────────────────────── */

.cch-milestones__timeline {
    position: relative;
    padding-left: var(--cch-ms-gutter);
}

.cch-milestones__timeline::before {
    content: "";
    position: absolute;
    left: var(--cch-ms-rail-left);
    top: 8px;
    bottom: 8px;
    width: var(--cch-ms-rail);
    border-radius: var(--cch-ms-rail);
    background: linear-gradient(var(--cch-ms-red), var(--cch-ms-dark));
}

/* ─── Marco ──────────────────────────────────────────────────────────────── */

.cch-milestone {
    position: relative;
    display: block;
    margin-bottom: var(--cch-space-2x, 16px);
}

.cch-milestone:last-child {
    margin-bottom: 0;
}

.cch-milestone__marker {
    position: absolute;
    left: calc(var(--cch-ms-gutter) * -1);
    transform: translateX(var(--cch-ms-dot-offset));
    top: calc(var(--cch-ms-dot-center-y) - var(--cch-ms-dot) / 2);
    width: var(--cch-ms-dot);
    height: var(--cch-ms-dot);
    border: 4px solid var(--cch-ms-red);
    border-radius: 50%;
    background: var(--cch-ms-card-bg);
}

.cch-milestone__card {
    overflow: hidden;
    background: var(--cch-ms-card-bg);
    border: 1px solid var(--cch-ms-card-border);
    border-radius: var(--cch-radius-md, 16px);
    transition: box-shadow .18s ease, border-color .18s ease;
}

.cch-milestone__card:hover {
    box-shadow: 0 10px 24px rgba(141, 21, 88, .16);
}

/* Marco aberto: o estado real está no aria-expanded do botão. */
.cch-milestone__card:has(.cch-milestone__button[aria-expanded="true"]) {
    border-color: var(--cch-ms-red);
    box-shadow: 0 10px 24px rgba(141, 21, 88, .16);
}

/* ─── Cabeçalho clicável ─────────────────────────────────────────────────── */

.cch-milestone__button {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cch-milestone__date {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: var(--cch-space-2x, 16px) 12px;
    background: var(--cch-ms-date-color);
    color: var(--cch-color-F, #FFFFFF);
    text-align: center;
    line-height: 1.1;
}

.cch-milestone__day {
    font-size: 1.35rem;
    font-weight: var(--cch-font-weight-extrabold, 800);
}

.cch-milestone__month {
    font-size: .95rem;
    font-weight: var(--cch-font-weight-extrabold, 800);
    text-transform: uppercase;
}

.cch-milestone__year {
    margin-top: 2px;
    font-size: .82rem;
    font-weight: var(--cch-font-weight-semibold, 600);
    opacity: .85;
}

.cch-milestone__heading {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    padding: 18px 22px;
}

.cch-milestone__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-ms-card-title-color);
}

.cch-milestone__button:hover .cch-milestone__title,
.cch-milestone__button:focus-visible .cch-milestone__title {
    color: var(--cch-ms-red);
}

/* ─── Chevron: gira pelo aria-expanded, sem JavaScript ───────────────────── */

.cch-milestone__chevron {
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: var(--cch-font-weight-bold, 700);
    line-height: 1;
    color: var(--cch-ms-red);
    transition: transform .25s ease;
}

.cch-milestone__button[aria-expanded="true"] .cch-milestone__chevron {
    transform: rotate(90deg);
}

/* ─── Conteúdo aberto ────────────────────────────────────────────────────── */

.cch-milestone__content {
    padding: var(--cch-space-1x, 8px) 28px 30px;
    border-top: 1px solid var(--cch-ms-divider);
}

.cch-milestone__figure {
    margin: var(--cch-space-3x, 24px) 0 var(--cch-space-1x, 8px);
}

.cch-milestone__image {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    background: var(--cch-ms-surface);
}

.cch-milestone__caption {
    margin: var(--cch-space-1x, 8px) 0 0;
    font-size: var(--cch-font-size-caption-desktop, 12px);
    color: var(--cch-ms-muted);
}

.cch-milestone__text {
    margin-top: 18px;
    font-size: var(--cch-font-size-body-desktop, 16px);
    line-height: var(--cch-line-height-body, 1.5);
    color: var(--cch-ms-text);
}

/* O texto vem do editor: o espaçamento é aplicado só dentro deste bloco. */
.cch-milestone__text > :first-child {
    margin-top: 0;
}

.cch-milestone__text > :last-child {
    margin-bottom: 0;
}

.cch-milestone__text img {
    max-width: 100%;
    height: auto;
}

.cch-milestone__text a {
    color: var(--cch-ms-red);
}

/* ─── Botão do artigo (só no modo "Intro") ───────────────────────────────── */

.cch-milestone__readmore {
    display: inline-block;
    margin-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-ms-red);
}

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

/* Complemento acessível do botão — o link precisa dizer para onde vai. */
.cch-milestone__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-milestones {
        padding: var(--cch-space-7x, 56px) 0;
        font-size: var(--cch-font-size-body-mobile, 14px);
    }

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

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

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

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

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

    .cch-milestones__intro,
    .cch-milestones__empty,
    .cch-milestone__text {
        font-size: var(--cch-font-size-body-mobile, 14px);
    }

    .cch-milestone__readmore {
        font-size: var(--cch-font-size-small-mobile, 12px);
    }

    /* A linha continua, mas encostada na borda para sobrar largura ao card. */
    .cch-milestones__timeline {
        --cch-ms-gutter: 22px;
    }

    .cch-milestone__marker {
        --cch-ms-dot-center-y: 28px;
    }

    .cch-milestone__date {
        min-width: 72px;
        padding: 12px 8px;
    }

    .cch-milestone__day {
        font-size: 1.15rem;
    }

    .cch-milestone__month {
        font-size: .85rem;
    }

    .cch-milestone__heading {
        gap: 10px;
        padding: 12px 14px;
    }

    .cch-milestone__title {
        font-size: var(--cch-font-size-h3-mobile, 16px);
    }

    .cch-milestone__content {
        padding: var(--cch-space-1x, 8px) 14px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cch-milestone__card,
    .cch-milestone__chevron {
        transition: none;
    }
}