/* ==========================================================================
   Module: service-pillars — "What we do" stacked editorial rows
   Matches the locked (03) homepage section: a side-by-side heading + intro,
   then rows of [thumb · title · blurb · partner→]. Dark surface = #162227.
   ========================================================================== */

/* Dark variant uses the CTA-band dark (#162227), not the deepest dark. */
.m-service-pillars.m-service-pillars--dark { background: var(--dark-2); }

/* ---------- Heading + intro row ---------- */
.m-service-pillars__intro-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(36px, 5vh, 60px);
}
.m-service-pillars__heading { flex: 1 1 420px; max-width: 18ch; color: var(--ink); }
.m-service-pillars__intro {
  flex: 1 1 320px; max-width: 44ch; margin: 0;
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.55; color: var(--body);
}
.m-service-pillars--dark .m-service-pillars__heading { color: var(--light); }
.m-service-pillars--dark .m-service-pillars__intro { color: var(--light-6); }

/* ---------- Rows ---------- */
.m-service-pillars__rows { max-width: var(--maxw); }
.m-service-pillars__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  padding: clamp(24px, 3.6vh, 38px) clamp(2px, 1vw, 16px) clamp(24px, 3.6vh, 38px) 0;
  border-top: 1px solid var(--ink);
  color: var(--ink); text-decoration: none;
  transition: background var(--t-slow), padding-left var(--t-slow);
}
.m-service-pillars__row:last-child { border-bottom: 1px solid var(--ink); }
a.m-service-pillars__row:hover { background: rgba(190, 58, 43, .04); padding-left: 18px; }
a.m-service-pillars__row:hover .m-service-pillars__ar { transform: translateX(8px); }

/* Dark surface variant */
.m-service-pillars--dark .m-service-pillars__row {
  border-top-color: var(--bd-dark-16); color: var(--light-body);
}
.m-service-pillars--dark .m-service-pillars__row:last-child { border-bottom-color: var(--bd-dark-16); }
.m-service-pillars--dark a.m-service-pillars__row:hover { background: rgba(236, 231, 220, .04); }

/* Thumbnail */
.m-service-pillars__thumb { flex: 0 0 auto; width: clamp(150px, 17vw, 240px); }
.m-service-pillars__thumb .plate { min-height: 0; }

/* Title */
.m-service-pillars__title {
  flex: 1 1 300px; margin: 0;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: -.01em;
  color: var(--ink);
}
.m-service-pillars--dark .m-service-pillars__title { color: var(--light); }

/* Body (blurb + optional capabilities) */
.m-service-pillars__body { flex: 1 1 320px; max-width: 44ch; }
.m-service-pillars__summary {
  margin: 0; font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.5; color: var(--body);
}
.m-service-pillars--dark .m-service-pillars__summary { color: var(--light-6); }
.m-service-pillars__caps {
  list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--bd-light-2);
}
.m-service-pillars--dark .m-service-pillars__caps { border-top-color: var(--bd-dark-16); }
.m-service-pillars__caps li { font-size: 12.5px; letter-spacing: .02em; color: var(--ink-strong-2); }
.m-service-pillars--dark .m-service-pillars__caps li { color: var(--light-82); }

/* Partner tag + nudging arrow (far right) */
.m-service-pillars__partner {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mono-muted);
}
.m-service-pillars--dark .m-service-pillars__partner { color: var(--light-55); }
.m-service-pillars__ar {
  font-size: 18px; color: var(--accent);
  transition: transform var(--t-slow);
}

/* Desktop: fixed column tracks shared by every row, so the title, text and
   partner columns line up regardless of each row's content (flex let a long
   partner tag such as "ASSESSMENTS" push the text column left). */
@media (min-width: 1000px) {
  .m-service-pillars__row {
    display: grid;
    grid-template-columns: clamp(150px, 17vw, 240px) minmax(0, 1fr) minmax(0, 44ch) 170px;
    align-items: center;
  }
  .m-service-pillars__thumb { grid-column: 1; }
  .m-service-pillars__title { grid-column: 2; min-width: 0; }
  .m-service-pillars__body { grid-column: 3; min-width: 0; }
  .m-service-pillars__partner { grid-column: 4; justify-self: end; }
}