/* Simple Hero module - single-state variant of Hero Header. Background
   colour is editor-selectable (blue or green) via [data-background].
   No toggle, no state swap - so no crossfade transitions needed. */

/* ---------- Background ---------- */

.simple-hero__hero {
  background-color: #006FBA;
}
.simple-hero__hero[data-background="green"] {
  background-color: #00896A;
}

/* ---------- Headline + subtext ---------- */

.simple-hero__headline {
  color: #FFFFFF;
  max-width: 580px;
}
.simple-hero__headline--wide {
  max-width: 700px;
}

.simple-hero__subtext {
  max-width: 580px;
}
.simple-hero__subtext--wide {
  max-width: 700px;
}

/* No-image variant: single-column content block. Alignment modifier
   controls horizontal placement of the content column within
   .crn-container (the block itself), while text-* utilities on the
   heading + subtext handle text alignment. */
.simple-hero__content--no-image {
  max-width: 700px;
}
.simple-hero__content--center {
  margin-left: auto;
  margin-right: auto;
}
.simple-hero__content--right {
  margin-left: auto;
}
.simple-hero__subtext,
.simple-hero__subtext p,
.simple-hero__subtext li {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 28px;
  opacity: 0.92;
}
.simple-hero__subtext p:not(:last-child) {
  margin-bottom: 12px;
}

/* ---------- Image column ---------- */

.simple-hero__image-wrap {
  max-width: 100%;
}

/* Frame around the picture, inside the wrapper's padding. It exists so the
   AI disclosure label has something to anchor to that is the image box and
   not the padded column. It takes the sizing the image used to carry, and
   the image now fills it, so the rendered geometry is unchanged. */
.simple-hero__image-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.simple-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

/* The 540px square was designed for the flush-bottom cutout, so it is scoped
   to the image branch. The video branch keeps the same column width but lets
   its own box drive the height (see below): a rounded video with a bottom
   margin does not want to be bottom-anchored inside a fixed square. */
@media (min-width: 1024px) {
  .simple-hero__image-wrap[data-media="image"] {
    width: 540px;
    height: 540px;
    flex-shrink: 0;
    align-self: flex-end;
  }
  .simple-hero__image-wrap[data-media="video"] {
    width: 540px;
    flex-shrink: 0;
    align-self: flex-end;
  }
}

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

/* Self-contained rounded box, ported from Hero Header. Only the functional
   layers came across (poster + play + player); the Video module's green base
   and white gradient mask are omitted because they were designed for a white
   page and clash inside the coloured hero box. Explicit heights are set per
   breakpoint because the media column has no intrinsic height below 1024px,
   so the absolute layers would collapse to 0. */
.simple-hero__video {
  position: relative;
  width: 100%;
  height: 240px;
  /* The column omits bottom padding so an image cutout can sit flush; the
     video box needs breathing room below it instead. */
  margin-bottom: 24px;
  border-radius: 24px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.1);
  isolation: isolate;
}
@media (min-width: 768px) {
  .simple-hero__video {
    height: 380px;
    margin-bottom: 40px;
  }
}
@media (min-width: 1024px) {
  .simple-hero__video {
    height: 444px;
    margin-bottom: 48px;
  }
}

/* Video shape. The heights above size the box to the image-cutout column
   (540px square at lg, so a ratio of ~1.13), which is not the shape of any
   real video: a 16:9 clip dropped into it renders 500x281 with an 81px
   black band above and below. Giving the box a true ratio makes the video
   fill it exactly, with no bands and nothing cropped.

   The attribute selector is (0,2,0), so it beats the (0,1,0) height rules
   above at every breakpoint no matter the source order, and height: auto
   hands sizing to aspect-ratio. "column" is the opt-out that keeps the
   original tall box for a cut-out poster, so it sets no ratio at all.

   Guarded by @supports so a browser without aspect-ratio keeps the fixed
   heights rather than collapsing: height: auto on a box whose only children
   are position: absolute would otherwise leave it 0px tall. @supports adds
   no specificity, so the (0,2,0) win still holds. */
