/* ============================================
 * service-page-engagements.css — "how we deliver it" module
 *
 * Template module for the service-page template. Sits below Process.
 * Reuses the homepage Services row pattern (image card + heading +
 * body), but with the section split MIRRORED: the heading/lede block
 * is a 1/3 column on the LEFT, the item list is a 2/3 column on the
 * RIGHT (homepage has the engagements list on the left).
 *
 * Layout:
 *   Mobile  — single column: heading block, then the item list.
 *   Desktop — 2-col grid: [heading 1/3] [items 2/3].
 *
 * Section background is --color-navy-wash (navy 4%), matching the
 * Features module's tinted treatment.
 * ============================================ */

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

/* Background variants — opt-in per page. */
.tlm-service-page-engagements--white {
  background-color: var(--color-white);
}

.tlm-service-page-engagements--cream {
  background-color: var(--color-cream);
}

.tlm-service-page-engagements__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);                    /* 48 — heading block to item list (mobile) */
}

/* ============================================
 * Heading block — 1/3 column on desktop
 * ============================================ */

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

.tlm-service-page-engagements__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-engagements__lead {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);             /* 16 mobile */
  line-height: var(--leading-normal);
  color: var(--color-text-on-light);
}

/* ============================================
 * Item list — 2/3 column on desktop
 * ============================================ */

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

/* Each item is a stacked card + copy unit, hairline-divided. */
.tlm-service-page-engagements__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                    /* 24 between card and copy (mobile) */
  padding-block: var(--space-lg);          /* 32 top + bottom per item */
  border-top: 1px solid var(--color-navy-divider);
}

.tlm-service-page-engagements__list > .tlm-service-page-engagements__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.tlm-service-page-engagements__list > .tlm-service-page-engagements__item:last-child {
  padding-bottom: 0;
}

/* Image card — same proportions as the homepage services card. */
.tlm-service-page-engagements__card {
  margin: 0;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 960 / 596;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.tlm-service-page-engagements__card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder card — dashed outline, for items without an asset yet. */
.tlm-service-page-engagements__card--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-navy-divider);
}

.tlm-service-page-engagements__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;                               /* H3 → body. Off-scale (8/16 jump): unified H3-to-text gap, matches features __item-list. */
}

.tlm-service-page-engagements__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);              /* 24 — H5 level */
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-light);
}

.tlm-service-page-engagements__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);             /* 16 mobile */
  line-height: var(--leading-normal);
  color: var(--color-navy-muted);
}

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

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

/* ============================================
 * DESKTOP (>= 1024px) — 2-col split: heading 1/3 | items 2/3
 * ============================================ */

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

  .tlm-service-page-engagements__inner {
    display: grid;
    grid-template-columns: 1fr 2fr;        /* heading 1/3 LEFT, items 2/3 RIGHT */
    column-gap: var(--space-4xl);          /* 80 */
    align-items: start;
  }

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

  /* Each item becomes a 2-col row: card LEFT, copy RIGHT. */
  .tlm-service-page-engagements__item {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);                  /* 48 between card and copy */
  }

  .tlm-service-page-engagements__card {
    flex-shrink: 0;
    width: 300px;
    max-width: none;
  }

  .tlm-service-page-engagements__copy {
    flex: 1 1 0;
    min-width: 0;
  }
}