/**
 * Event calendar and the light/dark event detail themes.
 *
 * The kids theme lives in events-kids.css, which only loads on an event using
 * it — it inverts the system's rules and has no business on any other page.
 */

/* ---------------------------------------------------------------
 * List view
 * ------------------------------------------------------------- */
.sbs-event-list {
  margin-bottom: 64px;
}

.sbs-event-row {
  display: grid;
  grid-template-columns: 120px 1fr 240px 160px;
  gap: 32px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--sbs-grey-200);
}

.sbs-event-row:last-child {
  border-bottom: 1px solid var(--sbs-grey-200);
}

.sbs-event-row:hover {
  color: inherit;
}

.sbs-event-row__day {
  display: block;
  font-family: var(--sbs-font-display);
  font-size: 34px;
  font-weight: var(--sbs-w-medium);
  line-height: 1;
}

.sbs-event-row__month {
  display: block;
  margin-top: 6px;
  font-family: var(--sbs-font-mono);
  font-size: var(--sbs-meta);
  letter-spacing: var(--sbs-ls-meta);
  text-transform: uppercase;
  color: var(--sbs-gold);
}

.sbs-event-row__title {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--sbs-w-regular);
  line-height: 1.25;
  transition: color var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-event-row:hover .sbs-event-row__title {
  color: var(--sbs-gold);
}

.sbs-event-row__weekday {
  margin: 6px 0 0;
  font-size: var(--sbs-body-xs);
  color: var(--sbs-grey-600);
}

.sbs-event-row__place {
  margin: 0;
  font-size: var(--sbs-body-xs);
  color: var(--sbs-grey-600);
}

.sbs-event-row__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.sbs-event-row__arrow {
  color: var(--sbs-ink);
  transition: transform var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-event-row:hover .sbs-event-row__arrow {
  transform: translateX(4px);
  color: var(--sbs-gold);
}

/* ---------------------------------------------------------------
 * Calendar view
 * ------------------------------------------------------------- */
.sbs-calendar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}

.sbs-calendar__month {
  font-size: var(--sbs-h3);
  font-weight: var(--sbs-w-medium);
}

.sbs-calendar__stepper {
  display: flex;
  gap: 8px;
}

.sbs-calendar__stepper .sbs-pill-arrow {
  width: 46px;
  height: 38px;
}

.sbs-calendar__key {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 auto;
}

.sbs-calendar__key-swatch {
  width: 10px;
  height: 10px;
  background: var(--sbs-ink);
}

.sbs-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--sbs-grey-200);
  border: 1px solid var(--sbs-grey-200);
}

.sbs-calendar__weekday {
  padding: 14px 16px;
  background: var(--sbs-white);
  font-family: var(--sbs-font-mono);
  font-size: var(--sbs-meta);
  letter-spacing: var(--sbs-ls-meta);
  text-transform: uppercase;
  color: var(--sbs-grey-400);
}

.sbs-calendar__cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
  padding: 14px 16px;
  background: var(--sbs-white);
}

/* Days belonging to the neighbouring month are present so the grid stays
 * rectangular, but recede. */
.sbs-calendar__cell.is-outside {
  background: #FBFAF9;
}

.sbs-calendar__cell.is-outside .sbs-calendar__day {
  color: var(--sbs-grey-400);
}

.sbs-calendar__day {
  font-family: var(--sbs-font-mono);
  font-size: 13px;
  color: var(--sbs-grey-600);
}

.sbs-calendar__cell.is-today .sbs-calendar__day {
  color: var(--sbs-gold);
}

