/* Feeder Hero — full-viewport video hero with pinned trust strip. */

.feederhero-block {
  position: relative;
}

/* Grows past the viewport when the copy needs it. A fixed 100svh stage let the
   CTA row slide under the pinned trust strip on any window shorter than ~900px
   (-157px at 1366x768). The inner column flexes to fill, so a stage that
   already fits renders exactly as before. */
.feederhero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 730px;
  min-height: max(730px, 100vh);
  min-height: max(730px, 100svh);
  overflow: hidden;
}

/* ── Video background ── */

.feederhero-media {
  position: absolute;
  inset: 0;
  background: var(--bellco-bg);
  overflow: hidden;
}

/* 16:9 cover that stays centred at any aspect ratio. */
.feederhero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.feederhero-scrim {
  position: absolute;
  inset: 0;
  display: block;
}

.feederhero-scrim--side {
  background: linear-gradient(to right, rgba(8, 14, 24, 0.92) 0%, rgba(8, 14, 24, 0.55) 60%, rgba(8, 14, 24, 0.3) 100%);
}

.feederhero-scrim--base {
  background: linear-gradient(to top, rgba(8, 14, 24, 1) 0%, rgba(8, 14, 24, 0.45) 35%, transparent 75%);
}

.feederhero-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bellco-mint);
  z-index: 2;
}

/* ── Copy ── */

.feederhero-inner {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 224px;   /* clears the fixed header */
  padding-bottom: 200px; /* clears the 152px trust strip + 48px gap */
}

/* The export sets this to 768px, which forces "The Fastest-Growing" (842px at
   70/900) to break mid-hyphen -- the published prototype renders 4 lines where
   its own <br> tags intend 3. Widened so the authored breaks are honoured. */
.feederhero-copy {
  max-width: 880px;
}

.feederhero-eyebrow {
  margin: 0 0 24px;
}

.feederhero-title {
  font-size: 70px;
  font-weight: 900;
  line-height: 0.93;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 28px;
}

.feederhero-accent {
  display: block;
  color: var(--bellco-mint);
}

.feederhero-sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(242, 242, 240, 0.6);
  max-width: 500px;
  margin: 0 0 40px;
}

.feederhero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* ── Trust strip ── */

.feederhero-trust {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 152px;
  background: rgba(8, 14, 24, 0.94);
  border-top: 1px solid rgba(139, 217, 186, 0.15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.feederhero-trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}

.feederhero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 8px;
}

.feederhero-stat + .feederhero-stat {
  border-left: 1px solid var(--bellco-hairline);
}

.feederhero-stat-value {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bellco-mint);
  font-variant-numeric: tabular-nums;
}

.feederhero-stat-label {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bellco-dim);
  margin-top: 8px;
}

/* ── Tablet ── */

@media (max-width: 1199px) {
  .feederhero-stage {
    min-height: 640px;
    min-height: max(640px, 100vh);
    min-height: max(640px, 100svh);
  }

  .feederhero-inner {
    padding-top: 176px;
  }

  .feederhero-title {
    font-size: 52px;
  }

  .feederhero-stat-value {
    font-size: 36px;
  }

  .feederhero-stat-label {
    font-size: 14px;
  }
}

/* ── Mobile ── */

@media (max-width: 767px) {
  .feederhero-stage {
    height: auto;
    min-height: 0;
  }

  .feederhero-inner {
    padding-top: 140px;
    padding-bottom: 64px;
  }

  .feederhero-title {
    font-size: 36px;
  }

  .feederhero-sub {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .feederhero-actions .btn {
    width: 100%;
  }

  /* Strip stops being pinned and simply follows the copy. */
  .feederhero-trust {
    position: relative;
    height: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .feederhero-trust-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .feederhero-stat {
    padding: 32px 8px;
    border-top: 1px solid var(--bellco-hairline);
  }

  .feederhero-stat + .feederhero-stat {
    border-left: none;
  }

  .feederhero-stat:nth-child(2n) {
    border-left: 1px solid var(--bellco-hairline);
  }

  .feederhero-stat-value {
    font-size: 30px;
  }

  .feederhero-stat-label {
    font-size: 12px;
  }
}

/* ==========================================================================
   Hero vertical alignment below 992  [hero-safe-center]

   .feederhero-inner is a centred flex column whose padding-top is sized to clear the
   fixed header. Plain `center` overflows BOTH edges once the content is
   taller than the box, so on the five product pages with long hero copy the
   <h1> was being pushed up behind the header -- measured at -47px on
   /step-feeders/, -11px on /vibratory-bowl-feeders/, at 390-991px.

   `safe center` degrades to flex-start only in that overflow case, so heroes
   that already fit are untouched. Deliberately NOT applied at 1200+: there
   reproduced. Note this does NOT fix the separate, pre-existing problem that
   the hero content can be taller than the stage on a short viewport -- there
   the overflow simply moves from the top (H1 hidden behind the fixed header)
   to the bottom (CTA touching the stat bar), which is the better failure.
   The real fix for that is letting the stage grow; it needs a design call.
   ========================================================================== */
@media (max-width: 1399px) {
  .feederhero-inner {
    justify-content: safe center;
  }
}