/* Session Schedule board.
 *
 * This file does NOT define a look of its own. The page is built from the site's real Webflow
 * components (section_feature, section_calendar.background-gradient-red, daily_component,
 * section_cta) exactly as /regina/camps/summer uses them; everything here only lays out the parts
 * the export has no component for — the week navigator, the day grid, the steps and the program
 * cards.
 *
 * PALETTE: black, white, grey and red (#BF202F). Nothing else. The HQ calendar colour-codes
 * session types in greens, purples and yellows; those colours are deliberately NOT carried onto
 * the website (Andrew, 2026-07-30). The board's own shades, added 2026-08-01, all sit inside that
 * palette — see FAMILIES below.
 */

:root {
  --sch-red: #bf202f;
  --sch-ink: #101014;
}

/* ---- The board sits at the TOP of the page (Andrew, 2026-08-01: "when you get
   to that page, it should just pop up the calendar"). The band above the grid
   holds exactly two things: the heading and the week navigator, on ONE line.
   The eyebrow, the lead sentence and the two buttons were all taken out of it
   the same day ("look at how much info and text you have right at the top") —
   and the two buttons that briefly sat under the board went with them. ---- */
.sch-topinner {
  padding: 2.4rem 0 2rem;
}
/* The Webflow component this band borrows puts a 32px gap between its children,
   which on a phone pushed the board another 90px down the page for no reason. */
.sch-top .daily_component {
  gap: 0.9rem;
}
.sch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 2rem;
}
.sch-head h1 {
  color: #fff;
  /* Kept in the family: every other page's h1 is 56px. This one sits in a tight
     band above the board, so it is the small end of the same scale rather than
     a different size altogether. */
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.1;
  margin: 0;
  flex: 0 1 auto;
}

/* ---- Week navigator + filters, sitting on the red band ---- */
.sch-weeknav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.sch-arrow {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 100px;
  border: 0.0875rem solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.sch-arrow:hover:not(:disabled) {
  background: #fff;
  border-color: #fff;
  color: var(--sch-red);
}
.sch-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.sch-weeklabel {
  min-width: 10ch;
  color: #fff;
}
.sch-weekhead {
  font-size: 1.15rem;
  line-height: 1.2;
  color: #fff;
}
.sch-weekrange {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ONE ROW, ALWAYS (Andrew, 2026-08-01: "that pro-clinic one is on the second
   row. There shouldn't be the second row"). A wrapped chip row is what makes the
   band look untidy, and it wraps at some width whatever the labels say — so the
   row never wraps at all: it scrolls sideways instead, on a desktop exactly as
   it already did on a phone. The chips are also a size smaller than they were. */
.sch-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* The last chip fades out when there is more to scroll to, so a cut-off pill
     reads as "keep going" rather than as a bug. The matching padding means that
     when everything fits, the fade lands on empty space and touches no chip. */
  padding-right: 2.5rem;
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.sch-filters::-webkit-scrollbar {
  display: none;
}
.sch-chip {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  border: 0.0875rem solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.12);
  border-radius: 100px;
  padding: 0.33rem 0.68rem;
  font-size: 0.74rem;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sch-chip:hover {
  border-color: #fff;
}
.sch-chip[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--sch-red);
  font-weight: 600;
}
.sch-back {
  margin-left: auto;
}
.sch-back[hidden] {
  display: none;
}

/* ---- FAMILIES: what colour a session is drawn in ----------------------------
   Andrew, 2026-08-01: "we should also slightly color things differently... but
   still look really on brand with the red, gray, white, and black". The grouping
   is by what a parent buys, not by session type:
     red shades  the three weekly sessions that run off the same session credits
     grey        the term-long programs (Young Stars, Adult League)
     charcoal    camps and the pro clinics
     black + red edge   the HoopLife League, the flagship
     white + red edge   open gym, the free drop-in
   The same three variables drive the calendar block, the filter chip's dot and
   the program card's swatch, so the key can never drift from the board. */
[data-fam] {
  --fam-bg: #6f707c;
  --fam-fg: #ffffff;
  --fam-edge: transparent;
  --fam-line: rgba(0, 0, 0, 0.22);
}
[data-fam][data-prog="training"] {
  --fam-bg: #bf202f;
}
[data-fam][data-prog="threes"] {
  --fam-bg: #8e1622;
}
[data-fam][data-prog="girls"] {
  --fam-bg: #e0687a;
}
[data-fam][data-prog="stars"] {
  --fam-bg: #6f707b;
}
[data-fam][data-prog="adult"] {
  --fam-bg: #494a55;
}
[data-fam][data-prog="camps"] {
  --fam-bg: #3b3c46;
}
[data-fam][data-prog="clinic"] {
  --fam-bg: #3b3c46;
  --fam-edge: #ffffff;
}
[data-fam][data-prog="league"] {
  --fam-bg: #0b0b0f;
  --fam-edge: var(--sch-red);
}
[data-fam][data-prog="opengym"] {
  --fam-bg: #ffffff;
  --fam-fg: #16171d;
  --fam-edge: var(--sch-red);
  --fam-line: #d7d7dd;
}

.sch-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 100px;
  flex: none;
  background: var(--fam-bg);
  box-shadow: inset 0.18rem 0 0 var(--fam-edge), 0 0 0 0.0875rem rgba(0, 0, 0, 0.15);
}
.sch-dot.is-all {
  background: linear-gradient(135deg, var(--sch-red) 0 34%, #83848f 34% 67%, #101014 67% 100%);
  box-shadow: 0 0 0 0.0875rem rgba(0, 0, 0, 0.15);
}
.sch-chip[aria-pressed="true"] .sch-dot {
  box-shadow: inset 0.18rem 0 0 var(--fam-edge), 0 0 0 0.0875rem rgba(0, 0, 0, 0.25);
}

/* ---- The week ---- */
.sch-week[hidden] {
  display: none;
}
/* The season note ("Summer Camps - Week 3"). It used to be a bordered pill next
   to the week, which gave a footnote the same weight as the navigation (Andrew,
   2026-08-01: "needs to be way more discreet"). It is now a quiet aside on the
   date line. */
.sch-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.sch-note::before {
  content: "\00b7";
  margin-right: 0.5rem;
}
.sch-note[hidden] {
  display: none;
}
/* THE BOARD — one card per day, in the site's own daily_organizer shape.
   Rebuilt 2026-08-01 after the time-grid version read as a spreadsheet: an hour
   ruler, grey rules and five enormous empty rectangles for the camp days. This
   is shorter, denser and the same component on a phone as on a desktop, one
   column instead of seven.

   EVERY DAY IS THE SAME SIZE (Andrew, 2026-08-01: "look at how you have Thursday
   is long and Wednesday is shorter. Each day should be the same size"). The
   columns stretch to the tallest day, and every session block is one fixed
   height, so the blocks line up in rows straight across the week instead of
   each column setting its own rhythm. */
.sch-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: stretch;
}
.sch-day {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 0.9rem 1.8rem -0.4rem rgba(0, 0, 0, 0.28);
}
.sch-day-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.5rem;
  background: var(--sch-ink);
  color: #fff;
}
.sch-day.is-today .sch-day-head {
  background: var(--sch-red);
}
.sch-day-name {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.sch-day-date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.sch-day.is-today .sch-day-date {
  color: rgba(255, 255, 255, 0.85);
}
.sch-day-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.45rem;
  min-height: 4.5rem;
}

