/* Б-33 Цикл склада, вариант b-cycle--process — шаги процесса без ссылок по три в ряд, группы шагов, меню ТСД у роли, широкие роли. Источник: пакет B задачи 6.4 */

.b-cycle__card {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.125rem var(--space-3);
  height: 100%;
  padding: var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.b-cycle__card::before {
  content: counter(b-cycle);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-weight: var(--font-weight-bold);
}

.b-cycle__group-title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h3);
}

.b-cycle__steps + .b-cycle__group-title {
  margin-top: var(--space-7);
}

.b-cycle__role-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

@media (min-width: 768px) {
  .b-cycle__roles--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }
}

@media (min-width: 1024px) {
  .b-cycle__card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-5);
  }

  .b-cycle__card::before {
    grid-row: auto;
    margin-bottom: var(--space-2);
  }

  .b-cycle--process .b-cycle__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .b-cycle--process .b-cycle__step::after {
    content: "→";
    position: absolute;
    top: 1.75rem;
    right: calc(-1 * var(--space-gutter) + 0.1rem);
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
  }

  .b-cycle--process .b-cycle__step:nth-child(3n)::after,
  .b-cycle--process .b-cycle__step:last-child::after {
    content: none;
  }
}