/* DigLTBlue Safety template — the "Subpages › 4 · Safety" canvas (Figma
   212:967), in artboard order: 2 Programme split ·
   3 Practice rows · 4 Safety & Leadership · 5 Closing CTA. The chrome, the
   footer and the navy lead band (1) are shared partials — the band's rules
   live in pages.css, which every interior page loads.

   Unlike about.css this file is mostly NEW components rather than modifiers:
   the canvas draws a flat navy title band, a two-column programme split, the
   hairline practice rows and the officer split, none of which exist on the
   homepage. The one modifier block is the closing CTA, which the canvas
   inverts to navy (the homepage and About draw it white) — hence the
   dependency on lt-home in inc/enqueue.php, so these rules cascade after the
   component they override.

   The canvas is a HAND-EDITED artboard and its geometry is loose: layers sit
   at x=89 and x=90 where the column is at 86, the programme photo runs 48px
   past the 1268px content column, and one 1268x2 rule is drawn twice at the
   same y. Where the canvas contradicts itself the content column wins; the
   deliberate literals it does get right (441x308 and 555x515 photos, 257x72
   plates, the 388px second column in the practice rows) are kept.

   Desktop values are the 1440 artboard's literals; the <1024px block is the
   tablet step and the <640px block at the end is the mobile step. The canvas
   draws NO mobile artboard for this page, so the narrow layout follows the
   About page's conventions rather than a drawing. Every colour, size and
   tracking is a tokens.css token — nothing new. */

/* ══ 2 Programme split ════════════════════════════════════════════════ */
/* THE PAGE'S VERTICAL RHYTHM. Below the title band this is one continuous
   white document, not a stack of padded sections: the canvas separates its
   blocks by 30-60px and closes with 80px before the navy band, where
   .lt-section's own --pad-y would put 192px between each pair. The canvas is
   consistent about it across five boundaries, so it is intent rather than the
   drift the rest of this artboard shows. Every section below therefore
   overrides its padding-block and the gaps come from these two values.

   The horizontal padding is left to .lt-section — only the block axis moves.

   These two live on :root because the sections are direct children of <main>
   (base.css's scroll reveal keys off `.lt-main > * + *`, so they cannot be
   wrapped) and this sheet is enqueued ONLY on the Safety template — there is
   no other page for a :root declaration here to reach. */
:root {
  --flow-gap: 40px;
  --flow-gap-lg: 80px;
}

.lt-program {
  padding-block: var(--flow-gap) 0;
}

/* Prose left, a 441x308 photo held to the content column's right edge. The
   canvas draws the prose 853px wide AND the photo 441px at x=961, which
   overflows the 1268px column by 26px; the prose is what gives. */
.lt-program__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 441px;
  gap: 48px;
  align-items: start;
}

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

/* .lt-prose--full lifts the 880px cap; the grid column is the measure here. */
.lt-program__prose p {
  line-height: var(--lh-prose);
}

.lt-program__media {
  aspect-ratio: 441 / 308;
}

/* ── Certification plates ──────────────────────────────────────────── */
/* The micro-label over the marks. Navy, not orange: the canvas draws it in
   the body colour, unlike the page's kickers. */
.lt-certs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lt-certs__label {
  margin: 0;
  font-size: var(--fs-nav);
  font-weight: var(--weight-label);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-navy);
}

/* One column: the square ISNetworld seal over the landscape CGA DPI lockup.
   Both marks take the SAME width and their own height, so the seal draws
   as a square and the lockup as a strip — a shared fixed-height plate would
   shrink one of them to fit the other. An empty slot (no mark uploaded)
   keeps a 257x72 placeholder. */
.lt-certs__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-cert {
  width: 200px;
  max-width: 100%;
}

.lt-cert__media.lt-slot {
  width: 257px;
  max-width: 100%;
  height: 72px;
}

/* A real mark is CONTAINED at the column width, never cover-cropped. */
.lt-cert__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ══ 3 Practice rows ══════════════════════════════════════════════════ */
/* The rows butt straight up under the programme split: the section carries no
   block padding of its own and the orange rule is the join, holding the
   canvas's 59px above it and 40px below. */
.lt-practices {
  padding-block: 0;
}

.lt-practices__rule {
  margin-block: 56px var(--flow-gap);
}

