/* Flamingo 5 — Innovation panels (f5-innovations pattern).
   Description left / image right. Default (no JS / reduced motion) = a static
   stacked list. With JS, assets/js/f5-innovations.js adds .is-pinned and the
   section becomes a full-screen pinned scroll sequence: panels cycle in from the
   left with a parallax offset between copy and image, then the pin releases
   (BugHerd #63). */

.flm-f5innov {
  background-color: var(--wp--preset--color--surface-deep);
  color: var(--wp--preset--color--text-primary);
  padding-block: clamp(2rem, 4vw, 4rem);
  /* This is a full-bleed section; the inner sets its own 92vw width and centres.
     Drop the editor's root inline padding so the inner isn't squeezed (on narrow
     screens that padding shrank the panel below 92vw and clipped the copy). */
  padding-inline: 0;
}

/* --- Shared inner grid: description left, image right --------------------- */
.flm-f5innov__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.flm-f5innov__num {
  display: block;
  font-family: var(--wp--preset--font-family--plex);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 0.75rem;
}

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

.flm-f5innov__tagline {
  color: var(--wp--preset--color--text-secondary);
  font-weight: 300;
  line-height: 1.6;
  font-size: var(--wp--preset--font-size--body);
  margin: 0 0 1.5rem;
  max-width: 42ch;
}

.flm-f5innov__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.flm-f5innov__bullets li {
  color: var(--wp--preset--color--text-primary);
  font-size: var(--wp--preset--font-size--caption);
  padding: 0.85rem 0;
  border-top: 1px solid var(--wp--preset--color--surface-elev-1);
}

.flm-f5innov__media {
  position: relative;
}

.flm-f5innov__media img,
.flm-f5innov__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  aspect-ratio: 4 / 3;
}

/* (The old short pink rule under each photo is gone — replaced by the
   image-width 5-segment progress bar below, BugHerd #152.) */

/* Progress dots only show in the pinned sequence. */
.flm-f5innov__dots { display: none; }

