/* ============================================
 * service-page-process.css — numbered 4-step process
 *
 * Template module across all 6 service pages.
 * Built from Figma node 226:982 (Website service page).
 *
 * Layout:
 *   Mobile  — each step stacks: number → title+body → visual.
 *             Single column. Horizontal dividers between steps.
 *   Desktop — each step is a 3-column row:
 *             [number]  [title + body]  [visual]
 *             Centred vertically. Horizontal dividers above each row.
 *
 * Visuals use pre-baked webp foregrounds layered over a CSS
 * gradient backdrop. Backdrop differs per stage via modifier
 * classes so the gradient varies across the four steps.
 *
 * Flags (see build-context.md):
 *   DRIFT
 *     - Section padding-bottom: Figma 120, used established
 *       asymmetric --space-2xl (60) for body sections.
 *     - Intro→steps gap: Figma 64, used --space-3xl (72), 12.5%.
 *     - Row gap (number/body/visual): Figma 100, used --space-4xl
 *       (80) at desktop. 20% off but reads similarly.
 *     - Visual backdrop colour: Figma #F9F8F4, used --color-cream
 *       (#F6F6F1) — aligns to current cream standard.
 *   INCONSISTENCY
 *     - Step number 72px: same px as --text-display (hero h1
 *       token). Using --text-display directly for a non-hero number
 *       is intentional here — the number is treated as display type.
 * ============================================ */

.tlm-service-page-process {
  background-color: var(--color-white);
  /* Mobile: 40/40 — tighter stacked-section rhythm. Desktop bumps to 120. */
  padding-block: var(--space-section-y-mobile);
}

.tlm-service-page-process__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);                  /* 72 between intro and steps (mobile) */
}

/* ============================================
 * Intro
 * ============================================ */

.tlm-service-page-process__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);                   /* 24 between title and lead */
}

.tlm-service-page-process__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);       /* 32 mobile */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
  text-wrap: balance;
}

.tlm-service-page-process__lead {
  margin: 0;
  max-width: 30rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);            /* 16 mobile */
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

/* ============================================
 * Steps list
 * ============================================ */

.tlm-service-page-process__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.tlm-service-page-process__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                   /* 24 between number/body/visual (mobile) */
  padding-block: var(--space-md);         /* 24 top + bottom per step (mobile); 48 at desktop */
  border-top: 1px solid var(--color-border-card);
}

.tlm-service-page-process__step:last-child {
  border-bottom: 1px solid var(--color-border-card);
}

.tlm-service-page-process__step-number {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2);              /* 56 mobile — scaled down from 72 desktop */
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-service-page-process__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);                   /* 16 between step title and description */
}

.tlm-service-page-process__step-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h3-mobile);       /* 28 mobile */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-service-page-process__step-description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

/* ============================================
 * Step visual — pre-baked illustration (images/website/process/0X.webp)
 * Image is a complete composition; no backdrop layering needed.
 * ============================================ */

.tlm-service-page-process__step-visual {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);        /* 16 */
  aspect-ratio: 448 / 278;                /* matches source webp aspect (896/556) */
}

.tlm-service-page-process__step-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder visual — navy-tint box at the step-visual aspect, centred
   icon. For pages without per-step illustrations yet. */
.tlm-service-page-process__step-visual--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-navy-tint);
  color: var(--color-navy-faint);
}

/* ============================================
 * TABLET (>= 768px) — body p bumps to 18/1.6
 * ============================================ */

@media (min-width: 768px) {
  .tlm-service-page-process__lead,
  .tlm-service-page-process__step-description {
    font-size: var(--text-lg);            /* 18 */
    line-height: var(--leading-relaxed);  /* 1.6 */
    letter-spacing: var(--tracking-tight);
  }
}

/* ============================================
 * DESKTOP (>= 1024px) — 3-column row per step
 * ============================================ */

@media (min-width: 1024px) {
  .tlm-service-page-process {
    padding-block: var(--space-5xl);  /* 120 top + bottom — symmetric body rhythm */
  }

  .tlm-service-page-process__title {
    font-size: var(--text-h2);            /* 56 desktop */
  }

  .tlm-service-page-process__step {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4xl);                /* 80 between cols (DRIFT: Figma 100) */
    padding-block: var(--space-xl);
  }

  .tlm-service-page-process__step-number {
    flex-shrink: 0;
    font-size: var(--text-display);       /* 72 desktop */
    min-width: 4ch;                       /* keep numbers left-aligned column-wise */
  }

  .tlm-service-page-process__step-body {
    flex: 1 1 0;
    min-width: 0;
    max-width: 485px;                     /* matches Figma copy column width */
    gap: var(--space-lg);                 /* 32 — Figma */
  }

  .tlm-service-page-process__step-title {
    font-size: var(--text-h3);            /* 40 desktop */
  }

  .tlm-service-page-process__step-visual {
    flex-shrink: 0;
    width: 448px;                         /* Figma visual width — fixed */
    aspect-ratio: 448 / 278;
    margin-left: auto;                    /* pin to right edge of the row */
  }

  /* --text-only variant: body takes the full row width to the right of
     the number column. Used when no per-step illustration exists. */
  .tlm-service-page-process--text-only .tlm-service-page-process__step-body {
    max-width: none;
  }
}