/**
 * ROVE — Hero (static studio composition).
 * Blue gradient stage (surface-deep -> blue-grey, per Figma): a "Meet the"
 * eyebrow over the big rOVE wordmark crowning the 3/4 ROVE render, a mirrored
 * water reflection beneath the hull, a scroll chevron, and the
 * "Welcome to the ROVE." tagline pinned low.
 */
.flm-rovehero {
  padding-inline: 0;
  background: linear-gradient(
    180deg,
    var(--wp--preset--color--surface-deep) 4%,
    #5a698b 100%
  );
  overflow: hidden;
}

.flm-rovehero__inner {
  width: min(92vw, 1840px);
  margin-inline: auto;
  min-height: clamp(580px, 82svh, 940px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3rem);
}

/* "Meet the" lead-in above the wordmark. */
.flm-rovehero__eyebrow {
  color: var(--wp--preset--color--text-secondary);
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  line-height: 1.2;
  margin: 0 0 clamp(0.4rem, 1vw, 0.9rem);
}

/* Wordmark crowns the render (sits above it, slight overlap below). */
.flm-rovehero__wordmark {
  width: clamp(230px, 40vw, 540px);
  height: auto;
  position: relative;
  z-index: 3;
}

/* Stage holds the side-profile render + its waterline reflection. Positive gap
   below the wordmark so the boat's top (bimini) clears the ROVE letters. */
.flm-rovehero__stage {
  position: relative;
  width: min(96%, 1080px);
  margin-top: clamp(0.5rem, 1.5vw, 1.5rem);
}

.flm-rovehero__render {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

/* Waterline reflection: the same side-profile image mirrored about its bottom
   edge (where the pontoon sits), so it drops straight down as a clean reflection.
   The mask is authored in the element's own (pre-flip) space — opaque toward the
   bottom so that, once flipped, it reads as solid at the waterline fading down. */
.flm-rovehero__reflection {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  transform: scaleY(-1);
  transform-origin: center bottom;
  opacity: 0.16;
  filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 42%, rgba(0, 0, 0, 0.85) 100%);
  mask-image: linear-gradient(to bottom, transparent 42%, rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Scroll chevron cue, pushed to the bottom band above the tagline. */
.flm-rovehero__cue {
  display: block;
  margin-top: auto;
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  /* Pink: the scroll cue is an action prompt, same call as the homepage intro
     chevron (BugHerd #199, and #202 for this one). */
  color: var(--wp--preset--color--accent-pink);
}
.flm-rovehero__cue svg {
  display: block;
}

.flm-rovehero__tagline {
  color: var(--wp--preset--color--text-primary);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 600px) {
  /* Decrease the hero height so it ends just under the reflection (no empty
     band on tall phones), while keeping the boat clear of the ROVE letters. */
  .flm-rovehero__inner { min-height: 0; }
  .flm-rovehero__stage { margin-top: clamp(0.4rem, 1.5vw, 1rem); }
  /* Pull the tagline up right beneath the reflection instead of pinning it to
     the bottom of a tall min-height. */
  .flm-rovehero__cue { margin-top: clamp(0.75rem, 3vw, 1.5rem); }
}