@supports (aspect-ratio: 1 / 1) {
  .simple-hero__video[data-ratio="16x9"],
  .simple-hero__video[data-ratio="4x3"],
  .simple-hero__video[data-ratio="1x1"],
  .simple-hero__video[data-ratio="9x16"] {
    height: auto;
  }
  .simple-hero__video[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
  .simple-hero__video[data-ratio="4x3"]  { aspect-ratio: 4 / 3; }
  .simple-hero__video[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
  .simple-hero__video[data-ratio="9x16"] { aspect-ratio: 9 / 16; }
}

/* Cut-out poster treatment. A poster PNG with transparency lets the panel
   tint above show through around the subject, which reads as a lighter
   rounded box inside the section colour. Dropping the tint and the gap
   below makes a video behave like the image cutout: subject sitting
   directly on the section colour, flush with the bottom edge.

   The radius and overflow stay in both cases. They look redundant with no
   fill, but the inline player underneath is a solid black box that still
   needs rounding, and clipping a transparent corner costs nothing. */
.simple-hero__video--no-background {
  background-color: transparent;
}
/* One unqualified rule clears all three breakpoints: it matches the same
   (0,1,0) specificity as the .simple-hero__video media-query rules above
   and sits after them, and media queries add no specificity of their own. */
.simple-hero__video--no-bottom-margin {
  margin-bottom: 0;
}

.simple-hero__video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* Cover crops the poster to the chosen video shape, which is right for a
   photographic still. A cut-out must not be cropped, so contain fits the
   whole picture and bottom-aligns it the way the hero image does. */
.simple-hero__video-poster--cover {
  object-fit: cover;
}
.simple-hero__video-poster--contain {
  object-fit: contain;
  object-position: bottom;
}

/* Play button (centered) - layered rings per the Hero Header spec: 81px @ 9%
   white, 68px @ 52% white, 52px white disc, brand-coloured play triangle. */
.simple-hero__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 81px;
  height: 81px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  display: block;
}
.simple-hero__video-play:hover .simple-hero__video-play-outer,
.simple-hero__video-play:focus-visible .simple-hero__video-play-outer {
  background-color: rgba(255, 255, 255, 0.25);
}
.simple-hero__video-play:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: 9999px;
}
.simple-hero__video-play-outer,
.simple-hero__video-play-middle,
.simple-hero__video-play-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  display: block;
  transition: background-color 0.25s ease-in-out;
}
.simple-hero__video-play-outer {
  width: 81px;
  height: 81px;
  background-color: rgba(255, 255, 255, 0.09);
}
.simple-hero__video-play-middle {
  width: 68px;
  height: 68px;
  background-color: rgba(255, 255, 255, 0.52);
}
.simple-hero__video-play-inner {
  width: 52px;
  height: 52px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.simple-hero__video-play-inner svg {
  width: 32px;
  height: 32px;
  margin-left: 3px; /* optical centering for the triangle */
}
/* Play triangle takes the box's own background colour. Hero Header keys this
   off data-active-state, which this module has no equivalent of; data-background
   is the right hook here because the HubL above already folds the page-theme
   override into it, so the override path is covered by the same two rules. */
.simple-hero__hero[data-background="blue"] .simple-hero__video-play-inner svg path {
  fill: #006FBA;
}
.simple-hero__hero[data-background="green"] .simple-hero__video-play-inner svg path {
  fill: #00896A;
}
.simple-hero__video-play--pressed .simple-hero__video-play-inner {
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 120ms ease;
}

/* Inline player slot. */
.simple-hero__video-player {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-color: #000000;
  border-radius: 24px;
  overflow: hidden;
}
.simple-hero__video-player[hidden] {
  display: none;
}
.simple-hero__video-player iframe,
.simple-hero__video-player video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 24px;
}

/* When playing inline, hide the poster and play button underneath - and the
   AI label with them, so it does not outlive the poster it describes. */
.simple-hero__video--playing .simple-hero__video-poster,
.simple-hero__video--playing .simple-hero__video-play,
.simple-hero__video--playing .ai-label {
  display: none;
}

