/* styles/sections/rollout-timeline.css
 * Rollout (i8O3Sr, WU5tV, cHmIh): four steps on a rail. From D the rail is a 1px fern line with
 * four 9px ticks above the steps (e2loVP); the ticks sit at the D frame's step offsets as a share
 * of the rail (0, 290, 620 and 950 of 1280), which is where the W frame draws them too. On M the
 * rail is each step's 2px fern left edge with a 10px tick (wZjKo). Steps keep the frames' widths:
 * 250, 290, 290 and the rest. The thumbnails are Pencil exports, decorative. */
@layer sections {
  .rollout-section {
    padding-block: var(--space-56) 88px;
    box-shadow: inset 0 1px 0 var(--line);
  }

  .rollout-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .rollout {
    padding-top: var(--space-16);
  }

  .rollout__rail {
    display: none;
  }

  .rollout__steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 22px 0 0;
  }

  .rollout__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    padding: 0 0 var(--space-32) var(--space-20);
    box-shadow: inset 2px 0 0 var(--fern);
  }

  .rollout__step:nth-child(1) { max-width: 250px; }
  .rollout__step:nth-child(2),
  .rollout__step:nth-child(3) { max-width: 290px; }

  .rollout__step:last-child {
    padding-bottom: 0;
  }

  .rollout__tick {
    position: absolute;
    top: 2px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--fern);
  }

  .rollout__index {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 1px;
    color: var(--ink-muted);
  }

  .rollout__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
  }

  .rollout__body {
    margin: 0;
    font-size: 15px;
    line-height: 23px;
    color: var(--ink-2);
  }

  .rollout__deliverable {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin: 0;
    padding-top: var(--space-4);
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    color: var(--fern);
  }

  /* The deliverable arrow (Pencil export) as a mask, drawn in the line's fern */
  .rollout__arrow {
    flex: none;
    width: 15px;
    height: 15px;
    background: currentcolor;
    mask: url("/assets/figures/ai-transformation/icon-arrow-right.svg") center / contain no-repeat;
  }

  /* Holds the pilot CTA, a secondary button since the deliverables carry arrow marks
     (Stephan, Oct 16); the row grows to the button. */
  .rollout__link {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0;
    padding-top: var(--space-6);
  }

  .rollout__thumb,
  .rollout__thumb img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* The exports carry a pixel of edge; the boxes keep the nodes' sizes (270 wide on M, 290 from D) */
  .rollout__thumb--business-case img { aspect-ratio: 270 / 136; }
  .rollout__thumb--exec-demo img { aspect-ratio: 270 / 104; }

  .rollout__options {
    align-self: stretch;
    margin: 0;
    padding: 0;
  }

  .rollout__options li {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-8);
    padding-block: var(--space-6);
    box-shadow: inset 0 1px 0 var(--line);
    font-size: 14px;
    line-height: 17px;
  }

  .rollout__option {
    font-weight: 500;
  }

  .rollout__note {
    color: var(--ink-muted);
  }

  @media (width >= 900px) {
    .rollout-section {
      padding-block: var(--space-96) 144px;
    }

    .rollout-section__inner {
      gap: var(--space-40);
    }

    .rollout-section .section-head {
      --head-measure: 900px;
    }

    .rollout__rail {
      position: relative;
      display: block;
      height: 11px;
    }

    .rollout__rail::before {
      content: "";
      position: absolute;
      top: 5px;
      inset-inline: 0;
      height: 1px;
      background: var(--fern);
    }

    .rollout__rail span {
      position: absolute;
      top: 1px;
      width: 9px;
      height: 9px;
      border-radius: var(--radius-pill);
      background: var(--fern);
    }

    .rollout__rail span:nth-child(1) { left: 0; }
    .rollout__rail span:nth-child(2) { left: calc(100% * 290 / 1280); }
    .rollout__rail span:nth-child(3) { left: calc(100% * 620 / 1280); }
    .rollout__rail span:nth-child(4) { left: calc(100% * 950 / 1280); }

    .rollout__steps {
      display: grid;
      grid-template-columns: minmax(0, 250fr) minmax(0, 290fr) minmax(0, 290fr) minmax(0, 330fr);
      align-items: start;
      gap: var(--space-40);
    }

    .rollout__step {
      max-width: none;
      padding: 0;
      box-shadow: none;
    }

    .rollout__step:nth-child(n) {
      max-width: none;
    }

    .rollout__tick {
      display: none;
    }

    .rollout__title {
      font-size: 19px;
      line-height: 23px;
    }

    .rollout__thumb--business-case img { aspect-ratio: 290 / 136; }
    .rollout__thumb--exec-demo img { aspect-ratio: 290 / 104; }
  }

  @media (width >= 1680px) {
    .rollout-section {
      padding-block: 115px 173px;
    }

    .rollout-section .section-head {
      --head-measure: 1215px;
    }

    .rollout__steps {
      grid-template-columns: 250px 290px 290px minmax(0, 1fr);
    }
  }
}