/* Classes page — Registration + Class Schedule. Ported verbatim from the mockup. */

/* First subsection on this page always uses the muted chevron color. */
#registration .sc-chevron { color: var(--t2); }

.sc-card.card-blue { background: var(--b-blue); }
.sc-card.card-blue.is-open { border-color: rgba(9,175,246,0.32); }
.sc-card.card-blue .sc-toggle:hover,
.sc-card.card-blue.is-open .sc-toggle { background: rgba(9,175,246,0.08); }
.sc-card.card-blue .sc-toggle-text p { color: var(--t1); }
.sc-card.card-blue .sc-chevron { color: var(--blue); }

/* ── Registration ─────────────────────────────────────────────── */
.ann-eyebrow {
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 0.75rem;
}
.ann-title {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600; color: var(--t1); line-height: 1.2;
  margin-bottom: 1.25rem;
}
.ann-body p { font-size: 1rem; color: var(--t1); line-height: 1.7; }
.ann-body p + p { margin-top: 1rem; }
.ann-footer { margin-top: 1.75rem; }

/* ── Class Schedule ───────────────────────────────────────────── */
.sched-groups { display: flex; flex-direction: column; gap: 2rem; }

.sched-group-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; color: var(--t1);
  margin-bottom: 0.5rem;
}

.sched-rows { display: flex; flex-direction: column; gap: 0.5rem; }

.sched-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 120px 120px 135px minmax(100px, 1.2fr) 50px;
  align-items: center;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--b-dim);
  border-radius: 4px;
}
.sched-name { font-weight: 600; color: var(--t1); }
.sched-age, .sched-day-cell, .sched-time, .sched-style { font-size: 0.9rem; color: var(--t1); }
.sched-cell-status { display: flex; justify-content: flex-end; }

.status-tag {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 50px; white-space: nowrap;
}
.status-open    { background: var(--b-teal);  color: var(--teal); }
.status-limited { background: var(--b-amber); color: var(--amber); }
.status-full    { background: var(--b-berry); color: var(--berry); }

@media (max-width: 768px) {
  .sched-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   status"
      "age    age"
      "day    day"
      "time   time"
      "style  style";
    row-gap: 0.35rem;
  }
  .sched-name         { grid-area: name; }
  .sched-cell-status  { grid-area: status; }
  .sched-age          { grid-area: age; }
  .sched-day-cell     { grid-area: day; }
  .sched-time         { grid-area: time; }
  .sched-style        { grid-area: style; }

  .sched-age::before,
  .sched-day-cell::before,
  .sched-time::before,
  .sched-style::before {
    font-weight: 700; color: var(--t3); margin-right: 0.4em;
  }
  .sched-age::before   { content: "Ages: "; }
  .sched-day-cell::before { content: "Day: "; }
  .sched-time::before  { content: "Time: "; }
  .sched-style::before { content: "Style: "; }
}