/*
 * RAVL 2026 — /events, the index only. PR26-749, sections PR26-800, 801, 802, 805.
 *
 * `/events/:slug` IS NOT REBUILT and is still on `layouts/main`. That is deliberate: the event
 * detail page carries the Stripe checkout path, the `CHECKOUT_REFUSALS` map and the work from
 * PR26-717 and PR26-724 — the money path — and it is not the thing to rewrite unattended. The
 * transition from a 2026 index to a pre-2026 detail is visible and is the cost of that choice.
 *
 * The card here is deliberately the same shape as the article card: an event and an article are
 * the same object on a page — a picture, a date, a title, a line of description, one destination.
 * The classes are separate because the two pages load separate sheets, and a shared `.ar-card`
 * would mean /events loading the article body typography for nothing.
 */

/* ============================================================ HERO — PR26-800 */
.ev-hero {
    background: var(--fog);
    padding-top: calc(var(--nav-h) + 88px);
    padding-bottom: 96px;
}

.ev-hero::before { display: none; }

.ev-hero__h { max-width: 900px; margin-inline: auto; text-align: center; }
.ev-hero__lede { margin-top: 28px; max-width: 620px; }

/* ============================================================ 02 WHAT AN EVENT IS — PR26-801
   The same editorial split as /how-it-works: headline left, copy right. Two pages using it is the
   point at which it should move into `ravl-2026.css` as a shared component — noted rather than
   done, because the third caller is the one that tells you what the component actually is. */
.ev-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px 72px;
    align-items: start;
}

.ev-split__body > .rv-body + .rv-body { margin-top: 22px; }

/* ============================================================ 03 THE LIST — PR26-802 */
.ev-list__h { margin-bottom: 40px; }

.ev-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ev-card { display: flex; }

.ev-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--page);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s ease;
}

.ev-card__link:hover,
.ev-card__link:focus-visible { border-color: var(--accent); }

.ev-card__media { display: block; aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; }
.ev-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ev-card__body { display: flex; flex-direction: column; padding: 20px 22px 24px; }

.ev-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--subtle-on-tint);
}

.ev-card__title { margin-top: 14px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ev-card__excerpt { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--body); }

/* The dot separator is `.ar-card__dot` from the articles sheet, which /events does not load, so
   it is defined here too. Two definitions of one rule is worse than one shared rule; this is the
   second thing on the list when these two sheets are reconciled. */
.ar-card__dot { opacity: 0.6; }

/* ============================================================ THE EMPTY STATE — PR26-802
   THE IMPORTANT HALF OF THE PAGE, and the state most visitors will see, because the corridor this
   quarter is ExCeL / Royal Docks and Canary Wharf.

   It is a real section rather than a thin line of grey text: an empty list styled as an
   afterthought reads as a broken product, and this one is doing the page's actual job — routing
   somebody to /join and /how-it-works. Mint would make it a third mint band on the page, so it
   takes paper with a dashed edge, which reads as "nothing here yet" rather than as a card. */
.ev-empty {
    max-width: 680px;
    margin-inline: auto;
    padding: 52px 36px 56px;
    border: 1px dashed var(--line);
    border-radius: var(--r-large);
    background: var(--paper);
    text-align: center;
}

.ev-empty__h { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.ev-empty__body { margin-top: 16px; }

.ev-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 32px 0 0;
}

/* ============================================================================================
   BREAKPOINTS
   ============================================================================================ */

@media (max-width: 1099px) {
    .ev-split { grid-template-columns: 1fr; gap: 28px; }
    .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .ev-hero { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 64px; }
    .ev-grid { grid-template-columns: 1fr; gap: 18px; }
    .ev-list__h { margin-bottom: 28px; }

    .ev-empty { padding: 40px 22px 44px; }
    .ev-empty__h { font-size: 22px; }
    .ev-empty__actions { flex-direction: column; align-items: stretch; }
    .ev-empty__actions .rv-btn { width: 100%; }
}