/* Б-26 Программа демонстрации и три шага. Источник: новый макет (задача 6.3) */

.b-demo-program {
  padding-block: var(--space-section-tight);
  background: var(--color-bg);
}

.b-demo-program__panel {
  position: relative;
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-accent-panel);
  color: var(--color-text-inverse);
}

/* Декор — градиент знака, без текста */
.b-demo-program__panel::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient-brand);
  opacity: 0.35;
  filter: blur(40px);
}

.b-demo-program__list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  counter-reset: b-demo;
}

.b-demo-program__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgb(8 50 125 / 0.3);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  counter-increment: b-demo;
}

.b-demo-program__item::before {
  content: counter(b-demo, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-accent-strong);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.b-demo-program__bottom {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.24);
}

.b-demo-program__cta {
  width: 100%;
}

@media (min-width: 768px) {
  .b-demo-program__panel {
    padding: var(--space-9) var(--space-8);
    border-radius: var(--radius-xl);
  }

  .b-demo-program__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b-demo-program__cta {
    width: auto;
    justify-self: start;
  }
}

@media (min-width: 1024px) {
  .b-demo-program__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-gutter);
  }

  .b-demo-program__item {
    align-items: start;
    min-height: 7rem;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }

  .b-demo-program__bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-8);
  }
}