/* ══════════════════════════════════════════════════════════════
   METHODOLOGY / WORK PROCESS SECTION

   Reuses the theme's real identity components as-is:
   - .service-card + .sv-ic  → same white card / blue-icon-box
     already used in sections/services.php & sections/why-us.php
     (icon on its own line, above the title/desc — default order,
     nothing overridden here).
   - dark mode for both is already handled centrally in
     assets/css/base/dark-mode.css, so no color logic is
     duplicated or guessed here — only new layout (grid/number
     badge/connector) is added, following the same
     var(--second)/var(--blue) pairing used by .pricing-badge.

   Breakpoints:
   - ≥ 992px (desktop)         → 4 columns in a single row + connectors
   - 576px – 991px (tablet)    → 2 columns grid, connectors hidden
   - < 576px (mobile)          → 1 column stack
══════════════════════════════════════════════════════════════ */

/* ── Desktop: 4-in-a-row with connectors ── */
.methodology-steps {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.methodology-step {
  flex: 1 1 0;
  position: relative; /* number badge anchors here, NOT on .service-card
                          (which has overflow:hidden and would clip it) */
  padding-top: 17px;  /* room for the badge poking above the card */
}

/* ── Card sizing (icon stays on its own line, above the text — default .service-card order) ── */
.methodology-card.service-card {
  padding: 1.8rem 1.6rem;
  height: 100%;
}

.methodology-card .sv-ic {
  width: 64px;
  height: 64px;
  font-size: var(--text-xl);
}

.methodology-card h4 {
  font-size: var(--heading-card);
  margin-bottom: 0.45rem;
}

.methodology-card p {
  margin-bottom: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

/* Number badge — same pairing as .pricing-badge (var(--second) bg / var(--blue) text) */
.methodology-step__num {
  position: absolute;
  top: 0;
  right: 20px;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--second);
  color: var(--blue);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

html[dir="ltr"] .methodology-step__num {
  right: auto;
  left: 20px;
}

/* Connector arrow between two cards — compact, doesn't eat up space */
.methodology-connector {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  align-self: center;
  z-index: 2;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue);
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .methodology-connector {
  background: var(--dark-surface-elevated);
  border-color: var(--dark-border);
}

/* ── Tablet: break into a proper 2-column grid instead of squeezing 4 across ── */
@media (max-width: 991px) {
  .methodology-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .methodology-step {
    flex: initial; /* not used in grid, kept harmless */
  }

  .methodology-connector {
    display: none;
  }
}

/* ── Mobile: single column ── */
@media (max-width: 575px) {
  .methodology-steps {
    grid-template-columns: 1fr;
  }
}