/* components/relo-howitworks.css — scoped hook for .rp-relo-howitworks (Relocation howitworks, Figma 16781:39663).
   Loaded via inc/kadence-relo-howitworks.php (presence-gated, EN + AR). Cowork owns styling
   Figma 16781:40156 — 4-step horizontal stepper: numbered rounded-square boxes
   joined by a dashed connector, category pill, title + body per step. */

/* Section padding (Figma 16781:40156: py-112, content capped at 1200 centered).
   The section is full-bleed white; max(24px, calc(50% - 600px)) gives a 1200px
   centered content column with a 24px min gutter on narrow viewports. */
.rp-relo-howitworks {
  padding: 112px max(24px, calc(50% - 600px));
}

.rp-relo-howitworks .relo-hiw-steps {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.rp-relo-howitworks .relo-hiw-step {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Numbered rounded-square box */
.rp-relo-howitworks .relo-hiw-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid #114EF7;
  border-radius: 14px;
  background: #FFFFFF;
  color: #114EF7;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 28px;
}

/* Dashed connector from each box to the next. Anchored to the step so the span
   is column-width-independent: starts just past the 56px num (left:64px) and
   ends at the next num's left edge (right:-24px = into the 24px gap). top:28px =
   vertical centre of the 56px num. */
.rp-relo-howitworks .relo-hiw-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  inset-inline-start: 64px;
  inset-inline-end: -24px;
  border-top: 2px dashed #D0D5E0;
  z-index: 0;
}

.rp-relo-howitworks .relo-hiw-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EEF2FE;
  color: #114EF7;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.rp-relo-howitworks .relo-hiw-title {
  font-size: 20px;
  font-weight: 700;
  color: #0E1E36;
  line-height: 1.25;
  letter-spacing: -0.36px;
  margin: 0 0 8px;
}

.rp-relo-howitworks .relo-hiw-text {
  font-size: 15px;
  color: #4A5878;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 991px) {
  .rp-relo-howitworks {
    padding: 64px max(24px, calc(50% - 600px));
  }
  .rp-relo-howitworks .relo-hiw-steps {
    flex-direction: column;
    gap: 28px;
  }
  /* No horizontal connector when stacked. */
  .rp-relo-howitworks .relo-hiw-step:not(:last-child)::after {
    display: none;
  }
  .rp-relo-howitworks .relo-hiw-num {
    margin-bottom: 18px;
  }
}

/* Heading in sentence case (theme default Title-cases it) + centered intro paragraph,
   max-width 720, matching Figma 16781:40156. */
.rp-relo-howitworks > h2 { text-transform: none; }
.rp-relo-howitworks > p.double-slide-landing-page-left-label {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}