/* The event landing page (§8).
 *
 * Only what is specific to this page. The price section borrows `.cost` from
 * registration.css, which the template loads alongside this: it is the ledger
 * the wizard and the review step already render, so a rider meets one shape
 * for a price wherever they meet one. That borrow is the reason an events page
 * loads a registrations stylesheet, and `.cost` is worth lifting into base.css
 * the next time either surface moves.
 */

.event-header {
    margin: var(--space-7) 0;
}

.event-meta {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--fg-2);
    margin: var(--space-2) 0 0;
}

/* The organizer's advocacy framing, set at reading width rather than the
   full column: this is the one block on the page meant to be read straight
   through, and a 900px line is not. */
.event-body {
    max-width: 62ch;
}

/* The three sections below the CTA, each separated from the last the way §3
 * separates things of the same kind. They replaced the schedule teaser: which
 * sessions run when is still moving, and a timetable that is wrong in public
 * is worse than one that is not there yet.
 */
.event-windows,
.event-price,
.event-sessions,
.event-routes {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rule-divide);
}

/* An h2 carries a top margin for the case where a paragraph runs into it. The
   section's own padding is already that space, and both together put 144px
   between the rule and the heading it belongs to. */
.event-windows h2,
.event-price h2,
.event-sessions h2,
.event-routes h2 {
    margin-top: 0;
}

/* Two-column rows: what the thing is on the left, the number on the right.
 * The same shape carries a window and a route, because a reader is doing the
 * same job in both -- scanning down one column for the row that is theirs.
 */
.window-list,
.route-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.window-row,
.route-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-4) 0;
    border-bottom: 1px dotted var(--rule-dotted);
}

.window-row:last-child,
.route-row:last-child {
    border-bottom: 0;
}

.window-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.window-label,
.route-name {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-h3);
    line-height: var(--leading-h3);
}

/* Which groups this opening lets in. Secondary to the opening itself: a rider
   looks for their group, but the row is about the date. */
.window-groups {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    line-height: var(--leading-ui);
    color: var(--fg-2);
}

/* Tabular figures so the dates and the distances line up down the column --
   the whole reason these are rows and not prose. */
.window-when,
.route-stat {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--size-ui);
    line-height: var(--leading-ui);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.route-stat {
    color: var(--fg-2);
}

/* Price ------------------------------------------------------------------ *
 *
 * One block per charge, because the two settle to two organizations (§5) and
 * E3.2 will not have the commitment folded away into a single number. The
 * total sits under both, bounded on its own so it reads as the sum of the
 * page rather than as a third group.
 */
.price-group {
    max-width: 34rem;
}

.price-group h3 {
    font-size: var(--size-ui);
    margin-bottom: var(--space-2);
}

.event-price .price-total {
    max-width: 34rem;
    margin-top: var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule);
}

/* One ticket option: its price as the heading, what it is and how to get it
   underneath. Reading width, like the event's own description above. */
.price-option {
    max-width: 62ch;
    margin-top: var(--space-5);
}

.price-option h3 {
    margin-bottom: var(--space-2);
}

/* Sessions ---------------------------------------------------------------- *
 *
 * What a rider picks from in the wizard, one block per slot. A row is the
 * session's name, its route figures when it is a ride, and its description
 * underneath -- the same name-first row the routes use, with room for prose.
 */
.session-slot {
    margin-top: var(--space-5);
}

.session-slot h3 {
    margin-bottom: 0;
}

.session-slot .note {
    margin: var(--space-1) 0 var(--space-2);
}

.session-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.session-row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px dotted var(--rule-dotted);
}

.session-row:last-child {
    border-bottom: 0;
}

.session-name {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-ui);
    line-height: var(--leading-ui);
}

.session-description {
    flex-basis: 100%;
    max-width: 62ch;
    font-size: var(--size-meta);
    line-height: var(--leading-body);
    color: var(--fg-2);
}