/* BMG — layout for a SCORM lesson inside the LMS player.
   Added 18 Sep 2026. Delete this file and its <link> in index.html to revert.

   Every rule is scoped to a page whose iframe is a SCORM lesson (`/api/scorm/`),
   so Bunny video lessons are completely untouched.

   The problems this solves, all on /learn/<id> with a SCORM lesson:
   1. The lesson box had `min-height: 560px` and no real height, so the course
      got about half the window and had to scroll inside its own little box,
      which also pushed its Back/Next bar out of sight.
   2. The lesson title and module strip appeared twice — in the sidebar and
      again under the player.
   3. The Course Contents sidebar showed one unclickable item ("0 / 1 lessons")
      and wasted 320px, while Overview / What you'll learn sat below the course
      where you had to scroll past the whole lesson to reach it.

   So: the course fills the column, the duplicate strip goes, the sidebar goes,
   and Overview moves into the right-hand strip where the sidebar used to be. */

/* ---------- wide screens: course on the left, overview on the right ---------- */
@media (min-width: 1100px) {

  /* reserve the right strip */
  div[style*="grid-template-columns"]:has(iframe[src*="/api/scorm/"]) {
    grid-template-columns: 1fr 380px !important;
  }

  /* the sidebar is one dead row for a SCORM course; the course has its own menu */
  div:has(iframe[src*="/api/scorm/"]) > aside { display: none !important; }

  /* the course takes the whole column */
  div:has(> iframe[src*="/api/scorm/"]) {
    height: calc(100vh - 165px) !important;
    min-height: 420px !important;
    max-height: none !important;
    width: 100% !important;        /* drop the 16:9 width cap; a course is not a video */
    margin-bottom: 0 !important;
  }
  div:has(> iframe[src*="/api/scorm/"]) > iframe[src*="/api/scorm/"] {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* the repeated title strip under the player */
  div:has(> iframe[src*="/api/scorm/"]) + div { display: none !important; }

  /* Overview / Notes / What you'll learn -> the right-hand strip */
  div:has(> iframe[src*="/api/scorm/"]) + div + div {
    position: fixed !important;
    top: 113px !important;
    right: 0 !important;
    width: 380px !important;
    height: calc(100vh - 113px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, .07) !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    z-index: 5 !important;
  }
}

/* ---------- narrow or short: keep it stacked, just size the course sensibly ---------- */
@media (max-width: 1099px), (max-height: 700px) {
  div:has(> iframe[src*="/api/scorm/"]) {
    height: calc(100vh - 165px) !important;
    min-height: 380px !important;
    width: 100% !important;
  }
  div:has(> iframe[src*="/api/scorm/"]) > iframe[src*="/api/scorm/"] {
    height: 100% !important;
    min-height: 0 !important;
  }
  div:has(> iframe[src*="/api/scorm/"]) + div { display: none !important; }
}