/**
 * Video hero (design/sections/videohero.section.json).
 *
 * Deepwater's product-hero renders a fake application panel — SaaS furniture with
 * nothing to say about workplace food. This replaces it on the front page with
 * footage, and carries the same job: state the promise and offer one action.
 *
 * Performance is the whole constraint. The rest of this site loads in ~150 KB of
 * imagery; the loop is 1.1 MB of WebM. So: preload="none" (the poster carries the
 * first paint), poster is a real webp from the opening frame, and reduced-motion
 * users never download the video at all — they keep the poster, which is a
 * complete picture rather than a blank box.
 */

/* Deepwater caps .dw-band at 672px — its reading measure. Correct for prose,
   absurd for a hero: on a 1440px screen the video was using under half the
   width. The band is released here and the hero then cancels the content
   wrapper's inline padding so it runs the full document width.

   Deliberately NOT 100vw: on platforms with classic (non-overlay) scrollbars
   100vw exceeds the document width and would reintroduce horizontal overflow.
   Cancelling the known padding stays inside the document either way. */
.dw-band--videohero {
  padding-block: 0;
  max-width: none;
}

.jm-vhero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 62vh, 34rem);
  border-radius: var(--dw-r-lg);
  overflow: hidden;
}

/* From tablet up the hero goes edge to edge and grows taller, so the footage has
   room to read as footage rather than as a banner. Corners square off — rounded
   corners against the viewport edge look like a mistake. */
@media (min-width: 48rem) {
  .jm-vhero {
    /* Cancel the content wrapper's inline padding EXACTLY. That padding is
       clamp(1.25rem, 4vw, 4rem), so it changes with viewport width — a fixed
       -3.6rem matched only at 1440 and hung 6px past each edge at 1280, which
       is where the reported overflow came from. Subtracting the variable
       tracks it at every width. */
    margin-inline: calc(-1 * var(--wp--style--root--padding-left, 3.6rem));
    min-height: clamp(34rem, 76vh, 46rem);
    border-radius: 0;
  }

  /* The copy keeps the page's reading rhythm even though the frame is full
     width, so the headline does not drift out to the far left edge. */
  .jm-vhero__copy {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: 3.6rem;
    padding-block-end: clamp(2.5rem, 5vw, 4rem);
  }
}

.jm-vhero__media,
.jm-vhero__scrim {
  position: absolute;
  inset: 0;
}

.jm-vhero__poster,
.jm-vhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The poster is the LCP element: it paints first and always. The video sits on
   top and fades in only once it is genuinely playing, so the transition is never
   a blank frame. If autoplay is refused, the poster simply remains. */
.jm-vhero__video {
  opacity: 0;
  transition: opacity 420ms var(--dw-ease);
}

.jm-vhero__video.is-playing {
  opacity: 1;
}

/* Text sits on footage, so contrast cannot be left to chance. The scrim is a warm
   dark wash weighted to the bottom, where the copy lives — strong enough to hold
   white type at AA over any frame of the loop, light enough that the image reads. */
.jm-vhero__scrim {
  background: linear-gradient(
    to top,
    rgba(20, 16, 12, 0.82) 0%,
    rgba(20, 16, 12, 0.62) 38%,
    rgba(20, 16, 12, 0.22) 70%,
    rgba(20, 16, 12, 0.08) 100%
  );
}

.jm-vhero__copy {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  max-width: 44rem;
  color: #fff;
}

.jm-vhero__kicker {
  color: rgba(255, 255, 255, 0.82);
}

.jm-vhero__title {
  margin: 0.35rem 0 0.75rem;
  font-family: var(--dw-display);
  font-size: clamp(2rem, 5.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
}

.jm-vhero__lede {
  margin: 0 0 1.4rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 38rem;
}

.jm-vhero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.jm-vhero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-family: var(--dw-display);
  font-weight: 700;
  text-decoration: none;
}

.jm-vhero__cta--primary {
  background: var(--wp--preset--color--accent);
  color: #fff;
}

.jm-vhero__cta--ghost {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}

.jm-vhero__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.jm-vhero__note {
  margin: 1.1rem 0 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
}

/* Motion is decorative here — the poster says the same thing. Hiding the video
   rather than merely pausing it also means the file is never fetched. */
/* Reduced motion is handled in design/overrides/js/10-vhero.js, which removes the
   element entirely so the file is never fetched. This rule is the belt to that
   braces, for the moment before the script runs. */
@media (prefers-reduced-motion: reduce) {
  .jm-vhero__video {
    display: none;
  }
}

@media (max-width: 46rem) {
  .jm-vhero {
    min-height: 30rem;
    border-radius: var(--dw-r-md);
  }
  .jm-vhero__cta {
    width: 100%;
    justify-content: center;
  }
}