/* ============================================================
   Container Steps Section
   Figma: 19:10557 (desktop) + 1:6128 (mobile)
   ============================================================ */

/* ── Wrapper & inner container ────────────────────────────── */
.wp-block-cgb-container-steps-section {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.nl-steps {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  background: #fff;
  padding: 2rem 0;
}

.nl-steps__inner {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ── Section header ───────────────────────────────────────── */
.nl-steps__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Section title — 36px/600 (Figma 19:10559) */
.nl-steps__title {
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
  color: #0a0a0a;
  margin: 0;
}

/* Section subtitle — 20px/400 (Figma 19:10560) */
.nl-steps__subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #0a0a0a;
  margin: 0;
}

/* ── Cards row ─────────────────────────────────────────────── */
.nl-steps__cards {
  display: flex;
  gap: 24px;
  align-items: stretch;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nl-steps__cards::-webkit-scrollbar {
  display: none;
}

/* ── Individual card ───────────────────────────────────────── */
.nl-steps__card {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  background: #faf9fe;
  border-radius: 16px;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Step number — 40px ExtraBold, primary colour (Figma 19:10563) */
.nl-steps__number {
  display: block;
  font-size: 40px;
  font-weight: 800;
  line-height: 40px;
  color: var(--bs-primary, #f90);
}

/* Card title — 24px/700, dark purple (Figma 19:10565) */
.nl-steps__card-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--nl-dark-purple, #111);
  margin: 0;
}

/* Card body — 16px/500, dark gray (Figma 19:10566) */
.nl-steps__card-body {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--nl-dark-gray, #6b6b6b);
}

.nl-steps__card-body p {
  margin: 0;
}

/* Card body wrapper grows to push highlight to the bottom */
.nl-steps__card-body-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Highlight — 16px/700, green (Figma 19:10567) */
.nl-steps__card-highlight {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #00815d;
  margin: 0;
}

/* ============================================================
   Mobile (≤600px) — horizontal scroll carousel (Figma 1:6128)
   ============================================================ */
@media (max-width: 600px) {
  .nl-steps {
    padding: 24px 0;
  }

  .nl-steps__inner {
    padding: 0 16px;
    gap: 16px;
  }

  /* Section title — 24px/700 */
  .nl-steps__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
  }

  /* Section subtitle — 14px/400 */
  .nl-steps__subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  /* Cards: horizontal scroll strip */
  .nl-steps__cards {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 12px;
    /* Pull right edge to viewport while keeping left padding */
    margin-right: -16px;
    padding-right: 16px;
    /* Hide scrollbar visually but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nl-steps__cards::-webkit-scrollbar {
    display: none;
  }

  /* Widths follow the copy: shorter cards stay narrower (Figma 1:6133 / 1:6139 / 1:6145) */
  .nl-steps__card {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .nl-steps__card:nth-child(1) {
    width: 200px;
    min-width: 200px;
  }

  .nl-steps__card:nth-child(2) {
    width: 240px;
    min-width: 240px;
  }

  .nl-steps__card:nth-child(3) {
    width: 280px;
    min-width: 280px;
  }

  /* Step number — 36px ExtraBold */
  .nl-steps__number {
    font-size: 36px;
    line-height: 40px;
  }

  /* Card title — 18px/700 */
  .nl-steps__card-title {
    font-size: 18px;
    line-height: 28px;
  }

  /* Card body — 14px/400 */
  .nl-steps__card-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
  }

  /* Highlight — 14px/700 */
  .nl-steps__card-highlight {
    font-size: 14px;
    line-height: 20px;
  }
}