/* v241 — the lesson stage: player on the left, timecodes beside it on the right.
   Layout only. The chapter sync, seeking, registry, copy and Bunny source are untouched. */

.kyb241-stage {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
  /* keeps the player off "giant poster" scale on wide screens */
  max-width: 1040px;
  margin: clamp(16px, 2.2vw, 24px) 0;
}

@media (min-width: 860px) {
  /* ~62% player / ~38% timecodes, inside the brief's 58–68 / 32–42 band */
  .kyb241-stage { grid-template-columns: minmax(0, 1.63fr) minmax(0, 1fr); }
  /* the list starts level with the top of the video, it does not fall below it */
  .kyb241-stage > .kyb2392-times { margin: 0; align-self: start; }
  .kyb241-stage > .kyb239-lesson__player { margin: 0; }
}

/* inside the stage the player fills its column instead of its own 720px cap */
.kyb241-stage .kyb239-lesson__player,
.kyb241-stage .kyb239__frame,
.kyb241-stage .kyb2392-times { max-width: none; }
.kyb241-stage .kyb239__play,
.kyb241-stage .kyb239__frame { width: 100%; aspect-ratio: 16 / 9; }

.kyb241-stage .kyb2392-times h2 {
  margin: 0 0 .5rem;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7570;
}

/* one calm block, not a banner with a distant list: a light shared ground */
@media (min-width: 860px) {
  .kyb241-stage > .kyb2392-times {
    padding: clamp(12px, 1.4vw, 16px);
    border: 1px solid rgba(20, 32, 28, .1);
    border-radius: 14px;
    background: rgba(20, 32, 28, .02);
  }
  .kyb241-stage .kyb2392__times { border-top: 0; }
  .kyb241-stage .kyb2392__row { padding: .5rem .55rem; }
  .kyb241-stage .kyb2392__label { font-size: .88rem; line-height: 1.4; }
}

@media (max-width: 859px) {
  /* stacked: video, then the list under it — no cramped side column */
  .kyb241-stage { grid-template-columns: minmax(0, 1fr); }
  .kyb241-stage > .kyb2392-times { margin: 0; }
}