/* DigLTBlue capability template — the "Capability pages — redesign" boards
   (Figma 248:505), five desktop artboards driven by ONE template:
   1 Hero · 2 Intro · 3 Photo strip · 4 Scope of work · 5 Second block ·
   6 Explore more capabilities · 7 Closing CTA. The chrome, the footer and the
   closing band are shared partials and need little here.

   The boards' own note says it plainly: "One template drives all ten boards,
   so every structural variant is shown in situ." Those variants are NOT
   switches — each is the absence of content, so the CSS only has to cope with
   a section being shorter, never with a mode:
     hero   — no image  => flat navy (.lt-hero--navy), board 5a
     intro  — no image  => the 880px prose column (.lt-intro--prose), 3a/4a/5a
     strip  — no image  => pending plates, 5a
     scope  — no items  => no checklist, 1a
     second — no heading => the section does not render at all, 1a

   Most of this file is MODIFIERS on home.css components (the hero band, the
   intro split, the environments grid, the capability index rows) at the same
   specificity as the rules they override, which is why inc/enqueue.php loads
   it after lt-home. Every colour, size and tracking is a tokens.css token. */

/* ══ 1 Hero ═══════════════════════════════════════════════════════════ */
/* home.css's `.lt-hero` is built for chrome overlaid on it: 820px tall, with
   enough top padding to clear the bar. On an interior page the chrome is IN
   the flow, so there is no clearance to reserve — the band is the drawn 560
   with the copy 64px off its bottom edge. Both declarations are load-bearing:
   without the padding the home hero's 248px top inset makes this band 761px
   tall. (About solves the same problem in about.css with `.lt-hero--band`;
   that sheet does not load here, which is why this repeats rather than
   reuses it. Worth promoting to home.css if a third page needs it.) */
.lt-hero--capability {
  min-height: 560px;
  padding: 64px 0;
}

.lt-hero--capability .lt-hero__body {
  gap: 24px;
}

/* Board 5a: no photo, so no scrim either — the band is simply navy. The media
   and scrim elements are not rendered at all, so there is nothing to hide;
   this only supplies the ground they would have covered.

   It is also SHORTER than the photo variant — 440 against 560. A photo band
   needs height to be a photograph; a flat colour behind four lines of type
   does not, and the boards draw it that way. */
.lt-hero--navy {
  min-height: 440px;
  background: var(--color-navy);
}

/* The kicker is the interior 13px / .18em orange line, not the home hero's
   18px eyebrow. .lt-about__kicker already says that; this exists so the
   capability pages do not depend on about.css, which does not load here. */
.lt-capability__kicker {
  color: var(--color-orange);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-kicker);
}

/* 60px, the theme's tablet hero value — the interior-hero size every Subpages
   board uses. It costs no new token. */
.lt-hero--capability .lt-hero__title {
  font-size: 60px;
  line-height: var(--lh-hero);
  max-width: 900px;
}

.lt-hero--capability .lt-hero__standfirst {
  max-width: 720px;
}

.lt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}

/* ══ Alternating grounds ═══════════════════════════════════════════════ */
/* Every section after the hero alternates white / grey (client request
   2026-09-25), starting white at the intro. The optional blocks (extra,
   second, third) are rendered or not per page, so the tone cannot be fixed
   in each template; nth-of-type counts only the sections that rendered, so
   the rhythm holds whatever the page carries. The hero is section 1. These
   override the lt-section--white/--wash classes the templates still print. */
.lt-hero--capability ~ section:nth-of-type(even) {
  background: var(--color-white);
}

.lt-hero--capability ~ section:nth-of-type(odd) {
  background: var(--color-surface-alt);
}

/* ══ 2 Intro ══════════════════════════════════════════════════════════ */
/* The homepage split, butted to the hero above. The photo bleeds to the right
   edge; the copy keeps the content column's left edge. The 48px on top
   (requested 2026-09-25) is the section's own, so the photo drops with the
   copy and the hero no longer runs straight into the image. */
.lt-intro--capability {
  margin: 0;
  padding-top: 48px;
}

.lt-intro--capability .lt-intro__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 55%;
}

.lt-intro--capability .lt-intro__media {
  min-height: 520px;
}

/* No photo (3a, 4a, 5a): the split collapses and the copy takes the prose
   measure inside the normal content column instead of 55% of a full-bleed
   row. `.lt-intro` is a flex row, so the body simply becomes the only item. */
.lt-intro--prose .lt-intro__body {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-right: 0;
}

/* The head takes the same measure as the copy under it, so the rule stops
   where the paragraphs do instead of running the full 1268px column — the
   full-bleed rule is the scope section's device, not this one's. */
.lt-intro--prose .lt-head,
.lt-intro--prose .lt-capability__lead,
.lt-intro--prose .lt-capability__body,
.lt-intro--prose .lt-capability__note {
  max-width: var(--prose-max);
}

.lt-capability__lead {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-navy);
  text-wrap: pretty;
}

.lt-capability__body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--color-navy);
  text-wrap: pretty;
}

/* The boards' small uppercase line under the paragraphs. Navy, not orange —
   it is a statement of record, not a kicker. */
.lt-capability__note {
  margin: 8px 0 0;
  font-size: var(--fs-meta);
  font-weight: var(--weight-label);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-navy);
}

/* ══ 3 Photo strip ════════════════════════════════════════════════════ */
/* The environments grid: a lead tile two rows tall at 1.7fr, two stacked
   tiles at 1fr. Butted to the intro above, as drawn. */
.lt-strip {
  padding-top: 48px;
}

