/* =========================================================================
   Video with Content CTA section (Figma 224:1119)
   Light-teal rounded panel with a two-column layout: video poster on the
   left (deco dotted circles + pill badge + play button overlay), text
   content + bullets + filled CTA on the right.
   ========================================================================= */

/* Outer wrapper carries the project-wide 40px section padding-block
   convention. The visible rounded panel lives inside and caps at
   --content-max so its edges align with Pattern-A sections. */
.video-text-cta {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

.video-text-cta__panel {
  max-width: var(--content-max);
  margin-inline: auto;
  background-color: #F4FDFC;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  /* Mobile-first interior padding; scales up to Figma's 100/64 at desktop. */
  padding: clamp(40px, 7vw, 100px) clamp(20px, 4vw, 64px);
}

/* ----------- Layout ----------- */
/* Mobile-first stack; switches to side-by-side at 1100px (the same
   genuine layout breakpoint the join-team section uses, because two
   wide columns + the deco circles don't fit comfortably below that). */
.video-text-cta__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 71px); /* Figma desktop gap: 791-720 = 71 */
  align-items: center;
}

@media (min-width: 1100px) {
  .video-text-cta__layout {
    /* Figma column widths: video 640 + gap 151 + content 520 = 1311.
       Use minmax to keep the ratio while letting the panel fluid-shrink. */
    grid-template-columns: minmax(0, 640fr) minmax(0, 520fr);
  }
}

/* ----------- Left column: video media block ----------- */
.video-text-cta__media {
  position: relative;
  /* Reserve room above + below for the deco clusters to extend past the
     poster top-right and bottom-left at desktop. Below 1100px the deco
     clusters hide so the reserve isn't applied. */
  margin: 0;
}

@media (min-width: 1100px) {
  .video-text-cta__media {
    /* The Figma TR cluster extends ~60px above the poster; BL ~60px below.
       Padding here so the abs-positioned decos don't get clipped by
       the panel's own padding. */
    padding-block: 60px;
  }
}

/* The clickable poster — also the positioning context for the play
   button and the pill badge. */
.video-text-cta__player {
  position: relative;
  display: block;
  width: 100%;
  /* Figma desktop poster: 600 wide × 460 tall = 15/23 aspect (~1.30:1). */
  aspect-ratio: 600 / 460;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  /* Match the section's outer panel border so the poster sits crisply
     on the very-light teal bg. */
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.25s ease-out, transform 0.25s ease-out;
}

.video-text-cta__player:hover,
.video-text-cta__player:focus-visible {
  box-shadow: 0 8px 24px rgba(0, 9, 25, 0.12);
}

/* Poster / video_id not yet supplied: keep the frame + aspect ratio so
   the layout doesn't collapse, but strip the button chrome so nothing
   invites a click. Rendered as a plain div in the template. */
.video-text-cta__player--placeholder {
  cursor: default;
  background-color: var(--color-navy-blue);
}
.video-text-cta__player--placeholder:hover,
.video-text-cta__player--placeholder:focus-visible {
  box-shadow: 0 0 0 0 transparent;
}

/* Poster only (no video_id) — e.g. an animated GIF. Same frame as the
   button variant, but not interactive. */
.video-text-cta__player--image {
  cursor: default;
}
.video-text-cta__player--image:hover,
.video-text-cta__player--image:focus-visible {
  box-shadow: 0 0 0 0 transparent;
}

.video-text-cta__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Live-webinar pill badge, top-left of the poster (Figma: 72px from left,
   32px above the poster top inside the team-photo group). */
.video-text-cta__pill {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--color-green-2);
  color: var(--color-navy-blue);
  /* 4px / 8px in Figma; small upscale here looks identical at
     non-desktop widths. */
  padding: 4px 8px;
  border-radius: 200px;
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 0.93;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* The pill copy is two segments joined by a bullet — keep both bold-ish
   so the badge reads as one piece. */
.video-text-cta__pill-strong {
  font-weight: 500;
}

