/* Events-specific styling.
   Loaded alongside Articles.css on the listing (which supplies the hero and the
   card grid) and alongside article-details.css on the detail page. Only the
   things an Article has no equivalent for live here. */

/* ── Listing: Upcoming / Past groups ─────────────────────────────────────── */

.events-section {
    padding: 0.5rem 0 1.5rem;
}

.events-section-heading {
    font-size: 28px;
    font-weight: 600;
    padding: 1.25rem 20px 0.25rem;
    color: var(--main-text-Color, #1a1a1a);
}

/* Articles.css features the first two cards of a grid at double width, which is
   right for an editorial feed read top-down. The events page renders two grids,
   so that rule fires a second time and visually promotes one arbitrary past
   event. An archive wants a uniform grid, so the span is reset here. The
   :nth-child(n) keeps specificity above the Articles.css rule regardless of
   stylesheet order. */
.events-section--past .article-slide:nth-child(n) {
    grid-column: span 1;
}

/* Past events are archive material: present, but visually secondary. */
.events-section--past .article-card {
    opacity: 0.82;
    transition: opacity 0.25s ease;
}

.events-section--past .article-card:hover {
    opacity: 1;
}

/* Place line on an event card, above the excerpt. */
.event-card-place {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.95;
    margin: 0;
}

@media (max-width: 780px) {
    .events-section-heading {
        font-size: 22px;
        padding: 1rem 10px 0.25rem;
    }
}

/* ── Detail page ─────────────────────────────────────────────────────────── */

.event-past-notice {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.5rem 0.9rem;
    border-left: 4px solid #b0b0b0;
    background: #f3f3f3;
    color: #555;
    font-size: 14px;
}

.event-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: #f6f8fa;
    border-left: 4px solid #005bac;
}

.event-fact {
    min-width: 9rem;
}

.event-facts dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.event-facts dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.event-register {
    margin: 0 0 1.75rem;
}

/* article-details.css sets `.main-content a { color: var(--primary-Color);
   text-decoration: underline; }`, which outranks a single class and left this
   button rendering dark blue on blue with an underline. Matching that
   specificity restores the intended white-on-blue. */
.main-content a.event-register-link,
.event-register-link {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    background: #005bac;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.main-content a.event-register-link:hover,
.main-content a.event-register-link:focus,
.event-register-link:hover,
.event-register-link:focus {
    background: #00447f;
    color: #fff;
}

@media (max-width: 780px) {
    .event-facts {
        gap: 1rem 1.5rem;
        padding: 0.9rem 1rem;
    }

    .event-register-link {
        display: block;
        text-align: center;
    }
}