/* ============================================
 * service-page-why.css — "Why TLM" module for service pages
 *
 * Template module across all 6 service pages.
 *
 * Built from Figma node 226:744 (Website service page).
 *
 * Layout:
 *   Mobile  — heading → visual (laptop + stats card stacked below image)
 *             → lead → accordion. Single column.
 *   Desktop — 2-column grid: visual LEFT (with stats card overlaid on
 *             the laptop image, near the bottom-center), copy RIGHT
 *             (heading + lead + accordion). Bottom-aligned.
 *
 * Accordion uses native <details>/<summary>. Multiple-open by default;
 * exclusive behaviour can be added later via small JS if needed.
 *
 * MISSING TOKEN flags (using literals, see notes in build-context):
 *   - stat number 32px (Figma 34.6, between H3 40 and 2xl 24, no match)
 *   - stat label  12px (Figma 11.25, no match)
 *   - stat eyebrow 10px (Figma 10, no match, smallest token is sm = 14)
 *   - body p opacity (Figma rgba(navy, 0.8), no token — use literal)
 * ============================================ */

.tlm-service-page-why {
  background-color: var(--color-white);
  /* Mobile: 40/40 — tighter than the 60/60 site standard so stacked
     section boundaries do not gap so much on a phone. Desktop bumps
     to symmetric 120 in the @media block below. (40px is a literal —
     no token on the scale; tokenise if this rolls out site-wide.) */
  padding-block: var(--space-section-y-mobile);
}

.tlm-service-page-why__inner {
  display: flex;
  flex-direction: column;
  gap: 0; /* per-child margin-top controls spacing */
}

/* Mobile order: title → visual → lead → accordion.
   DOM order is visual → copy(title, lead, accordion); `order` rearranges.
   Per-child margin-tops inside each property block (NOT separate rules)
   so `margin: 0` shorthand can't wipe via source-order. */

.tlm-service-page-why__title {
  margin: 0;
  order: 1;
  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-why__visual {
  margin: 0;
  margin-top: var(--space-md);          /* 24 from title (mobile) */
  order: 2;
  position: relative;
}

.tlm-service-page-why__visual-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);      /* 16 */
}

/* Placeholder visual — navy-tint box at the same aspect as the real
   why image (600/736), centred icon. For pages without the asset yet. */
.tlm-service-page-why__visual--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 600 / 736;
  border-radius: var(--radius-lg);
  background-color: var(--color-navy-tint);
  color: var(--color-navy-faint);
}

.tlm-service-page-why__lead {
  margin: 0;
  margin-top: var(--space-md);          /* 24 from visual (mobile) */
  order: 3;
  font-family: var(--font-sans);
  font-size: var(--text-base);          /* 16 mobile */
  line-height: var(--leading-normal);   /* 1.5 mobile */
  color: var(--color-text-on-light);
  hyphens: none;
  overflow-wrap: normal;
}

.tlm-service-page-why__list {
  margin: 0;
  margin-top: var(--space-md);          /* 24 from lead (mobile) */
  padding: 0;
  list-style: none;
  order: 4;
  display: flex;
  flex-direction: column;
}

/* ============================================
 * Why-list item — icon + title + body (always expanded, no accordion)
 * ============================================ */

.tlm-service-page-why__item {
  padding-block: var(--space-md);       /* 24 vertical, hairline-separated below */
  border-top: 1px solid var(--color-grey-200);
}
.tlm-service-page-why__item:last-child {
  border-bottom: 1px solid var(--color-grey-200);
}

.tlm-service-page-why__item-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);                 /* 16 between icon and title */
}

.tlm-service-page-why__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-xl);               /* 48 circle */
  height: var(--space-xl);
  border-radius: var(--radius-pill);
  background-color: var(--color-grey-100);
  color: var(--color-text-on-light);
}

.tlm-service-page-why__item-title {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--font-serif);
  font-size: var(--text-xl);            /* 20 mobile — Figma h5 24 scales down */
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-service-page-why__item-body {
  margin-top: var(--space-sm);          /* 16 below item title */
  padding-inline-start: calc(var(--space-xl) + var(--space-sm));  /* align under title (icon width + gap) */
}