/* Centered teal play button overlay. Slight transparent white inner
   fill mirrors the Figma (0.1 alpha) for the suggestion of a glass
   button atop the photo. */
.video-text-cta__play {
  position: absolute;
  /* Tuned: 88% / 85% sits the play button closer to the bottom-right
     corner of the poster than the original Figma-derived 80% / 74%
     while still reading as overlaid (rather than off the edge). */
  left: 88%;
  top: 85%;
  width: clamp(56px, 7vw, 80px);
  height: clamp(56px, 7vw, 80px);
  /* The button's coords name its top-left corner — shift back by half so
     the apparent center lands at the percentage above. */
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.25s ease-out;
}

.video-text-cta__player:hover .video-text-cta__play,
.video-text-cta__player:focus-visible .video-text-cta__play {
  transform: translate(-50%, -50%) scale(1.06);
}

/* ----------- Deco circles: only visible at ≥1100px ----------- */
.video-text-cta__deco {
  position: absolute;
  pointer-events: none;
  display: none;
}

@media (min-width: 1100px) {
  .video-text-cta__deco {
    display: block;
  }
}

.video-text-cta__deco-ring {
  position: absolute;
  display: block;
}

/* Top-right cluster — mirrors the BL cluster across both diagonals.
   Same two SVGs are reused on both clusters; only the positioning
   changes (top-right anchor instead of bottom-left). The cluster
   overhangs 85px past the wrapper's right edge into the column gap —
   same overhang the BL cluster has on its left side, so the design
   reads as a symmetric pair. */
.video-text-cta__deco--tr {
  top: 0;
  right: -85px;
  width: 309px;
  height: 213px;
}

/* Bottom-left cluster — anchored to bottom-left of .__media. */
.video-text-cta__deco--bl {
  left: -85px;
  bottom: 0;
  width: 309px;
  height: 213px;
}

.video-text-cta__deco-ring--bl-large {
  /* The 214×213 large ring sits at the right of the cluster bounding box.
     Spins counter-clockwise, slightly slower than the small ring so the
     two motions feel layered rather than synced. */
  right: 40px;
  bottom: 0;
  width: 214px;
  height: 213px;
  animation: video-cta-spin-ccw 28s linear infinite;
}

/* Counter-clockwise counterpart (paused under prefers-reduced-motion). */
@keyframes video-cta-spin-ccw {
  to {
    transform: rotate(-360deg);
  }
}

.video-text-cta__deco-ring--bl-small {
  /* The 141×146 inner ring overlaps the bottom-right of the large one.
     Spins clockwise — same pattern the performance section uses for its
     arc decos. The global prefers-reduced-motion rule pauses this for
     users who request it. */
  left: 220px;
  bottom: 0;
  width: 141px;
  height: 146px;
  animation: video-cta-spin 20s linear infinite;
}

/* Top-right rings: same SVGs as the BL pair, positioned as a mirror
   across the diagonal. Rotation matched ring-for-ring (large = CCW,
   small = CW) so each TR ring spins in sync with its BL counterpart. */
.video-text-cta__deco-ring--tr-large {
  left: 40px;
  top: 0;
  width: 214px;
  height: 213px;
  animation: video-cta-spin-ccw 28s linear infinite;
}

.video-text-cta__deco-ring--tr-small {
  right: 220px;
  top: 0;
  width: 141px;
  height: 146px;
  animation: video-cta-spin 20s linear infinite;
}

/* Slow clockwise spin (paused under prefers-reduced-motion via global.css). */
@keyframes video-cta-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ----------- Right column: content ----------- */
.video-text-cta__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

/* Eyebrow — slash-led label, matches the project pattern. */
.video-text-cta__eyebrow {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 0.93;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-navy-blue);
}

.video-text-cta__eyebrow-slash {
  color: var(--color-green-2);
}

/* Heading — New Science, 30px at desktop (matches --font-size-h3 cap). */
.video-text-cta__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 400;
  font-size: var(--font-size-h3);
  line-height: 1.2;
  color: var(--color-navy-blue);
}

