/* Event page: the hero, then the page's sections in the organizer's order,
   the tickets among them, in one column with the checkout dock. On a desktop
   the tickets become the page sidebar (page-sidebar.css) with the total and
   the way on in its foot, and the dock steps aside — like the seat picker. */
.event-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-s-m);
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--column-content);
}

/* The hero reaches up to the header, its wash out to the window's edges */
body.has-event-page {
  overflow-x: clip;
}

body.has-event-page > .site-main {
  padding-block-start: 0;
}

@media (min-width: 60rem) {
  .event-page:has(.page-sidebar) {
    /* The hero sits in the column left of the sidebar; its wash spans that
       column out to the window's left edge and the sidebar, centred on it */
    .event-hero__wash {
      inset-inline: calc(50% - 50vw + var(--sidebar-width) / 2);
    }

    .checkout-bar {
      display: none;
    }
  }
}

.ticket-checkout__amount {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
}