/* ── Customer Stories Video ───────────────────────────────────────── */

/* Fallbacks live here so the module still renders if the inline
   custom-property block is missing (e.g. very old saved instances). */
.csv-module {
  --csv-card-radius: 16px;
  --csv-pill-radius: 999px;
  --csv-card-gap: 10px;
  --csv-button-radius: 50px;
  --csv-button-pad-y: 9px;
  --csv-button-pad-x: 18px;
  --csv-heading-size: 12px;
  --csv-pill-size: 11px;
  --csv-name-size: 14px;
  --csv-quote-size: 18px;
  --csv-quote-scale: 1;
  --csv-button-size: 13px;
  --csv-meta-name-size: 16px;
  --csv-meta-title-size: 14px;
  --csv-heading-weight: 600;
  --csv-pill-weight: 700;
  --csv-name-weight: 600;
  --csv-quote-weight: 600;
  --csv-button-weight: 600;
  --csv-meta-name-weight: 600;
  --csv-meta-title-weight: 400;
  --csv-name-gap: 16px;
  /* Play button geometry, kept deterministic so .csv-body can reserve
     exactly the right amount of room beneath the text. */
  --csv-btn-inset: 18px;
  --csv-btn-line: 1.25;
  --csv-btn-height: calc(var(--csv-button-pad-y) * 2 + var(--csv-button-size) * var(--csv-btn-line));
  /* Caption appearance */
  --csv-cap-size: 14px;
  --csv-cap-weight: 500;
  --csv-cap-radius: 6px;
  --csv-cap-maxw: 90%;
  --csv-cap-lift: 0px;
}

.csv-eyebrow {
  text-align: center;
  font-size: var(--csv-heading-size);
  font-weight: var(--csv-heading-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csv-eyebrow-color, #6b7280);
  margin: 0 0 1.5rem;
}

/* Full-width row — cards always fill the container equally */
.csv-track {
  display: flex;
  gap: var(--csv-card-gap);
  padding-bottom: 4px;
}

/* Individual card */
.csv-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--csv-card-radius);
  overflow: hidden;
  cursor: default;
  display: block;
  color: #fff;
  background: #111;
}

.csv-card[data-video] {
  cursor: pointer;
}

/* Poster image */
.csv-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Video */
.csv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: none;
  cursor: default;
}
.csv-card.is-playing .csv-video {
  opacity: 1;
  pointer-events: auto;
}
.csv-card.is-playing .csv-poster {
  opacity: 0;
}

/* Dark gradient — stronger at bottom for text legibility */
.csv-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    rgba(var(--csv-overlay-rgb, 0,0,0), calc(var(--csv-overlay-opacity, 0.88) * 0.34)) 0%,
    rgba(var(--csv-overlay-rgb, 0,0,0), 0)    28%,
    rgba(var(--csv-overlay-rgb, 0,0,0), 0)    38%,
    rgba(var(--csv-overlay-rgb, 0,0,0), calc(var(--csv-overlay-opacity, 0.88) * 0.68)) 62%,
    rgba(var(--csv-overlay-rgb, 0,0,0), var(--csv-overlay-opacity, 0.88)) 100%
  );
  transition: opacity 0.35s ease;
}
.csv-card.is-playing .csv-overlay {
  opacity: 0;
}

/* ── Top row: role pill + company logo ── */
.csv-card-top {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  transition: opacity 0.3s ease;
}
/* pill stays visible while playing */

/* Role / category pill — liquid glass */
.csv-top-label {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-pill-size);
  font-weight: var(--csv-pill-weight);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--csv-pill-text, #fff);
  background: var(--csv-pill-bg, linear-gradient(
    135deg,
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.13) 100%
  ));
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 0 rgba(255,255,255,0.06),
    0 2px 8px rgba(0,0,0,0.15);
  border-radius: var(--csv-pill-radius);
  padding: 5px 12px;
  white-space: nowrap;
  line-height: 1.3;
}

@supports not (backdrop-filter: blur(1px)) {
  .csv-top-label { background: rgba(0,0,0,0.45); }
}

/* Company logo — top-right */
.csv-card-logo {
  height: 28px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  flex-shrink: 0;
  /* subtle drop-shadow so white logo is visible on light backgrounds */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)) brightness(0) invert(1);
}

