/* Process path — 81:180, 220:786, 227:1248, 242:1662, 247:1710 */

.aht-path-section {
  background: var(--aht-color-background-web-canvas);
}

.aht-path__step {
  display: grid;
  grid-template-columns: 72px 332px minmax(0, 1fr);
  align-items: start;
  gap: var(--aht-spacing-24);
  padding-block: 28px;
  border-top: 1px solid rgb(184 142 115 / 55%);
}

.aht-path__step:last-child {
  border-bottom: 1px solid rgb(184 142 115 / 55%);
}

.aht-path__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--aht-color-line-brand);
  border-radius: var(--aht-radius-pill);
  color: var(--aht-color-text-brand);
  font-size: var(--aht-type-utility-size);
  font-weight: var(--aht-font-weight-semibold);
}

.aht-path__title {
  color: var(--aht-color-text-primary);
  padding-top: var(--aht-spacing-8);
}

.aht-path__description {
  color: var(--aht-color-text-secondary);
  padding-top: var(--aht-spacing-8);
}

.aht-path-section--raised {
  background: var(--aht-color-background-raised);
}

/* At 1119 the title column collapses under the marker and the row reads as
   two lines rather than three columns. It is the same layout at 390. */
@media (max-width: 1119px) {
  .aht-path__step {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      'marker title'
      '.      description';
    gap: var(--aht-spacing-8) var(--aht-spacing-16);
  }

  .aht-path__marker {
    grid-area: marker;
  }

  .aht-path__title {
    grid-area: title;
    padding-top: var(--aht-spacing-8);
  }

  .aht-path__description {
    grid-area: description;
    padding-top: 0;
  }
}