.sbs-calendar__event {
  display: block;
  padding: 8px 10px;
  background: var(--sbs-ink);
  color: var(--sbs-white);
  transition: background-color var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-calendar__event:hover {
  background: var(--sbs-gold);
  color: var(--sbs-white);
}

.sbs-calendar__event-type {
  display: block;
  font-family: var(--sbs-font-mono);
  font-size: 9px;
  letter-spacing: var(--sbs-ls-meta);
  text-transform: uppercase;
  color: var(--sbs-gold-light);
}

.sbs-calendar__event:hover .sbs-calendar__event-type {
  color: var(--sbs-white);
}

.sbs-calendar__event-title {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.25;
}

/* ---------------------------------------------------------------
 * Detail — shared by light and dark
 * ------------------------------------------------------------- */
/*
 * Capped to the content column and centred, photograph included — the same
 * treatment as .sbs-rows__row in components.css and for the same reason: the
 * media is `object-fit: cover`, so a half that keeps growing with the viewport
 * crops the picture rather than showing more of it. The band behind carries
 * the panel's own ground (set in the template) so the space either side of the
 * bounded row matches the panel instead of seaming against it.
 */
.sbs-event__row {
  align-items: stretch;
  padding-inline: var(--sbs-cap-inset);
}

.sbs-event__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sbs-panel-y) var(--sbs-panel-x);
}

.sbs-event__row-title {
  margin-bottom: 24px;
  font-size: var(--sbs-h2-sm);
  font-weight: var(--sbs-w-medium);
  line-height: var(--sbs-lh-tight);
}

.sbs-event__panel p {
  max-width: 46ch;
}

.sbs-event__panel p + p {
  margin-top: 1.1em;
}

.sbs-event__row-media {
  min-height: 620px;
}

.sbs-programme__cell {
  padding: 30px 28px;
}

.sbs-programme__text {
  margin: 12px 0 0;
  font-family: var(--sbs-font-display);
  font-size: 22px;
  line-height: 1.3;
  color: inherit;
}

.sbs-event__cta {
  text-align: center;
}

.sbs-event__cta .sbs-eyebrow {
  margin-bottom: 24px;
}

.sbs-event__cta-heading {
  max-width: 20ch;
  margin: 0 auto 24px;
  font-size: var(--sbs-h2-lg);
  font-weight: var(--sbs-w-medium);
  line-height: var(--sbs-lh-tight);
}

.sbs-event__cta-text {
  max-width: 56ch;
  margin: 0 auto 40px;
}

.sbs-event__past-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sbs-gap-gallery);
}

.sbs-event__past-item {
  height: 440px;
}

/* ---------------------------------------------------------------
 * Dark theme
 *
 * Only colour differs from light, so this is the whole of it.
 * ------------------------------------------------------------- */
.sbs-band--ink-panel {
  background: var(--sbs-ink-panel);
  color: var(--sbs-white);
  --sbs-body-colour: var(--sbs-beige-300);
  --sbs-rule-colour: var(--sbs-ink-line);
  --sbs-accent-colour: var(--sbs-gold-light);
}

.sbs-event--dark .sbs-facts,
.sbs-event--dark .sbs-programme__grid {
  background: var(--sbs-ink-line);
  border-color: var(--sbs-ink-line);
}

.sbs-event--dark .sbs-facts > *,
.sbs-event--dark .sbs-programme__grid > * {
  background: var(--sbs-ink);
  color: var(--sbs-white);
}

.sbs-event--dark .sbs-head-row__rule {
  background: var(--sbs-ink-line);
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .sbs-event-row {
    grid-template-columns: 96px 1fr 150px;
  }

  .sbs-event-row__place {
    display: none;
  }
}

@media (max-width: 900px) {
  .sbs-event-row {
    grid-template-columns: 84px 1fr;
    gap: 20px;
  }

  .sbs-event-row__end {
    grid-column: 2;
    justify-content: flex-start;
  }

  .sbs-event__row-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .sbs-event__past-grid {
    grid-template-columns: 1fr;
  }

  .sbs-event__past-item {
    height: 260px;
  }

  .sbs-programme__grid {
    grid-template-columns: 1fr !important;
  }

  /* A seven-column month grid cannot survive a phone. It scrolls sideways
   * rather than collapsing, so a month stays recognisable as a month. */
  .sbs-calendar__grid {
    display: grid;
    min-width: 720px;
  }

  .sbs-calendar {
    overflow-x: auto;
  }

  .sbs-calendar__key {
    margin-left: 0;
  }
}