/* =========================================================================
   Key Breakthrough Highlights (Figma 177:4691)

   Dark navy rounded panel with a two-column header (eyebrow + accent
   heading on the left, intro paragraph on the right) and a row of three
   white cards beneath it. Each card carries a 40×40 green icon, a
   title, a description, and a quarter date.
   ========================================================================= */

.dark-panel-with-heading-icon-cards {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

.dark-panel-with-heading-icon-cards__panel {
  max-width: var(--content-max);
  margin-inline: auto;
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
  border-radius: 8px;
  /* Same padding curve as video-cta__panel so adjacent rounded panels
     on a page sit at identical interior breathing room. */
  padding: clamp(40px, 7vw, 100px) clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* 40px between header and cards row (Figma) */
}

/* ----------- Header: eyebrow + 2-col row ----------- */
.dark-panel-with-heading-icon-cards__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px between eyebrow and the header row */
}

.dark-panel-with-heading-icon-cards__eyebrow {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: inherit;
}

.dark-panel-with-heading-icon-cards__eyebrow-slash {
  color: var(--color-green-2);
  margin-right: 0.25em;
}

/* Mobile-first: stack heading + intro vertically. Side-by-side at
   ≥768 where there's room for both at comfortable line lengths. */
.dark-panel-with-heading-icon-cards__header-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .dark-panel-with-heading-icon-cards__header-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 131px); /* Figma desktop gap: 1312 - 596 - 585 = 131 */
  }
}

.dark-panel-with-heading-icon-cards__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2); /* 60 cap, grows to 72 ≥1600 via wide-screen token */
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: inherit;
  /* Figma desktop heading column: 596 of 1312 (≈45%). Cap so the
     accent word stays on its design line. */
  max-width: 596px;
  flex: 1 1 0;
}

.dark-panel-with-heading-icon-cards__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.dark-panel-with-heading-icon-cards__intro {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg); /* 18 → 20 ≥1600 */
  font-weight: var(--font-weight-regular);
  line-height: 28px;
  color: inherit;
  max-width: 585px;
  flex: 1 1 0;
}

/* ----------- Cards row ----------- */
/* Same border-once + per-card right-border technique as roadmap slider:
   outer wrapper has the 1px border + 8px radius + overflow-hidden so
   the visible left/right ends look rounded regardless of which card
   they're attached to; each card has only border-right. */
.dark-panel-with-heading-icon-cards__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  overflow: hidden;
}

/* Side-by-side row at ≥1100px (genuine layout change — the 3 cards
   wouldn't fit at comfortable widths below that). Mobile and tablet
   stack each card full-width with the rounded ends becoming top + bottom. */
@media (min-width: 1100px) {
  .dark-panel-with-heading-icon-cards__cards {
    flex-direction: row;
  }
}

.dark-panel-with-heading-icon-cards__slot {
  flex: 1 1 0;
  min-width: 0; /* allow shrink */
  display: flex; /* lets .__card stretch to slot height */
}

.dark-panel-with-heading-icon-cards__card {
  background-color: var(--color-background);
  width: 100%;
  /* Internal seams: bottom border on each card stacked vertically,
     right border on each card in a row. The last card's seam is
     cleared so it doesn't sit alongside the outer wrapper border. */
  border-bottom: 1px solid var(--color-card-border);
  padding: var(--space-7); /* 32px (Figma) */
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px between icon and card-body (Figma) */
}

.dark-panel-with-heading-icon-cards__slot:last-of-type .dark-panel-with-heading-icon-cards__card {
  border-bottom: 0;
}

@media (min-width: 1100px) {
  .dark-panel-with-heading-icon-cards__card {
    border-bottom: 0;
    border-right: 1px solid var(--color-card-border);
  }
  .dark-panel-with-heading-icon-cards__slot:last-of-type .dark-panel-with-heading-icon-cards__card {
    border-right: 0;
  }
}

.dark-panel-with-heading-icon-cards__icon {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.dark-panel-with-heading-icon-cards__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4_5); /* 16px between text block and date */
}

.dark-panel-with-heading-icon-cards__card-text {
  display: flex;
  flex-direction: column;
  /* Figma has no explicit gap between title and description here — both
     elements have their own line-height that provides the spacing. */
}

.dark-panel-with-heading-icon-cards__card-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4); /* 20 cap, grows to 28 ≥1600 */
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--color-navy-blue);
}

.dark-panel-with-heading-icon-cards__card-description {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body); /* 16 → 18 ≥1600 */
  font-weight: var(--font-weight-regular);
  line-height: 26px;
  color: var(--color-body-copy-text);
}

.dark-panel-with-heading-icon-cards__card-date {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm); /* 14 — small UI size, doesn't grow */
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: var(--color-navy); /* #131A5D per Figma */
}