/* ─────────────────────────────────────────
   SECTION — THE PROGRAMME (weekend.html)
   A journey line (chosen 9 Oct 2026, option B): one row per day, the date
   on the left, the route on the right. Each place is a dot + its name,
   with the events held there underneath. A solid line means you stay;
   a dashed line with a pill (.programme-move) means you travel.
   Saturday (.programme-day--main) is the day not to miss: clay date.
───────────────────────────────────────── */

.programme { background: var(--bg); }  /* white */

.programme-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: space-between;
  justify-content: space-between;
}

.programme-intro {
  margin-top: 24px;
  color: var(--text-secondary);
}

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

.programme-day {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  gap: 48px;
  padding: 48px 0;
  border-top: 1px dashed var(--border);
}

.programme-day:last-child {
  border-bottom: 1px dashed var(--border);
}

/* ── date column (stays in view while the day's route scrolls past) ── */
.programme-date {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.programme-num {
  color: var(--text-primary);
}

.programme-day--main .programme-num {
  color: var(--border);   /* clay */
}

.programme-weekday {
  color: var(--text-muted);
}

.programme-note {
  margin-top: 8px;
  color: var(--text-muted);
  transform: rotate(-4deg);
  transform-origin: left center;
}

/* ── the route ── */
.programme-route {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* a place: dot + name, then its events. The solid line runs down to the
   next stop; the last stop of the day has no line below it. */
.programme-stop {
  position: relative;
  margin-left: 8px;
  padding: 0 0 32px 44px;
  border-left: 2px solid var(--border);
}

.programme-stop:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

/* the line starts at the first dot, not above it */
.programme-stop:first-child::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 0.6em;
  background: var(--bg);
}

.programme-dot {
  position: absolute;
  left: -9px;
  top: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  box-shadow: 0 0 0 5px var(--hairline);   /* a gap in the line around the dot */
}

.programme-place {
  color: var(--text-primary);
  margin-bottom: 16px;
}

.programme-tbc {
  margin-left: 8px;
  color: var(--text-muted);
  vertical-align: middle;
}

/* travelling between two places */
.programme-move {
  position: relative;
  top: -16px;
  margin: 0 0 -16px 8px;
  padding: 6px 0 30px 44px;
  border-left: 2px dashed var(--border);
}

.programme-move-label {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
}

/* events at a place */
.programme-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.programme-event {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}

.programme-time {
  color: var(--text-secondary);
}

.programme-title {
  color: var(--text-primary);
}

.programme-event p {
  margin-top: 6px;
  max-width: 60ch;
  color: var(--text-secondary);
}


/* responsive — tablet */
@media (max-width: 1024px) {
  .programme-day {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 32px;
  }
}


/* responsive — mobile: the date sits above the route */
@media (max-width: 640px) {
  .programme-day {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }

  .programme-date {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 16px;
  }

  .programme-note {
    flex-basis: 100%;
    margin-top: 4px;
  }

  .programme-stop,
  .programme-move {
    padding-left: 28px;
  }

  .programme-event {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
}