/* ============================================
 * Services — section module
 *
 * White-background section. Desktop: a 2/3 + 1/3 split —
 * Engagements (4 stacked card rows) on the left, Capabilities
 * (9 compact card rows, no body/arrow) on the right. Each
 * column carries a small group title.
 *
 * Engagement row: gradient card (floating UI mockup) + heading
 * + body + arrow. Capability row: small gradient card + label.
 * Whole row is clickable via a stretch-link on the heading.
 *
 * Mobile (default): the split stacks — Engagements block, then
 * Capabilities block. Refit when Paul shares mobile.
 * ============================================ */

/* Horizontal padding + max-width cap live in layout.css via the
   `.tlm-section` (root) and `.tlm-container` (__inner) classes
   added to the HTML. This file owns only services-unique layout. */

.tlm-services {
  padding-block: var(--space-section-y-mobile);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tlm-services__inner {
  display: flex;
  flex-direction: column;
  /* Mobile: tighter section opening (48px) — desktop overrides
     back to --space-4xl (80px) for a heavier rhythm. */
  gap: var(--space-xl);
}

/* ----- Header ----- */

.tlm-services__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-services__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h2-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-services__intro {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-base);
  color: var(--color-navy-muted);
}

/* ----- Split — Engagements (2/3) | Capabilities (1/3) ----- */

/* Mobile: the two groups stack. Desktop overrides to a 2-col grid. */
.tlm-services__split {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}

.tlm-services__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

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

/* ----- Service list / row ----- */

.tlm-services__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* Mobile: tighter row-to-row rhythm (32px) — desktop overrides
     to --space-xl (48px). */
  gap: var(--space-lg);
}

/* Engagement row — MOBILE: card stacked above copy (a 300px card
   beside copy doesn't fit a phone). DESKTOP flips to card-left /
   copy-right — see the desktop block. */
.tlm-services__row {
  position: relative;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-grey-200);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tlm-services__list > .tlm-services__row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ----- Card (gradient + floating mockup) ----- */

/* Mobile: card spans the row, capped so it doesn't get huge.
   Desktop: fixed 300px beside the copy (see the desktop block). */
.tlm-services__card {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 448 / 278;
  border-radius: var(--radius-md);
  background-color: var(--color-cream);
  overflow: hidden;
}

.tlm-services__card--placeholder {
  background-color: var(--color-cream);
  border: 1px dashed var(--color-grey-200);
}

.tlm-services__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tlm-services__card-mockup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 78%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ----- Copy ----- */

.tlm-services__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                   /* 24 between heading and body */
}

.tlm-services__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h4-mobile);       /* 28 mobile; desktop bumps to h4 (32) */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-services__link {
  color: inherit;
  text-decoration: none;
}

.tlm-services__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tlm-services__link:hover,
.tlm-services__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.tlm-services__body {
  margin: 0;
  font-family: var(--font-sans);
  /* Mobile: 16/1.5 per mobile-standards. Tablet+ bumps to
     18/1.6 (matches hero / referral-journey pattern). */
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

/* ----- Capability rows — compact: small card + label only ----- */

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

/* One consistent spacing model: each row carries an equal top+bottom
   padding and a top divider. No list gap — gap + padding stacked was
   producing uneven rhythm. The divider sits in the padded gap. */
.tlm-services__caprow {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-grey-200);
}

.tlm-services__caplist > .tlm-services__caprow:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Small square cream tile — holds the per-capability Carbon icon.
   The mega-menu uses the same Carbon set in a circular chip; here
   the square tile reads as a more substantive list element. */
.tlm-services__capcard {
  position: relative;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-color: var(--color-cream);
  color: var(--color-text-on-light);
  overflow: hidden;
}

.tlm-services__capcard svg {
  width: 28px;
  height: 28px;
}

.tlm-services__capheading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-light);
}

.tlm-services__caplink {
  color: inherit;
  text-decoration: none;
}

.tlm-services__caplink::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tlm-services__caplink:hover,
.tlm-services__caplink:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* ----- Desktop ----- */
@media (min-width: 1024px) {
  .tlm-services {
    /* Symmetric body-section rhythm: 120/120 desktop. */
    padding-block: var(--space-5xl);
  }

  .tlm-services__inner {
    gap: var(--space-4xl);
  }

  .tlm-services__title {
    font-size: var(--text-h2);
  }

  /* The split: Engagements 2/3 | Capabilities 1/3.
     align-items: stretch makes both columns the same height — the
     taller capabilities column sets it. */
  .tlm-services__split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: var(--space-4xl);
    align-items: stretch;
  }

  /* The Engagements group fills the shared column height; its list
     then gives each of the 4 rows an EQUAL share of that height
     (flex: 1). Equal rows = equal gaps = the dividers land evenly,
     and the column still auto-matches the capabilities height. */
  .tlm-services__group--engagements {
    height: 100%;
  }

  /* Both columns share an identical 8-row grid. Capability rows take
     1 track each (8 rows = 8 items); engagement rows take 2 tracks
     each (4 rows × 2 = 8). Since the columns are height-matched by
     the split's align-items: stretch, the 8 tracks are the same
     height in both — so every engagement divider lands exactly on a
     capability divider. A true 4/8 lockup. */
  .tlm-services__group--engagements .tlm-services__list,
  .tlm-services__caplist {
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    gap: 0;
  }

  .tlm-services__group--engagements .tlm-services__list {
    flex: 1 1 auto;
  }

  .tlm-services__group--engagements .tlm-services__row {
    grid-row: span 2;                     /* each engagement = 2 capability rows */
  }

  /* Desktop: the row goes horizontal — card LEFT, copy RIGHT.
     Grid owns the row rhythm, so drop the fixed padding-top. */
  .tlm-services__row {
    flex-direction: row;
    align-items: center;
    padding-top: 0;
  }

  /* Desktop card: fixed width beside the copy. */
  .tlm-services__card {
    flex-shrink: 0;
    width: 300px;
    max-width: 300px;
  }

  .tlm-services__group-title {
    font-size: var(--text-h3);            /* 40 */
  }

  .tlm-services__heading {
    font-size: var(--text-h4);            /* 32 */
  }

  /* Capability card grows a touch on desktop. */
  .tlm-services__capcard {
    width: 64px;
    height: 64px;
  }
}