/*
 * Events list (/events.html) and event pages (/events/{slug}.html).
 * Loaded after style.css; everything is scoped to .ev-* classes.
 *
 * The date marker (big day numeral) is the one bold element, shared by both
 * pages; the list is a timeline because events are a dated sequence.
 */
:root {
    --ev-navy: #273f7c;   /* site brand (menu bar, headings) */
    --ev-ink: #2c2c2c;    /* body text, as in articles */
    --ev-slate: #5b6475;  /* secondary text */
    --ev-rule: #d5dae4;   /* timeline line, dividers */
    --ev-mist: #eef1f7;   /* frame behind banners */
}

/* ---- shared ------------------------------------------------------------ */

.ev-page a:focus-visible {
    outline: 2px solid var(--ev-navy);
    outline-offset: 3px;
}

/* page title in the site's section-heading style (style.css styles a <p>) */
.heading-section .bottom-heading h1 {
    margin: 0;
    font-size: 30px;
    font-weight: bold;
    color: var(--ev-navy);
    position: relative;
    line-height: 1;
}
.heading-section .bottom-heading h1::after {
    content: '';
    position: absolute;
    background-color: #9a9a9a;
    height: 1px;
    width: 100%;
    bottom: 0;
}

.ev-page .heading-section {
    margin-bottom: 16px;
}

.ev-intro {
    max-width: 640px;
    margin: 0 0 36px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ev-slate);
}

/* date marker: day numeral over month and year */
.ev-date {
    display: block;
    color: var(--ev-navy);
    line-height: 1;
}
.ev-day {
    display: block;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ev-month {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ev-slate);
}

/* banner frame: banners are often text graphics, so show them whole */
.ev-frame {
    display: block;
    aspect-ratio: 2 / 1;
    background: var(--ev-mist);
}
.ev-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- list: timeline grouped by year -------------------------------------- */

.ev-group {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--ev-navy);
}
.ev-group::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ev-rule);
}

.ev-list {
    position: relative;
    margin: 0 0 44px;
    padding: 0;
    list-style: none;
}
/* the timeline runs down the middle of the gap between dates and banners
   (date column 80px + half the 32px gap) */
.ev-list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 96px;
    width: 1px;
    background: var(--ev-rule);
}

.ev-row {
    position: relative;
    display: grid;
    grid-template-columns: 80px 300px minmax(0, 1fr);
    column-gap: 32px;
    padding: 28px 0;
}
.ev-row + .ev-row {
    border-top: 1px solid var(--ev-mist);
}
/* dot on the timeline, level with the day numeral */
.ev-row::before {
    content: '';
    position: absolute;
    top: 42px;
    left: 92px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ev-navy);
}

.ev-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
}
.ev-title a {
    color: var(--ev-navy);
    text-decoration: none;
}
.ev-title a:hover {
    text-decoration: underline;
}

.ev-where,
.ev-with {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ev-slate);
}
.ev-where .fa {
    width: 16px;
    color: var(--ev-navy);
}

.ev-summary {
    max-width: 640px;
    margin: 12px 0 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ev-ink);
}

.ev-more {
    font-size: 15px;
    font-weight: 600;
    color: var(--ev-navy);
}

/* "More events" on an event page: same rows, smaller */
.ev-list-compact .ev-row {
    grid-template-columns: 80px 200px minmax(0, 1fr);
    padding: 22px 0;
}
.ev-list-compact .ev-title {
    font-size: 19px;
}

.ev-empty {
    margin: 0 0 60px;
    font-size: 17px;
    color: var(--ev-slate);
}

/* ---- event page ---------------------------------------------------------- */

.ev-detail {
    padding-bottom: 56px;
}
.ev-detail-title {
    max-width: 900px;
    margin: 8px 0 28px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ev-navy);
}

.ev-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 56px;
    align-items: start;
    margin-bottom: 48px;
}

.ev-banner {
    margin: 0 0 32px;
}

