/* BFX Learn — Showcase hero + clinical video rows
   Mirrors the boomerangfxlearn.com Podcast / Clinical Library pages:
   full-bleed muted trailer, left-aligned title, "Watch the trailer" lightbox,
   and horizontally scrolling thumbnail rows directly under the fold.
   Driven by window.SHOWCASE_CONFIG — see showcase.js.
*/
:root{
  --sc-navy:#000419;
  --sc-blue:#065fc9;
  --sc-blue-2:#00a4e5;
  --sc-cyan:#53eafd;
  --sc-ink:#202020;
}

/* ============ HERO ============ */
/* .hero is kept on the section for nav anchors + analytics getLocation();
   these rules override the page's centred .hero layout. */
.hero.sc-hero{
  display:block;min-height:min(92vh,860px);
  padding:150px 0 190px;
  background:var(--sc-navy) url('/assets/learn-cover-bg.avif') center/cover no-repeat;
  text-align:left;
}
.sc-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.sc-hero-media iframe{
  position:absolute;top:50%;left:50%;
  width:max(100%, calc(100vh * 16 / 9));
  height:max(56.25vw, 100%);
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  opacity:0;transition:opacity .8s ease;
}
/* Only reveal the video once Vimeo reports it is actually playing, so a
   blocked or slow embed never shows Vimeo's error screen over the hero. */
.sc-hero-media.is-playing iframe{opacity:1}
.sc-hero-media{background:center/cover no-repeat}   /* heroPoster, set inline by showcase.js */
.sc-hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border:0;pointer-events:none;opacity:0;transition:opacity .8s ease;
}
.sc-hero-media.is-playing video{opacity:1}
.sc-hero-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,4,25,.88) 0%, rgba(0,4,25,.6) 38%, rgba(0,4,25,.1) 72%, rgba(0,4,25,0) 100%),
    linear-gradient(to top, var(--sc-navy) 0%, rgba(0,4,25,.6) 18%, rgba(0,4,25,0) 45%);
}
.sc-hero-inner{position:relative;z-index:2}
.sc-copy{max-width:760px;color:#fff}
.sc-kicker{
  display:inline-block;margin-bottom:18px;padding:4px 10px;border-radius:3px;
  background:var(--sc-cyan);color:var(--sc-ink);
  font:700 11px/1.4 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;
}
.sc-title{
  font:700 clamp(40px,6.2vw,80px)/1 'Poppins',sans-serif;
  text-transform:uppercase;letter-spacing:-.01em;margin:0;
}
.sc-subtitle{font:600 clamp(24px,3.4vw,48px)/1.1 'Poppins',sans-serif;margin:6px 0 16px}
.sc-byline{font-size:16px;color:rgba(255,255,255,.85);margin-bottom:18px}
.sc-price{font:400 clamp(17px,1.7vw,24px)/1.5 'Poppins',sans-serif;margin-bottom:26px}
.sc-price b{font-weight:600}
.sc-price span{display:block;font-size:.72em;color:rgba(255,255,255,.75)}
.sc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.sc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 28px;border-radius:3px;border:0;cursor:pointer;
  font:500 17px/1.2 -apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  transition:filter .2s,transform .2s;white-space:nowrap;
}
.sc-btn[hidden]{display:none}
.sc-btn:hover{filter:brightness(.92);transform:translateY(-1px)}
.sc-btn:focus-visible{outline:3px solid var(--sc-cyan);outline-offset:2px}
.sc-btn svg{width:16px;height:16px;flex-shrink:0}
.sc-btn-play{background:#fff;color:var(--sc-ink)}
.sc-btn-cta{background:var(--sc-blue);color:#fff}
.sc-btn-info{background:#ccc;color:var(--sc-ink)}
.sc-trust{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:rgba(255,255,255,.75)}
.sc-trust span{display:inline-flex;align-items:center;gap:6px}
.sc-trust svg{width:14px;height:14px;color:var(--sc-cyan)}

/* ============ ROWS ============ */
.sc-rows{
  /* The first row overlaps the bottom of the hero (like the library's
     "Your Next Watch"); the fade must end exactly where the hero does. */
  --sc-overlap:150px;
  position:relative;z-index:3;color:#fff;
  margin-top:calc(-1 * var(--sc-overlap));padding:0 0 56px;
  background:linear-gradient(to bottom, rgba(0,4,25,0) 0, var(--sc-navy) var(--sc-overlap));
}
.sc-row + .sc-row{margin-top:36px}
.sc-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.sc-row-title{font:600 clamp(18px,1.8vw,24px)/1.2 'Poppins',sans-serif;margin:0}
.sc-row-meta{font-size:13px;color:rgba(255,255,255,.6)}
.sc-row-wrap{position:relative}
.sc-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*14px)/5);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 0 8px;
}
.sc-track::-webkit-scrollbar{display:none}
.sc-card{scroll-snap-align:start;display:block;color:#fff;text-decoration:none}
.sc-thumb{
  position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:#0a0f2e;box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.sc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.sc-card:hover .sc-thumb img,.sc-card:focus-visible .sc-thumb img{transform:scale(1.06)}
.sc-card:focus-visible{outline:none}
.sc-card:focus-visible .sc-thumb{outline:3px solid var(--sc-cyan);outline-offset:2px}
.sc-badge{
  position:absolute;top:8px;left:8px;padding:3px 7px;border-radius:3px;
  background:var(--sc-cyan);color:var(--sc-ink);font:700 10px/1.3 -apple-system,system-ui,sans-serif;
}
.sc-dur{
  position:absolute;top:8px;right:8px;padding:3px 7px;border-radius:3px;
  background:rgba(0,0,0,.65);color:#fff;font:600 10px/1.3 -apple-system,system-ui,sans-serif;
}
.sc-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,4,25,.35);opacity:0;transition:opacity .25s;
}
.sc-play span{
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
}
.sc-play svg{width:18px;height:18px;margin-left:3px;color:var(--sc-ink)}
.sc-card:hover .sc-play,.sc-card:focus-visible .sc-play{opacity:1}
.sc-card-title{font-size:13px;line-height:1.4;margin-top:9px;color:rgba(255,255,255,.9);text-wrap:pretty}
/* Typographic tile for lessons without artwork (cards with no `img`) */
.sc-thumb-text{
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:34px 14px 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(0,164,229,.55) 0%, rgba(0,164,229,0) 60%),
    linear-gradient(135deg, var(--sc-blue) 0%, #0a1b4d 100%);
}
.sc-tt-kicker{font:600 11px/1.3 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sc-tt-label{font:700 clamp(18px,1.7vw,24px)/1.1 'Poppins',sans-serif;color:#fff;text-wrap:balance}

/* Optional art beside the hero copy (e.g. a book cover) */
.sc-hero-inner.has-art{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px}
.sc-hero-art{position:relative;z-index:2}
.sc-hero-art img{
  width:clamp(220px,22vw,300px);height:auto;border-radius:4px 8px 8px 4px;
  transform:perspective(900px) rotateY(-14deg) rotateX(3deg);
  box-shadow:18px 26px 60px rgba(0,0,0,.55),-3px 0 10px rgba(0,0,0,.3);
}
/* A product mockup already has its own perspective and shadow */
.sc-hero-art.is-mockup img{
  width:clamp(260px,27vw,400px);transform:none;box-shadow:none;border-radius:0;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.35));
}
.sc-arrow{
  position:absolute;top:calc(50% - 24px);transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,4,25,.8);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.4);transition:opacity .2s,background .2s;
}
.sc-arrow:hover{background:var(--sc-blue)}
.sc-arrow:focus-visible{outline:3px solid var(--sc-cyan)}
.sc-arrow[disabled]{opacity:0;pointer-events:none}
.sc-arrow svg{width:18px;height:18px}
.sc-prev{left:-18px}
.sc-next{right:-18px}

