/* Program schedules on the site: the "Class times" card in the pricing panels and on the program
   page (GMA-381, js/class-times.js), and the featured band's "when" block and Limited space tag
   (GMA-380). Every value comes from tokens.css; program colors come from [data-color]
   (css/programs.css). Mobile first. */

/* Limited space tag: the card, the program page hero and the featured band. */
.program-tag {
  align-self: flex-start;
  background: var(--p-bg); color: var(--p-text); border-radius: var(--radius-pill);
  padding: 2px var(--gap-sm); font-size: var(--small-size); font-weight: 700;
}

/* ---------- Class times card (GMA-381) ---------- */

/* A pricing panel with a card. Phones: the card, then the plans (the markup's order). From 900px
   the plans take about two thirds on the left and the card sits on the right. A panel without a
   card has no .panel-layout and keeps its plans at full width. */
.panel-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 900px) {
  .panel-layout {
    grid-template-columns: minmax(0, 2fr) minmax(var(--class-times-min-w), 1fr);
    grid-template-areas: "plans times"; align-items: start; gap: var(--gap-lg);
  }
  .panel-layout > .plan-grid { grid-area: plans; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--plan-min-w)), 1fr)); }
  .panel-layout > .class-times { grid-area: times; }
}

.class-times {
  background: var(--c-surface); color: var(--c-text);
  border: var(--line-w) solid var(--c-line); border-top: var(--accent-w) solid var(--p-bg);
  border-radius: var(--radius-lg); padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--gap-xs);
}
.has-program-photo .class-times { box-shadow: var(--shadow-card); }
.class-times-head { display: flex; flex-direction: column; gap: var(--gap-xs); margin-bottom: var(--gap-xs); }
.class-times-title { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--h3-size); line-height: var(--h3-lh); }
.class-times-kicker {
  color: var(--c-muted); font-size: var(--eyebrow-size); font-weight: 700;
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase;
}
.class-times-line { font-weight: 800; }
.class-times-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-xs); }
/* A row: the day on the left, the class name with its time under it (the card is narrow next to
   the plans, so the two never squeeze each other). */
.class-times-row {
  display: grid; grid-template-columns: var(--class-times-day-w) minmax(0, 1fr); column-gap: var(--gap-sm); row-gap: 2px;
  align-items: baseline;
  background: var(--c-bg); border-left: var(--accent-w) solid var(--p-bg); border-radius: var(--radius-sm);
  padding: var(--schedule-row-pad-y) var(--schedule-row-pad-x); font-size: var(--small-size);
}
.class-times-day {
  grid-row: 1 / span 2;
  color: var(--c-muted); font-weight: 800; font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase;
}
.class-times-name { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.class-times-row-note { display: block; font-weight: 400; color: var(--c-muted); }
.class-times-time { grid-column: 2; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.class-times-note { color: var(--c-muted); font-size: var(--small-size); }
.class-times-free { align-self: stretch; margin-top: var(--gap-xs); }

/* ---------- featured band "when" block (GMA-380) ---------- */

.program-schedule { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm); margin-bottom: var(--gap); }
.program-when {
  align-self: stretch; display: flex; flex-direction: column; gap: 2px;
  background: var(--c-surface-raised); border-left: var(--accent-w) solid var(--p-bg);
  border-radius: var(--radius-md); padding: var(--when-pad-y) var(--when-pad-x); color: var(--c-text);
}
.program-when-main { font-weight: 800; font-size: var(--when-main-size); line-height: var(--h3-lh); }
.program-when-detail { color: var(--c-muted); font-size: var(--small-size); font-variant-numeric: tabular-nums; }
.featured-band .program-schedule { max-width: var(--featured-copy-max); margin-bottom: 0; }
.featured-more {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--touch);
  font-weight: 700; color: var(--c-on-photo); text-underline-offset: 4px;
}