/*
 * <section class="numbered-points"> — split module: a full-height image on the
 * left, a numbered list of points on the right. Opens with a <bracket-rule>
 * and sits on the dark page background. First used on industry.html.
 *
 * The inner grid is inset to --content-edge so its left/right line up with the
 * hero text (NOT the tram lines): the image's left edge and the text's right
 * edge match where the hero content begins/ends.
 */
.numbered-points {
  background: var(--almost-black);
  position: relative;
}

.numbered-points__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 48px var(--content-edge) 64px;
}

/* Optional section heading, spanning both columns above the media + list. Only
   present on pages that include the element (e.g. industry.html); the module
   renders headingless when it's omitted. Matches .tailwinds__heading. */
.numbered-points__heading {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-weight: 400;            /* Geist Regular */
  font-size: 42px;
  line-height: 1.2;
  color: var(--white);
  margin: 0;
  max-width: 1100px;
}

/* Optional secondary CTA (e.g. whitepaper download link) under the points.
   Centred, inset to the content edge, with the section's bottom padding below
   it. Only present where the element is included (e.g. industry-defence.html). */
.numbered-points__cta {
  display: flex;
  justify-content: center;
  padding: 0 var(--content-edge) 64px;
}

.numbered-points__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.2s;
}
.numbered-points__link:hover { opacity: 0.7; }

/* Left column — the image fills the row height (set by the list). */
.numbered-points__media {
  position: relative;
  overflow: hidden;
}
.numbered-points__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right column — the numbered list. */
.numbered-points__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Each point: number in a fixed left sub-column, text alongside. */
.numbered-points__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: start;
}

.numbered-points__num {
  font-family: var(--font-mono);   /* Geist Mono */
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
}

.numbered-points__title {
  font-family: var(--font-sans);   /* Geist Regular */
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--white);
  margin: 0 0 16px;
}

.numbered-points__text {
  font-family: var(--font-sans);   /* Geist Medium */
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: #A2A2A2;
  margin: 0;
  max-width: 480px;
}

/* Section title overlaid on the lead image — mobile only (see the ≤425px block
   below); hidden on desktop/tablet, where the section has no heading. */
.numbered-points__media-title {
  display: none;
}

/* ── Narrow phones (≤425px) ───────────────────────────────────────────────
 * Stack the two-up grid so the image sits above the points, and pull the
 * [0x] number tight to its heading (the desktop 120px sub-column wastes most
 * of a phone's width) so the copy can use the rest. Scoped below 425px so the
 * desktop/tablet side-by-side layout is unaffected.
 */
@media (max-width: 425px) {
  .numbered-points__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .numbered-points__heading {
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  /* Image no longer fills a list-set row height — give it its own. */
  .numbered-points__media {
    height: 220px;
  }

  .numbered-points__item {
    grid-template-columns: auto 1fr;
    column-gap: 12px;
  }

  /* Dark scrim under the title so white text reads over the photo. Scoped to
     the --titled image so the section's other image isn't darkened. */
  .numbered-points__media--titled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.15) 50%, transparent 75%);
    pointer-events: none;
  }

  .numbered-points__media-title {
    display: block;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--white);
  }
}