/* ======================================================================== */
/* FALLBACK (no JS / reduced motion): a simple stacked list of panels.       */
/* ======================================================================== */
.flm-f5innov:not(.is-pinned) .flm-f5innov__stage {
  width: min(92vw, 1840px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
}

/* ======================================================================== */
/* PINNED SEQUENCE (JS active, motion allowed).                             */
/* ======================================================================== */

/* The section becomes a tall scroll track; the sticky child pins for the
   full screen while the panels cycle. svh keeps the pin height stable when the
   mobile address bar collapses. */
.flm-f5innov.is-pinned {
  position: relative;
  padding-block: 0;
  height: calc(var(--flm-f5-count, 5) * 100svh);
}

.flm-f5innov.is-pinned .flm-f5innov__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.flm-f5innov.is-pinned .flm-f5innov__stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Panels stack in place and crossfade; JS drives --x per panel (0 = active,
   <0 = upcoming, >0 = passed) plus opacity. Per the mockup the panel itself does
   NOT slide — only the copy scrolls and the image enters from the right (below).
   Later panels sit above earlier ones in the DOM, so an incoming image naturally
   covers the outgoing one as it slides in. No CSS transition — mapped to scroll. */
.flm-f5innov.is-pinned .flm-f5innov__panel {
  position: absolute;
  inset: 0;
  will-change: opacity;
}

/* Width-constrained content inside each full-bleed panel. Content is biased
   toward the top (just below the sticky header) rather than vertically centred:
   while the section scrolls in (before the pin engages) a centred layout leaves
   the active block floating low with a large dead band above it. Top-aligning
   keeps the block tucked under the header throughout entry, closing that gap. */
.flm-f5innov.is-pinned .flm-f5innov__inner {
  width: min(92vw, 1840px);
  height: 100%;
  margin-inline: auto;
  align-content: start;
  /* Tighter top buffer (was 9svh) — the band above the image plus the dead
     zone under it read as excess air (BugHerd #129). */
  padding-block: clamp(3.5rem, 7svh, 5.5rem) clamp(2rem, 5svh, 3.5rem);
}

/* Fill the panel height: drive the height from the viewport (not the 4/3 aspect,
   which at this column width would leave the image short and open a dead band
   below it) and cover-crop. This keeps the pinned panel full top-to-bottom. */
.flm-f5innov.is-pinned .flm-f5innov__media img,
.flm-f5innov.is-pinned .flm-f5innov__media video {
  /* 76svh (was 72) fills more of the stage, shrinking the dead band between
     the image and the line pagination (BugHerd #129). */
  height: clamp(420px, 76svh, 760px);
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Copy scrolls vertically: upcoming text waits below, slides up through centre,
   exits above. (--x < 0 upcoming -> positive Y/below; --x > 0 passed -> above.) */
.flm-f5innov.is-pinned .flm-f5innov__copy {
  transform: translateY(calc(var(--x, 0) * -10svh));
  will-change: transform;
}
/* Image enters from the LEFT and slides right into place — "moving forward"
   (BugHerd #98): upcoming image waits off the left edge and slides to 0; once
   active/passed it holds at 0 and fades out (opacity, via JS) while the next
   image slides in over it. min(0%, ...) keeps passed images from drifting right,
   so the motion always reads as "in from the left". */
.flm-f5innov.is-pinned .flm-f5innov__media {
  transform: translateX(min(0%, calc(var(--x, 0) * 100%)));
  will-change: transform;
}

/* Progress bar (BugHerd #152, supersedes the #97 centered line): one bar the
   full width of the image, split into 5 equal segments — one per innovation.
   Segments fill pink as the sequence advances (passed = dimmed pink, active =
   full pink). Positioned under the image by reusing the panel's own geometry:
   the container is the inner's width, and the left padding equals the copy
   column (1fr of 2.1) plus the grid gap, so the segments span exactly the
   media column (1.1fr). Vertical offset = panel padding-top + image height. */
.flm-f5innov.is-pinned .flm-f5innov__dots {
  display: flex;
  position: absolute;
  box-sizing: border-box; /* padding carves the copy column out of the width */
  top: calc(clamp(3.5rem, 7svh, 5.5rem) + clamp(420px, 76svh, 760px) + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 1840px);
  padding-left: calc((min(92vw, 1840px) - clamp(1.5rem, 4vw, 4rem)) / 2.1 + clamp(1.5rem, 4vw, 4rem));
  gap: 3px;
  z-index: 5;
}
.flm-f5innov__dot {
  height: 3px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 0.25s ease;
}
.flm-f5innov.is-pinned .flm-f5innov__dot {
  flex: 1 1 0;
}
.flm-f5innov__dot.is-passed {
  background: rgba(223, 110, 140, 0.45); /* accent-pink at 45% */
}
.flm-f5innov__dot.is-active {
  background: var(--wp--preset--color--accent-pink);
}

/* Scroll cue — the "solid cue" that this section is scroll-driven. Sits at the
   bottom centre with a gently bouncing chevron; JS fades it out once the user
   starts advancing. Only shown in the pinned sequence. */
.flm-f5innov__cue { display: none; }
.flm-f5innov.is-pinned .flm-f5innov__cue {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4svh, 2.5rem);
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  z-index: 6;
  color: var(--wp--preset--color--text-muted);
  font-family: var(--wp--preset--font-family--plex);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.flm-f5innov__cue-icon {
  display: block;
  animation: flm-f5cue-bounce 1.6s ease-in-out infinite;
}
@keyframes flm-f5cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* --- Narrow screens: stack copy over image inside each panel ------------- */
@media (max-width: 767px) {
  .flm-f5innov__inner {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 5vw, 2rem);
  }
  /* Image above the copy reads better stacked. Capped at 30svh (was 38) so
     the copy block clears the scroll cue at the bottom (BugHerd #179). */
  .flm-f5innov__media { order: -1; }
  .flm-f5innov.is-pinned .flm-f5innov__media img,
  .flm-f5innov.is-pinned .flm-f5innov__media video { max-height: 30svh; }

  /* Tall phones left a dead band under the panel copy inside the 100svh pin
     (client punch list 2026-08-05). Capping the pinned frame lets the next
     section sit flush when the pin releases — no overlap tricks (the earlier
     pull-up read as an odd scroll glitch, BugHerd g30638785). Content needs
     ~660px at 390w; short viewports keep the full-screen pin. */
  .flm-f5innov.is-pinned .flm-f5innov__sticky {
    height: min(100svh, 46rem);
  }
  .flm-f5innov.is-pinned .flm-f5innov__inner {
    padding-block: clamp(3.5rem, 10svh, 6rem) clamp(3.5rem, 8svh, 5rem);
  }

  /* Stacked layout: the image is first and capped at 30svh, so the progress
     bar spans the full inner width right under it (BugHerd #152). */
  .flm-f5innov.is-pinned .flm-f5innov__dots {
    top: calc(clamp(3.5rem, 10svh, 6rem) + 30svh + 0.75rem);
    padding-left: 0;
  }

  /* Scroll cue sits at the very bottom edge on mobile — like desktop, it must
     never overlay the panel copy (BugHerd #179). */
  .flm-f5innov.is-pinned .flm-f5innov__cue { bottom: 0.5rem; }
}

/* --- Reduced motion: never pin; show the static stacked list ------------- */
@media (prefers-reduced-motion: reduce) {
  .flm-f5innov.is-pinned {
    height: auto;
    padding-block: clamp(2rem, 4vw, 4rem);
  }
  .flm-f5innov.is-pinned .flm-f5innov__sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  .flm-f5innov.is-pinned .flm-f5innov__stage {
    width: min(92vw, 1840px);
    height: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 7vw, 6rem);
  }
  .flm-f5innov.is-pinned .flm-f5innov__panel {
    position: relative;
    inset: auto;
    transform: none;
    opacity: 1 !important;
  }
  .flm-f5innov.is-pinned .flm-f5innov__copy,
  .flm-f5innov.is-pinned .flm-f5innov__media {
    transform: none;
  }
  .flm-f5innov.is-pinned .flm-f5innov__dots { display: none; }
}