/* =====================================================================
   Video — Figma "D - Video" 6344:44114.
   A centred block on a WHITE band, locked to the 1240 content area. A 16:10
   dark-navy poster (max-width 800px, radius ~12px, overflow hidden) carries a
   centred circular white play button with a blue (--og-blue) right-pointing
   triangle drawn purely from CSS borders. An optional Medium 18/25 gray-8
   caption sits 20px beneath. When video.href is present the whole poster is an
   <a>; otherwise it is a non-interactive <figure>. Tokens only; component-local
   --vid-* properties for non-token Figma values (no tokens.css edits).
   ===================================================================== */

.video {
  /* Component-local values (no token edits; mirrors about-values' --av-* pattern). */
  --vid-stack-gap: 20px;        /* poster -> caption                          */
  --vid-poster-max: 800px;      /* poster max-width                           */
  --vid-poster-radius: 12px;    /* poster corner radius                       */
  --vid-caption-max: 674px;     /* caption measure                            */
  --vid-play-size: 72px;        /* circular play-button diameter (desktop)    */
  --vid-play-size-mobile: 56px; /* circular play-button diameter (mobile)     */
  --vid-play-tri-w: 13px;       /* play triangle base (left border width)     */
  --vid-play-tri-h: 9px;        /* play triangle half-height (top/bottom)     */
  --vid-play-tri-nudge: 3px;    /* optical-centre the triangle in the circle  */
  --vid-poster-grad: linear-gradient(135deg, #1f3854, #0a1623); /* fallback navy */

  background: var(--gray-0);
  padding-block: var(--home-sec-pad-y);
}

/* ---- Centred stack locked to the 1240 content area ---- */
.video__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vid-stack-gap);
  text-align: center;
}

/* ---- 16:10 dark-navy poster, centred, max 800px ---- */
.video__poster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  max-width: var(--vid-poster-max);
  aspect-ratio: 800 / 400;
  border-radius: var(--vid-poster-radius);
  overflow: hidden;
  background: var(--title-banner-gradient, var(--vid-poster-grad));
}

/* Linked variant: keep the anchor block-level and strip default styling. */
.video__poster--link {
  text-decoration: none;
  cursor: pointer;
}

/* ---- Circular white play button with a blue CSS-drawn triangle ---- */
.video__play {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--vid-play-size);
  height: var(--vid-play-size);
  border-radius: 50%;
  background: var(--gray-0);
}

/* Right-pointing triangle from borders; nudged right to optically centre. */
.video__play-triangle {
  display: block;
  width: 0;
  height: 0;
  margin-left: var(--vid-play-tri-nudge);
  border-top: var(--vid-play-tri-h) solid transparent;
  border-bottom: var(--vid-play-tri-h) solid transparent;
  border-left: var(--vid-play-tri-w) solid var(--og-blue);
}

/* ---- Caption — Axiforma Medium 18/25, gray-8 ---- */
.video__caption {
  margin: 0;
  max-width: var(--vid-caption-max);
  font-weight: var(--fw-medium);
  font-size: var(--fs-18);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Mobile (M - Video @390): full-width poster (ratio kept), smaller
   play button, --fs-16 caption, side padding via --pad-mobile. ---- */
@media (max-width: 767.98px) {
  .video {
    padding-inline: var(--pad-mobile);
  }
  .video__poster {
    max-width: none;
  }
  .video__play {
    width: var(--vid-play-size-mobile);
    height: var(--vid-play-size-mobile);
  }
  .video__caption {
    max-width: none;
    font-size: var(--fs-16);
  }
}