/* ── Body text — quote + name, pinned to bottom ── */
.csv-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  box-sizing: border-box;
  /* Reserve the play button's own footprint plus a gap, so the name —
     the bottom-most line of text — never collides with it. Mirrors
     --csv-btn-inset / --csv-btn-height used by .csv-tap-label. */
  padding: 0 18px calc(var(--csv-btn-inset) + var(--csv-btn-height) + 18px);
  transition: opacity 0.3s ease;
}
.csv-card.is-playing .csv-body {
  opacity: 0;
  pointer-events: none;
}

/* Name is last in the bottom-anchored block, which is what puts every
   name in the row on one baseline. module.js equalises the quote heights
   above it so the quotes line up too. */
.csv-name {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-name-size);
  font-weight: var(--csv-name-weight);
  color: var(--csv-name-color, rgba(255,255,255,0.85));
  /* Widening this pushes the quote up rather than moving the name down —
     the name's baseline is fixed by the block's bottom anchor. */
  margin: var(--csv-name-gap) 0 0;
  line-height: 1.3;
}

.csv-quote {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: calc(var(--csv-quote-size) * var(--csv-quote-scale));
  font-weight: var(--csv-quote-weight);
  line-height: 1.45;
  color: var(--csv-quote-color, #fff);
  margin: 0;
}

/* ── Persistent tap label button — daybreak blue pill ── */
.csv-tap-label {
  position: absolute;
  bottom: var(--csv-btn-inset);
  left: var(--csv-btn-inset);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: var(--csv-button-pad-y) var(--csv-button-pad-x);
  border-radius: var(--csv-button-radius);
  border: none;
  background: var(--csv-button-bg, #0D63A0);
  font-family: var(--hsElevate--button--primary__font, inherit);
  font-size: var(--csv-button-size);
  font-weight: var(--csv-button-weight);
  line-height: var(--csv-btn-line);
  /* Keep the label on one line — a wrapped label would grow the button
     and eat into the space reserved for the name above it. */
  white-space: nowrap;
  color: var(--csv-button-text, #fff);
  pointer-events: none;
  user-select: none;
  box-shadow: 0 2px 12px rgba(13, 99, 160, 0.4);
}

/* Icon swap: play visible by default, pause when playing */
.csv-tl-pause { display: none; }
.csv-card.is-playing .csv-tl-play  { display: none; }
.csv-card.is-playing .csv-tl-pause { display: inline; }

/* ── Button position (grid) ── */
.csv-btnpos-bottom_center .csv-tap-label {
  left: 50%;
  transform: translateX(-50%);
}
.csv-btnpos-bottom_right .csv-tap-label {
  left: auto;
  right: var(--csv-btn-inset);
}

/* ═══════════════════════════════════════════════════════════
   SPOTLIGHT LAYOUT — portrait carousel, Synthesia-style
   ═══════════════════════════════════════════════════════════ */

.csv-spotlight {
  position: relative;
  overflow: hidden;
  padding: 24px 0 40px;
  user-select: none;
}

/* Scrolling track — translateX'd by JS */
.csv-spotlight-track {
  display: flex;
  gap: 20px;
  align-items: center;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.35, 0, 0.25, 1);
}

/* ── Individual card ── */
.csv-spotlight-card {
  flex: 0 0 clamp(200px, 24vw, 300px);
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--csv-card-radius) + 4px);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.35, 0, 0.25, 1),
              opacity  0.55s cubic-bezier(0.35, 0, 0.25, 1),
              box-shadow 0.55s ease;
  background: #111;
  color: #fff;
  /* Default: further cards */
  transform: scale(0.82);
  opacity: 0.45;
}

/* One step away from active */
.csv-spotlight-card--adjacent {
  transform: scale(0.91);
  opacity: 0.68;
}

/* The active card */
.csv-spotlight-card--active {
  transform: scale(1);
  opacity: 1;
  cursor: default;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

/* ── Poster + video ── */
.csv-spotlight-poster,
.csv-spotlight-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.csv-spotlight-video {
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.csv-spotlight-card--active .csv-spotlight-video {
  opacity: 1;
}

.csv-spotlight-card--playing .csv-spotlight-video {
  pointer-events: auto;
}

/* ── Gradient overlay ── */
.csv-spotlight-grad {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(var(--csv-overlay-rgb, 0,0,0), calc(var(--csv-overlay-opacity, 0.82) * 0.51)) 0%,
    rgba(var(--csv-overlay-rgb, 0,0,0), 0)    38%,
    rgba(var(--csv-overlay-rgb, 0,0,0), 0)    42%,
    rgba(var(--csv-overlay-rgb, 0,0,0), var(--csv-overlay-opacity, 0.82)) 100%
  );
  pointer-events: none;
  transition: background 0.45s ease;
}

.csv-spotlight-card--playing .csv-spotlight-grad {
  background: transparent;
}

/* ── Content overlay ── */
.csv-spotlight-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px 22px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.csv-spotlight-card--active .csv-spotlight-content {
  pointer-events: auto;
}

.csv-spotlight-card--playing .csv-spotlight-content {
  opacity: 0;
  pointer-events: none;
}

/* Role pill — top-left */
.csv-spotlight-top {
  align-self: flex-start;
}

.csv-spotlight-role {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-pill-size);
  font-weight: var(--csv-pill-weight);
  color: var(--csv-pill-text, #fff);
  background: var(--csv-pill-bg, rgba(255,255,255,0.18));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--csv-pill-radius);
  padding: 5px 12px;
  white-space: nowrap;
}

