/*
 * gw_video_cta — figures below are from the Figma stage at 1920 (Homepage §11):
 * poster 1740x980 at x=96 (inset ~96px each side, not full-bleed); ring group
 * 1:256 outer diameter 333.7px, centred on the poster at ~50% / ~47%; label
 * "HEAR OUR STORY" sits below the ring block. See element.php header for the
 * markup-contract deviations (triangle icon added, label sized to display-s).
 */

.gw-video-cta { position: relative; padding-block: var(--gw-fluid-space-section); padding-inline: clamp(24px, 5vw, 96px); background: var(--gw-surface-page); }

.gw-video-cta__poster { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--gw-green-900); overflow: hidden; }
.gw-video-cta__poster, .gw-video-cta__img { display: block; width: 100%; height: 100%; }
.gw-video-cta__img { object-fit: cover; } /* square-cornered, no shadow (design rule) */

/* Play button: unstyled control, full overlay, its children (ring + label) carry the visuals. */
body[data-button-style] button.gw-video-cta__play { border-radius: 0 !important; }
.gw-video-cta__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gw-space-2);
  width: 100%; height: 100%; margin: 0; padding: var(--gw-space-3);
  background: none; border: 0; cursor: pointer;
  transition: transform var(--gw-dur) var(--gw-ease);
}
.gw-video-cta__play[aria-disabled="true"] { cursor: default; }
.gw-video-cta__play:hover:not([aria-disabled="true"]),
.gw-video-cta__play:focus-visible:not([aria-disabled="true"]) { transform: scale(1.04); }
.gw-video-cta__play:focus-visible { outline: 2px solid var(--gw-cream-100); outline-offset: 6px; }

.gw-video-cta__icon { position: relative; display: block; width: clamp(120px, 17.4vw, 334px); aspect-ratio: 1 / 1; }
.gw-video-cta__ring.gw-ring-marker { position: absolute; inset: 0; width: 100%; height: 100%; }
.gw-video-cta__triangle {
  position: absolute; top: 50%; left: 50%; width: 38%; height: auto;
  transform: translate(-50%, -50%) rotate(90deg);
  color: inherit; /* follows the ring-marker tone via the shared ancestor */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
/* Icon wrapper carries the same tone as the ring-marker partial so the triangle matches it
   (a class on the wrapper, set from ring_tone in template.php, rather than :has() for support). */
.gw-video-cta__icon--teal { color: var(--gw-teal-500); }
.gw-video-cta__icon--citron { color: var(--gw-citron-400); }
.gw-video-cta__icon--cream { color: var(--gw-cream-100); }

.gw-video-cta__label.gw-label-s {
  /* Figma (1:251) is a 77px Sofia Pro Black display headline, not a small
     uppercase label — sized to the gw-display-s scale, see element.php. */
  font-size: var(--gw-fluid-display-s);
  font-weight: 900;
  line-height: var(--gw-lh-display-s);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gw-citron-400);
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  max-width: 90%;
}

.gw-video-cta__inline { display: none; } /* only ever shown inside the fancybox overlay */
.gw-video-cta__inline video { display: block; width: 100%; height: auto; background: #000; }

@media (max-width: 999px) {
  .gw-video-cta { padding-inline: var(--gw-space-3); }
  .gw-video-cta__icon { width: clamp(88px, 30vw, 160px); }
  .gw-video-cta__label.gw-label-s { font-size: var(--gw-fluid-display-xs); }
  .gw-video-cta__play:hover:not([aria-disabled="true"]) { transform: none; } /* no hover on touch */
}