/* Body copy. */
.video-text-cta__body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: var(--font-size-body-lg); /* 18px */
  line-height: 28px;
  color: var(--color-body-copy);
}

/* Date line — same New Science treatment as the heading but smaller,
   with green slash like the eyebrow. */
.video-text-cta__date {
  margin: 8px 0 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-navy-blue);
}

.video-text-cta__date-slash {
  color: var(--color-green-2);
}

/* Bullets — single-line, 14px gray with green check icon. The text
   color matches the body-copy-text token used elsewhere for secondary
   copy. */
.video-text-cta__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.video-text-cta__bullet {
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-text-cta__bullet-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: block;
}

.video-text-cta__bullet-text {
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-body-copy-text);
}

/* CTA — uses the existing .btn .btn--filled .btn--on-light (teal pill,
   navy text both at rest and through the hover sweep). Just nudge the
   top spacing slightly to match the Figma's 32px gap above. */
.video-text-cta__content .btn {
  margin-top: 8px;
}

/* The label "Watch Recording" has a "g" descender that clips against
   the global .btn__label rules (height 1lh + line-height 1 = zero room
   below baseline). Override here so the slot has space for the full
   glyph, matched on the spans inside so the slide-up hover math
   (translateY ±100% / 300% of the span's own height) still clears the
   slot in one step. Scoped to .video-text-cta__content so existing buttons
   keep their established sizing. */
.video-text-cta__content .btn__label {
  line-height: 1.3;
}

.video-text-cta__content .btn__label > span {
  line-height: 1.3;
}

/* ----------- Reveal stagger (per-item, per feedback_animation_stagger) ----- */
.video-text-cta__bullet { --reveal-delay: 0s; }
.video-text-cta__bullet:nth-child(1) { --reveal-delay: 0.05s; }
.video-text-cta__bullet:nth-child(2) { --reveal-delay: 0.12s; }
.video-text-cta__bullet:nth-child(3) { --reveal-delay: 0.19s; }
.video-text-cta__bullet:nth-child(4) { --reveal-delay: 0.26s; }

/* ----------- Modal: opens on .__player click ----------- */
/* The modal lives outside the section's positioning context (it's a
   sibling of .video-text-cta, fixed-positioned over the page). Hidden by
   default via the `hidden` attribute; JS toggles aria-hidden + the
   .is-open class for the animation states. */
.video-text-cta__modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  /* When .is-open is added, the modal fades in. Two-phase animation
     for entry/exit so the iframe can mount before the fade-in starts. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
}

.video-text-cta__modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease-out, visibility 0s;
}

.video-text-cta__modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 9, 25, 0.85);
  cursor: pointer;
}

.video-text-cta__modal-dialog {
  position: relative;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4_5);
}

.video-text-cta__modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 12px;
  overflow: hidden;
}

.video-text-cta__modal-player,
.video-text-cta__modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Close button — sits above the iframe in the top-right. Above 768
   it floats just outside the top-right corner of the frame; below 768
   it stays inside the dialog padding for thumb reach. */
.video-text-cta__modal-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.video-text-cta__modal-close:hover,
.video-text-cta__modal-close:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

@media (max-width: 767px) {
  .video-text-cta__modal-close {
    /* Float just above the frame's top-right corner (matches desktop)
       so the X doesn't sit on top of the video. -52 = 44px button +
       8px breathing gap above the frame. The modal's 16px top padding
       gives this enough room without pushing the button off-screen. */
    top: -52px;
    right: 0;
  }
}

/* Body lock — applied by JS via `body.video-cta-modal-open` so the
   page doesn't scroll behind the modal. */
body.video-cta-modal-open {
  overflow: hidden;
}

/* Reduced motion: snap transitions, no animation. */
@media (prefers-reduced-motion: reduce) {
  .video-text-cta__modal,
  .video-text-cta__modal-close {
    transition: none;
  }
}