/* =====================================================================
   InstaFarm · Chapter 07 "Measured impact · UN SDGs"
   Drop-in component, measured from impact-reference.png (stage = 1625px).
   Inner sizes use container-query units (cqi = 1% of .impact__stage width)
   with px floors. DO NOT replace cqi values with px / vw / clamp.
   ===================================================================== */

.impact {
  --im-bg: #FEFAF8;
  --im-ink: #17171D;
  --im-text: #5E5654;
  --im-red: #C4161C;
  --im-gold: #A97A12;
  --im-green: #1E7A3E;
  --im-line: #F4E1DC;

  position: relative;
  overflow: hidden;
  background:
    radial-gradient(22cqi 22cqi at 100% 4%, rgba(251, 214, 205, .55), transparent 70%),
    radial-gradient(18cqi 18cqi at 0% 100%, rgba(251, 222, 214, .45), transparent 70%),
    var(--im-bg);
  scroll-margin-top: 80px;
}
.impact__stage { container-type: inline-size; max-width: 1600px; margin: 0 auto; }
.impact__inner { padding: 4.4cqi 4.7cqi 4.2cqi; }

/* ---------- header ---------- */
.impact__head {
  display: grid;
  grid-template-columns: 43.4cqi 1px 27.2cqi;
  column-gap: 2.85cqi;
  justify-content: start;
  align-items: start;
  padding-left: 4.1cqi;
}
.impact__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .7cqi;
  font: 700 max(11px, .74cqi)/1 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--im-red);
}
.impact__eyebrow::before { content: ""; width: .5cqi; height: 1.5px; background: currentColor; flex: none; }
.impact__title {
  margin: 1.9cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(32px, 4.6cqi);
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--im-ink);
}
.impact__title span { display: block; white-space: nowrap; }
.impact__title em { font-style: italic; color: var(--im-red); }
.impact__rule { width: 1px; height: 5.7cqi; margin-top: 3.6cqi; background: #E3A8A6; }
.impact__lede {
  margin: 3.75cqi 0 0;
  font: 400 max(15px, 1.14cqi)/1.68 'Instrument Sans', system-ui, sans-serif;
  color: var(--im-text);
}

/* ---------- 4 headline stats ---------- */
.impact__stats {
  list-style: none;
  margin: 3.4cqi 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.85cqi;
}
.impact__stat {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 13.85cqi;
  padding: 1.1cqi 1.66cqi 1.5cqi;
  border: 1px solid var(--im-line);
  border-radius: 1.1cqi;
  background-color: #FFFBFA;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  box-shadow: 0 12px 30px rgba(150, 60, 50, .05);
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1);
}
.impact__stat::before {          /* left fade so text reads over the photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,251,250,.97) 0%, rgba(255,251,250,.9) 38%, rgba(255,251,250,0) 64%);
  pointer-events: none;
}
.impact__stat > * { position: relative; }
.impact__stat--loss  { background-image: url("../assets/img/impact/stat-loss.webp"); }
.impact__stat--women { background-image: url("../assets/img/impact/stat-women.webp"); }
.impact__stat--co2   { background-image: url("../assets/img/impact/stat-co2.webp"); }
.impact__stat--food  { background-image: url("../assets/img/impact/stat-food.webp"); }
.impact__stat-icon {
  width: max(40px, 4.2cqi);
  height: max(40px, 4.2cqi);
  border-radius: 50%;
  background: #FCE6E2;
  display: grid;
  place-items: center;
  color: var(--im-red);
}
.impact__stat-icon svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.impact__num {
  margin: auto 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(30px, 3.2cqi);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--im-red);
  white-space: nowrap;
}
.impact__label {
  margin: .75cqi 0 0;
  max-width: 11.7cqi;
  font: 500 max(14px, 1.05cqi)/1.42 'Instrument Sans', system-ui, sans-serif;
  color: #2A2626;
}
@media (hover: hover) {
  .impact__stat:hover, .impact__sdg:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(150, 60, 50, .10); }
}

/* ---------- SDGs ---------- */
.impact__sdg-title {
  margin: 2.9cqi 0 0 .45cqi;
  display: flex;
  align-items: center;
  gap: 1.35cqi;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: max(18px, 1.54cqi);
  letter-spacing: -.01em;
  color: var(--im-ink);
}
.impact__sdg-title::before { content: ""; width: 2.25cqi; height: 1.5px; background: var(--im-red); flex: none; }
.impact__sdgs {
  list-style: none;
  margin: 1.9cqi 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.48cqi;
}
.impact__sdg {
  --c: var(--im-red);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 14.95cqi;
  padding: 1.4cqi 1.55cqi 1.35cqi;
  border: 1px solid var(--im-line);
  border-radius: .9cqi;
  background-color: #FFFBFA;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1);
}
.impact__sdg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,251,250,.9) 0%, rgba(255,251,250,.55) 45%, rgba(255,251,250,0) 70%);
  pointer-events: none;
}
.impact__sdg > * { position: relative; }
.impact__sdg--1  { --c: var(--im-red);   background-image: url("../assets/img/impact/sdg-1.webp"); }
.impact__sdg--2  { --c: var(--im-gold);  background-image: url("../assets/img/impact/sdg-2.webp"); }
.impact__sdg--5  { --c: var(--im-red);   background-image: url("../assets/img/impact/sdg-5.webp"); }
.impact__sdg--7  { --c: var(--im-gold);  background-image: url("../assets/img/impact/sdg-7.webp"); }
.impact__sdg--8  { --c: #A8121A;         background-image: url("../assets/img/impact/sdg-8.webp"); }
.impact__sdg--12 { --c: var(--im-gold);  background-image: url("../assets/img/impact/sdg-12.webp"); background-size: 220% auto; background-position: 100% 100%; }
.impact__sdg--13 { --c: var(--im-green); background-image: url("../assets/img/impact/sdg-13.webp"); }
.impact__sdg-num {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(24px, 2.34cqi);
  line-height: 1;
  color: var(--c);
}
.impact__sdg h3 {
  margin: .55cqi 0 0;
  font: 500 max(14px, 1.05cqi)/1.4 'Instrument Sans', system-ui, sans-serif;
  color: #2A2626;
}
.impact__sdg h3::after { content: ""; display: block; width: 2.4cqi; height: 2px; margin-top: .9cqi; background: var(--c); }
.impact__sdg-icon {
  margin-top: auto;
  width: max(40px, 4.3cqi);
  height: max(40px, 4.3cqi);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(120, 60, 40, .08);
  display: grid;
  place-items: center;
  color: var(--c);
}
.impact__sdg-icon svg { width: 50%; height: 50%; }
.impact__sdg-note {
  margin: 1.6cqi 0 0 .45cqi;
  font: 400 max(12px, .8cqi)/1.5 'Instrument Sans', system-ui, sans-serif;
  color: #8A807D;
}

/* ---------- reveal ---------- */
.impact [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.impact [data-reveal].is-in { opacity: 1; transform: none; }
.impact__stat[data-reveal]:nth-child(2), .impact__sdg[data-reveal]:nth-child(2) { transition-delay: .06s; }
.impact__stat[data-reveal]:nth-child(3), .impact__sdg[data-reveal]:nth-child(3) { transition-delay: .12s; }
.impact__stat[data-reveal]:nth-child(4), .impact__sdg[data-reveal]:nth-child(4) { transition-delay: .18s; }
.impact__sdg[data-reveal]:nth-child(5) { transition-delay: .24s; }
.impact__sdg[data-reveal]:nth-child(6) { transition-delay: .30s; }
.impact__sdg[data-reveal]:nth-child(7) { transition-delay: .36s; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .impact__inner { padding: 48px 28px 52px; }
  .impact__head { display: block; padding-left: 0; }
  .impact__title { font-size: clamp(34px, 6vw, 52px); }
  .impact__rule { display: none; }
  .impact__lede { margin-top: 16px; max-width: 36rem; }
  .impact__stats { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .impact__stat { height: auto; min-height: 200px; padding: 18px 20px 20px; border-radius: 18px; }
  .impact__label { max-width: 12rem; }
  .impact__sdg-title { margin-top: 36px; }
  .impact__sdgs { margin-top: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .impact__sdg { height: auto; aspect-ratio: 190 / 243; padding: 16px 16px 16px; border-radius: 16px; }
  .impact__sdg h3::after { width: 32px; margin-top: 10px; }
}
@media (max-width: 639px) {
  .impact__inner { padding: 40px 20px 44px; }
  .impact__title { font-size: clamp(32px, 9vw, 42px); }
  .impact__title span { white-space: normal; }
  .impact__stats { grid-template-columns: 1fr; }
  .impact__stat { min-height: 170px; }
  .impact__sdgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .impact *, .impact [data-reveal] { transition: none !important; }
  .impact [data-reveal] { opacity: 1; transform: none; }
  .impact__stat:hover, .impact__sdg:hover { transform: none; }
}