/* the write-up: articles' type size, held to a readable measure */
.ev-body {
    max-width: 720px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--ev-ink);
}
.ev-body p,
.ev-body ul,
.ev-body ol {
    margin: 0 0 20px;
}
/* older write-ups set sizes and a 50px list indent inline */
.ev-body ul,
.ev-body ol {
    padding-left: 1.4em !important;
}
.ev-body li {
    font-size: inherit !important;
    line-height: inherit !important;
}
.ev-body img {
    max-width: 100%;
    height: auto;
}

/* key facts beside the write-up */
.ev-facts {
    position: sticky;
    top: 24px;
    padding: 26px 26px 22px;
    background: var(--ev-mist);
}
.ev-facts .ev-day {
    font-size: 56px;
}
.ev-facts .ev-month {
    font-size: 16px;
}
.ev-weekday {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--ev-slate);
}
.ev-facts dl {
    margin: 24px 0 0;
}
.ev-facts dt {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ev-slate);
}
.ev-facts dd {
    margin: 3px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ev-ink);
}

.ev-share {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ev-rule);
    font-size: 13px;
    font-weight: 600;
    color: var(--ev-slate);
}
.ev-share a {
    font-size: 22px;
    line-height: 1;
    color: var(--ev-navy);
}
.ev-share a:hover {
    color: #0c83e7;
}

.ev-section-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 700;
    color: var(--ev-navy);
}
.ev-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ev-rule);
}
.ev-count {
    font-size: 16px;
    font-weight: 600;
    color: var(--ev-slate);
}

.ev-photos-section {
    margin-bottom: 52px;
}
.ev-photos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
/* beyond the first 12, photos wait for "Show all" (the lightbox has them all) */
.ev-photos.is-collapsed .ev-photo-extra {
    display: none;
}
.ev-photos-more {
    margin: 18px 0 0;
}
.ev-photos-more button {
    padding: 9px 18px;
    border: 1px solid var(--ev-navy);
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: var(--ev-navy);
    cursor: pointer;
}
.ev-photos-more button:hover {
    background: var(--ev-navy);
    color: #fff;
}
.ev-photos-more button:focus-visible {
    outline: 2px solid var(--ev-navy);
    outline-offset: 3px;
}
.ev-photos a {
    display: block;
    background: var(--ev-mist);
}
.ev-photos img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ev-back {
    display: inline-block;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ev-navy);
}

/* ---- smaller screens ----------------------------------------------------- */

@media (max-width: 991px) {
    .ev-row {
        grid-template-columns: 70px 220px minmax(0, 1fr);
        column-gap: 24px;
    }
    .ev-list::before { left: 82px; }
    .ev-row::before { left: 78px; }
    .ev-list-compact .ev-row { grid-template-columns: 70px 160px minmax(0, 1fr); }

    .ev-detail-grid {
        grid-template-columns: 1fr;
    }
    /* facts move above the write-up */
    .ev-facts {
        position: static;
        order: -1;
        margin-bottom: 28px;
    }
    .ev-photos { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 680px) {
    .heading-section .bottom-heading h1 { font-size: 18px; }
    .ev-intro { margin-bottom: 26px; font-size: 15px; }

    /* rows stack: date line, banner, text; no timeline */
    .ev-list::before,
    .ev-row::before { display: none; }
    .ev-row,
    .ev-list-compact .ev-row {
        grid-template-columns: 1fr;
        row-gap: 12px;
        padding: 22px 0;
    }
    .ev-row .ev-date {
        display: flex;
        align-items: baseline;
        gap: 6px;
        order: -1;
    }
    .ev-row .ev-day { font-size: 18px; }
    .ev-row .ev-month { margin-top: 0; font-size: 15px; color: var(--ev-navy); }
    .ev-title { font-size: 20px; }

    .ev-detail-title { font-size: 26px; margin-bottom: 20px; }
    .ev-body { font-size: 16px; }
    .ev-facts { padding: 20px; }
    .ev-facts .ev-day { font-size: 44px; }
    .ev-photos { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}