/* =================================================================== AC27 HERO section css =================================================================== */
.ac27-hero {
    position: relative;
    padding-block: var(--sp80) var(--sp100);
    background: var(--blue-50);
    border-bottom: 1px solid var(--line);
    overflow: hidden;

    & .ac27-hero__ring {
        position: absolute;
        border: 1px solid var(--blue-100);
        border-radius: var(--r-full);
        pointer-events: none;
    }
    & .ac27-hero__ring--1 { top: -220px; right: -160px; width: 620px; height: 620px; }
    & .ac27-hero__ring--2 { bottom: -260px; left: -200px; width: 520px; height: 520px; }

    & .container { position: relative; z-index: 1; }

    & .ac27-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--sp80);
    }

    /* WordPress: no survey-invite form configured → copy only */
    & .ac27-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }

    & .ac27-hero__copy { position: sticky; top: var(--sp100); }

    & .ac27-hero__crumbs {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--sp8);
        margin-bottom: var(--sp30);
        font-size: var(--f14);
        color: var(--muted);

        & li { display: flex; align-items: center; gap: var(--sp8); }
        & li + li::before { content: "/"; opacity: .5; }
        & a { color: var(--ink); transition: var(--transition); }
        & a:hover { color: var(--primary); }
    }

    & .ac27-hero__eyebrow { margin-bottom: var(--sp25); }

    & .ac27-hero__title { max-width: 640px; }

    & .ac27-hero__lead { max-width: 580px; margin-top: var(--sp20); font-size: var(--f18); }

    & .ac27-hero__actions { margin-top: var(--sp40); }

    /* Last-edition card: label + link on the left, counting stats on the right */
    & .ac27-hero__edition {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: var(--sp30);
        max-width: 580px;
        margin-top: var(--sp40);
        padding: var(--sp25) var(--sp30);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);
    }

    & .ac27-hero__edition-head {
        display: grid;
        gap: var(--sp8);
        padding-right: var(--sp30);
        border-right: 1px solid var(--line);
    }

    & .ac27-hero__edition-label,
    & .ac27-hero__stat-label {
        font-size: var(--f13);
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
    }

    & .ac27-hero__edition-link {
        display: inline-flex; align-items: center;
        gap: var(--sp8);
        font-size: var(--f18);
        font-weight: 700;
        color: var(--ink);
        transition: var(--transition);

        & svg { color: var(--primary); transition: var(--transition); }
        &:hover { color: var(--primary); & svg { transform: translateX(4px); } }
    }

    & .ac27-hero__stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp20);
    }

    & .ac27-hero__stat { display: flex; flex-direction: column-reverse; gap: var(--sp4); }

    & .ac27-hero__stat-num {
        font-size: var(--f40);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -.02em;
        color: var(--primary);
    }

    & .ac27-hero__pledge {
        display: flex; flex-wrap: wrap;
        gap: var(--sp10);
        margin-top: var(--sp20);

        & li {
            display: inline-flex; align-items: center;
            gap: var(--sp8);
            padding: var(--sp8) var(--sp15);
            background: var(--white);
            border: 1px solid var(--blue-100);
            border-radius: var(--r-full);
            font-size: var(--f13);
            font-weight: 600;
            color: var(--ink);
        }
        & svg { color: var(--primary); }
    }

    & .ac27-hero__card { border: 1px solid var(--line); scroll-margin-top: var(--sp100); }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .ac27-hero {
        & .ac27-hero__grid { gap: var(--sp50); }
    }
}

@media (max-width: 991.98px) {
    .ac27-hero {
        & .ac27-hero__grid { grid-template-columns: 1fr; }
        & .ac27-hero__copy { position: static; }
        & .ac27-hero__card-wrap { max-width: 640px; }
    }
}

@media (max-width: 575.98px) {
    .ac27-hero {
        & .ac27-hero__edition { grid-template-columns: 1fr; gap: var(--sp20); padding: var(--sp20); }
        & .ac27-hero__edition-head { padding: 0 0 var(--sp20); border-right: 0; border-bottom: 1px solid var(--line); }
    }
}