/* ==========================================================================
   Campaign Popup — two LatAm events side by side, over the homepage.
   Rendered hidden; assets/js/campaign-popup.js reveals it for LatAm visitors.
   All values come from tokens.css. Radius is var(--radius) everywhere.
   ========================================================================== */

.cpopup[hidden] { display: none; }

.cpopup {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.cpopup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(40, 33, 31, .72); /* --black at 72% */
}

.cpopup__box {
    position: relative;
    width: 100%;
    max-width: 980px;
    max-height: calc(100vh - (var(--space-lg) * 2));
    overflow-y: auto;
    background: var(--white);
    border-radius: var(--radius);
    padding: var(--space-2xl);
    box-shadow: 8px 8px 0 var(--gray-400);
}

.cpopup__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius);
    color: var(--color-black);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.cpopup__close:hover { border-color: var(--red); color: var(--red); }

/* ── Header ─────────────────────────────────────────────────────────────── */

.cpopup__head { margin-bottom: var(--space-xl); }

.cpopup__kicker {
    font-size: var(--fs-caption);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red);
}

.cpopup__title {
    font-size: var(--fs-h2);
    color: var(--color-black);
    margin-top: var(--space-xs);
}

/* ── Two events, 50 / 50 ────────────────────────────────────────────────── */

.cpopup__events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

/* Divider between the two halves. */
.cpopup__event + .cpopup__event {
    padding-left: var(--space-xl);
    border-left: 1px solid var(--gray-400);
}

/* Column layout so every CTA sits on the same baseline regardless of how much
   copy each event carries. */
.cpopup__event {
    display: flex;
    flex-direction: column;
}

.cpopup__eyebrow {
    font-size: var(--fs-caption);
    color: var(--color-black);
    margin-bottom: var(--space-xs);
}

.cpopup__event-title {
    font-size: var(--fs-h3);
    color: var(--color-black);
    margin-bottom: var(--space-sm);
}

.cpopup__desc {
    font-size: var(--fs-body);
    color: var(--color-black);
    margin-bottom: var(--space-md);
}

.cpopup__lines {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
}

.cpopup__lines li {
    position: relative;
    padding-left: var(--space-md);
    font-size: var(--fs-caption);
    color: var(--color-black);
}
.cpopup__lines li + li { margin-top: var(--space-xs); }

.cpopup__lines li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    background: var(--red);
}

/* Pins the button to the bottom of its column. */
.cpopup__cta { margin-top: auto; align-self: flex-start; }

/* ── Mobile: stack, drop the divider ────────────────────────────────────── */

@media (max-width: 780px) {
    .cpopup__box { padding: var(--space-xl); }

    .cpopup__events { grid-template-columns: 1fr; }

    .cpopup__event + .cpopup__event {
        padding-left: 0;
        border-left: 0;
        padding-top: var(--space-xl);
        border-top: 1px solid var(--gray-400);
    }
}