/* ==========================================================================
   Canopus — OUR SCHEDULE page
   Page-only styles layered on top of style.css. Rebuilt to match the Figma
   frame "CLASSES PAGE" (1920 × 7521), fluid down from the 1920 design width.
   ========================================================================== */

/* -------------------------------------------------------------- section */
.sched {
  position: relative;
  padding-block: clamp(3rem, 5.5vw, 7rem);
  overflow: hidden;
}
/* alternating near-white fields, matching the design's faint banding */
.sched--a { background: #fafafa; }
.sched--b { background: var(--paper); }

.sched__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 3vw, 3.25rem);
}
.sched .h-gold { position: relative; z-index: 2; }
/* keep the connector word lowercase inside the all-caps gold headings */
.sched .h-gold .conj { text-transform: lowercase; }

/* Ghost silhouette watermark behind each table — a figure caught in that
   section's discipline, exactly as the Figma frame draws it. Sits on the
   right, vertically centred, barely there. Each mark has its own aspect
   ratio, so its width is tuned per section against the design. */
.sched__sil {
  position: absolute;
  z-index: 0;
  /* nudged below dead-centre so the figure sits over the table, clear of the
     heading and filter row that occupy the top of each section */
  top: 62%;
  right: clamp(-4rem, -1vw, 0rem);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.sched__sil--yoga    { width: clamp(20rem, 34vw, 40rem); }
.sched__sil--kids    { width: clamp(18rem, 30vw, 36rem); }
.sched__sil--dance   { width: clamp(14rem, 21vw, 26rem); right: clamp(-2rem, 2vw, 4rem); top: 72%; }
.sched__sil--fitness { width: clamp(22rem, 38vw, 46rem); }

/* Decorative white swoosh line-art from the Figma frame — a single continuous
   ribbon drawn across the section behind the table. Near-white, so it reads as
   the faintest texture, exactly as the design intends. */
.sched__vec {
  position: absolute;
  z-index: 1;
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* Yoga section: wide ribbon looping in from the left and sweeping up-right. */
.sched__vec--1 {
  top: 42%;
  left: clamp(-6rem, -4vw, -2rem);
  width: clamp(46rem, 96vw, 116rem);
  transform: translateY(-50%);
}
/* Dance section: ribbon looping top-left and arcing down toward the seal. */
.sched__vec--2 {
  top: 46%;
  left: clamp(-8rem, -6vw, -3rem);
  width: clamp(40rem, 82vw, 100rem);
  transform: translateY(-50%);
}

/* Gold rotating brand seal — "One space. Every way to move" — floats past the
   Dance table's lower right, matching the badge in the design. */
.sched__seal {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 5vw, 6rem);
  bottom: clamp(-2rem, 1vw, 2rem);
  width: clamp(6rem, 9vw, 10rem);
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* -------------------------------------------------------------- filters */
.sched__filters {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.85vw, 1rem);
  margin-bottom: clamp(1.5rem, 2.6vw, 3rem);
}
/* The discipline chips scroll inside this rail; the month pill and the arrow
   sit outside it so neither is ever clipped, and the arrow drives the scroll. */
.sched__rail {
  /* grow:0 is deliberate — if the rail grew to fill the row, hiding the arrow
     would widen it, which removes the overflow, which re-hides the arrow: a
     layout feedback loop. Content-sized-but-shrinkable keeps the measurement
     stable whether or not the arrow is shown. */
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.85vw, 1rem);
  /* Horizontal scroll only. The chip entrance animation no longer nudges
     vertically (see schedule.js), so nothing overflows the block axis and the
     rail never becomes vertically scrollable. */
  overflow-x: auto;
  overflow-y: clip;
  overflow-clip-margin: 2rem;
  scrollbar-width: none;
  padding-block: 6px;
  cursor: grab;
}
.sched__rail::-webkit-scrollbar { display: none; }
.sched__rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
/* while dragging, don't let a moved-through chip catch the pointer */
.sched__rail.is-dragging .chip { pointer-events: none; }

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: clamp(0.7rem, 0.95vw, 1.1rem) clamp(1.1rem, 1.7vw, 2rem);
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  background: #f2f1ee;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.chip:hover { background: #e9e7e0; transform: translateY(-2px); }
.chip.is-active {
  color: #fff;
  background: var(--gold);
}
.chip.is-active:hover { background: var(--gold-deep); }

