/* ==========================================================================
   CareerByteCode video testimonials (v68)
   Public grid + lightbox for the course pages. Loaded on /courses/<slug>/
   only, alongside cbc-videos.js. Scoped entirely to .cbc-vt and .cbc-vtlb so
   it cannot collide with the review styles it sits above.

   Layout contract, matching verify/_videos.php:
     Bands render in the order the endpoint returns them.
     A band label prints only when show_label is true, so a length group that
     spans a landscape and a vertical band is headed once, not twice.
     Landscape cards run 2 across on desktop and 1 on mobile.
     Vertical cards run 4 across on desktop and 2 on mobile.
     Rows are centred, so a final short row sits in the middle rather than
     stranding at the left.
   ========================================================================== */

.cbc-vt{max-width:1120px;margin:0 auto 34px;padding:0}
.cbc-vt[hidden]{display:none}

.cbc-vt__band{margin:0 0 26px}
.cbc-vt__band:last-child{margin-bottom:0}
/* A band continuing under the heading above it sits closer to it. */
.cbc-vt__band--cont{margin-top:-14px}

.cbc-vt__label{
  font-family:"Space Grotesk",sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#5B6781;text-align:center;margin:0 0 14px;
}

.cbc-vt__row{
  display:flex;flex-wrap:wrap;gap:20px;
  justify-content:center;align-items:flex-start;
}

.cbc-vt__card{
  background:#fff;border:1px solid #e6edf5;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(11,42,74,.35);
  display:flex;flex-direction:column;
  transition:transform .14s ease, box-shadow .14s ease;
}
.cbc-vt__card:hover{transform:translateY(-3px);box-shadow:0 16px 38px -18px rgba(11,42,74,.45)}
.cbc-vt__card--land{width:480px;max-width:100%}
.cbc-vt__card--vert{width:210px;max-width:100%}
.cbc-vt__card[hidden]{display:none}

.cbc-vt__media{
  position:relative;width:100%;background:#0b2a4a;
  cursor:pointer;border:0;padding:0;display:block;
}
.cbc-vt__card--land .cbc-vt__media{aspect-ratio:16/9}
.cbc-vt__card--vert .cbc-vt__media{aspect-ratio:9/16}
.cbc-vt__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;display:block;
}
.cbc-vt__media:focus-visible{outline:3px solid #1E88E5;outline-offset:2px}

.cbc-vt__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(11,42,74,.18);transition:background .15s;
}
.cbc-vt__media:hover .cbc-vt__play{background:rgba(11,42,74,.32)}
.cbc-vt__play svg{width:58px;height:58px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.cbc-vt__card--vert .cbc-vt__play svg{width:46px;height:46px}

.cbc-vt__cap{
  padding:12px 14px;font-family:"Inter",sans-serif;
  font-size:13px;color:#41506e;line-height:1.45;
}
.cbc-vt__cap b{
  display:block;color:#0b2a4a;font-family:"Space Grotesk",sans-serif;
  font-size:13.5px;margin-bottom:2px;
}

.cbc-vt__morewrap{text-align:center;margin:22px 0 0}
.cbc-vt__more{
  background:#fff;border:1px solid #d5e2f0;color:#0D47A1;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;
  padding:10px 22px;border-radius:999px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.cbc-vt__more:hover{background:#0D47A1;color:#fff;border-color:#0D47A1}
.cbc-vt__more[hidden]{display:none}

/* --------------------------------------------------------------- lightbox */
.cbc-vtlb{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,20,38,.86);padding:24px;
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
}
.cbc-vtlb.is-on{opacity:1;visibility:visible}

.cbc-vtlb__stage{
  position:relative;background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  width:min(94vw,960px);
}
.cbc-vtlb__stage--vert{width:min(94vw,420px)}
.cbc-vtlb__frame{position:relative;width:100%;background:#000}
.cbc-vtlb__stage--land .cbc-vtlb__frame{aspect-ratio:16/9}
.cbc-vtlb__stage--vert .cbc-vtlb__frame{aspect-ratio:9/16}
.cbc-vtlb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.cbc-vtlb__cap{
  padding:12px 16px;background:#0b2a4a;color:#dce8f7;
  font-family:"Inter",sans-serif;font-size:13.5px;line-height:1.45;
}
.cbc-vtlb__cap b{
  display:block;color:#fff;font-family:"Space Grotesk",sans-serif;
  font-size:14.5px;margin-bottom:2px;
}

.cbc-vtlb__x,
.cbc-vtlb__nav{
  position:absolute;border:0;cursor:pointer;
  background:rgba(11,26,48,.72);color:#fff;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;transition:background .15s;
}
.cbc-vtlb__x:hover,.cbc-vtlb__nav:hover{background:rgba(30,136,229,.9)}
.cbc-vtlb__x:focus-visible,.cbc-vtlb__nav:focus-visible{outline:3px solid #90CAF9;outline-offset:2px}

.cbc-vtlb__x{top:-52px;right:0;width:40px;height:40px;font-size:22px;line-height:1}
.cbc-vtlb__nav{top:50%;transform:translateY(-50%);width:44px;height:44px}
.cbc-vtlb__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cbc-vtlb__nav--prev{left:-60px}
.cbc-vtlb__nav--next{right:-60px}
.cbc-vtlb__nav[hidden]{display:none}

.cbc-vtlb__count{
  position:absolute;top:-46px;left:0;color:#9fb6d4;
  font-family:"JetBrains Mono",monospace;font-size:12.5px;letter-spacing:.04em;
}

/* ------------------------------------------------------------- responsive */
@media(max-width:1100px){
  .cbc-vt__card--land{width:calc(50% - 10px);min-width:300px}
}
@media(max-width:900px){
  .cbc-vtlb__nav--prev{left:6px}
  .cbc-vtlb__nav--next{right:6px}
  .cbc-vtlb__nav{background:rgba(11,26,48,.9)}
}
@media(max-width:720px){
  .cbc-vt__row{gap:14px}
  /* Landscape goes one across so it never shrinks below readable. */
  .cbc-vt__card--land{width:100%;min-width:0;max-width:460px}
  /* Verticals go two across, which keeps the reel feel without the cards
     becoming thumbnails you cannot see a face in. */
  .cbc-vt__card--vert{width:calc(50% - 7px);max-width:200px}
  .cbc-vt__play svg{width:44px;height:44px}
  .cbc-vt__card--vert .cbc-vt__play svg{width:34px;height:34px}
  .cbc-vt__cap{padding:10px 11px;font-size:12.5px}
  .cbc-vtlb{padding:16px}
  .cbc-vtlb__x{top:-46px;width:36px;height:36px}
}

@media(prefers-reduced-motion:reduce){
  .cbc-vt__card,.cbc-vtlb{transition:none}
  .cbc-vt__card:hover{transform:none}
}