/* =============================================================================
   8-process.css — Process section (#process): “How we work” step circles
   Step grid, circle size, and connector line are in layout.css.
   ============================================================================= */

/* ---------- Default — section shell ---------- */

/* White band around the green panel */
.process {
  background-color: var(--color-panel);
  position: relative;
}

/* Green curved panel */
.process__bg {
  background-color: var(--color-primary);
}

/* Wrapper under the section title */
.process__container {
  padding-top: 0.5rem;
}

/* h2 and step text — white on green */
.process .section__title,
.process__description {
  color: var(--color-white);
}

/* ---------- Default — step grid and cards ---------- */

/* Vertical space between steps on mobile (grid in layout.css) */
.process__content {
  row-gap: 4rem;
}

/* One step — sits above the dashed connector SVG */
.process__card {
  z-index: 10;
}

/* Big green circle behind the icon */
.process__circle {
  border: none;
  background-color: var(--color-primary-light);
  box-shadow: 0 8px 32px hsla(120, 18%, 8%, 0.3);
  margin-bottom: 1.5rem;
}

/* Icon inside the circle */
.process__icon {
  font-size: 3rem;
  color: var(--color-white);
  line-height: 1;
}

/* “01”, “02”, … badge on the circle edge */
.process__number {
  border: none;
  width: 50px;
  height: 50px;
  background-color: var(--color-cta-bg);
  color: var(--color-primary-dark);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  outline: 10px solid var(--color-primary);
  top: -0.75rem;
}

/* Sentence under each step circle */
.process__description {
  margin: 0;
  line-height: 1.6;
}

/* ---------- Responsive — 1024px up ---------- */

@media (min-width: 1024px) {
  .process__container {
    padding-top: 1rem;
  }

  .process__circle {
    width: 200px;
    height: 200px;
  }

  .process__icon {
    font-size: 3.5rem;
  }

  .process__number {
    width: 70px;
    height: 70px;
    top: -1rem;
    outline: 14px solid var(--color-primary);
  }
}