/* ==========================================================================
   Process rails — phone layout
   --------------------------------------------------------------------------
   Every service and industry page builds its process as a horizontal rail of
   five or six centred columns. Squeezed onto a phone those columns leave two
   or three words per line and strand the last step in a half-empty row, so
   below 640px each rail becomes a vertical list: marker on the left, title
   and copy stacked beside it, a dashed line joining one marker to the next.

   The rails are per-page components with their own prefixes, so the selector
   lists below are long. This file is loaded last on every page: the page
   stylesheets keep their own narrow-width rules, and these override them.
   ========================================================================== */

@media (max-width: 640px) {

  .ind-steps, .cn-steps, .cw-steps, .wd-steps,
  .lp-steps, .dm-steps, .am-steps, .mg-steps,
  .sp-steps, .crm-steps, .api-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .ind-step, .cn-step, .cw-step, .wd-step,
  .lp-step, .dm-step, .am-step, .mg-step,
  .sp-step, .crm-step, .api-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: .95rem;
    align-items: start;
    text-align: left;
    padding-inline: 0;
  }

  /* Marker occupies the first column. Some rails wrap the circle in a mark
     element so a badge can be pinned to it; the rest place the circle
     directly in the step, so both shapes are pulled into the same cell. */
  .ind-step > .ind-step-mark,
  .cn-step > .cn-step-mark,
  .cw-step > .cw-step-mark,
  .wd-step > .wd-step-ico,
  .lp-step > .lp-step-ico,
  .dm-step > .dm-step-ico,
  .am-step > .am-step-ico,
  .mg-step > .mg-step-ico,
  .sp-step > .sp-step-ico,
  .crm-step > .crm-step-ico,
  .api-step > .api-step-ico {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 52px;
    height: 52px;
    margin: 0;
  }

  .ind-step-mark > .ind-step-ico,
  .cn-step-mark > .cn-step-ico,
  .cw-step-mark > .cw-step-ico,
  .wd-step > .wd-step-ico,
  .lp-step > .lp-step-ico,
  .dm-step > .dm-step-ico,
  .am-step > .am-step-ico,
  .mg-step > .mg-step-ico,
  .sp-step > .sp-step-ico,
  .crm-step > .crm-step-ico,
  .api-step > .api-step-ico {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
  }

  /* Rails that print the step number as loose text above the title would push
     the title off the marker row, so the number rides the circle instead. */
  .dm-step > .dm-step-n,
  .am-step > .am-step-n,
  .sp-step > .sp-step-n,
  .crm-step > .crm-step-n,
  .mg-step > .mg-step-n {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    justify-self: end;
    align-self: start;
    margin: -5px -7px 0 0;
  }

  .dm-step > .dm-step-n,
  .am-step > .am-step-n,
  .sp-step > .sp-step-n,
  .crm-step > .crm-step-n,
  .mg-step > .mg-step-n {
    display: grid;
    place-items: center;
    width: auto;
    min-width: 22px;
    height: 20px;
    padding-inline: .3rem;
    border: 2px solid #fff;
    border-radius: var(--r-pill);
    background: var(--indigo);
    color: #fff;
    font-size: .56rem;
    letter-spacing: .03em;
  }

  .ind-step > h3, .cn-step > h3, .cw-step > h3, .wd-step > h3,
  .lp-step > h3, .dm-step > h3, .am-step > h3, .mg-step > h3,
  .sp-step > h3, .crm-step > h3, .api-step > h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  .ind-step > p, .cn-step > p, .cw-step > p, .wd-step > p,
  .lp-step > p, .dm-step > p, .am-step > p, .mg-step > p,
  .sp-step > p, .crm-step > p, .api-step > p {
    grid-column: 2;
    grid-row: 2;
    margin-top: .2rem;
  }

  /* The connector turns vertical, running from under one marker to the next.
     Page rules hide it at narrow widths, so it is switched back on here. */
  .ind-step:not(:last-child)::after,
  .cn-step:not(:last-child)::after,
  .cw-step:not(:last-child)::after,
  .wd-step:not(:last-child)::after,
  .lp-step:not(:last-child)::after,
  .dm-step:not(:last-child)::after,
  .am-step:not(:last-child)::after,
  .mg-step:not(:last-child)::after,
  .sp-step:not(:last-child)::after,
  .crm-step:not(:last-child)::after,
  .api-step:not(:last-child)::after {
    content: "";
    display: block;
    top: 60px;
    bottom: -1.9rem;
    left: 25px;
    right: auto;
    width: 0;
    height: auto;
    background: none;
    border-top: 0;
    border-left-width: 1px;
    border-left-style: dashed;
  }

  .ind-step:not(:last-child)::after,
  .cn-step:not(:last-child)::after,
  .cw-step:not(:last-child)::after,
  .wd-step:not(:last-child)::after {
    border-left-color: rgba(255, 255, 255, .18);
  }

  .lp-step:not(:last-child)::after,
  .dm-step:not(:last-child)::after,
  .am-step:not(:last-child)::after,
  .mg-step:not(:last-child)::after,
  .sp-step:not(:last-child)::after,
  .crm-step:not(:last-child)::after,
  .api-step:not(:last-child)::after {
    border-left-color: #C9D1E6;
  }
}