/* CQB training embed. External CSS only (CSP style-src 'self', no unsafe-inline). */
/* The iframe height follows the embed's own width through container queries,
   because the animation switches to a stacked layout below 761px. */
.cqb-embed{
  display:block;
  position:relative;
  width:100%;
  margin:24px 0 8px;
  box-sizing:border-box;
  container-type:inline-size;
  height:800px;
}
.cqb-embed iframe.cqb-frame,
.cqb-embed iframe{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:18px;
  background:transparent;
  box-sizing:border-box;
}
.cqb-embed-note,
.wc-rail-note.cqb-embed-note{
  text-align:center;
  width:100%;
  margin:10px auto 0;
}

/* Fallback for browsers without container queries */
@media (max-width:820px){ .cqb-embed{ height:1320px; } }

/* Side-by-side layout (embed 761px and wider) */
@container (min-width:761px){
  .cqb-embed iframe, .cqb-embed iframe.cqb-frame{ height:min(calc(57cqi + 175px), 790px); position:relative; }
}
/* Stacked layout (embed narrower than 761px) */
@container (max-width:760.98px){
  .cqb-embed iframe, .cqb-embed iframe.cqb-frame{ height:max(calc(46cqi + 950px), 1135px); position:relative; }
}
@supports (container-type:inline-size){
  .cqb-embed{ height:auto; }
}

/* Reduced motion: the animation shows a still diagram plus a summary, which is taller */
@media (prefers-reduced-motion:reduce){
  @container (min-width:761px){
    .cqb-embed iframe, .cqb-embed iframe.cqb-frame{ height:min(calc(50cqi + 700px), 1200px); }
  }
  @container (max-width:760.98px){
    .cqb-embed iframe, .cqb-embed iframe.cqb-frame{ height:max(calc(2400px - 140cqi), 1700px); }
  }
}