/* V1.8.1: compact, equal-sized workflow cards; homepage only. */
.workflow-section .workflow-steps {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
}

.workflow-section .workflow-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start;
  min-height: 44px;
  padding: .6rem .85rem .75rem;
}

.workflow-section .workflow-step span.workflow-step-copy {
  display: grid;
  gap: .12rem;
  margin-top: 0;
}

.workflow-section .workflow-step .workflow-step-copy > span {
  margin-top: 0;
}

@media (min-width: 1200px) {
  .workflow-section .workflow-steps {
    width: 80%;
    margin-inline: auto;
  }
}

@media (max-width: 1199.98px) {
  .workflow-section .workflow-layout {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  /* Hidden steps reserve the largest card's height without being focusable. */
  .workflow-section .workflow-steps {
    display: grid;
    order: 2;
    width: min(100%, 600px);
    margin-inline: auto;
  }

  .workflow-section .workflow-viewer {
    order: 1;
    width: min(100%, 430px);
  }

  .workflow-section .workflow-step {
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
  }

  .workflow-section .workflow-step.is-active {
    visibility: visible;
    pointer-events: auto;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .workflow-section .workflow-steps {
    width: min(80%, 480px);
  }
}

@media (max-width: 767px) {
  .workflow-section .workflow-layout {
    gap: .85rem;
  }
}