/* =========================================================
   Migrate Digital — Process Page Styles
   Depends on: migrate-tokens.css + home.css + services.css
   (services.css is loaded first for shared interior-page
   patterns; this file only adds process-specific styles.)
   ========================================================= */


/* ==========================================================
   SECTION PADDING  ·  match home's interior section rhythm
   (120/154) across every numbered section and the CTA.
   ========================================================== */

.section-process-build,
.section-process-seo,
.section-process-client {
  padding-top: 120px;
  padding-bottom: 154px;
}


/* ==========================================================
   TIMELINE ROW WEEK TAG  ·  small bronze uppercase tag sitting
   above each row label in the Timeline section. Extracted from
   the label itself (was inline "(Week X)") so the week reads
   as a structural timeline marker, not a parenthetical.
   Scoped to .section-process-client so other .rows elsewhere
   keep their original label-on-one-line treatment.
   ========================================================== */

.section-process-client .lb-week {
  display: block;
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-1);              /* 10px */
  letter-spacing: var(--track-ui-m);  /* 0.22em */
  text-transform: uppercase;
  color: var(--bronze);
  line-height: 1;
  margin-bottom: var(--sp-3);         /* 8px — space between tag and title */
}


/* ==========================================================
   PHASE WALKTHROUGH  ·  vertical stepper for the four-week
   build. Each .phase-step is a dossier block:
     [big bronze number]  [name+week / rows / sign-off stamp]
   Hairline separators between steps. Reads top-to-bottom as
   a walkthrough — not a progress bar.
   ========================================================== */

.phase-walkthrough {
  list-style: none;
  display: grid;
}

.phase-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: var(--sp-12); /* 40px between number and body */
  padding: var(--sp-13) 0;  /* 48px vertical */
  border-top: var(--rule) solid var(--hairline);
}

.phase-step:first-child {
  padding-top: var(--sp-10); /* 24px — tighten on first (section-head sits above) */
  border-top: none;
}

.phase-step:last-child {
  padding-bottom: 0;
}

/* Big bronze tabular number — the visual anchor of each step. */
.ps-num {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-8); /* 36px */
  letter-spacing: var(--track-display-tightest);
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding-top: 4px; /* optical alignment with phase name */
  flex-shrink: 0;
}

/* Vertical spine below each phase number: a hairline that fills
   bronze from the top as the user scrolls through the phase.
   Uses CSS scroll-driven animations (animation-timeline: view()).
   All four phases get a line, including the last one. In
   browsers without scroll-timeline support, the bronze overlay
   stays at scaleY(0) and the line reads as a plain grey
   hairline — clean graceful degradation. */
.ps-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);        /* 12px between number and line */
  align-self: stretch;     /* fill the full height of the grid cell */
}

.ps-rail-line {
  flex: 1;                 /* fills remaining vertical space */
  width: 1px;
  background: var(--hairline-2);
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Bronze fill overlay. Scale is driven by the --fill custom
   property that a small scroll script in process.html updates
   as each line passes through the viewport. Defaults to 0 so
   the line reads as a plain grey hairline if the script fails
   or hasn't run yet. */
.ps-rail-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bronze);
  transform: scaleY(var(--fill, 0));
  transform-origin: top;
}

@media (prefers-reduced-motion: reduce) {
  .ps-rail-line::before {
    transform: scaleY(0); /* stay grey for reduced-motion users */
  }
}

.ps-body {
  display: grid;
  row-gap: var(--sp-10); /* 24px between head / rows / foot */
}

/* Phase head: name + week meta */
.ps-head {
  display: grid;
  row-gap: var(--sp-4); /* 10px */
}

.ps-name {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-7); /* 25px */
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}

.ps-meta {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-1); /* 10px */
  letter-spacing: var(--track-ui-m);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Deliverables list — 2-column (label / desc) */
.ps-rows {
  list-style: none;
  display: grid;
  row-gap: var(--sp-7); /* 16px between rows */
  padding-top: var(--sp-5); /* 12px spacer from head */
  border-top: var(--rule) solid var(--hairline);
}

.ps-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: var(--sp-10); /* 24px */
  align-items: baseline;
  padding-top: var(--sp-5); /* 12px */
  border-top: var(--rule) solid var(--hairline);
}

.ps-row:first-child {
  padding-top: 0;
  border-top: none;
}

.ps-row-label {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-3); /* 13px */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}

.ps-row-desc {
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t-3); /* 13px */
  line-height: var(--lh-body);
  color: var(--ink-3);
}

/* Phase foot — left meta label + right bronze sign-off stamp */
.ps-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding-top: var(--sp-9); /* 20px */
  border-top: var(--rule) solid var(--hairline);
}

.ps-foot-label {
  font-family: var(--title);
  font-weight: 600;
  font-size: var(--t-1); /* 10px */
  letter-spacing: var(--track-ui-m);
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ==========================================================
   RESPONSIVE  ·  aligned with home's 960 / 560 breakpoints.
   ========================================================== */

@media (max-width: 960px) {

  .section-process-build,
  .section-process-seo,
  .section-process-client {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  .phase-step {
    grid-template-columns: 60px 1fr;
    column-gap: var(--sp-9); /* 20px */
    padding: var(--sp-12) 0; /* 40px vertical */
  }

  .ps-num {
    font-size: var(--t-7); /* 25px */
    padding-top: 2px;
  }

  .ps-name {
    font-size: var(--t-6); /* 20px */
  }

  .ps-row {
    grid-template-columns: 1fr;
    row-gap: var(--sp-3); /* 8px */
  }

  .ps-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }

}

@media (max-width: 560px) {

  .phase-step {
    grid-template-columns: 48px 1fr;
    column-gap: var(--sp-7); /* 16px */
    padding: var(--sp-11) 0; /* 30px */
  }

  .ps-num {
    font-size: var(--t-6); /* 20px */
  }

}