/*
 * Steps: a full-bleed light band with a row of numbered circles that fade from
 * light to dark. Ported from the Gutenberg block's style.scss (SCSS nesting
 * flattened); every selector is namespaced under .ergostil-steps so the
 * theme's global heading/paragraph rules stay contained.
 *
 * Mobile-first: the unqualified blocks are the PHONE cascade (the old
 * max-width: 575px values merged over the max-width: 991px and desktop
 * rules), min-width: 576px re-declares the 576-991px values, min-width: 992px
 * the desktop values.
 */

/* Edge-to-edge band: the component renders inside the page container, so the
   viewport-width + centering trick reproduces the block's "align: full"
   support (same approach as .ergostil-hero and .ergostil-cta).
   Phones get a lighter band (48px) and smaller circles/numbers (PLAN_MOBILE
   Phase 2 decision: "mobile-ideal"); the designed 80px/150px/54px values
   return at min-width: 576px. */
.ergostil-steps {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 48px 0;
  background-color: #f5f5f7;
}

/* Small screens wrap the row (old max-width: 991px block) and centre the
   items instead of spreading them; the unwrapped space-between row returns
   at min-width: 992px. */
.ergostil-steps .steps-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Phone: one step per row (old max-width: 575px block overrode the
   three-across width of the old max-width: 991px block); the three-across
   width comes back at min-width: 576px, the fluid desktop flex at
   min-width: 992px (together with margin-bottom: 0, which has no desktop
   counterpart - it only spaced the wrapped rows). */
.ergostil-steps .step-item {
  flex: 0 0 100%;
  max-width: 200px;
  text-align: center;
  margin-bottom: 40px;
}

.ergostil-steps .step-item .step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  margin: 0 auto 25px;
  border-radius: 50%;
}

.ergostil-steps .step-item .step-circle .step-number {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}

.ergostil-steps .step-item .step-title {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}

.ergostil-steps .step-item .step-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  /* !important keeps the text centred even when a theme rule aligns
     paragraphs (the original block needed it too). */
  text-align: center !important;
}

/* 576-991px (old max-width: 991px block): three steps per wrapped row, and
   the designed band/circle sizes the phone base lightened. */
@media (min-width: 576px) {
  .ergostil-steps {
    padding: 80px 0;
  }

  .ergostil-steps .step-item {
    flex: 0 0 calc(33.333% - 20px);
  }

  .ergostil-steps .step-item .step-circle {
    width: 150px;
    height: 150px;
  }

  .ergostil-steps .step-item .step-circle .step-number {
    font-size: 54px;
  }
}

/* Desktop (old unconstrained rules): a single unwrapped, space-between row
   of fluid items with no extra bottom margin. */
@media (min-width: 992px) {
  .ergostil-steps .steps-row {
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .ergostil-steps .step-item {
    flex: 1;
    margin-bottom: 0;
  }
}