/* Events: the Community page listing, and the extras the single event page
   adds on top of the dedicated highlight page layout it borrows. */

/* --- Community page --- */

.community-page {
    padding-top: 80px;
}

/* The editor-authored intro. Held to a reading measure, unlike the event
   cards below it, which run the full container width. */
.community-intro {
    max-width: 640px;
    margin-bottom: 72px;
    font-size: 1.05rem;
    line-height: 1.65;
}

.community-intro > *:first-child { margin-top: 0; }
.community-intro > *:last-child  { margin-bottom: 0; }

.community-events-section + .community-events-section {
    margin-top: 88px;
}

/* An uppercase label rather than a display heading: the section heading is
   signage over the list, and the event titles are what should carry weight. */
.community-events-heading {
    margin: 0;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    opacity: 0.5;
}

/* .news-list already opens with 2rem, which is right under the press
   archive's bare page but too tight under a label. */
.community-events {
    margin-top: 1rem;
}

/* Sits between the title and the subtitle, so it reads as part of the same
   block of detail rather than as a second date line. */
.community-event-location {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--color-text-light);
}

/* Past events are still worth showing, but they are reference rather than an
   invitation. Dimmed as a group, restored on hover so they stay readable. */
.community-events-section--past .news-item:not(:hover) .news-item-thumbnail {
    opacity: 0.65;
    transition: opacity 0.4s ease;
}

@media (max-width: 768px) {
    .community-page {
        padding-top: 48px;
    }

    .community-intro {
        margin-bottom: 48px;
    }

    .community-events-section + .community-events-section {
        margin-top: 56px;
    }
}

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

/* The separator between the date and the venue in the header label. Set apart
   from the text it divides so the two halves read as two facts. */
.single-event-sep {
    display: inline-block;
    margin: 0 0.15em;
    opacity: 0.5;
}

/* The event image, above the body. Deliberately narrower than the 1100px
   column the title spans: this is a supporting picture, not a hero, and at
   full column width it takes over the page before a word of the copy is
   read. Left-aligned rather than centered so it shares the page's one left
   edge with everything above and below it. */
.single-event-image {
    margin: 0 0 56px;
    max-width: 680px;
}

/* Never upscale. A poster or a screenshot is usually smaller than the box,
   and stretching it past its native size only makes it soft; width: auto
   lets a small image stay small. The height cap is for the opposite case, a
   tall portrait flyer, which would otherwise push the copy off the screen.
   With both caps set and both dimensions auto, the ratio is preserved. */
.single-event-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
}

/* The one action on the page, so it is a button rather than a link in a line
   of copy. Outlined rather than filled: it sits under a page of editorial
   content and a solid block would out-shout the title. */
.single-event-cta {
    margin: 0 0 96px;
}

.single-event-cta-link {
    display: inline-block;
    padding: 0.9em 2em;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.single-event-cta-link:hover,
.single-event-cta-link:focus-visible {
    background: var(--charcoal);
    color: var(--chalkdust);
}

/* With no body copy above it the button would sit hard against the header. */
.single-highlight-header + .single-event-cta {
    margin-top: 8px;
}