/* ============ LIGHTBOX ============ */
.sc-lightbox{
  position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,2,12,.86);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.sc-lightbox.open{opacity:1;visibility:visible}
.sc-lb-frame{
  position:relative;width:min(1088px,100%);aspect-ratio:16/9;
  background:#000;border-radius:8px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.sc-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sc-lb-close{
  position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;
}
.sc-lb-close:hover{background:rgba(255,255,255,.24)}
.sc-lb-close:focus-visible{outline:3px solid var(--sc-cyan)}
.sc-lb-close svg{width:20px;height:20px}
body.sc-lock{overflow:hidden}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .sc-track{grid-auto-columns:calc((100% - 3*14px)/4)}
}
@media (max-width:768px){
  .hero.sc-hero{min-height:0;padding:120px 0 150px}
  .sc-hero-shade{
    background:
      linear-gradient(to top, var(--sc-navy) 0%, rgba(0,4,25,.62) 35%, rgba(0,4,25,.28) 100%);
  }
  /* lighter shade on phones so the clip reads; a soft shadow keeps the copy legible */
  .sc-copy{text-shadow:0 1px 12px rgba(0,4,25,.55)}
  .sc-copy .sc-btn,.sc-copy .sc-kicker{text-shadow:none}
  .sc-rows{--sc-overlap:110px}
  .sc-hero-inner.has-art{grid-template-columns:1fr}
  .sc-hero-art{display:none}
  .sc-track{grid-auto-columns:calc((100% - 14px)/2.3)}
  .sc-arrow{display:none}
}
@media (max-width:640px){
  .sc-actions{flex-direction:column;align-items:stretch}
  .sc-btn{width:100%}
  .sc-track{grid-auto-columns:72%;gap:12px}
  .sc-row-meta{display:none}
}
@media (hover:none){
  .sc-arrow{display:none}
  .sc-play{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sc-track{scroll-behavior:auto}
  .sc-thumb img,.sc-btn,.sc-lightbox{transition:none}
}