/* WhatsApp order steps — responsive overrides for #dispatch (4 steps) */

#dispatch.dispatch-module__DJqsHW__section {
  padding-block: clamp(48px, 8vw, 96px);
  margin-block-end: clamp(24px, 4vw, 48px);
}

#dispatch .dispatch-module__DJqsHW__header {
  text-align: center;
  align-items: center;
  gap: 0;
  padding-inline: 4px;
}

#dispatch .dispatch-module__DJqsHW__header h2 {
  max-width: min(16ch, 100%);
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

#dispatch .dispatch-module__DJqsHW__header p {
  max-width: 42rem;
  margin-block-start: clamp(12px, 2vw, 18px);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
}

/* Desktop / tablet landscape: 4 equal columns */
#dispatch .dispatch-module__DJqsHW__stages {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}

#dispatch .dispatch-module__DJqsHW__journey {
  margin-block-start: clamp(40px, 5.5vw, 72px);
}

#dispatch .dispatch-module__DJqsHW__track,
#dispatch .dispatch-module__DJqsHW__traveler {
  top: 78px;
  left: 12.5%;
  right: 12.5%;
}

#dispatch .dispatch-module__DJqsHW__stage {
  text-align: center;
  padding-inline: clamp(4px, 1vw, 12px);
}

#dispatch .dispatch-module__DJqsHW__node {
  width: clamp(72px, 8vw, 88px);
  height: clamp(72px, 8vw, 88px);
}

#dispatch .dispatch-module__DJqsHW__nodeCore svg {
  width: clamp(22px, 2.4vw, 27px);
  height: clamp(22px, 2.4vw, 27px);
}

#dispatch .dispatch-module__DJqsHW__stageCopy {
  max-width: 16rem;
  width: 100%;
  margin-block-start: clamp(14px, 2vw, 20px);
}

#dispatch .dispatch-module__DJqsHW__stageCopy h3 {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.25;
  text-wrap: balance;
}

#dispatch .dispatch-module__DJqsHW__stageCopy p {
  font-size: clamp(13px, 1.15vw, 14.5px);
  line-height: 1.55;
  margin-block-start: 8px;
}

#dispatch .dispatch-module__DJqsHW__step {
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

/* Mid: 2×2 card grid, hide horizontal track */
@media (max-width: 1099px) and (min-width: 721px) {
  #dispatch .dispatch-module__DJqsHW__track,
  #dispatch .dispatch-module__DJqsHW__traveler {
    display: none;
  }

  #dispatch .dispatch-module__DJqsHW__stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 720px;
    margin-inline: auto;
  }

  #dispatch .dispatch-module__DJqsHW__stage {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    padding: 20px 18px 22px;
    border: 1px solid color-mix(in srgb, var(--color-ng-rule-strong, #c5d6e0) 85%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, #fff 88%, var(--color-ng-ground, #f3f7fa));
  }

  #dispatch .dispatch-module__DJqsHW__step {
    margin-block-end: 10px;
  }

  #dispatch .dispatch-module__DJqsHW__node {
    width: 64px;
    height: 64px;
    margin-block-end: 4px;
  }

  #dispatch .dispatch-module__DJqsHW__stageCopy {
    max-width: none;
    margin-block-start: 12px;
  }
}

/* Mobile: vertical timeline */
@media (max-width: 720px) {
  #dispatch.dispatch-module__DJqsHW__section {
    padding-inline: max(16px, env(safe-area-inset-left));
  }

  #dispatch .dispatch-module__DJqsHW__header {
    text-align: left;
    align-items: flex-start;
  }

  #dispatch .dispatch-module__DJqsHW__header h2 {
    max-width: 14ch;
    font-size: clamp(30px, 9vw, 40px);
  }

  #dispatch .dispatch-module__DJqsHW__header p {
    max-width: 36ch;
    font-size: 15px;
  }

  #dispatch .dispatch-module__DJqsHW__journey {
    margin-block-start: 36px;
  }

  #dispatch .dispatch-module__DJqsHW__track,
  #dispatch .dispatch-module__DJqsHW__traveler {
    display: block;
    width: 2px;
    height: auto;
    inset: 28px auto 40px 31px;
    top: auto;
    left: 31px;
    right: auto;
  }

  #dispatch .dispatch-module__DJqsHW__track:before {
    background: linear-gradient(
      180deg,
      var(--color-ng-cyan, #1fb5d6) 0%,
      var(--color-ng-cyan-deep, #0e8eac) 48%,
      var(--color-ng-navy, #1d3347) 100%
    );
    transform-origin: top;
    animation-name: dispatch-module__DJqsHW__route-draw-vertical;
  }

  #dispatch .dispatch-module__DJqsHW__traveler:after {
    animation-name: dispatch-module__DJqsHW__route-traveler-vertical;
    top: 0;
    left: 50%;
  }

  #dispatch .dispatch-module__DJqsHW__stages {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 100%;
  }

  #dispatch .dispatch-module__DJqsHW__stage {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    text-align: left;
    min-height: 0;
    padding: 0 0 20px;
    border: 0;
    background: transparent;
    border-radius: 0;
    row-gap: 2px;
  }

  #dispatch .dispatch-module__DJqsHW__stage:last-child {
    padding-block-end: 0;
  }

  #dispatch .dispatch-module__DJqsHW__step {
    grid-area: 1 / 2;
    align-self: end;
    margin: 0 0 6px;
  }

  #dispatch .dispatch-module__DJqsHW__node {
    grid-area: 1 / 1 / 3 / 2;
    width: 62px;
    height: 62px;
    justify-self: start;
  }

  #dispatch .dispatch-module__DJqsHW__stageCopy {
    grid-area: 2 / 2;
    max-width: none;
    margin-block-start: 0;
    padding-inline-end: 4px;
  }

  #dispatch .dispatch-module__DJqsHW__stageCopy h3 {
    font-size: 17px;
  }

  #dispatch .dispatch-module__DJqsHW__stageCopy p {
    font-size: 14px;
    line-height: 1.6;
  }
}

@media (max-width: 380px) {
  #dispatch .dispatch-module__DJqsHW__stage {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  #dispatch .dispatch-module__DJqsHW__node {
    width: 54px;
    height: 54px;
  }

  #dispatch .dispatch-module__DJqsHW__track,
  #dispatch .dispatch-module__DJqsHW__traveler {
    left: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dispatch .dispatch-module__DJqsHW__track:before {
    opacity: 1;
    transform: none !important;
    animation: none !important;
  }

  #dispatch .dispatch-module__DJqsHW__traveler {
    display: none !important;
  }
}