/*
 * Alf Theme — Hydroforming Hero Section
 * Figma node: 699:1484
 *
 * Loaded only on the Hydroforming page template.
 * Overrides body padding-top to 0 — safe, scoped file.
 *
 * Figma structure:
 *   section  flex-col gap-80  pt-144 pb-160 px-120  full-bleed
 *   ├── .hydro-hero__content       flex-col gap-32   (badge → H1 → body → CTA)
 *   └── .hydro-hero__stats-wrapper flex-col gap-32   (stats row → footnote)
 */

/* ── Remove body top-offset — header overlays this section ────────── */
body {
  padding-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION CONTAINER
   ═══════════════════════════════════════════════════════════════════ */
.hydro-hero {
  position: relative;
  padding: 144px 0 160px;
  min-height: 928px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hydro-hero__wrap {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

/* ── Double overlay (::before) ────────────────────────────────────── */
.hydro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(37, 37, 37, 0.95) 0%, rgba(37, 37, 37, 0.8) 50%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(90deg, rgba(12, 12, 12, 0.5) 0%, rgba(12, 12, 12, 0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   UPPER CONTENT BLOCK  (gap-32: badge → H1 → body → CTA)
   ═══════════════════════════════════════════════════════════════════ */
.hydro-hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}

/* ── Badge pill ───────────────────────────────────────────────────── */
.hydro-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #f8faf0;
  background-color: rgba(205, 38, 29, 0.2);
  border: 1px solid rgba(205, 38, 29, 0.3);
  border-radius: 1000px;
  margin: 0;
  white-space: nowrap;
}

/* ── Headline ─────────────────────────────────────────────────────── */
.hydro-hero__heading {
  display: flex;
  flex-direction: column;
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  color: #f8faf0;
}

.hydro-hero__heading-accent {
  color: #cd261d;
}

/* ── Remove br spacing between heading lines ────────────────────────── */
.hydro-hero__heading br {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ── Body text ────────────────────────────────────────────────────── */
.hydro-hero__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #f8faf0;
  margin: 0;
}

/* ── CTA button ───────────────────────────────────────────────────── */
.hydro-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 343px;
  max-width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: #252525;
  background-color: #f8faf0;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.hydro-hero__cta:hover,
.hydro-hero__cta:focus-visible {
  background-color: #e5e8d4;
  transform: translateY(-1px);
}

.hydro-hero__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.hydro-hero__cta .alf-btn-text-clip {
  /* flex: 1 0 0 comes from main.css — no additional rule needed */
  max-width: 281px;
}

.hydro-hero__cta .alf-arrow-clip {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   STATS BLOCK  (gap-32: stats row → footnote)
   ═══════════════════════════════════════════════════════════════════ */
.hydro-hero__stats-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}

/* ── Stats row ────────────────────────────────────────────────────── */
.hydro-hero__stats {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 916px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ── Single stat ──────────────────────────────────────────────────── */
.hydro-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  flex-shrink: 0;
}

/* Value (dd): Inter Bold 24px red — visually first via order:-1 */
.hydro-hero__stat dd {
  order: -1;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #cd261d;
  margin: 0;
  width: 181px;
}

/* Label (dt): Inter Light 16px white */
.hydro-hero__stat dt {
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  color: #f8faf0;
  width: 181px;
}

/* ── Separator — 1px × 83px vertical line ────────────────────────── */
.hydro-hero__sep {
  flex-shrink: 0;
  width: 1px;
  height: 83px;
  background-color: rgba(248, 250, 240, 0.3);
  align-self: center;
}

/* ── Footnote ─────────────────────────────────────────────────────── */
.hydro-hero__footnote {
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: #f8faf0;
  margin: 0;
}

.hydro-hero__footnote small {
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  .hydro-hero {
    padding-block: 120px 140px;
  }

  .hydro-hero__wrap {
    gap: 60px;
  }

  .hydro-hero__heading {
    font-size: 60px;
  }

  .hydro-hero__stats {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .hydro-hero__sep {
    display: none;
  }
}

@media (max-width: 900px) {
  .hydro-hero {
    padding-block: 100px 120px;
    min-height: auto;
  }

  .hydro-hero__wrap {
    gap: 48px;
  }

  .hydro-hero__heading {
    font-size: 48px;
  }

  .hydro-hero__content {
    gap: 24px;
  }

  .hydro-hero__stats {
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .hydro-hero {
    padding-block: 96px 80px;
  }

  .hydro-hero__wrap {
    gap: 40px;
  }

  .hydro-hero__heading {
    font-size: 36px;
  }

  .hydro-hero__badge {
    font-size: 14px;
  }

  .hydro-hero__cta {
    width: 100%;
  }

  .hydro-hero__stats {
    gap: 20px;
  }

  .hydro-hero__stat dd,
  .hydro-hero__stat dt {
    width: auto;
  }
}