/*
 * Alf Theme — Hydroforming Sustainability Section
 * Figma node: 699:1785
 *
 * Three sub-components:
 *  1. Section header   — badge pill + H2 + subtitle (centred, max 896px)
 *  2. Benefit cards    — 8 cards, flex-wrap 4-up, light bg
 *  3. Facility image   — full-width, 365px tall, two absolute stat badges
 *
 * Loaded only on the Hydroforming page template.
 */

/* ═══════════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════════ */
.hydro-sustain {
  background-color: var(--color-dark);
  /* #252525 */
  padding-block: 160px;
}

.hydro-sustain__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ═══════════════════════════════════════════════════════════════════
   1. SECTION HEADER
   ═══════════════════════════════════════════════════════════════════ */
.hydro-sustain__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* max-width: var(--header-max-width);   896px */
  width: 100%;
}

/* Green badge pill */
.hydro-sustain__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--color-green-bg);
  /* #DCFCE7 */
  border: 1px solid var(--color-green);
  /* #008236 */
  border-radius: var(--radius-pill);
  /* 1000px */
  font-size: var(--font-size-body-md);
  /* 16px */
  font-weight: var(--font-weight-regular);
  color: var(--color-green);
  line-height: 1;
}

.hydro-sustain__badge img {
  display: block;
  flex-shrink: 0;
}

.hydro-sustain__title {
  font-size: var(--font-size-h2);
  /* 36px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-bg);
  /* #F8FAF0 */
  margin: 0;
}

.hydro-sustain__subtitle {
  font-size: var(--font-size-body-lg);
  /* 20px */
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-bg);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   2. BENEFIT CARDS (8, flex-wrap 4-up)
   ═══════════════════════════════════════════════════════════════════ */
.hydro-sustain__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: var(--content-max-width);
  /* 1200px — yields 2 rows × 4 cols */
}

.hydro-sustain__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 16px;
  background-color: var(--color-bg);
  /* #F8FAF0 */
  border-radius: var(--radius-xl);
  /* 16px */
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease,
    background-color 0.2s ease;
}

/* ── Desktop hover (pointer devices only) ────────────────────────── */
@media (hover: hover) {
  .hydro-sustain__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    border-color: var(--color-green-alt);
    /* #00A63E */
  }
}

/* ── Card sub-elements ───────────────────────────────────────────── */
.hydro-sustain__card-header {
  display: flex;
  flex-direction: column;
  /* desktop: icon above title */
  gap: 24px;
}

.hydro-sustain__card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.hydro-sustain__card-icon img {
  display: block;
  width: 32px;
  height: 32px;
}

.hydro-sustain__card-title {
  font-size: var(--font-size-h4);
  /* 20px */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-dark);
  /* #252525 */
  margin: 0;
  flex: 1;
  /* stretches to push chevron right */
}

/* Chevron — hidden on desktop, shown in accordion mode */
.hydro-sustain__card-chevron {
  display: none;
  flex-shrink: 0;
  color: var(--color-dark);
  transition: transform 0.25s ease;
}

.hydro-sustain__card-body {
  font-size: var(--font-size-body-md);
  /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-dark);
  margin: 0;
}

/* ── Accordion mode (activated by JS on mobile) ──────────────────── */
.hydro-sustain__cards--accordion .hydro-sustain__card {
  gap: 0;
  cursor: pointer;
}

.hydro-sustain__cards--accordion .hydro-sustain__card-header {
  flex-direction: row;
  /* icon + title + chevron in a row */
  align-items: center;
  gap: 12px;
}

.hydro-sustain__cards--accordion .hydro-sustain__card-chevron {
  display: block;
  margin-left: auto;
}

/* Body hidden by default; revealed when .is-open */
.hydro-sustain__cards--accordion .hydro-sustain__card-content {
  display: none;
  padding-top: 16px;
}

.hydro-sustain__cards--accordion .hydro-sustain__card.is-open .hydro-sustain__card-content {
  display: block;
}

/* Chevron flips on open */
.hydro-sustain__cards--accordion .hydro-sustain__card.is-open .hydro-sustain__card-chevron {
  transform: rotate(180deg);
}

