/* Basic Curriculum -> study popup (study-video.js drives it).

   Header look, used by every chart card (and any card added later — nothing to set per card):
   the study's chart fills the top of the popup and fades down into the dark card,
   with the study name in white sitting on the fade. The chart comes from the card's --img
   (or data-poster), so a new card only needs its picture and title. */

.sv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0;
  transition: opacity .25s ease;
}
.sv-overlay[hidden] { display: none; }
.sv-overlay.is-open { opacity: 1; }

.sv-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sv-card {
  position: relative;
  width: min(980px, 100%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(16, 22, 38, .96) 0%, rgba(42, 69, 192, .22) 100%), #0b1020;
  border: 1px solid rgba(80, 112, 248, .34);
  border-radius: 26px;
  box-shadow: 0 0 32px rgba(80, 112, 248, .30), 0 40px 90px -30px rgba(0, 0, 0, .85);
  transform: translateY(10px) scale(.985);
  transition: transform .3s ease;
}
.sv-overlay.is-open .sv-card { transform: none; }

.sv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.sv-close:hover, .sv-close:focus-visible { background: rgba(0, 0, 0, .85); outline: 2px solid var(--c-blue, #5070f8); outline-offset: 2px; }

/* ---- header: chart + fade ---- */
.sv-media { position: relative; }

.sv-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  border-radius: 26px 26px 0 0;
  overflow: hidden;
}

/* The chart itself. The mask fades its lower part to transparent, so it melts into the
   card's own navy instead of stopping at a hard edge. */
.sv-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, .72) 56%, rgba(0, 0, 0, .3) 76%, rgba(0, 0, 0, .08) 90%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, .72) 56%, rgba(0, 0, 0, .3) 76%, rgba(0, 0, 0, .08) 90%, rgba(0, 0, 0, 0) 100%);
  transform: scale(1.04);
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.sv-overlay.is-open .sv-hero-img { transform: none; }

/* Soft navy shade low-left, behind the title, so white text stays readable on bright charts.
   It sits inside the masked layer, so it fades out with the chart (no hard edge). */
.sv-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9, 12, 26, 0) 35%, rgba(9, 12, 26, .7) 100%),
    radial-gradient(85% 70% at 0% 100%, rgba(9, 12, 26, .75) 0%, rgba(9, 12, 26, 0) 70%);
}

/* ---- study name on the fade ---- */
.sv-heading {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(96px, 11vw, 140px));
  padding: 0 clamp(18px, 3.2vw, 40px);
  max-width: 780px;
}
.sv-rank {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-gold, #f4c95d);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.sv-title {
  margin: 0;
  font-family: var(--font, sans-serif);
  font-size: clamp(24px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 6px 28px rgba(0, 0, 0, .6);
  text-wrap: balance;
}
.sv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.sv-meta:empty { display: none; }
.sv-chip {
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .14);
  color: #e9edf6;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.sv-chip[hidden], .sv-play[hidden] { display: none; }
.sv-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 26px 11px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #0b1020;
  font: 700 15px/1 var(--font, sans-serif);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.sv-play svg { width: 16px; height: 16px; }
.sv-play:hover, .sv-play:focus-visible { background: #dfe6ff; transform: translateY(-1px); }

/* ---- once a video is playing it takes over the header (no fade over the player's controls) ---- */
.sv-media.is-playing .sv-hero { background: #000; }
.sv-media.is-playing .sv-heading { margin-top: 0; padding-top: clamp(16px, 2.2vw, 24px); }
.sv-media.is-playing .sv-meta { display: none; }
.sv-hero iframe,
.sv-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* ---- below the header ---- */
.sv-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: clamp(14px, 2vw, 22px) clamp(18px, 3.2vw, 40px) clamp(20px, 2.8vw, 32px);
}
.sv-note {
  margin: 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-mute, #aeb8cc);
}
.sv-live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--c-blue, #5070f8);
  color: #fff;
  font: 700 15px/1 var(--font, sans-serif);
  cursor: pointer;
  transition: box-shadow .25s ease, transform .2s ease;
}
.sv-live:hover { background: #6a86ff; transform: translateY(-2px); box-shadow: 0 0 26px rgba(80, 112, 248, .62); }

@media (max-width: 600px) {
  .sv-overlay { padding: 0; align-items: center; }
  .sv-card { border-radius: 0; border-left: 0; border-right: 0; }
  .sv-hero { border-radius: 0; aspect-ratio: 4 / 3; }
  .sv-heading { margin-top: -84px; }
  .sv-live { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-overlay, .sv-card, .sv-hero-img { transition: none; }
  .sv-hero-img { transform: none; }
}