/* the month pill carries a caret and never toggles active */
.chip--month {
  font-weight: 500;
  background: #f5f5f5;
  cursor: default;
}
.chip--month:hover { transform: none; background: #f5f5f5; }
.chip--month .chip__caret { width: 0.7em; height: auto; opacity: 0.7; }

/* trailing round arrow that nudges the pill rail forward */
.chip--next {
  padding: 0;
  width: clamp(2rem, 2.3vw, 2.6rem);
  height: clamp(2rem, 2.3vw, 2.6rem);
  justify-content: center;
  color: #fff;
  background: var(--gold);
}
.chip--next:hover { background: var(--gold-deep); transform: translateY(-2px); }
.chip--next svg { width: 24%; height: auto; }
/* `.chip { display: inline-flex }` out-specifies the UA `[hidden]` rule, so the
   JS `next.hidden = true` needs restating to actually hide the arrow. */
.chip--next[hidden] { display: none; }

/* ---------------------------------------------------------------- table */
.sched__table {
  position: relative;
  z-index: 2;
  width: 100%;
  border-collapse: collapse;
}
.sched__table thead th {
  padding: 0 0 clamp(0.9rem, 1.4vw, 1.5rem);
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-align: left;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
/* column rhythm from the design: name is widest, the two flag columns narrow */
.sched__table col.col--class { width: 34%; }
.sched__table col.col--time  { width: 20%; }
.sched__table col.col--day   { width: 20%; }
.sched__table col.col--mixed { width: 13%; }
.sched__table col.col--ladies{ width: 13%; }
.sched__table th.col-mixed,
.sched__table td.col-mixed,
.sched__table th.col-ladies,
.sched__table td.col-ladies { text-align: center; }

.sched__table tbody td {
  padding: clamp(1.4rem, 2.4vw, 2.6rem) 0;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.sched__table tbody tr:last-child td { border-bottom: 0; }

/* coach cell — the class is named after its coach, with an optional note below */
.coach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.coach__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.coach__note {
  font-family: var(--font-body);
  font-size: 0.8em;
  color: var(--gold-dark);
  letter-spacing: 0.02em;
}

/* stacked times / days — one line per slot, mirroring the design */
.slots { display: grid; gap: 0.25em; }
.slots span {
  font-size: var(--fs-list);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.col-day .slots span { text-transform: uppercase; }

/* audience flag — filled gold check for yes; the other column is left empty */
.flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.6rem, 1.95vw, 2.25rem);
  height: clamp(1.6rem, 1.95vw, 2.25rem);
  border-radius: 50%;
}
.flag--yes { background: var(--gold); color: #fff; }
.flag--yes svg { width: 52%; height: auto; }

/* ----------------------------------------------------------- motion prep */
/* Rows/heads/chips pre-hidden only when JS runs; see schedule.js. */
.js .sched .anim { opacity: 0; }

/* filtering fade the JS toggles on the tbody while it swaps rows */
.sched__table tbody { transition: opacity 0.28s var(--ease); }
.sched__table tbody.is-swapping { opacity: 0; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .sched__sil,
  .sched__vec { display: none; }
  .sched__seal { width: 5.5rem; right: 1rem; }

  /* collapse the multi-column grid into stacked cards */
  .sched__table,
  .sched__table thead,
  .sched__table tbody,
  .sched__table col,
  .sched__table colgroup,
  .sched__table th,
  .sched__table td,
  .sched__table tr { display: block; width: auto; }

  .sched__table thead { display: none; }

  /* full-width, centred cards on mobile */
  .sched__table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.6rem 1rem;
    padding: clamp(1.3rem, 5vw, 1.75rem) 0;
    border-bottom: 1px solid var(--rule);
  }
  .sched__table tbody td { padding: 0; border: 0; }

  /* coach spans the top row, centred */
  .sched__table tbody td.col-class { grid-column: 1 / -1; margin-bottom: 0.35rem; }
  .sched__table tbody td.col-class .coach { align-items: center; }

  /* label the stacked cells with their column name */
  .sched__table tbody td.col-time::before,
  .sched__table tbody td.col-day::before,
  .sched__table tbody td.col-mixed::before,
  .sched__table tbody td.col-ladies::before {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 0.35rem;
  }
  .sched__table tbody td.col-time::before  { content: 'Time'; }
  .sched__table tbody td.col-day::before   { content: 'Day'; }
  .sched__table tbody td.col-time  { grid-column: 1; }
  .sched__table tbody td.col-day   { grid-column: 2; }

  /* audience flags: each in its own centred column with a label above */
  .sched__table tbody td.col-mixed,
  .sched__table tbody td.col-ladies {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
  }
  .sched__table tbody td.col-mixed  { grid-column: 1; }
  .sched__table tbody td.col-ladies { grid-column: 2; }
  .sched__table tbody td.col-mixed::before  { content: 'Mixed'; }
  .sched__table tbody td.col-ladies::before { content: 'Ladies'; }
  .sched__table.no-flags tbody td.col-mixed,
  .sched__table.no-flags tbody td.col-ladies { display: none; }
  /* centre the day/time slot stacks */
  .sched__table tbody .slots { justify-items: center; }
}