/* 6. Ablauf – 4 columns on desktop, vertical timeline on mobile */
.steps {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.step__media { aspect-ratio: 4 / 3; }
.step__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline) solid var(--line);
}
.step__num { color: var(--accent-text); }
.step__title { margin-top: var(--space-4); }
.step__text { margin-top: var(--space-3); color: var(--ink-muted); }

@media (max-width: 959px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
}

@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step {
    position: relative;
    padding-left: var(--space-7);
    padding-bottom: var(--space-7);
  }
  /* timeline line and dot */
  .step::before {
    content: ""; position: absolute; left: calc(var(--space-3) - 1px); top: 0; bottom: 0;
    border-left: var(--border-card) solid var(--line);
  }
  .step:last-child::before { bottom: auto; height: var(--space-5); }
  .step::after {
    content: ""; position: absolute; left: var(--space-1); top: var(--space-1);
    width: var(--space-4); height: var(--space-4); border-radius: var(--radius-full);
    background: var(--surface-100); border: var(--border-card) solid var(--accent-text);
  }
  .step__media { order: 1; }
  .step { display: flex; flex-direction: column; }
  .step__head { order: 0; margin-top: 0; margin-bottom: var(--space-4); }
  .step__title, .step__text { order: 2; }
}

/* Hover: the photo leans in slightly */
@media (hover: hover) {
  .step__media img { transition: transform var(--duration-slow) var(--ease-out); }
  .step:hover .step__media img { transform: scale(1.03); }
}