/* On-page error banner. */
.simple-hero__video-error {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 12px;
  background-color: #121212;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.simple-hero__video-error[hidden] {
  display: none;
}
.simple-hero__video-error p {
  margin: 0;
}

/* ---------- Video modal ---------- */

.simple-hero__video-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.simple-hero__video-modal[hidden] {
  display: none;
}
.simple-hero__video-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}
/* Positioning wrapper for the close button + the video box.

   It deliberately does NOT clip. The close button sits at top: -44px, outside
   this element's bounds, and an ancestor's overflow clip cannot be escaped
   with z-index - so folding the wrapper and the black box into one
   overflow: hidden element (as this module used to) painted the close button
   out of existence entirely. Same split as .reviews__lightbox-content. */
.simple-hero__video-modal-frame {
  position: relative;
  width: 100%;
  max-width: 1000px;
  z-index: 1;
}

/* The black box that actually shows the video. overflow: hidden lives here so
   the radius clips the iframe and nothing else. */
.simple-hero__video-modal-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  border-radius: 16px;
  overflow: hidden;
}
.simple-hero__video-modal-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  color: #121212;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.simple-hero__video-modal-close:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}
.simple-hero__video-modal-player {
  width: 100%;
  height: 100%;
}
.simple-hero__video-modal-player iframe,
.simple-hero__video-modal-player video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Stop inline playback ---------- */

/* Without this the poster was gone for good once inline playback started:
   the player could be paused but never dismissed. Sits above the player
   (z-index 3) so it stays reachable over an embedded iframe. */
.simple-hero__video-stop {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9999px;
  background-color: rgba(18, 18, 18, 0.7);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.simple-hero__video-stop[hidden] {
  display: none;
}
.simple-hero__video-stop:hover,
.simple-hero__video-stop:focus-visible {
  background-color: #121212;
}
.simple-hero__video-stop:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* The wrapper is `flex items-end`, which is what bottom-aligns an image
   cutout. A transcript is a second child, so on the video branch the row
   has to become a column or the panel lands beside the video instead of
   under it. Scoped to video so the image cutout keeps its alignment. */
.simple-hero__image-wrap[data-media="video"] {
  flex-direction: column;
  align-items: stretch;
}

/* ---------- Transcript ---------- */

/* Sits inside the coloured box, so it inherits the inverted typography the
   rest of the hero uses rather than the page defaults. */
.simple-hero__transcript {
  width: 100%;
  margin-top: 16px;
  color: #FFFFFF;
}
.simple-hero__transcript > summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 0;
}
.simple-hero__transcript > summary:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: 4px;
}
.simple-hero__transcript .richtext,
.simple-hero__transcript .richtext p,
.simple-hero__transcript .richtext li {
  color: #FFFFFF;
  font-size: 16px;
  line-height: 24px;
  opacity: 0.92;
}
.simple-hero__transcript[open] > summary {
  margin-bottom: 8px;
}

/* ---------- AI label: bottom edge set separately ----------
   css/ai-label.css drives every edge from one --ai-label-inset and shrinks it
   25% below 768px. When the editor sets the bottom distance itself, the
   section carries data-ai-bottom-offset plus the two custom properties, and
   these rules take over the bottom edge only - left/right/top still come from
   the shared file. (0,3,0) against the shared (0,1,0), so which stylesheet
   HubSpot emits first does not matter. With the override off the attribute is
   absent, nothing matches, and the render is unchanged.

   Scoped to this module on purpose. If a second module needs the same control,
   promote this into css/ai-label.css rather than copying the block. */
.simple-hero[data-ai-bottom-offset] .ai-label--bottom-right,
.simple-hero[data-ai-bottom-offset] .ai-label--bottom-left {
  bottom: var(--ai-label-inset-bottom);
}

/* Same specificity as the block above, so it must stay after it. */
@media (max-width: 767px) {
  .simple-hero[data-ai-bottom-offset] .ai-label--bottom-right,
  .simple-hero[data-ai-bottom-offset] .ai-label--bottom-left {
    bottom: var(--ai-label-inset-bottom-mobile);
  }
}