/* Embrace rebuild: schedule page. Uses the tokens, header, band and location bars from home.css. */

/* one color per program, on the left edge of each class card */
.k-kids{ --k:#4fb3e8; }
.k-kmt{ --k:#4fb3e8; }
.k-bjj{ --k:var(--gold); }
.k-women{ --k:#e879a8; }
.k-mt{ --k:#ef5a4c; }
.k-cardio{ --k:#3fbf7f; }
.k-open{ --k:#a9a9ad; }   /* open mats and sparring */

.links a[aria-current="page"]::after{ transform:scaleX(1); }

.sched h1{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; line-height:.9; font-size:clamp(4rem,10vw,7.5rem); margin-bottom:1.5rem; text-align:center; }
.sched .lede{ max-width:560px; font-size:1.05rem; }

/* filters: a class dropdown and a location dropdown, no panel, each just a gold underline, centered (owner pick) */
.finder{ display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-top:1rem; }
.finder label{ display:grid; gap:.45rem; flex:0 1 320px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); text-align:left; }
.finder select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  font:600 1.2rem 'DM Sans',system-ui,sans-serif; color:var(--white); background-color:transparent;
  border:0; border-bottom:2px solid var(--gold); border-radius:0; padding:.6rem 2.2rem .6rem 0; letter-spacing:0; text-transform:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size:6px 6px; background-repeat:no-repeat;
}
.finder select option{ color:#000; }
.finder select:focus{ outline:2px solid var(--gold); outline-offset:1px; }

/* the week: one section per day. The day name sits big at the top left; under it, a column per academy
   (--cols is 1 or 2, set by schedule.js), each with its own heading and class cards. */
.week-table{ margin-top:2rem; display:grid; gap:2.5rem; }
.day{ padding-block:1.5rem; }   /* no box: each day is set apart by space and its big name */
.day:nth-child(even) .day-name{ color:var(--gold); }   /* day names alternate white and yellow */
.day-name{ font-size:clamp(3.4rem,7vw,5.4rem); line-height:.95; margin:0 0 1.5rem; color:var(--white); }
.day-rooms{ display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:2rem; }
.day-room h3, .day-alt h3{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:400; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.85rem; padding-bottom:.6rem; border-bottom:2px solid rgba(245,197,24,.35);
}
.day-list{ display:grid; gap:.55rem; }
.day-alt{ margin-top:1.75rem; }
.day-alt h3 span{ font-size:1rem; margin-right:.3rem; }
.day-rooms + .day-alt{ padding-top:0; }
/* each class is one line: time, then the name and any note, then the booking link on hover */
.cls{
  display:grid; grid-template-columns:76px 1fr auto; column-gap:1rem; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--k);
  border-radius:8px; padding:.75rem 1rem; transition:border-color .2s, background .2s;
}
.cls:hover{ background:#1a1a1d; border-color:#3a3a40; border-left-color:var(--k); }
.cls-time{ grid-row:1 / span 2; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.82rem; letter-spacing:.04em; color:var(--k); }
.cls-name{ grid-column:2; font-weight:700; color:var(--white); line-height:1.3; font-size:.98rem; }
.cls-note{ grid-column:2; color:var(--muted); font-size:.8rem; line-height:1.35; }
.cls-book{ grid-column:3; grid-row:1 / span 2; color:var(--gold); font-size:.8rem; font-weight:600; white-space:nowrap; opacity:0; transition:opacity .2s; }
.cls:hover .cls-book, .cls-book:focus-visible{ opacity:1; }
.cls-none{ color:#6d6d72; font-size:.9rem; padding:.8rem 0; }

.alt-note{ color:#d8d8da; }

.sched-note{ margin-top:2rem; color:var(--muted); font-size:.95rem; max-width:760px; }

/* location bars: directions, phone and Instagram stacked on the right */
.loc-actions.stack{ flex-direction:column; align-items:flex-start; gap:.85rem; margin-top:1.25rem; }
.loc-actions.stack .book, .loc-actions.stack .dir{ min-width:230px; text-align:center; }
.ig{
  width:48px; height:48px; display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--gold); color:var(--gold); transition:background .2s, color .2s;
}
.ig svg{ width:24px; height:24px; }
.ig:hover{ background:var(--gold); color:#000; }
.sched ~ .locations .loc-photo{ min-height:320px; }

@media (max-width:760px){
  .day{ padding-block:1rem; }
  .day-rooms{ grid-template-columns:1fr; gap:1.5rem; }
  .cls-book{ opacity:1; }
}

/* when a class page links here for one class: a note saying so, with a way back to everything */
.narrowed{ margin-top:1.5rem; color:#d8d8da; }
.narrowed b{ color:var(--gold); }
.narrowed button{ background:none; border:0; cursor:pointer; font:inherit; font-weight:700; color:var(--gold); text-decoration:underline; text-underline-offset:3px; margin-left:.4rem; }