/*
 * Alf Theme — Hydroforming Mid-CTA Banner
 * Figma node: 748:1511
 *
 * Compact centred red-gradient banner with title + subtitle.
 * No button — text only. Total section height ≈ 311px on desktop.
 *
 * Loaded only on the Hydroforming page template.
 */

/* ═══════════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════════ */
.hydro-cta-mid {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding-block: 32px;
  margin-bottom: 160px;
}

.hydro-cta-mid__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  max-width: var(--header-max-width);
  /* 896px — centred text column */
}

/* ── Title ────────────────────────────────────────────────────────── */
.hydro-cta-mid__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;
}

/* ── Subtitle ─────────────────────────────────────────────────────── */
.hydro-cta-mid__subtitle {
  font-size: var(--font-size-body-md);
  /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-bg);
  /* #F8FAF0 */
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* .hydro-cta-mid {
    padding-block: 80px;
  } */
}

@media (max-width: 900px) {
  /* .hydro-cta-mid {
    padding-block: 64px;
  } */

  .hydro-cta-mid__title {
    font-size: var(--font-size-h2-mobile);
    /* 32px */
  }
}

@media (max-width: 640px) {
  /* .hydro-cta-mid {
    padding-block: 48px;
  } */

  .hydro-cta-mid__inner {
    gap: 16px;
  }
}