/* Bottom: name, quote, play btn */
.csv-spotlight-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.csv-spotlight-name {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-name-size);
  font-weight: var(--csv-name-weight);
  color: var(--csv-name-color, rgba(255,255,255,0.85));
  /* Tops up the flex gap (8px) to the configured quote-to-name spacing */
  margin: max(0px, calc(var(--csv-name-gap) - 8px)) 0 0;
  line-height: 1.3;
}

.csv-spotlight-quote {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: calc(var(--csv-quote-size) * var(--csv-quote-scale));
  font-weight: var(--csv-quote-weight);
  line-height: 1.45;
  color: var(--csv-quote-color, #fff);
  margin: 0;
}

/* Play / Watch button */
.csv-spotlight-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: var(--csv-button-pad-y) var(--csv-button-pad-x);
  border-radius: var(--csv-button-radius);
  font-family: var(--hsElevate--button--primary__font, inherit);
  font-size: var(--csv-button-size);
  font-weight: var(--csv-button-weight);
  line-height: var(--csv-btn-line);
  white-space: nowrap;
  color: var(--csv-button-text, #fff);
  background: var(--csv-button-bg, #0D63A0);
  border: none;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 4px;
  /* Hide on inactive cards — only active card has pointer-events */
  opacity: 0;
  transition: opacity 0.35s ease 0.1s;
}

.csv-spotlight-card--active .csv-spotlight-play-btn {
  opacity: 1;
}

.csv-spotlight-play-btn:hover { opacity: 0.85 !important; }

/* ── Navigation arrows ── */
.csv-spotlight-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.csv-spotlight-arrow:hover {
  background: rgba(0,0,0,0.65);
}

.csv-spotlight-prev { left: 16px; }
.csv-spotlight-next { right: 16px; }

.csv-spotlight-arrow:disabled,
.csv-spotlight-arrow[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ── Spotlight responsive ── */
@media (max-width: 700px) {
  .csv-spotlight-card {
    flex: 0 0 72vw;
  }
  .csv-spotlight-arrow {
    width: 40px;
    height: 40px;
  }
}


/* ── Grid responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .csv-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .csv-track::-webkit-scrollbar { display: none; }
  .csv-card {
    flex: 0 0 75vw;
    scroll-snap-align: start;
  }
}

/* Scale the editor-set quote size down a little on narrow viewports so a
   large value doesn't overflow the card. */
@media (max-width: 900px) {
  .csv-module { --csv-quote-scale: 0.88; }
}
@media (max-width: 700px) {
  .csv-module { --csv-quote-scale: 0.95; } /* cards go 75vw wide here, so less squeeze needed */
}


/* ═══════════════════════════════════════════════════════════
   FOCUSED LAYOUT — widescreen accordion
   ═══════════════════════════════════════════════════════════ */

.csv-focused-track {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

/* Each card: narrow by default, expands when active */
.csv-focused-card {
  flex: 1;
  min-width: 56px;
  cursor: pointer;
  transition: flex 0.55s cubic-bezier(0.35, 0, 0.25, 1);
}

.csv-focused-card--active {
  flex: 5;
  cursor: default;
}

/* ── Media box ── */
.csv-focused-media {
  position: relative;
  height: clamp(320px, 40vw, 520px);
  border-radius: var(--csv-card-radius);
  overflow: hidden;
  background: #111;
}

/* Poster + video fill the media box */
.csv-focused-poster,
.csv-focused-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Video fades in over poster when active */
.csv-focused-video {
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.csv-focused-card--active .csv-focused-video {
  opacity: 1;
}
/* When playing with controls, video must be interactive */
.csv-focused-card--playing .csv-focused-video {
  pointer-events: auto;
}

/* ── Gradient overlay ── */
.csv-focused-grad {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.45s ease;
  pointer-events: none;
}
.csv-focused-card--active .csv-focused-grad {
  background: linear-gradient(
    to bottom,
    rgba(var(--csv-overlay-rgb, 0,0,0), calc(var(--csv-overlay-opacity, 0.78) * 0.45)) 0%,
    rgba(var(--csv-overlay-rgb, 0,0,0), 0)    40%,
    rgba(var(--csv-overlay-rgb, 0,0,0), 0)    45%,
    rgba(var(--csv-overlay-rgb, 0,0,0), var(--csv-overlay-opacity, 0.78)) 100%
  );
}
/* Hide gradient when video is playing so controls are fully visible */
.csv-focused-card--playing .csv-focused-grad {
  background: transparent;
}

/* ── Overlay content (quote, name, play btn) ── */
.csv-focused-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 22px 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 0.1s;
}
.csv-focused-card--active .csv-focused-content {
  opacity: 1;
  pointer-events: auto;
}
/* Hide overlay content when video is playing */
.csv-focused-card--playing .csv-focused-content {
  opacity: 0;
  pointer-events: none;
}

/* Top row: role pill + logo */
.csv-focused-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.csv-focused-role {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-pill-size);
  font-weight: var(--csv-pill-weight);
  color: var(--csv-pill-text, #fff);
  background: var(--csv-pill-bg, rgba(255,255,255,0.18));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--csv-pill-radius);
  padding: 5px 13px;
  white-space: nowrap;
}

.csv-focused-logo {
  height: 22px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

/* Bottom: name, quote, play button */
.csv-focused-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.csv-focused-attr {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-name-size);
  font-weight: var(--csv-name-weight);
  color: var(--csv-name-color, rgba(255,255,255,0.8));
  /* Tops up the flex gap (10px) to the configured quote-to-name spacing */
  margin: max(0px, calc(var(--csv-name-gap) - 10px)) 0 0;
}

.csv-focused-quote {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: calc(var(--csv-quote-size) * var(--csv-quote-scale) * 1.15);
  font-weight: var(--csv-quote-weight);
  line-height: 1.4;
  color: var(--csv-quote-color, #fff);
  margin: 0;
}

/* Play button */
.csv-focused-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--csv-button-pad-y) + 3px) calc(var(--csv-button-pad-x) + 6px);
  border-radius: var(--csv-button-radius);
  font-family: var(--hsElevate--button--primary__font, inherit);
  font-size: var(--csv-button-size);
  font-weight: var(--csv-button-weight);
  line-height: var(--csv-btn-line);
  white-space: nowrap;
  color: var(--csv-button-text, #fff);
  background: var(--csv-button-bg, #0D63A0);
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.2s;
  margin-top: 2px;
}
.csv-focused-play-btn:hover { opacity: 0.85; }

/* ── Button position (spotlight + focused) ── */
.csv-btnpos-bottom_center .csv-spotlight-play-btn,
.csv-btnpos-bottom_center .csv-focused-play-btn {
  align-self: center;
}
.csv-btnpos-bottom_right .csv-spotlight-play-btn,
.csv-btnpos-bottom_right .csv-focused-play-btn {
  align-self: flex-end;
}

/* ── Meta below card (hidden on active — content is on the card) ── */
.csv-focused-meta {
  padding: 12px 2px 0;
  overflow: hidden;
}

.csv-focused-card--active .csv-focused-meta {
  visibility: hidden;
}

.csv-focused-meta-name {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-meta-name-size);
  font-weight: var(--csv-meta-name-weight);
  color: inherit;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csv-focused-meta-title {
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-meta-title-size);
  font-weight: var(--csv-meta-title-weight);
  color: var(--csv-meta-title-color, #6B7280);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Focused responsive ── */
@media (max-width: 700px) {
  .csv-focused-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .csv-focused-track::-webkit-scrollbar { display: none; }
  .csv-focused-card {
    flex: 0 0 80vw !important;
    scroll-snap-align: start;
  }
  .csv-focused-card--active .csv-focused-content { opacity: 1; }
  .csv-focused-card--active .csv-focused-meta { visibility: hidden; }
}


/* ═══════════════════════════════════════════════════════════
   CAPTIONS — populated by module.js from a fetched VTT file
   ═══════════════════════════════════════════════════════════

   HubSpot's CDN serves uploaded caption files as Content-Type: text/plain,
   and browsers silently reject any <track> that isn't text/vtt — so the
   VTT is fetched and parsed in JS and rendered here instead.

   Two independent gates, both required to show a caption:
     .has-cue                — JS: a cue is on screen right now
     the layout's playing class — CSS: real playback, not the muted preview
   Keeping the second gate in CSS means the JS never needs to know anything
   about preview state, and captions can't collide with the quote overlay
   that's visible during the focused/spotlight preview autoplay. */

.csv-captions {
  position: absolute;
  left: 0;
  right: 0;
  /* Clears video(2), both gradients(2-3), .csv-card-top(4) and .csv-body(4)
     in every layout, and stays under the grid's .csv-tap-label(6). */
  z-index: 5;
  padding: 0 14px;
  box-sizing: border-box;
  /* Narrower lines read better than full-card ones. The margin rule that
     positions this box lives in the alignment section below. */
  max-width: var(--csv-cap-maxw);
  /* A block with text-align, NOT flex: flex would blockify the inner span
     and kill box-decoration-break, which is what gives a wrapped cue one
     rounded pill per line instead of a single ragged rectangle. */
  text-align: center;
  opacity: 0;
  /* Mandatory — the grid's play/pause is a click handler on the whole card,
     so the caption must never swallow the tap. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* Short, because consecutive cues separated by a small gap would
     otherwise visibly flicker. */
  transition: opacity 0.12s linear;
}

.csv-card.is-playing         > .csv-captions.has-cue,
.csv-focused-card--playing     .csv-captions.has-cue,
.csv-spotlight-card--playing > .csv-captions.has-cue {
  opacity: 1;
}

.csv-captions-cue {
  display: inline;
  /* Renders the cue's own line breaks straight from textContent, so
     multi-line cues never need innerHTML. */
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: var(--csv-cap-bg, rgba(0, 0, 0, 0.72));
  color: var(--csv-cap-text, #fff);
  border-radius: var(--csv-cap-radius);
  padding: 3px 8px;
  font-family: var(--hsElevate--body__font, inherit);
  font-size: var(--csv-cap-size);
  font-weight: var(--csv-cap-weight);
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── Caption background style ── */

/* "One box behind the whole caption" — inline-block makes the span a single
   rectangle rather than one pill per line. */
.csv-capbg-block .csv-captions-cue {
  display: inline-block;
}

/* "No box" — the shadow has to do all the legibility work now, so it's a
   stacked halo rather than the single soft shadow used behind a box. */
.csv-capbg-none .csv-captions-cue {
  background: none;
  padding: 0;
  text-shadow:
     0 1px 3px rgba(0,0,0,0.95),
     0 0 8px  rgba(0,0,0,0.8),
     1px 0 2px rgba(0,0,0,0.7),
    -1px 0 2px rgba(0,0,0,0.7);
}

/* ── Caption alignment ──
   The box is narrower than the card (--csv-cap-maxw), so it needs both a
   margin rule to place the box and a text-align to place the lines in it. */
.csv-capalign-center .csv-captions { margin-left: auto; margin-right: auto; text-align: center; }
.csv-capalign-left   .csv-captions { margin-left: 0;    margin-right: auto; text-align: left; }
.csv-capalign-right  .csv-captions { margin-left: auto; margin-right: 0;    text-align: right; }

/* Grid: no native controls are ever enabled here, so the only thing to
   clear is the tap-label pill. Tracks the editor's button size and padding
   automatically — same formula .csv-body uses to reserve its own room. */
.csv-card > .csv-captions {
  bottom: calc(var(--csv-btn-inset) + var(--csv-btn-height) + 12px + var(--csv-cap-lift));
}

/* Focused / spotlight: these set controls = true during playback, so the
   caption has to clear the native control bar — ~40px Chrome/Firefox,
   ~44-50px desktop Safari, and iOS insets the bar from the bottom edge so
   it needs more. The bar auto-hides after ~3s and this offset doesn't
   reflow, which matches how native captions behave. */
.csv-focused-media  > .csv-captions,
.csv-spotlight-card > .csv-captions {
  bottom: calc(56px + var(--csv-cap-lift));
}
@media (max-width: 700px), (pointer: coarse) {
  .csv-focused-media  > .csv-captions,
  .csv-spotlight-card > .csv-captions { bottom: calc(64px + var(--csv-cap-lift)); }
}

@media (prefers-reduced-motion: reduce) {
  .csv-captions { transition: none; }
}