/* ==========================================================================
   PROCESS — numbered steps (widget: aumtm_process)

   Step numbers come from a CSS counter rather than a field, so reordering the
   steps renumbers them and there is no way to end up with two step threes.
   ========================================================================== */

.aumtm-process__grid {
  --aumtm-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--aumtm-cols), minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
  counter-reset: aumtm-step;
}

.aumtm-step { position: relative; counter-increment: aumtm-step; }

/* Connecting line between steps; not drawn after the last one */
.aumtm-step::after {
  content: "";
  position: absolute;
  left: calc(48px + 1rem);
  top: 24px;
  right: calc(-1 * clamp(1.75rem, 3vw, 2.5rem));
  height: 1px;
  background: var(--aumtm-line);
}
.aumtm-step:last-child::after { display: none; }

.aumtm-step__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--aumtm-cyan);
  border-radius: 50%;
  background: #fff;
  color: var(--aumtm-blue);
  font-family: var(--aumtm-font-display);
  font-size: 1.25rem;
  line-height: 1;
}
.aumtm-step__num::before { content: counter(aumtm-step, decimal-leading-zero); }

.aumtm-step__title { margin-top: 1.25rem; font-size: 1.0625rem; }
.aumtm-step__text { margin-top: 0.625rem; font-size: var(--aumtm-fs-sm); line-height: 1.8; }

@media (max-width: 900px) {
  .aumtm-process__grid { --aumtm-cols: 2; }
  .aumtm-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 560px) {
  .aumtm-process__grid { --aumtm-cols: 1; }
  .aumtm-step::after { display: none; }
}

/* Connecting line switched off from the widget */
.aumtm-process__grid--norule .aumtm-step::after { display: none; }