/*
 * Capabilities overview (/capabilities/) — page-specific extras on top of components/kosh-page.css.
 * Only .kp-x-cap* classes live here; everything else is the shared Kosh page system.
 */

/* Numbers strip: three numbers, no "Trusted by" block */
@media (min-width: 861px) {
  .kp-x-cap-stats .kp-stats__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Final CTA heading <em> on the red band */

/* 03 — The six capabilities at a glance */
.kp-x-cap-overview .kp-svc__num { padding-top: 1px; }

/* One capability: number, title and link (and its two numbers on the right) above a pinned row of service cards */
.kp-x-cap__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 36px clamp(32px, 6vw, 96px);
}
.kp-x-cap__intro .kp-hl { font-size: clamp(40px, 4.4vw, 62px); line-height: 1.05; }
.kp-x-cap .kp-kicker { font-family: var(--font-heading); font-size: 15px; letter-spacing: .08em; }
/* the card photo fills its half without setting the card height (a portrait photo would stretch the card) */
.kp-x-cap .kp-feature__media img { position: absolute; inset: 0; }

/* Consecutive sections on the page tint are split by a hairline instead of a double gap */
:is(.kp-x-cap-overview, .kp-x-cap, .kp-x-cap-quote) + :is(.kp-x-cap, .kp-x-cap-quote, .kp-x-cap-diff) { padding-top: 0; }
:is(.kp-x-cap-overview, .kp-x-cap, .kp-x-cap-quote) + :is(.kp-x-cap, .kp-x-cap-quote, .kp-x-cap-diff) .kp-x-cap__in {
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
}

/* Two numbers beside a capability's heading */
.kp-x-cap__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 1 440px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  max-width: 440px;
}
.kp-x-cap__stats .kp-stat:nth-child(n) { padding: 0 0 0 22px; }
.kp-x-cap__stats .kp-stat:first-child { padding-left: 0; padding-right: 22px; border-left: 0; }
.kp-x-cap__stats .kp-stat__label { font-size: 12px; line-height: 1.5; }

/* Web platforms under the web services */
.kp-x-cap__platforms { margin-top: clamp(40px, 5vw, 64px); }

/* A statement with its number (dark band, sand band) */
.kp-x-cap-say__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.kp-x-cap-say__stat.kp-stat { padding: 4px 0 4px 32px; border-left: 2px solid var(--color-secondary); max-width: 240px; }
.kp-x-cap-say__stat .kp-stat__n { font-size: clamp(44px, 4.4vw, 64px); }
.kp-dark .kp-statement__text, .kp-dark .kp-stat__n { color: #fff; }
.kp-dark .kp-statement__text em { color: var(--color-secondary); filter: brightness(1.35); }
.kp-dark .kp-stat__label { color: var(--text-on-dark-3); }

@media (max-width: 860px) {
  .kp-x-cap__head { display: block; }
  .kp-x-cap__stats { margin-top: 36px; }
  .kp-x-cap-say__grid { grid-template-columns: 1fr; }
}