.tlm-service-page-why__item-body p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);          /* 16 mobile */
  line-height: var(--leading-normal);   /* 1.5 */
  color: var(--color-text-on-light);
  /* Figma calls for 0.8 opacity on body text — keeping full opacity
     for legibility, can revisit if Paul wants the muted look. */
}

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

@media (min-width: 768px) {
  .tlm-service-page-why__title {
    font-size: var(--text-h3);          /* 40 — canonical section-H2 tablet step */
  }
  .tlm-service-page-why__lead {
    font-size: var(--text-lg);          /* 18 */
    line-height: var(--leading-relaxed); /* 1.6 */
    letter-spacing: var(--tracking-tight);
  }
  .tlm-service-page-why__item-body p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-tight);
  }
  .tlm-service-page-why__item-title {
    font-size: var(--text-2xl);         /* 24 — matches Figma h5 */
    line-height: var(--leading-normal);
  }
}

/* ============================================
 * DESKTOP (>= 1024px) — 2-column grid, stats card overlays the image
 * ============================================ */

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

  /* Grid: visual LEFT (spans all rows), copy RIGHT split into 3 rows.
     Top-aligned — image and H2 share the top edge; image extends below
     accordion bottom. row-gap is 0 — per-element margin-bottoms below
     control the spacing precisely so heading/lead/list each get their
     own gap value. */
  .tlm-service-page-why__inner {
    display: grid;
    grid-template-columns: minmax(0, 600px) 1fr;
    grid-template-areas:
      "visual title"
      "visual lead"
      "visual accordion";
    column-gap: var(--space-4xl);       /* 80 */
    row-gap: 0;
    align-items: start;
  }

  /* Reset all the mobile margin-tops. Specific gap control via
     margin-bottom on each item below. */
  .tlm-service-page-why__title,
  .tlm-service-page-why__visual,
  .tlm-service-page-why__lead,
  .tlm-service-page-why__list {
    margin-top: 0;
  }

  .tlm-service-page-why__title {
    grid-area: title;
    font-size: var(--text-h2);              /* 56 — canonical section-H2 desktop */
    margin-bottom: var(--space-2xl);        /* 60 below H2 — generous breathing room */
  }
  .tlm-service-page-why__lead {
    grid-area: lead;
    margin-bottom: var(--space-md);         /* 24 below lead — tighter, pairs with list */
  }
  .tlm-service-page-why__list {
    grid-area: accordion;
  }

  /* Text-only variant — no visual column. Capability pages run "Our
     approach" with no image; the grid drops to a single column. */
  .tlm-service-page-why--text-only .tlm-service-page-why__inner {
    grid-template-columns: minmax(0, 820px);
    grid-template-areas:
      "title"
      "lead"
      "accordion";
    column-gap: 0;
    justify-content: center;
  }

  .tlm-service-page-why__visual {
    grid-area: visual;
    align-self: start;
    max-width: 600px;
    /* Pin the image to the top of the viewport (below the sticky
       navbar) while the user scrolls through the copy column. Releases
       when the bottom of the grid cell reaches the top of the viewport.
       Stacking above this image:
         - main navbar (128px tall)
         - sub-nav (~72px tall when revealed — fixed position so it
           doesn't affect layout, but the image still needs to sit
           below where it lands)
       Total cleared = 200px. Add 48px symmetric breathing room:
         top    = 200 + 48 = 248px
         height = viewport - top (248) - bottom inset (48)
                = 100svh - 296px
       Capped at 736 (natural image height). svh, not vh/dvh, so it
       stays stable when iOS Safari's URL bar collapses
       [[feedback-ios-safari-viewport-height]]. */
    position: sticky;
    top: 248px;
    height: calc(100svh - 296px);
    max-height: 736px;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .tlm-service-page-why__visual-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Source image (1804×2212) has a lot of black background, desk,
       and hand around the laptop. Scale up so the laptop fills the
       frame and the screen text becomes readable. Figure has
       overflow:hidden so the scaled-out edges are clipped. */
    transform: translateX(35px) scale(1.4);
    transform-origin: center 35%;
    border-radius: 0;
  }

  /* --no-transform variant: for pages whose visual was composed for the
     slot and doesn't need the laptop-screen pan. */
  .tlm-service-page-why--no-transform .tlm-service-page-why__visual-image {
    transform: none;
  }
}