/* ── 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;
}

/* Visually hidden, but still in the accessibility tree.
   `position: absolute` is load-bearing, not boilerplate: per CSS Flexbox
   §4.1 an absolutely-positioned child of a flex container is NOT a flex
   item, so this contributes nothing to .csv-tap-label's shrink-to-fit
   width and nothing to its `gap: 7px`. An sr-only recipe built only from
   height/overflow would widen the button and change the layout. */
.csv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.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);
}

/* ═══════════════════════════════════════════════════════════
   FOCUS INDICATORS
   ═══════════════════════════════════════════════════════════

   These controls sit on top of playing video, so the backdrop is a
   moving, unpredictable colour and no single-colour ring can be
   guaranteed to contrast with it. Hence a two-tone black/white
   sandwich: for a backdrop of relative luminance L,

     contrast(#fff, L) >= 3   when L <= 0.30
     contrast(#000, L) >= 3   when L >= 0.10

   Those intervals overlap and together cover [0,1], so whatever the
   frame, at least one band clears the 3:1 that 1.4.11 asks for — and
   the white/black edge between them is 21:1 regardless.

   box-shadow rather than outline: `outline` only follows border-radius
   from Safari 16.4, so on a pill-shaped button older Safari would draw
   a rectangle around it. box-shadow has followed border-radius in every
   engine forever, and it lets the brand glow be re-appended to the list
   rather than replaced.

   Total extent is 6px against the button's fixed 18px inset
   (--csv-btn-inset is not editor-exposed), so nothing clips against
   .csv-card{overflow:hidden} below a card radius of ~41px. Above ~61.5px
   the button's own corner is already clipped today, ring or no ring. */

/* Grid. pointer-events:none means this button can never be mouse-focused,
   so :focus is already equivalent to :focus-visible here — and using it
   avoids the Safari <15.4 :focus-visible support hole entirely. */
.csv-tap-label:focus {
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #fff,
    0 0 0 6px #000,
    0 2px 12px rgba(13, 99, 160, 0.4); /* keep the existing brand glow */
}

/* Focused/spotlight controls ARE mouse-clickable, so they need
   :focus-visible gating to avoid a ring on click. */
.csv-focused-play-btn:focus,
.csv-spotlight-play-btn:focus,
.csv-spotlight-arrow:focus {
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #fff,
    0 0 0 6px #000;
}

/* Deliberately a SEPARATE rule, never merged into the selector list
   above: an unknown pseudo-class invalidates an entire selector list, so
   a browser without :focus-visible must drop this suppression rule and
   keep the ring — not the other way round. */
.csv-focused-play-btn:focus:not(:focus-visible),
.csv-spotlight-play-btn:focus:not(:focus-visible),
.csv-spotlight-arrow:focus:not(:focus-visible) {
  box-shadow: none;
}

/* box-shadow is stripped in forced-colors mode; outline survives it. */
@media (forced-colors: active) {
  .csv-tap-label:focus,
  .csv-focused-play-btn:focus,
  .csv-spotlight-play-btn:focus,
  .csv-spotlight-arrow:focus {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* The focused layout's inactive cards become the control that selects
   them (see setCardSelectable in module.js), so they need a ring too.
   Focus lands on the card, but the ring is drawn on .csv-focused-media
   so it follows the card's border-radius — on the card itself it would
   be a sharp rectangle enclosing the meta text below the image. The
   media box's own overflow:hidden clips its children, not its shadow. */
.csv-focused-card[role="button"]:focus .csv-focused-media {
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #fff,
    0 0 0 6px #000;
}
.csv-focused-card[role="button"]:focus:not(:focus-visible) .csv-focused-media {
  box-shadow: none;
}
/* Suppress the default UA ring on the card; the media box carries it. */
.csv-focused-card[role="button"]:focus-visible {
  outline: none;
}
@media (forced-colors: active) {
  .csv-focused-card[role="button"]:focus {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════
   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; }
}