/* IV Video Hero Wide
   Centred copy, full-width click-to-play video below.
   Everything is namespaced under .iv-video-hero-wide so this module cannot
   affect the existing video blocks. */

/* ---------- dark treatment ---------- */

/* One combined effect behind the "Dark Background" toggle: the video's own
   still blurred to a wash, lit with the brand orange and blue. The theme has
   no dark background option, so the base and glows come from the brand tokens
   rather than a new palette.

   Three layers, all behind .ivh-inner:
     background-color   base ground, and the whole effect if there's no still
     .ivh-ambient       z-index -2, the blurred still
     ::after            z-index -1, darkening + the two brand glows over it */
.iv-video-hero-wide.treatment-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #1B1A18;
}

.iv-video-hero-wide .ivh-ambient {
  position: absolute;
  /* Overscanned so the blur doesn't fade out at the edges. */
  inset: -8%;
  z-index: -2;
  display: block;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Moderate saturation: the brand glows below supply the colour, so this no
     longer has to fight the darkening on its own. */
  filter: blur(44px) saturate(1.35) brightness(0.66);
  transform: scale(1.06);
  pointer-events: none;
}

/* Painted in source order, so the two glows sit *over* the darkening and stay
   visible. Both are kept low and wide, away from the centre where the video
   sits, so they read as atmosphere rather than decoration. The darkening is
   weighted behind the copy at the top and eases off at the edges, letting the
   blurred still show through. */
.iv-video-hero-wide.treatment-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 62% at 14% 88%, rgba(221, 84, 29, 0.30) 0%, rgba(221, 84, 29, 0) 100%),
    radial-gradient(52% 58% at 88% 8%, rgba(2, 144, 186, 0.24) 0%, rgba(2, 144, 186, 0) 100%),
    radial-gradient(86% 62% at 50% 24%,
      rgba(20, 19, 17, 0.86) 0%,
      rgba(20, 19, 17, 0.60) 48%,
      rgba(20, 19, 17, 0.38) 100%);
  pointer-events: none;
}

.iv-video-hero-wide .ivh-inner {
  position: relative;
  z-index: 1;
}

/* Copy on dark. The theme's text colours assume a light ground, so set them
   here rather than relying on a bg-* utility. */
.iv-video-hero-wide.treatment-dark .ivh-copy,
.iv-video-hero-wide.treatment-dark .ivh-copy .heading,
.iv-video-hero-wide.treatment-dark .ivh-copy .emotive-text {
  color: #FFFFFF;
}
.iv-video-hero-wide.treatment-dark .ivh-copy .description,
.iv-video-hero-wide.treatment-dark .ivh-copy .description p {
  color: rgba(255, 255, 255, 0.84);
}

/* The outline CTA uses the mid orange, which measures 4.44:1 on this ground and
   fails WCAG AA. The lighter brand orange gives 6.70:1. */