/* Active (open) card — green bg (#00A63E), white text — Figma 608:387 */
.hydro-sustain__cards--accordion .hydro-sustain__card.is-open {
  background-color: var(--color-green-alt);
  /* #00A63E */
  border-color: transparent;
}

.hydro-sustain__cards--accordion .hydro-sustain__card.is-open .hydro-sustain__card-title,
.hydro-sustain__cards--accordion .hydro-sustain__card.is-open .hydro-sustain__card-body {
  color: #fff;
}

.hydro-sustain__cards--accordion .hydro-sustain__card.is-open .hydro-sustain__card-chevron {
  color: #fff;
}

/* Active icon gets white circle wrapper — Figma 608:388 rgba(255,255,255,0.2) */
.hydro-sustain__cards--accordion .hydro-sustain__card.is-open .hydro-sustain__card-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Invert icon so it stays visible on green bg */
.hydro-sustain__cards--accordion .hydro-sustain__card.is-open .hydro-sustain__card-icon img {
  filter: brightness(0) invert(1);
}

/* ═══════════════════════════════════════════════════════════════════
   3. FACILITY IMAGE + FLOATING STAT BADGES
   ═══════════════════════════════════════════════════════════════════ */
.hydro-sustain__image-wrap {
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  /* 1200px */
  /* Vertical overflow room for badges that bleed outside the image */
  margin-block: 20px;
}

.hydro-sustain__photo {
  display: block;
  width: 100%;
  height: 365px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  /* 16px */
}

/* ── Shared badge base ────────────────────────────────────────────── */
.hydro-sustain__stat-badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border-radius: var(--radius-lg);
  /* 14px */
  box-shadow: var(--shadow-floating);
}

.hydro-sustain__stat-value {
  font-size: var(--font-size-h2);
  /* 36px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  margin: 0;
}

.hydro-sustain__stat-label {
  font-size: var(--font-size-body-md);
  /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  margin: 0;
}

/* Bottom-left badge — green */
.hydro-sustain__stat-badge--green {
  bottom: -20px;
  left: -20px;
  background-color: var(--color-bg);
  /* #F8FAF0 */
  border: 1px solid var(--color-green-alt);
  /* #00A63E */
}

.hydro-sustain__stat-badge--green .hydro-sustain__stat-value {
  color: var(--color-green-alt);
  /* #00A63E */
}

.hydro-sustain__stat-badge--green .hydro-sustain__stat-label {
  color: var(--color-dark);
  /* #252525 */
}

/* Top-right badge — red */
.hydro-sustain__stat-badge--red {
  top: -20px;
  right: -20px;
  background-color: var(--color-primary);
  /* #CD261D */
}

.hydro-sustain__stat-badge--red .hydro-sustain__stat-value {
  color: var(--color-bg);
  /* #F8FAF0 */
}

.hydro-sustain__stat-badge--red .hydro-sustain__stat-label {
  color: var(--color-bg);
}

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

/* ── Tablet landscape (≤ 1280px) ─────────────────────────────────── */
@media (max-width: 1280px) {
  .hydro-sustain {
    padding-block: 120px;
  }
}

/* ── Tablet portrait (≤ 900px) ───────────────────────────────────── */
@media (max-width: 900px) {
  .hydro-sustain {
    padding-block: 100px;
  }

  /* 2-column card grid */
  .hydro-sustain__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .hydro-sustain__photo {
    height: 280px;
  }

  /* Pull badges back inside the image on smaller screens */
  .hydro-sustain__stat-badge--green {
    bottom: 12px;
    left: 12px;
  }

  .hydro-sustain__stat-badge--red {
    top: 12px;
    right: 12px;
  }
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hydro-sustain {
    padding-block: 80px;
  }

  .hydro-sustain__wrap {
    gap: 32px;
  }

  /* Single-column cards */
  .hydro-sustain__cards {
    grid-template-columns: 1fr;
  }

  .hydro-sustain__photo {
    height: 220px;
  }

  .hydro-sustain__stat-badge {
    padding: 16px;
  }

  .hydro-sustain__stat-value {
    font-size: var(--font-size-h3);
    /* 24px */
  }
}