/**
 * Video hero (design/sections/videohero.section.json).
 *
 * Deepwater's product-hero renders a fake application panel — SaaS furniture
 * with nothing to say about home energy. On the front page it is replaced with
 * footage of a wallbox charging an EV at night, carrying the same job: state
 * the promise and offer one action.
 *
 * Performance is the whole constraint. The loop is ~0.7 MB of WebM (1.9 MB
 * mp4 fallback); the poster is a real webp of the opening frame and carries
 * the first paint. Reduced-motion users never download the video at all —
 * design/overrides/js/10-vhero.js removes the element before it fetches.
 *
 * Pattern shared with jobbmat.se (jm-vhero); scrim retuned to Zaps' cool
 * navy canvas instead of jobbmat's warm paper.
 */

/* Deepwater caps .dw-band at its reading measure — correct for prose, absurd
   for a hero. Release the band, then cancel the content wrapper's inline
   padding exactly (it is a clamp(), so subtract the variable rather than a
   fixed length; 100vw would overflow next to classic scrollbars). */
.dw-band--videohero {
  padding-block: 0;
  max-width: none;
}

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

@media (min-width: 48rem) {
  .zp-vhero {
    margin-inline: calc(-1 * var(--wp--style--root--padding-left, 3.6rem));
    min-height: clamp(34rem, 76vh, 46rem);
    border-radius: 0;
  }

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

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

.zp-vhero__poster,
.zp-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 fades
   in only once it is genuinely playing, so there is never a blank frame. */
.zp-vhero__video {
  opacity: 0;
  transition: opacity 420ms var(--dw-ease);
}

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

/* Text sits on footage, so contrast cannot be left to chance. Cool navy wash
   weighted to the bottom where the copy lives — strong enough to hold white
   type at AA over any frame of the loop. */
.zp-vhero__scrim {
  background: linear-gradient(
    to top,
    rgba(9, 10, 24, 0.84) 0%,
    rgba(9, 10, 24, 0.6) 38%,
    rgba(9, 10, 24, 0.22) 70%,
    rgba(9, 10, 24, 0.08) 100%
  );
}

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

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

.zp-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;
}

.zp-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;
}

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

.zp-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;
}

/* Same pairing as deepwater's own header CTA: ember ground, deep ink. */
.zp-vhero__cta--primary {
  background: var(--dw-ember, var(--wp--preset--color--accent));
  color: var(--dw-deep);
}

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

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

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

/* Belt to the JS braces: hide the video for reduced-motion readers in the
   moment before the script runs and removes it entirely. */
@media (prefers-reduced-motion: reduce) {
  .zp-vhero__video {
    display: none;
  }
}

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