/*
 * Alf Theme — Hotforming Strategic Benefits
 * Figma node: 659:4408
 *
 * Light (#F8FAF0) background, centred H2, row of 3 dark cards with
 * red left-border accent block, bold title, and description.
 * Loaded only on the Hotforming page template.
 */

/* ═══════════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════════ */
.hf-strategic {
  background-color: var(--color-bg);
  padding-block: 160px;
}

/* ── Inner wrap ──────────────────────────────────────────────────── */
.hf-strategic__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADING
   ═══════════════════════════════════════════════════════════════════ */
.hf-strategic__title {
  font-size: var(--font-size-h2);
  /* 36px */
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-dark);
  text-align: center;
  margin: 0;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   CARDS ROW
   ═══════════════════════════════════════════════════════════════════ */
.hf-strategic__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

/* ── Individual card ─────────────────────────────────────────────── */
.hf-strategic__card {
  background-color: var(--color-dark);
  border-radius: var(--radius-xl);
  /* 16px */
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 0 0;
  min-width: 236px;
}

/* ── Accent block (red left border + large keyword) ──────────────── */
.hf-strategic__accent-block {
  border-left: 6px solid var(--color-primary);
  padding: 8px 16px;
  min-height: 104px;
  display: flex;
  align-items: flex-start;
}

.hf-strategic__accent-text {
  font-size: var(--font-size-h2);
  /* 36px */
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-bg);
}

/* ── Card name (bold title) ──────────────────────────────────────── */
.hf-strategic__card-name {
  font-size: var(--font-size-h4);
  /* 20px */
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.3;
  color: var(--color-bg);
  margin: 0;
}

/* ── Card description ────────────────────────────────────────────── */
.hf-strategic__card-desc {
  font-size: var(--font-size-body-md);
  /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: #ababab;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hf-strategic {
    padding-block: 120px;
  }
}

@media (max-width: 768px) {
  .hf-strategic {
    padding-block: 80px;
  }

  .hf-strategic__title {
    font-size: 28px;
  }

  .hf-strategic__cards {
    flex-direction: column;
  }

  .hf-strategic__card {
    min-width: 0;
  }
}