/* =============================================================================
 * 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, the brand color
 * (--wne-sky, WAF midnight on foiling.org) 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 {
    /* foiling.org brand palette: Midnight + White. Fallback hex in case --waf-midnight is not defined globally. */
    --wne-sky: var(--waf-midnight, #1D1F2A);
    --wne-white: #FFFFFF;
    --wne-radius: 14px;
    /* Horizontal padding inside each countdown unit; tightened on small screens. */
    --wne-unit-pad: 0.85rem;
    /*
     * Single left inset shared by labels, hero and rows, so every text element
     * in the block starts on the same axis. Previously these were three
     * different values (18.6px, 32px and 16px).
     */
    --wne-inset: 1.5rem;

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

    /*
     * Own container padding, same pattern as the news-grid block, so the block
     * aligns with the page container even when placed outside a .container.
     */
    max-width: 2000px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3%, 3rem);
}

/* When the block already sits inside a .container, the container handles spacing. */
.container .waf-next-events {
    max-width: none;
    padding-inline: 0;
}

/* -----------------------------------------------------------------------
 * 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 label swaps between "show" and "hide"
 * purely via the [open] attribute.
 * ----------------------------------------------------------------------- */

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

/*
 * Shared label component. Both the past events toggle and the "coming up next"
 * marker use it, so they read as one system: same type, same inset, same rule
 * running to the right edge. The only difference is that --toggle is a control
 * (cursor, hover state, +/- indicator) and --next is a plain announcement.
 */
.waf-next-events__section-label {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    margin: 0 0 0.6rem;
    padding: 0 var(--wne-inset);
    border: 0;
    background: none;
    color: var(--wne-sky);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    list-style: none;
}

/* The rule filling the rest of the line, shared by both labels. */
.waf-next-events__section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
}

.waf-next-events__section-label--toggle {
    cursor: pointer;
}

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

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

/*
 * Hover feedback without a border to fill: the rule thickens. Subtle, but the
 * only affordance available now that the pill is gone.
 */
.waf-next-events__section-label--toggle:hover::after,
.waf-next-events__section-label--toggle:focus-visible::after {
    height: 2px;
}

.waf-next-events__section-label--next {
    margin-top: 1.25rem;
}

/* 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 pseudo-elements so no icon font is
 * needed. Ordered after the rule, at the far right of the label.
 */
.waf-next-events__past-icon {
    position: relative;
    order: 3;
    width: 10px;
    height: 10px;
    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.5rem var(--wne-inset);

    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 first row instead of the
     * vertical centre. Three rows = title, meta, CTA; the last one is simply
     * empty and zero-height when the event has no link.
     */
    grid-template-rows: repeat(3, auto);
    column-gap: 2.5rem;
    align-items: center;
}

/* Text elements stack in the left column. */
.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__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;
}

/* Unit label under each countdown number (Days, Hours, ...). */
.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 var(--wne-inset);
    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 {
        --wne-inset: 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;
    }
}