.lt-strip__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: repeat(2, 252px);
  gap: 16px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-placeholder);
}

.lt-tile--lead {
  grid-row: span 2;
}

.lt-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lt-tile__pending {
  padding: 0 16px;
}

/* The caption plate sits on the bottom edge of its tile. */
.lt-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 20px;
  background: var(--caption-scrim);
}

.lt-tile--lead .lt-tile__caption {
  padding: 16px 20px;
}

.lt-tile__eyebrow {
  margin: 0 0 4px;
  font-size: var(--fs-micro);
  font-weight: var(--weight-label);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-orange);
}

.lt-tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title-xs);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-white);
}

.lt-tile--lead .lt-tile__title {
  font-size: var(--fs-title-sm);
}

/* ══ 4 & 5 Scope and second block ═════════════════════════════════════ */
/* The head keeps its kicker and heading together; .lt-head is a 16px-gap
   column, which is the rule's drawn offset. */
.lt-scope__head,
.lt-siblings__head {
  gap: 16px;
}

/* ── The checklist ─────────────────────────────────────────────────────
   Three columns filled TOP-TO-BOTTOM, as the boards draw them: five items
   read 2/2/1, six read 2/2/2, eight read 3/3/2. That is multi-column layout,
   not grid — a grid flows row-first and would read 3/2 across, and nothing in
   CSS can give a grid the row count without knowing the item count. `columns`
   balances it for free, at any length, which is what a repeater needs.

   The MARKER is a plain orange disc bullet (client request 2026-09-25; the
   boards drew a 12x2px orange rule fragment). It is a pseudo-element, so nothing
   decorative reaches the accessibility tree; the list is announced as a plain
   list, which is what it is. */
.lt-checklist {
  columns: 3;
  column-gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-checklist__item {
  position: relative;
  padding-left: 20px;
  /* A two-line item must not be split down the middle by a column break. */
  break-inside: avoid;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-navy);
}

.lt-checklist__item + .lt-checklist__item {
  margin-top: 12px;
}

.lt-checklist__item::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-orange);
  font-size: 1.25em;
  line-height: 1.2;
}

/* Two-column variant: two columns at every width above mobile. */
.lt-checklist--bullets {
  columns: 2;
}

.lt-scope__prose,
.lt-second__prose {
  max-width: var(--prose-max);
}

/* ══ 6 Explore more capabilities ══════════════════════════════════════ */
/* The homepage capability index at the compact size: a hairline above every
   row and below the last, so the block reads as a table rather than cards. */
.lt-siblings__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-line-strong);
}

.lt-sibling {
  border-top: 1px solid var(--color-line-strong);
}

/* The whole row is the link — one target, not a title link beside a picture. */
.lt-sibling__link {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 28px 0;
  text-decoration: none;
  color: inherit;
}

.lt-sibling__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 280 / 175;
  overflow: hidden;
  background: var(--color-placeholder);
}

.lt-sibling__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lt-sibling__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lt-sibling__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-navy);
  transition: color var(--t-med) var(--ease);
}

.lt-sibling__desc {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--color-navy);
}

.lt-sibling__arrow {
  font-size: var(--fs-title);
  line-height: 1;
  color: var(--color-orange);
  transition: transform var(--t-med) var(--ease);
}

.lt-sibling__link:hover .lt-sibling__title {
  color: var(--color-orange);
}

.lt-sibling__link:hover .lt-sibling__arrow {
  transform: translateX(6px);
}

/* ══ Tablet (<1024px) ═════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .lt-hero--capability {
    min-height: 460px;
  }

  .lt-hero--navy {
    min-height: 380px;
  }

  .lt-hero--capability .lt-hero__title {
    font-size: 44px;
  }

  /* The split stacks: copy first, then the photo as a band under it — the
     same call about.css makes for its own intro. */
  .lt-intro--capability {
    flex-direction: column;
  }

  .lt-intro--capability .lt-intro__body {
    width: 100%;
  }

  .lt-intro--capability .lt-intro__media {
    min-height: 320px;
  }

  /* Two columns before one: a 3-column checklist has no measure left here. */
  .lt-checklist {
    columns: 2;
  }

  .lt-sibling__link {
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 28px;
  }
}

/* ══ Mobile (<640px) ══════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .lt-hero--capability {
    min-height: 420px;
  }

  .lt-hero--navy {
    min-height: 0;
  }

  .lt-hero--capability .lt-hero__title {
    font-size: var(--fs-hero);
  }

  /* Both hero buttons go full width and stack, as every button does here. */
  .lt-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .lt-hero__actions .lt-btn {
    text-align: center;
  }

  /* One column of 240px tiles; the lead tile stops spanning. */
  .lt-strip__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 16px;
  }

  .lt-tile {
    min-height: 240px;
  }

  .lt-tile--lead {
    grid-row: auto;
  }

  .lt-checklist {
    columns: 1;
  }

  /* 48 x 2/3: the same step --pad-y takes here (96 -> 64). */
  .lt-intro--capability {
    padding-top: 32px;
  }

  .lt-checklist__item + .lt-checklist__item {
    margin-top: 10px;
  }

  /* The row becomes a card: full-width thumbnail, then the text, then the
     arrow under it rather than pinned right. */
  .lt-sibling__link {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0;
  }

  .lt-sibling__media {
    aspect-ratio: 2 / 1;
  }

  .lt-sibling__title {
    font-size: var(--fs-title-sm);
  }

  .lt-sibling__desc {
    font-size: var(--fs-small);
  }
}