/**
 * Section: Wildlife Promise
 * Ported from .docs/mockup/css/sections.css (WILDLIFE PROMISE block,
 * lines 519-630) and the .wildlife-grid rule in the shared responsive
 * block (980px breakpoint, lines 1321-1324). Tokens only.
 *
 * Two literals stay as the mockup wrote them because no token matches them
 * exactly: `#fff` (no pure-white token exists — --off-white and --pebble are
 * both slightly warm) and the stat-eyebrow's `13px` (deliberately distinct
 * from the fluid --text-small / fixed --text-eyebrow scales). See the
 * section report for the contrast numbers behind the opacity values below.
 *
 * `.wildlife .eyebrow` replaces the mockup's inline
 * `style="color:var(--pebble)"` on the eyebrow div — inline styles are not
 * permitted in a section template.
 */

.wildlife {
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
  background: var(--eucalypt);
  color: var(--white);
}

.wildlife-grid {
  /* No max-width/margin-inline here — this element is already inside
     `.container`, which owns the width constraint. The mockup has neither
     declaration on it. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.wildlife-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.wildlife-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.wildlife .eyebrow {
  color: var(--pebble);
}

.wildlife-content .eyebrow::before {
  background: var(--pebble);
}

.wildlife h2 {
  color: var(--white);
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.wildlife h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--pebble);
}

.wildlife-lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  opacity: 0.95;
}

.wildlife-body {
  font-size: var(--text-small);
  line-height: 1.6;
  opacity: 0.92; /* was 0.88 — 4.41:1 on Eucalypt, under WCAG AA. 0.92 gives 4.64:1. */
}

.wildlife-content .btn-ghost {
  margin-top: var(--space-xs);
  align-self: flex-start;
  color: var(--off-white);
  border-color: var(--off-white);
}

.wildlife-content .btn-ghost:hover {
  background: var(--deep-ocean);
  color: var(--off-white);
  border-color: var(--deep-ocean);
}

.wildlife-stats {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.wildlife-stat {
  padding: var(--space-m) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.wildlife-stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--white);
}

.wildlife-stat-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.92; /* was 0.7 — 3.41:1 on Eucalypt, well under AA at 13px/700. 0.92 gives 4.64:1. */
}

.wildlife-stat-label {
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.92; /* was 0.88 — 4.41:1 on Eucalypt, under WCAG AA. 0.92 gives 4.64:1. */
}


/* === RESPONSIVE === */
@media (max-width: 980px) {
  .wildlife-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}