/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-step-list, mk-step-list__, mk-step-list--
 */
/* Component: mk_step_list */
.mk-step-list {
  --mk-step-item-min-height: auto;
  --mk-step-item-columns: var(--mk-step-label-width) minmax(0, 1fr);
  --mk-step-item-gap: var(--mk-space-6);
  --mk-step-item-padding: var(--mk-space-6) var(--mk-space-7);
  display: grid;
  gap: var(--mk-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mk-step;
}

.mk-step-list__item {
  counter-increment: mk-step;
  min-height: var(--mk-step-item-min-height);
  display: grid;
  grid-template-columns: var(--mk-step-item-columns);
  gap: var(--mk-step-item-gap);
  padding: var(--mk-step-item-padding);
  border: 1px solid var(--mk-color-line);
  border-radius: var(--mk-feature-icon-radius);
  background: var(--mk-color-light);
  overflow-wrap: anywhere;
}

.mk-step-list__title {
  display: block;
}

.mk-step-list__title::before {
  content: counter(mk-step, decimal-leading-zero) " ";
}

.mk-step-list__text {
  margin: 0;
}

.mk-step-list--cards {
  --mk-step-item-min-height: 100%;
  --mk-step-item-columns: 1fr;
  --mk-step-item-gap: var(--mk-space-4);
  --mk-step-item-padding: var(--mk-space-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mk-space-3);
}

@media (max-width: 767.98px) {
  .mk-step-list {
    --mk-step-item-columns: 1fr;
  }

  .mk-step-list--cards {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .mk-step-list--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}