/* =============================================================================
 * BLOCK: gep/next-events
 * "Coming up next" — highlighted next event with a live countdown, followed
 * by a compact list of the following events.
 *
 * Palette constraint: this block only ever uses two colors, WAF sky and
 * white. No third accent, no greys, no rgba()/opacity tricks for hierarchy —
 * hierarchy comes from font size/weight only. Hover states swap the two
 * colors (sky <-> white), they never introduce a third value.
 *
 * Author: Greta Eline Poclen
 * ========================================================================== */

.waf-next-events {
    /* Local fallback in case --waf-sky is not defined globally on this site yet. */
    --wne-sky: var(--waf-sky, #008FDB);
    --wne-white: #FFFFFF;
    --wne-radius: 14px;

    /* Horizontal padding inside each countdown unit; tightened on small screens. */
    --wne-unit-pad: 0.85rem;

    font-family: var(--dm-sans, 'DM Sans', sans-serif);
    color: var(--wne-sky);
    background: var(--wne-white);
}

/* -----------------------------------------------------------------------
 * Hero: next event + live countdown
 * ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
 * Past events: collapsed by default above the hero
 *
 * Built on <details>/<summary> so it works with no JavaScript at all and is
 * keyboard accessible by default. The summary is styled as an outline pill;
 * its label swaps between "show" and "hide" purely via the [open] attribute.
 * ----------------------------------------------------------------------- */

.waf-next-events__past {
    margin-bottom: 0.5rem;
}

.waf-next-events__past-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--wne-sky);
    border-radius: 999px;
    color: var(--wne-sky);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    list-style: none;
    transition: background 150ms ease, color 150ms ease;
}

/* Remove the native disclosure triangle (Chromium/Firefox and Safari). */
.waf-next-events__past-toggle::-webkit-details-marker {
    display: none;
}

.waf-next-events__past-toggle::marker {
    content: '';
}

.waf-next-events__past-toggle:hover,
.waf-next-events__past-toggle:focus-visible {
    background: var(--wne-sky);
    color: var(--wne-white);
}

/* Label swap: only one of the two is shown at a time. */
.waf-next-events__past-label--hide,
.waf-next-events__past[open] .waf-next-events__past-label--show {
    display: none;
}

.waf-next-events__past[open] .waf-next-events__past-label--hide {
    display: inline;
}

/* Plus / minus indicator, drawn with borders so no icon font is needed. */
.waf-next-events__past-icon {
    position: relative;
    width: 10px;
    height: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.waf-next-events__past-icon::before,
.waf-next-events__past-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
}

.waf-next-events__past-icon::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
}

/* Vertical stroke present only when collapsed, turning the minus into a plus. */
.waf-next-events__past-icon::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
}

.waf-next-events__past[open] .waf-next-events__past-icon::after {
    display: none;
}

/* Past rows: same structure as upcoming ones, lighter and more compact. */
.waf-next-events__list--past {
    margin-top: 0.5rem;
}

.waf-next-events__row--past {
    padding-top: 0.38rem;
    padding-bottom: 0.38rem;
}

/*
 * Past rows collapse onto a single line: a coloured brand dot, the title, then
 * the location. The text tag is hidden — the dot carries the brand colour in
 * its place, and the title already names the event, so the colour is redundant
 * reinforcement rather than the only carrier of meaning.
 *
 * These selectors deliberately include .waf-next-events__row-main: the generic
 * row typography is declared later in this file with the same specificity, so
 * without the extra class it would win on source order and past rows would
 * render at full size.
 */
.waf-next-events__row--past .waf-next-events__row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    min-width: 0;
}

.waf-next-events__row--past .waf-next-events__row-main .tag {
    display: none;
}

/* Brand dot: rendered only on rows that actually carry a colour. */
.waf-next-events__row--past.waf-next-events__row--dot .waf-next-events__row-main::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wne-tag, currentColor);
}

.waf-next-events__row--past .waf-next-events__row-main h3 {
    font-size: 0.84rem;
    font-weight: 600;
    margin: 0;
}

.waf-next-events__row--past .waf-next-events__row-main .place {
    font-size: 0.8rem;
    font-weight: 400;
}

/* Middle dot separating title and location on the same line. */
.waf-next-events__row--past .waf-next-events__row-main .place::before {
    content: '\00B7';
    margin-right: 0.45rem;
}

.waf-next-events__row--past .waf-next-events__row-date {
    font-size: 0.76rem;
    font-weight: 500;
}

/* On hover the row inverts, so the dot turns white like the rest of the text. */
.waf-next-events__row--past:hover .waf-next-events__row-main::before,
.waf-next-events__row--past:focus-visible .waf-next-events__row-main::before {
    background: var(--wne-white);
}

/*
 * Two-column hero: text block on the left, countdown on the right.
 * The markup stays flat (no extra wrapper div) — items are placed explicitly
 * on the grid instead, so the render template needs no change.
 */
.waf-next-events__hero {
    background: var(--wne-sky);
    color: var(--wne-white);
    border-radius: var(--wne-radius);
    padding: 1.85rem 2rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    /*
     * Rows must be declared explicitly: negative line numbers (used below to
     * span the countdown across the whole text block) only resolve against the
     * explicit grid. With implicit rows only, "grid-row: 1 / -1" would collapse
     * to row 1 and the countdown would align to the eyebrow instead of the
     * vertical centre. Four rows = eyebrow, title, meta, CTA; the last one is
     * simply empty and zero-height when the event has no link.
     */
    grid-template-rows: repeat(4, auto);
    column-gap: 2.5rem;
    align-items: center;
}