/* A session. The colour is the family (see FAMILIES above); the shape is the
   same for every one, so a camp day no longer swallows the column. */
.sch-ev {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* One height for every block, whether or not it carries an age line, so the
     rows read straight across the seven columns. */
  min-height: 4.2rem;
  padding: 0.5rem 0.6rem 0.55rem;
  border-radius: 0.5rem;
  background: var(--fam-bg);
  color: var(--fam-fg);
  text-decoration: none;
  box-shadow: inset 0.2rem 0 0 var(--fam-edge);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.sch-ev[data-prog="opengym"] {
  border: 0.0875rem solid var(--fam-line);
}
.sch-ev:hover {
  filter: brightness(1.12);
  transform: translateY(-0.1rem);
  box-shadow: inset 0.2rem 0 0 var(--fam-edge), 0 0.4rem 0.9rem rgba(0, 0, 0, 0.25);
}
.sch-ev[data-prog="opengym"]:hover {
  filter: none;
  background: #fff5f6;
}
.sch-ev[hidden] {
  display: none;
}
.sch-ev-time {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.88;
  margin-bottom: 0.1rem;
}
.sch-ev-title {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
}
.sch-ev-sub {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  opacity: 0.85;
}
/* A block whose exact hour is bookable in Citrus deep-links to that checkout
   (2026-08-03) and says so, quietly: one small "Register ›" line inside the
   block. Same palette, no new colour — the block's own text at full weight. */
.sch-ev-book {
  display: block;
  margin-top: 0.18rem;
  /* 0.68rem measured 10.9px on a phone - under the sitewide 12px floor. */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  opacity: 0.92;
}
.sch-none {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 3.2rem;
  font-size: 0.75rem;
  color: #b0b0b8;
  text-align: center;
}
.sch-none span {
  font-size: 0.7rem;
  color: #8a8a8a;
}
.sch-none[hidden] {
  display: none;
}
/* ---- THE EMPTY-FILTER CARD ------------------------------------------------
   Andrew, 2026-08-03: a chip with nothing on it should sell, not show seven
   grey "No sessions" boxes. The card takes the grid's place, so it is sized
   like a day card row, not like a banner: one white card on the red band, the
   program's own colour down its left edge, and at most two actions. */
/* The grid sets display:grid, which outranks the browser's own [hidden] rule —
   without this the promo card and the week's boxes would both show. */
.sch-grid[hidden] {
  display: none;
}
.sch-promo {
  position: relative;
  display: flex;
  background: #fff;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow: 0 0.9rem 1.8rem -0.4rem rgba(0, 0, 0, 0.28);
}
.sch-promo[hidden] {
  display: none;
}
.sch-promo-swatch {
  flex: none;
  width: 0.5rem;
  background: var(--fam-bg);
  box-shadow: inset -0.0875rem 0 0 rgba(0, 0, 0, 0.08);
}
.sch-promo-body {
  padding: 1.35rem 1.5rem 1.4rem;
}
.sch-promo-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sch-red);
}
.sch-promo-title {
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--sch-ink);
}
.sch-promo-next {
  margin: 0.45rem 0 0;
  font-weight: 700;
  color: var(--sch-ink);
}
.sch-promo-next[hidden] {
  display: none;
}
.sch-promo-line {
  margin: 0.45rem 0 0;
  max-width: 46rem;
  color: #4a4a52;
  font-size: 0.95rem;
  line-height: 1.5;
}
.sch-promo-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 1rem;
}
.sch-promo-jump {
  /* 44px tall including the padding: this is a real tap target on a phone. */
  border: 0;
  border-radius: 100px;
  padding: 0.7rem 1.2rem;
  background: var(--sch-ink);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.sch-promo-jump:hover {
  background: var(--sch-red);
}
.sch-promo-jump[hidden] {
  display: none;
}
.sch-promo-alt {
  font-weight: 600;
  color: var(--sch-red);
  /* Padded to the same 44px band as the buttons beside it. */
  padding: 0.7rem 0;
}
.sch-promo-alt::after {
  content: " \203A";
}
@media screen and (max-width: 47.9375rem) {
  .sch-promo-body {
    padding: 1.1rem 1.1rem 1.2rem;
  }
  .sch-promo-ctas .button {
    width: 100%;
    text-align: center;
  }
  .sch-promo-jump {
    width: 100%;
  }
}

.sch-blank {
  border: 0.0875rem solid rgba(255, 255, 255, 0.5);
  border-radius: 0.75rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #fff;
}
.sch-blank a {
  color: #fff;
}
/* ---- CARD ROWS ------------------------------------------------------------
   Every card row on this page (the three steps, the three plans, the programs)
   is the same shape: three across, wrapping, and the last row CENTRED. The
   program list is built from whatever is on the calendar, so its count moves —
   a plain grid left the ninth card hanging alone against the left margin, the
   same untidy second row Andrew struck off the filter chips. Centred, an odd
   card reads as deliberate. */
/* Four photos beside the invest section, white-bordered like the home page
   strips (Andrew, 2026-08-03: "you need to have four pictures next to that"). */
.sch-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.sch-quad-cell {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 0.45rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}
.sch-quad-cell img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.sch-steps,
.sch-progs,
.sch-plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.sch-step,
.sch-prog,
.sch-plan {
  flex: 1 1 18rem;
  max-width: calc((100% - 2.5rem) / 3);
}
@media screen and (max-width: 991px) {
  .sch-step,
  .sch-prog,
  .sch-plan {
    max-width: calc((100% - 1.25rem) / 2);
  }
}
@media screen and (max-width: 47.9375rem) {
  .sch-step,
  .sch-prog,
  .sch-plan {
    max-width: 100%;
  }
}
.sch-step {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: #fff;
  border: 0.0875rem solid #e6e6e6;
  border-radius: 0.75rem;
  padding: 1.75rem 1.5rem 1.6rem;
  text-decoration: none;
  color: var(--sch-ink);
  box-shadow: 0 1rem 2rem -0.05rem rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sch-step:hover {
  transform: translateY(-3px);
  border-color: var(--sch-red);
  box-shadow: 0 1.25rem 2.5rem -0.05rem rgba(0, 0, 0, 0.12);
}
.sch-step-n {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 100px;
  background: var(--sch-red);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sch-step h3,
.sch-prog h3 {
  margin: 0;
  color: var(--sch-ink);
}
.sch-step p,
.sch-prog p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #5a5a62;
}

/* ---- What a session costs: memberships and session packs ----
   Same card as the steps and the program tiles, with the price given the weight
   instead of a heading. Black, white and red only. */
.sch-plans {
  margin-top: 3rem;
}
.sch-plan {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #fff;
  border: 0.0875rem solid #e6e6e6;
  border-radius: 0.75rem;
  padding: 1.75rem 1.5rem 1.6rem;
  text-decoration: none;
  color: var(--sch-ink);
  box-shadow: 0 1rem 2rem -0.05rem rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sch-plan:hover {
  transform: translateY(-3px);
  border-color: var(--sch-red);
  box-shadow: 0 1.25rem 2.5rem -0.05rem rgba(0, 0, 0, 0.12);
}
.sch-plan.is-feature {
  border-color: var(--sch-red);
  border-width: 0.125rem;
}
.sch-plan-name {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--sch-red);
}
.sch-plan-price {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.sch-plan-term {
  font-size: 0.85rem;
  color: #8a8a8a;
}
.sch-plan p {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #5a5a62;
}
.sch-plan-list {
  list-style: none;
  margin: 0.85rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sch-plan-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.sch-plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 100px;
  background: var(--sch-red);
}
.sch-plans-note {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #5a5a62;
}
.sch-plans-note a {
  color: var(--sch-red);
  font-weight: 600;
}

/* ---- Programs on the calendar ---- */
.sch-prog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
  background: #fff;
  border: 0.0875rem solid #e6e6e6;
  border-radius: 0.75rem;
  padding: 1.9rem 1.5rem 1.6rem;
  text-decoration: none;
  color: var(--sch-ink);
  box-shadow: 0 1rem 2rem -0.05rem rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.sch-prog:hover {
  transform: translateY(-3px);
  border-color: var(--sch-red);
  box-shadow: 0 1.25rem 2.5rem -0.05rem rgba(0, 0, 0, 0.12);
}
/* The swatch ties the card to the colour its blocks are drawn in on the board.
   It runs the full width of the card top: as a small floating dash it read as a
   stray mark rather than a key. */
.sch-prog-swatch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.4rem;
  background: var(--fam-bg);
  box-shadow: inset 0 -0.0875rem 0 rgba(0, 0, 0, 0.08);
}
.sch-prog-go {
  margin-top: auto;
  padding-top: 0.35rem;
  font-weight: 600;
  color: var(--sch-red);
}
.sch-prog-go::after {
  content: " \203A";
}

@media screen and (max-width: 991px) {
  .sch-topinner {
    padding: 1.6rem 0 1.5rem;
  }
  .sch-head h1 {
    font-size: 1.85rem;
    flex: 1 1 100%;
  }
  /* Mobile-overrides.css grows the chips to a 44px tap target; the type comes
     back up to the 12px floor to match. */
  .sch-chip {
    font-size: 0.8rem;
    padding: 0.42rem 0.85rem;
  }
}

@media screen and (max-width: 767px) {
  /* The arrows stay on the same line as the week they page through. Letting the
     navigator wrap put two lonely circles on a row of their own above it. */
  .sch-weeknav {
    flex-wrap: nowrap;
    width: 100%;
  }
  .sch-weeklabel {
    flex: 1;
    min-width: 0;
  }
  .sch-weekrange {
    flex-wrap: wrap;
    gap: 0 0.5rem;
  }
  /* On its own line the separator dot is just a stray mark. */
  .sch-note::before {
    content: none;
  }
  .sch-back {
    margin-left: 0;
  }
}

/* ---- NARROWER SCREENS -----------------------------------------------------
   The board is the same component everywhere; only the number of columns
   changes. Seven across on a desktop, four on a tablet, one on a phone — where
   it becomes the agenda a parent actually wants: one day after another, in
   order, with nothing taken away. */
@media screen and (max-width: 1200px) {
  .sch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (max-width: 47.9375rem) {
  .sch-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .sch-day-head {
    justify-content: flex-start;
    padding: 0.6rem 0.9rem;
  }
  .sch-day-name {
    font-size: 1rem;
  }
  .sch-day-date {
    font-size: 0.85rem;
  }
  .sch-day-body {
    min-height: 0;
    padding: 0.5rem;
  }
  .sch-ev {
    padding: 0.65rem 0.85rem 0.7rem;
  }
  .sch-ev-title {
    font-size: 0.95rem;
  }
  /* 12px is the floor on a phone (npm run audit:mobile enforces it). */
  .sch-ev-time,
  .sch-ev-sub,
  .sch-none,
  .sch-none span {
    font-size: 0.8rem;
  }
  .sch-none {
    min-height: 0;
    flex-direction: row;
    gap: 0.35rem;
    padding: 0.2rem 0;
  }
}