/* styles/sections/workflow-trace.css
 * The trace walkthrough (scripts/lib/workflow-page.js `trace`): logo row, intro, the stops on one
 * orange thread, the outro statement, then Up next; and the closing band with the Trust Center link.
 * Geometry is the Customer Feedback frames (oF2GB 1440, LlDUC 390, W6doM 1920).
 * D and W: each stop is a 340 / 64 / 876 row (label, thread gap, product shot); the thread runs down
 * the middle of the gap. Its nodes are anchored (CSS anchor positioning) to the rows they point at,
 * marked data-trace-anchor="a" or "b" inside the shot, and each label sits level with its first node,
 * so between 900 and 1440, where the shots reflow, the thread still lands on its rows. Without anchor
 * positioning the labels and nodes keep the frame's offsets. M: the stops stack inside a 2px fern
 * rule, with no nodes, as LlDUC draws them. Thread, stubs, nodes and the end dot are the Pencil
 * exports in assets/figures/customer-feedback/ (thread-line, thread-node, thread-end). */
@layer sections {
  .workflow-trace {
    padding-block: var(--section-lg) var(--section-2xl);
  }

  /* ---------- Logo row: logo-row recipe; the frames' marks at 70% ---------- */
  /* Each logo sets --logo-mw and --logo-mh inline (scripts/build-workflow-customer-feedback.js) */
  .workflow-trace__logos li {
    --logo-fit: contain;
    --logo-w: var(--logo-mw);
    --logo-h: var(--logo-mh);
  }

  /* Page-scoped over the logo-row recipe: each mark at its drawn size (not the recipe's square art
     box), at 70%, and the row's rule drawn inside the box as the frames draw it (96px on D) */
  .workflow-trace__logos {
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--line-2);
  }

  .workflow-trace__logos .logo-row__list img {
    width: var(--logo-w);
    height: var(--logo-h);
    object-fit: var(--logo-fit);
    opacity: 0.7;
  }

  /* ---------- Intro: section-intro recipe, lede under the heading ---------- */
  .workflow-trace__intro {
    --intro-lede-pad: 0px;
    --intro-lede-size: var(--t-body-size);
    --intro-lede-lh: 1.55;
    --intro-lede-color: var(--ink-muted);
    padding-block: var(--space-56) var(--space-64);
  }

  /* The frames break the trace's headings greedily, not balanced */
  .workflow-trace__intro .section-intro__heading {
    line-height: round(nearest, 1.05em, 1px);
    text-wrap: wrap;
  }

  .workflow-trace :is(.step-label__title, .step-label__body, .trace-outro__statement) { text-wrap: wrap; }

  /* ---------- Stops ---------- */
  .trace {
    margin: 0;
    padding: 0 0 0 var(--space-14);
    border-left: 2px solid var(--fern);
    list-style: none;
  }

  /* Each stop sets its frame offsets inline: label padding on M and D, node offsets from their
     rows, the label's lead over its first node, and the second node's fallback position */
  .trace-stop {
    --label-m: 0px;
    --label-d: 0px;
    --label-y: 0px;
    --node-a: 0px;
    --node-b: 0px;
    --node-b-at: 0px;
    --thread-shift: 0px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-40);
    padding-bottom: 44px;
    anchor-scope: --trace-a, --trace-b;
  }

  .trace-stop:last-child { padding-bottom: 0; }

  .trace-stop__label {
    --step-measure: none;
    --step-title-lh: round(nearest, 1.05em, 1px);
    --step-body-lh: round(nearest, 1.55em, 1px);
    padding-top: var(--label-m);
  }

  .trace-stop__label .index,
  .trace-outro__index {
    margin: 0;
    font-size: 13px;
    line-height: 16px;
  }

  .trace-stop__art {
    min-width: 0;
    margin: 0;
  }

  .trace-mark { display: none; }

  /* ---------- Outro: index and statement ---------- */
  .trace-outro {
    --thread-shift: 0px;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-top: 76px;
  }

  .trace-outro__index {
    color: var(--fern);
    font-weight: 500;
    letter-spacing: 0.6px;
  }

  .trace-outro__statement {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-h3-size);
    font-weight: 600;
    line-height: round(nearest, 1.08em, 1px);
    letter-spacing: -0.57px;
  }

  @media (min-width: 900px) {
    .workflow-trace__intro {
      --intro-lede-size: var(--t-body-lg-size);
      padding-block: var(--space-96) 104px;
    }

    /* D draws every mark squeezed into 130 x 24; each keeps its own proportions at its drawn
       M and W size instead (BRI-7805 J12), centred in its cell, and where a cell is narrower than
       that the mark scales down with it, 24px clear of its neighbours */
    .workflow-trace__logos li {
      --logo-w: min(var(--logo-mw), 100% - 24px);
      --logo-h: auto;
    }

    .workflow-trace { --trace-cols: minmax(0, 340fr) 64px minmax(0, 876fr); }

    .trace {
      padding: 0;
      border: 0;
    }

    .trace-stop,
    .trace-outro {
      position: relative;
      display: grid;
      grid-template-columns: var(--trace-cols);
    }

    .trace-stop { padding-bottom: var(--space-64); }
    .trace-stop:last-child { padding-bottom: 0; }

    /* Absolutely placed grid children take an auto end line at the padding edge: name both lines */
    .trace-stop__label {
      grid-column: 1 / 2;
      grid-row: 1;
      align-self: start;
      padding-top: var(--label-d);
    }

    .trace-stop__art {
      grid-column: 3 / 4;
      grid-row: 1;
    }

    /* The thread: one 2px segment per stop down the middle of the gap, from the first node to the
       end dot in the outro */
    .trace-stop::before,
    .trace-outro::before {
      content: "";
      position: absolute;
      grid-column: 2 / 3;
      grid-row: 1;
      top: 0;
      bottom: 0;
      left: 31px;
      width: 2px;
      background: url("/assets/figures/customer-feedback/thread-line.svg") 0 0 / 100% 100% no-repeat;
    }

    .trace-stop:first-child::before { top: calc(var(--label-d) + var(--label-y) + var(--thread-shift)); }

    /* A node on the thread and its stub to the row: 14px node box, stub from its centre */
    .trace-mark {
      display: block;
      position: absolute;
      grid-column: 2 / 3;
      grid-row: 1;
      top: calc(var(--label-d) + var(--label-y) + var(--thread-shift) - 7px);
      left: 25px;
      right: 0;
      height: 14px;
    }

    .trace-mark--b { top: calc(var(--node-b-at) + var(--thread-shift) - 7px); }

    .trace-mark::before,
    .trace-mark::after {
      content: "";
      position: absolute;
    }

    .trace-mark::before {
      top: 6px;
      left: 7px;
      right: 0;
      height: 2px;
      background: url("/assets/figures/customer-feedback/thread-line.svg") 0 0 / 100% 100% no-repeat;
    }

    .trace-mark::after {
      top: 0;
      left: 0;
      width: 14px;
      height: 14px;
      background: url("/assets/figures/customer-feedback/thread-node.svg") 0 0 / 100% 100% no-repeat;
    }

    /* Anchored: nodes on the middle of their rows at every width (the frames' fixed offsets from
       the row's top miss a row that wraps or is short; BRI-7805 J43), stubs ending 1px short of the
       row's rule, labels level */
    @supports (anchor-name: --a) and (anchor-scope: all) {
      .trace-stop [data-trace-anchor="a"] { anchor-name: --trace-a; }
      .trace-stop [data-trace-anchor="b"] { anchor-name: --trace-b; }

      .trace-stop__label {
        position: absolute;
        top: calc(anchor(--trace-a center) - var(--label-y));
        left: 0;
        right: 0;
        padding-top: 0;
      }

      .trace-stop:first-child::before { top: anchor(--trace-a center); }

      .trace-mark--a {
        top: calc(anchor(--trace-a center) - 7px);
        right: calc(anchor(--trace-a left) + 1px);
      }

      .trace-mark--b {
        top: calc(anchor(--trace-b center) - 7px);
        right: calc(anchor(--trace-b left) + 1px);
      }
    }

    .trace-outro {
      --thread-end: 107px;
      gap: var(--space-20) 0;
      padding-top: 128px;
    }

    .trace-outro > * { grid-column: 1 / -1; }

    /* The outro's thread starts at its top padding edge, above row 1 */
    .trace-outro::before {
      grid-row: auto;
      bottom: auto;
      height: calc(var(--thread-end) + var(--thread-shift));
    }

    .trace-outro::after {
      content: "";
      position: absolute;
      grid-column: 2 / 3;
      top: calc(var(--thread-end) + var(--thread-shift) - 7px);
      left: 25px;
      width: 14px;
      height: 14px;
      background: url("/assets/figures/customer-feedback/thread-end.svg") 0 0 / 100% 100% no-repeat;
    }

    .trace-outro__statement {
      font-size: var(--t-h1-size);
      letter-spacing: -1px;
    }
  }

  @media (min-width: 1680px) {
    .workflow-trace__logos li {
      --logo-w: var(--logo-mw);
      --logo-h: var(--logo-mh);
    }

    .workflow-trace { --trace-cols: 340px 64px minmax(0, 1fr); }

    /* W6doM draws the thread, its nodes and the end dot 14px lower than D does against the same
       stops and labels */
    .trace-stop,
    .trace-outro { --thread-shift: 14px; }

    .trace-outro__statement {
      font-size: 76px;
      letter-spacing: -1.35px;
    }
  }

  /* ---------- Closing band: heading, then Book a demo over the Trust Center link ---------- */
  .closing-cta--trust {
    --closing-bg: var(--fern);
    --closing-gap: var(--space-40);
    --closing-heading-lh: round(nearest, 1.05em, 1px);
    --closing-columns: minmax(0, 1fr) 298px;
    border-bottom: 0;
  }

  /* The frames break the heading greedily: "Put the customer in every / build ticket" on M, where
     the line break is hidden, and the recipe's balanced wrap would move "in" down */
  .closing-cta--trust .closing-cta__heading { text-wrap: wrap; }

  .closing-cta--trust .closing-cta__body {
    padding-block: 10px 0;
  }

  /* The shared Trust Link slot sits 16 under Book a demo (the frames' Bottom Row gap), not under the
     whole copy as on the default band */
  .closing-cta--trust .closing-cta__trust { --closing-trust-gap: var(--space-16); }

  @media (width < 900px) {
    .closing-cta--trust .closing-cta__heading br { display: none; }
  }

  @media (min-width: 900px) {
    .closing-cta--trust {
      --closing-pad-bottom: var(--space-80);
      --closing-gap: var(--space-64);
    }

    /* Split: the heading spans both rows; Book a demo and the Trust Link stack in the 298 column */
    .closing-cta--trust .closing-cta__inner { grid-template-rows: auto 1fr; }
    .closing-cta--trust .closing-cta__heading { grid-row: 1 / 3; }
    .closing-cta--trust .closing-cta__body,
    .closing-cta--trust .closing-cta__trust { grid-column: 2; }
    .closing-cta--trust .closing-cta__trust { --closing-trust-gap: var(--space-16); align-self: start; }
  }

  @media (min-width: 1680px) {
    .closing-cta--trust {
      --closing-pad-bottom: 86px;
      --closing-heading-size: var(--t-h1-size);
      --closing-heading-lh: round(nearest, 1.05em, 1px);
      --closing-heading-ls: var(--t-h1-ls);
    }
  }
}