/* ============================================================
   Steps widget

   The number is a CSS counter, never typed into the content. An editor
   reordering the repeater would otherwise have to renumber every row by hand,
   and the first time they forget you ship a process that reads 1, 2, 4, 3.
   ============================================================ */

.hs-steps__grid{
  display:grid;
  grid-template-columns:repeat(var(--hs-steps-cols,2),minmax(0,1fr));
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:hs-step;
}

.hs-steps__item{
  position:relative;
  /* Left padding reserves the counter's column so a long step title never wraps
     underneath the number. */
  padding:22px 24px 22px 74px;
  background:var(--hs-w-surface,var(--hs-card));
  border:1px solid var(--hs-w-border,var(--hs-line));
  border-radius:14px;
  transition:border-color var(--hs-t);
}
.hs-steps__item:hover{border-color:var(--hs-w-accent,var(--hs-accent))}

.hs-steps__item::before{
  counter-increment:hs-step;
  content:counter(hs-step,decimal-leading-zero);
  position:absolute;
  left:22px;
  top:20px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--hs-w-accent,var(--hs-accent));
}

.hs-steps__title{font-size:18px;font-weight:800;line-height:1.25;margin:0 0 6px}
.hs-steps__text{font-size:14px;margin:0}

@media(max-width:700px){
  .hs-steps__grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .hs-steps__item{transition:none}
}