/*
 * Software process layout corrections.
 *
 * Generic process sets keep the balanced desktop treatment. Exactly five
 * steps are always rendered as one continuous timeline, even when the saved
 * Gutenberg markup does not include the optional software-process--five class.
 */
@media (min-width: 1081px) {
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+1):last-child):not(:has(> .software-process__step:nth-child(5):last-child)),
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+2):last-child),
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+3):last-child) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(34px, 4vw, 48px) 0;
    border-top: 0;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+1):last-child):not(:has(> .software-process__step:nth-child(5):last-child))
  > .software-process__step,
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+2):last-child)
  > .software-process__step,
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+3):last-child)
  > .software-process__step {
    grid-column: span 3;
    margin-right: 0;
    padding-right: clamp(18px, 2vw, 28px);
    border-top: 1px solid rgba(4, 77, 118, .20);
    border-right: 1px solid rgba(4, 77, 118, .10);
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+1):last-child):not(:has(> .software-process__step:nth-child(5):last-child))
  > .software-process__step:nth-last-child(-n+5) {
    grid-column: span 4;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+1):last-child):not(:has(> .software-process__step:nth-child(5):last-child))
  > .software-process__step:nth-last-child(-n+2) {
    grid-column: span 6;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+2):last-child)
  > .software-process__step:nth-last-child(-n+6),
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n+3):last-child)
  > .software-process__step:nth-last-child(-n+3) {
    grid-column: span 4;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:first-child:last-child)
  > .software-process__step {
    grid-column: span 12;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(2):last-child)
  > .software-process__step {
    grid-column: span 6;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(3):last-child)
  > .software-process__step {
    grid-column: span 4;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process > .software-process__step:last-child,
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(4n):last-child)
  > .software-process__step:nth-child(4n) {
    border-right: 0;
  }

  /* Five-step flows: one real, continuous timeline. */
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(5):last-child) {
    position: relative;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-top: 0;
    background:
      linear-gradient(90deg, var(--software-accent, var(--blue)), var(--software-accent-end, var(--teal)))
      0 0 / 100% 2px no-repeat;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(5):last-child)
  > .software-process__step {
    grid-column: auto;
    margin-right: 0;
    padding: 38px clamp(22px, 2.2vw, 34px) 10px 0;
    border: 0;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(5):last-child)
  > .software-process__step:not(:last-child) {
    margin-right: clamp(18px, 2vw, 30px);
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(5):last-child)
  > .software-process__step::before {
    top: -8px;
    width: 14px;
    height: 14px;
    border-width: 4px;
    border-color: var(--bg-2, #f7fbfc);
    background: var(--software-accent, var(--blue));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--software-accent, var(--blue)) 34%, transparent);
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(5):last-child)
  .pill {
    border-color: color-mix(in srgb, var(--software-accent, var(--blue)) 28%, transparent);
    background: color-mix(in srgb, var(--software-accent, var(--blue)) 8%, white);
    color: var(--software-accent-dark, var(--blue-d));
  }
}

/* On tablet/mobile the five-step sequence becomes a vertical timeline instead
 * of collapsing into an unrelated two-column grid. */
@media (max-width: 1080px) {
  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(5):last-child) {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 34px;
    border-top: 0;
    background:
      linear-gradient(180deg, var(--software-accent, var(--blue)), var(--software-accent-end, var(--teal)))
      6px 0 / 2px 100% no-repeat;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(5):last-child)
  > .software-process__step {
    margin: 0;
    padding: 0 0 34px 0;
    border: 0;
  }

  :where(.page--software-detail, .editor-styles-wrapper)
  .software-process:has(> .software-process__step:nth-child(5):last-child)
  > .software-process__step::before {
    top: 4px;
    left: -34px;
    width: 12px;
    height: 12px;
    border: 4px solid var(--bg-2, #f7fbfc);
    background: var(--software-accent, var(--blue));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--software-accent, var(--blue)) 34%, transparent);
  }
}