.iv-video-hero-wide.treatment-dark .btn-secondary-wrapper .cta-button {
  color: var(--iv-orange-light, #F08357);
  border-color: var(--iv-orange-light, #F08357);
  background-color: transparent;
}
.iv-video-hero-wide.treatment-dark .btn-secondary-wrapper .cta-button:hover {
  color: #1B1A18;
  background-color: var(--iv-orange-light, #F08357);
}

/* A dark drop shadow vanishes on a dark ground - hold the video's edge with a
   faint light rim instead. */
.iv-video-hero-wide.treatment-dark .ivh-frame.has-shadow {
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .iv-video-hero-wide .ivh-ambient {
    transform: none;
  }
}

.iv-video-hero-wide .ivh-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 44px;
  max-width: 760px;
}

/* Centred by default, but honour the Text Align setting when an editor
   overrides it - text-left/right come from the theme's utility classes. */
.iv-video-hero-wide .ivh-copy.text-left,
.iv-video-hero-wide .ivh-copy.text-lg-left {
  align-items: flex-start;
  margin-left: 0;
}
.iv-video-hero-wide .ivh-copy.text-right,
.iv-video-hero-wide .ivh-copy.text-lg-right {
  align-items: flex-end;
  margin-right: 0;
}

.iv-video-hero-wide .ivh-copy > * {
  margin-top: 0;
}
/* Stops a centred headline dropping a single short word onto its own line. */
.iv-video-hero-wide .ivh-copy .heading,
.iv-video-hero-wide .ivh-copy .emotive-text {
  text-wrap: balance;
}
.iv-video-hero-wide .ivh-copy .description {
  margin-bottom: 0;
}
.iv-video-hero-wide .ivh-copy .cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: inherit;
}

/* ---------- media ---------- */

/* .ivh-media and .ivh-frame are the same <figure>: it is the sizing box, the
   positioning context for the play button and caption, and the clipping box
   for the rounded corners. */
.iv-video-hero-wide .ivh-frame {
  position: relative;
  margin: 0 auto;
  width: 100%;
  aspect-ratio: var(--ivh-ratio, 1.7778);
  overflow: hidden;
  background-color: var(--iv-grey-vdark, #212223);
}

.iv-video-hero-wide .ivh-media--fallback {
  margin: 0 auto;
  width: 100%;
}

/* Older engines without aspect-ratio support: fall back to a padding box. */
@supports not (aspect-ratio: 16 / 9) {
  .iv-video-hero-wide .ivh-frame {
    height: 0;
    padding-bottom: 56.25%;
  }
}

.iv-video-hero-wide .ivh-frame.corners-rounded {
  border-radius: 14px;
}
.iv-video-hero-wide .ivh-frame.has-shadow {
  box-shadow: 0 18px 48px rgba(33, 34, 35, 0.22);
}

.iv-video-hero-wide .ivh-trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.iv-video-hero-wide .ivh-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scrim: keeps the play button and caption readable over a busy photograph.
   The slight wash across the whole frame matters when the thumbnail has light
   or brightly coloured artwork behind the play button. */
.iv-video-hero-wide .ivh-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0.48) 100%);
  pointer-events: none;
}

/* ---------- play affordance ---------- */

.iv-video-hero-wide .ivh-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(60px, 12%, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  /* Dark translucent rather than light: a white fill lets whatever is behind
     it - here the title burned into the thumbnail - bleed through and muddle
     the icon. Dark reads cleanly over both light and busy artwork. */
  background-color: rgba(26, 21, 18, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.34);
  transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.iv-video-hero-wide .ivh-play svg {
  width: 34%;
  height: auto;
  display: block;
  margin-left: 8%; /* optical centring for the triangle */
  fill: #fff;
}

.iv-video-hero-wide .ivh-trigger:hover .ivh-play,
.iv-video-hero-wide .ivh-trigger:focus-visible .ivh-play {
  background-color: var(--iv-orange, #DD541D);
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

.iv-video-hero-wide .ivh-trigger:focus-visible {
  outline: 3px solid var(--iv-orange, #DD541D);
  outline-offset: 3px;
}

/* ---------- caption ---------- */

.iv-video-hero-wide .ivh-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 18px 22px;
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
  pointer-events: none;
}

.iv-video-hero-wide .ivh-caption-text {
  font-weight: 600;
}
.iv-video-hero-wide .ivh-caption-time {
  flex: 0 0 auto;
  opacity: 0.82;
  font-variant-numeric: tabular-nums;
}

/* ---------- playing state ---------- */

.iv-video-hero-wide .ivh-frame.is-playing .ivh-trigger,
.iv-video-hero-wide .ivh-frame.is-playing .ivh-caption {
  display: none;
}

.iv-video-hero-wide .ivh-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

/* ---------- responsive ---------- */

@media (max-width: 991px) {
  .iv-video-hero-wide .ivh-copy {
    margin-bottom: 32px;
  }
  .iv-video-hero-wide .ivh-caption {
    padding: 14px 16px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .iv-video-hero-wide .ivh-frame.corners-rounded {
    border-radius: 10px;
  }
  /* A duration pill alongside a long caption gets cramped on a phone. */
  .iv-video-hero-wide .ivh-caption-text {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iv-video-hero-wide .ivh-play {
    transition: none;
  }
  .iv-video-hero-wide .ivh-trigger:hover .ivh-play,
  .iv-video-hero-wide .ivh-trigger:focus-visible .ivh-play {
    transform: translate(-50%, -50%);
  }
}