/* Text elements stack in the left column. */
.waf-next-events__eyebrow,
.waf-next-events__title,
.waf-next-events__meta,
.waf-next-events__cta {
    grid-column: 1;
}

/*
 * Countdown sits in the right column, aligned to the right edge of the hero
 * and vertically centred against the full height of the text block.
 */
.waf-next-events__timer {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
}

/*
 * Events with no start date (e.g. "TBD") render no countdown at all.
 * Without a second column to fill, collapse back to a single column so the
 * column gap does not leave dead space on the right.
 */
.waf-next-events__hero:not(:has(.waf-next-events__timer)) {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
}

.waf-next-events__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.waf-next-events__title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.25rem;
}

.waf-next-events__meta {
    font-size: 0.92rem;
    font-weight: 400;

    /* No bottom margin in the two-column layout; restored when stacked. */
    margin: 0;
}

.waf-next-events__meta .sep {
    margin: 0 0.5rem;
    font-weight: 700;
}

.waf-next-events__timer {
    display: flex;
}

.waf-next-events__unit {
    /*
     * Units size to their content so the group stays a centred cluster.
     * They stretch to fill the row only in the stacked layout (see responsive).
     */
    flex: 0 0 auto;
    text-align: center;
    padding: 0 var(--wne-unit-pad);

    /* Keeps the four units from squeezing when the title is long. */
    min-width: 4.6rem;
    position: relative;
}

/* Solid 1px divider between countdown units — no rgba, full white. */
.waf-next-events__unit + .waf-next-events__unit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 1px;
    background: var(--wne-white);
}

.waf-next-events__num {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.waf-next-events__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin-top: 0.3rem;
}

/* Hero CTA: filled white pill on the sky panel, colors inverted on hover. */
.waf-next-events__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    /* Own row in the left column, so it sits just under the meta line. */
    justify-self: start;
    margin-top: 1.1rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--wne-white);
    border-radius: 999px;
    background: var(--wne-white);
    color: var(--wne-sky);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}

.waf-next-events__cta:hover,
.waf-next-events__cta:focus-visible {
    background: var(--wne-sky);
    color: var(--wne-white);
}

.waf-next-events__cta svg {
    width: 15px;
    height: 15px;
    transition: transform 150ms ease;
}

.waf-next-events__cta:hover svg {
    transform: translateX(3px);
}

/* -----------------------------------------------------------------------
 * List: events following the highlighted one
 * ----------------------------------------------------------------------- */

.waf-next-events__list {
    margin-top: 0.5rem;
}

.waf-next-events__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1rem;
    border-radius: var(--wne-radius);
    border-bottom: 1px solid var(--wne-sky);
    text-decoration: none;
    color: var(--wne-sky);
    transition: background 150ms ease, color 150ms ease;
}

.waf-next-events__row:hover,
.waf-next-events__row:focus-visible {
    background: var(--wne-sky);
    color: var(--wne-white);
}

/*
 * Tag colour comes from the ACF field as an inline --wne-tag custom property.
 * With no value set it simply inherits the row colour, i.e. WAF sky.
 */
.waf-next-events__row-main .tag {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: var(--wne-tag, inherit);
}

/*
 * On hover the row turns solid sky, so a brand-coloured tag would lose
 * contrast against it. The tag reverts to white for the duration of the hover
 * rather than trying to keep a colour readable on both backgrounds.
 */
.waf-next-events__row:hover .tag,
.waf-next-events__row:focus-visible .tag {
    color: var(--wne-white);
}

.waf-next-events__row-main h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
}

.waf-next-events__row-main .place {
    font-size: 0.85rem;
    font-weight: 400;
}

/* Right-hand side: date, plus an arrow when the row links somewhere. */
.waf-next-events__row-side {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    white-space: nowrap;
}

.waf-next-events__row-date {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    line-height: 1.4;
}

.waf-next-events__row-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 150ms ease;
}

.waf-next-events__row:hover .waf-next-events__row-arrow {
    transform: translateX(3px);
}

.waf-next-events__placeholder {
    padding: 1rem;
    font-style: italic;
    color: var(--wne-sky);
}

/* -----------------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------------- */

/*
 * Below 990px the two hero columns no longer fit: the title breaks awkwardly
 * and the countdown digits squeeze. Back to a single stacked column.
 */
@media only screen and (max-width: 990px) {
    .waf-next-events__hero {
        display: block;
        grid-template-rows: none;
    }

    .waf-next-events__meta {
        margin-bottom: 1.9rem;
    }

    /*
     * Stacked: countdown left-aligned under the text, not spread edge to edge.
     * justify-self must be reset here: modern browsers honour it in block
     * layout too, so the value used for the desktop grid would keep pushing
     * the countdown to the right edge.
     */
    .waf-next-events__timer {
        display: flex;
        justify-content: flex-start;
        justify-self: start;
    }

    /*
     * First unit loses its left padding so the "35" lines up exactly with the
     * title and meta text above it.
     */
    .waf-next-events__unit:first-child {
        padding-left: 0;
    }
}

@media only screen and (max-width: 767px) {
    .waf-next-events {
        --wne-unit-pad: 0.7rem;
    }

    .waf-next-events__hero {
        padding: 1.5rem 1.25rem;
    }

    .waf-next-events__unit {
        min-width: 0;
    }

    .waf-next-events__num {
        font-size: 1.6rem;
    }

    .waf-next-events__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .waf-next-events__row-side {
        width: 100%;
        justify-content: space-between;
    }

    .waf-next-events__row-date {
        text-align: left;
    }
}