/**
 * CPCSection — ported 1:1 from components/sections/CPCSection.module.css.
 * Module root .cpc → .s-cpc; other module classes scoped under .s-cpc.
 * @keyframes flagFloat → cpc-flagFloat.
 */
.s-cpc {
  background: var(--c-paper);
  padding-block: clamp(5rem, 12vw, 9rem);
}

/* Green statement band — bright, bold, on-brand emphasis, over a faded
   advocacy photo (economic + diplomatic pressure) so the flag reads clearly. */
.s-cpc .band {
  position: relative;
  overflow: hidden;
  background: var(--c-green);
  color: var(--c-text-on-dark);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  margin-block: clamp(3rem, 7vw, 5rem);
}
/* Toned right down (low opacity + desaturated) — a texture, not a picture, so
   the waving flag and the statement stay the focus. */
.s-cpc .bandMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.2;
  filter: grayscale(0.35) contrast(1.05);
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.s-cpc .bandInner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 768px) {
  .s-cpc .bandInner {
    grid-template-columns: 1fr auto;
  }
}
.s-cpc .statement {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

/* Stitched Sahel banner — a real hanging-cloth photo, framed as a rounded
   still with a soft drop-shadow. Cropped to the fabric so the dark studio
   edges don't box it on the green band; a gentle float keeps it alive. */
.s-cpc .flag {
  flex: none;
  display: block;
  width: clamp(240px, 30vw, 440px);
  aspect-ratio: 16 / 11;
  height: auto;
  object-fit: cover;
  object-position: center 45%;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  transform-origin: center;
  animation: cpc-flagFloat 8s ease-in-out infinite;
}
@keyframes cpc-flagFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .s-cpc .flag {
    animation: none;
  }
}

/* Header above the three "what CPC unlocks" columns. */
.s-cpc .pointsHead {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* What a designation unlocks — three editorial columns. */
.s-cpc .points {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 768px) {
  .s-cpc .points {
    grid-template-columns: repeat(3, 1fr);
  }
}
.s-cpc .point {
  padding-top: var(--s-4);
  border-top: 3px solid var(--c-green);
}
.s-cpc .pointLabel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--c-midnight);
  margin: 0 0 var(--s-3);
}
.s-cpc .pointBody {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  margin: 0;
}

/* ICON's ask + CTA. */
.s-cpc .ask {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  max-width: var(--max-w-prose);
}
.s-cpc .askBody {
  margin: var(--s-4) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--c-midnight);
  text-wrap: pretty;
}
.s-cpc .askNote {
  margin: var(--s-6) 0 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--c-text);
  text-wrap: pretty;
}
.s-cpc .askPunch {
  margin: var(--s-6) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--c-clay);
  text-wrap: pretty;
}
.s-cpc .actions {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}