.lt-practices__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* [32px icon] [title] [sentence]. 32 + 24 + 308 + 24 lands the sentence on
   the drawn 388px offset — the canvas drew an 8px mark and a 332px title
   column; the client's icons (2026-09-24) took the difference from the title,
   so the sentence column did not move. */
.lt-practice {
  display: grid;
  grid-template-columns: 32px 308px minmax(0, 1fr);
  column-gap: 24px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--color-line);
}

/* The practice icon: a 32x28 box sized to the title's 24px cap line, the
   glyph contained inside it (Font Awesome draws on 384–640-wide grids, so the
   narrow clipboard and the wide barrier share one optical height). */
.lt-practice__icon {
  width: 32px;
  height: 28px;
  color: var(--color-orange);
}

/* The fallback for a row with no icon: the canvas's small orange square,
   drawn 14px below the title's top edge so it sits on the first line rather
   than at the row's top. */
.lt-practice__mark {
  width: 8px;
  height: 8px;
  margin-top: 14px;
  background: var(--color-orange);
}

.lt-practice__title {
  margin: 0;
  color: var(--color-navy);
  line-height: 1.15;
}

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

/* ══ 4 Safety & Leadership ════════════════════════════════════════════ */
/* The last block before the navy band, so it closes the white document with
   the canvas's wider 80px rather than the 40px between the blocks above. */
.lt-officer {
  padding-block: var(--flow-gap) var(--flow-gap-lg);
}

/* Copy left, a 555x515 photo on the right. This is the one split the canvas
   measures exactly: 799 + 555 = 1354, the content column's right edge. */
.lt-officer__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 555px;
  gap: 48px;
  align-items: start;
}

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

.lt-officer__heading {
  margin: 0;
  color: var(--color-navy);
}

/* The name in Oswald navy, a thin divider, the role in orange — one line, at
   the sub-heading size the canvas draws it. A <p>, not a heading: it names a
   person under the section's <h2> rather than opening a subsection. */
.lt-officer__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-display-sm);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.lt-officer__name {
  color: var(--color-navy);
}

.lt-officer__sep,
.lt-officer__role {
  color: var(--color-orange);
}

.lt-officer__prose {
  margin-top: 8px;
  max-width: 578px;
}

.lt-officer__media {
  aspect-ratio: 555 / 515;
}

/* ══ 5 Closing CTA ════════════════════════════════════════════════════ */
/* The canvas inverts the homepage band: navy ground, white copy. The partial
   is the homepage's, handed `tone => navy`; these are the colour overrides
   that go with the modifier class it then emits. The band's own layout is
   home.css's and is unchanged. */
.lt-closing--navy .lt-closing__heading,
.lt-closing--navy .lt-closing__phone {
  color: var(--color-white);
}

.lt-closing--navy .lt-closing__phone:hover {
  color: var(--color-orange);
}

/* ══ Tablet (<1350px) ═════════════════════════════════════════════════ */
/* The two fixed photo columns are the first thing to cost the copy its
   measure. Both splits go fluid before they go stacked. */
@media (max-width: 1349px) {
  .lt-program__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  }

  .lt-officer__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  }
}

/* ══ Tablet (<1024px) ═════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  :root {
    --flow-gap: 32px;
    --flow-gap-lg: 64px;
  }

  /* Both splits stack: the photo under the copy it belongs to, full width. */
  .lt-program__split,
  .lt-officer__split {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .lt-program__media,
  .lt-officer__media {
    aspect-ratio: 16 / 9;
  }

  .lt-officer__prose {
    max-width: none;
  }

  /* The title column loses its fixed width before the rows stack, so a long
     practice name wraps instead of forcing the sentence off the grid. */
  .lt-practice {
    grid-template-columns: 32px minmax(0, 240px) minmax(0, 1fr);
    column-gap: 20px;
  }

  .lt-practices__rule {
    margin-block: 40px var(--flow-gap);
  }
}

/* ══ Mobile (<640px) — no artboard; About's conventions ═══════════════ */
@media (max-width: 639px) {
  :root {
    --flow-gap: 24px;
    --flow-gap-lg: 48px;
  }

  .lt-program__body {
    gap: 32px;
  }

  .lt-certs__list {
    gap: 16px;
  }

  .lt-cert {
    width: 160px;
  }

  /* The mark moves above the title and the sentence sits under it: a
     three-column row has no measure left at 400px. */
  .lt-practice {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 12px;
    padding: 20px 0 24px;
  }

  .lt-practice__text {
    grid-column: 2;
  }
}