/* V6 — single authoritative visual layer loaded last.
 * Goal: remove layout collisions, unify widths, add premium interaction without circus.
 */
:root {
  --ui-page: 1280px;
  --ui-gutter: clamp(16px, 3.2vw, 44px);
  --ui-red: #ef1018;
  --ui-green: #416c4f;
  --ui-green-deep: #123323;
  --ui-ink: #151716;
  --ui-muted: #707971;
  --ui-line: rgba(18, 51, 35, .12);
  --ui-surface: #f7faf8;
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-shadow: 0 26px 80px rgba(18, 51, 35, .11);
}

/* ---------- Global geometry: one width, one rhythm ---------- */
.hero-v4,
.v4-process,
.home-campaigns-v4,
.home-create-v3,
.catalogue-v4,
.campaign-v4,
.section-other-campaigns-v4,
.author-callout,
.foundation-footer__inner {
  width: min(var(--ui-page), calc(100% - (var(--ui-gutter) * 2))) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

main { overflow: clip; }

/* ---------- Homepage hero ---------- */
.hero-v4 {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr) !important;
  gap: 0 !important;
  min-height: 690px !important;
  margin-top: clamp(32px, 4vw, 58px) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 51, 35, .12) !important;
  border-radius: 34px !important;
  background: #f7f3ec !important;
  box-shadow: var(--ui-shadow) !important;
  isolation: isolate;
}

.hero-v4::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.2), transparent 36%),
    radial-gradient(circle at 15% 85%, rgba(65,108,79,.07), transparent 18%),
    radial-gradient(circle at 64% 18%, rgba(239,16,24,.055), transparent 20%);
  z-index: 0;
}

.hero-v4__copy,
.impact-board { position: relative !important; z-index: 1; min-width: 0 !important; }

.hero-v4__copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(48px, 6vw, 86px) clamp(34px, 5.5vw, 76px) !important;
}

.hero-v4__copy h1 {
  max-width: 740px !important;
  margin: 18px 0 22px !important;
  font-size: clamp(58px, 6.5vw, 98px) !important;
  line-height: .9 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}

.hero-v4__copy h1 span { display: block; color: var(--ui-green-deep); }
.hero-v4__lead { max-width: 650px !important; font-size: clamp(18px, 1.6vw, 22px) !important; line-height: 1.55 !important; }
.hero-v4__actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 28px !important; }
.hero-v4__actions .button { min-height: 52px; padding-inline: 24px; }
.hero-v4__microproof { display: flex !important; flex-wrap: wrap !important; gap: 12px 24px !important; margin-top: 30px !important; }

.impact-board {
  min-height: 690px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(40px, 4.8vw, 68px) clamp(30px, 4vw, 54px) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at var(--pointer-x, 72%) var(--pointer-y, 22%), rgba(239,16,24,.15), transparent 22%),
    radial-gradient(circle at 92% 10%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(145deg, #1f5a3d 0%, #123e2b 48%, #08281c 100%) !important;
  overflow: hidden !important;
}

.impact-board::before,
.impact-board::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.impact-board::before {
  width: 360px; height: 360px; right: -120px; bottom: -120px;
  border: 40px solid rgba(255,255,255,.055);
}
.impact-board::after {
  width: 130px; height: 130px; left: 12%; top: 22%;
  background: rgba(239,16,24,.09);
  filter: blur(2px);
}

.impact-board__topline { position: relative; z-index: 1; display: flex !important; justify-content: space-between !important; gap: 18px; align-items: center; }
.impact-board__topline > span { color: rgba(255,255,255,.62) !important; }
.impact-board__live { padding-left: 15px; position: relative; }
.impact-board__live::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--ui-red); box-shadow: 0 0 0 6px rgba(239,16,24,.12); }

.impact-board__metric { position: relative; z-index: 1; margin-top: clamp(52px, 7vw, 90px) !important; max-width: 540px; }
.impact-board__metric strong { display: block; color: #fff !important; font-size: clamp(78px, 8vw, 126px) !important; line-height: .82 !important; letter-spacing: -.065em !important; }
.impact-board__metric span { display: block; max-width: 430px; margin-top: 20px; color: rgba(255,255,255,.72) !important; font-size: 16px !important; line-height: 1.5 !important; }

.impact-board__stories {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin-top: auto !important;
  z-index: 2;
}

.impact-story,
.impact-story:nth-child(n) {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 42px !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 14px 14px 14px 16px !important;
  opacity: 1 !important;
  transform: none !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.075) !important;
  backdrop-filter: blur(14px);
  transition: transform .25s var(--ui-ease), background .25s ease, border-color .25s ease !important;
}
.impact-story:hover,
.impact-story:focus-visible { transform: translateY(-3px) !important; background: rgba(255,255,255,.11) !important; border-color: rgba(255,255,255,.22) !important; }
.impact-story__copy { min-width: 0; }
.impact-story__copy strong { color: #fff !important; }
.impact-story__copy span { color: rgba(255,255,255,.66) !important; }
.impact-story__arrow { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.10); }
.impact-board__foot { position: relative; z-index: 1; margin-top: 20px !important; color: rgba(255,255,255,.58) !important; }

/* Process is an independent block. No overlap, ever. */
.v4-process {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 24px !important;
  transform: none !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 14px 44px rgba(18,51,35,.06) !important;
  overflow: hidden !important;
}
.v4-process__item { min-width: 0; padding: 24px 28px !important; background: transparent !important; }
.v4-process__item + .v4-process__item { border-left: 1px solid var(--ui-line) !important; }
.v4-process__index { color: var(--ui-red) !important; }

/* ---------- Home stories ---------- */
.home-campaigns-v4 { padding-top: clamp(74px, 8vw, 108px) !important; }
.section-heading { display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 28px !important; margin-bottom: 28px !important; }
.section-heading > a { flex: 0 0 auto; }
.home-bento,
.catalogue-v4__results .card-grid,
.section-other-campaigns-v4 .card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
.home-bento .fundraiser-card,
.catalogue-v4__results .fundraiser-card,
.section-other-campaigns-v4 .fundraiser-card { min-width: 0 !important; height: 100% !important; }
.home-bento .fundraiser-card--featured { grid-column: auto !important; grid-row: auto !important; }

/* ---------- Campaign cards: premium but calm ---------- */
.fundraiser-card-v4 {
  --spot-x: 50%; --spot-y: 0%;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 12px 36px rgba(18,51,35,.05) !important;
  transition: transform .35s var(--ui-ease), box-shadow .35s var(--ui-ease), border-color .25s ease !important;
}
.fundraiser-card-v4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(239,16,24,.07), transparent 55%);
  transition: opacity .3s ease;
}
.fundraiser-card-v4:hover { transform: translateY(-8px) !important; border-color: rgba(65,108,79,.26) !important; box-shadow: 0 26px 64px rgba(18,51,35,.12) !important; }
.fundraiser-card-v4:hover::before { opacity: 1; }
.fundraiser-card-v4 > * { position: relative; z-index: 1; }
.fundraiser-card-v4 .card-media { overflow: hidden; }
.fundraiser-card-v4 .card-media img { transition: transform .7s var(--ui-ease), filter .35s ease; }
.fundraiser-card-v4:hover .card-media img { transform: scale(1.035); filter: saturate(1.03) contrast(1.02); }
.fundraiser-card-v4 .card-body { display: flex !important; flex-direction: column !important; min-height: 360px !important; }
.fundraiser-card-v4 .actions { margin-top: auto !important; }

/* ---------- Catalogue ---------- */
.catalogue-v4 { padding-top: clamp(58px, 7vw, 90px) !important; }
.catalogue-v4__head { display: grid !important; grid-template-columns: minmax(0,1fr) 320px !important; gap: clamp(36px, 6vw, 80px) !important; align-items: end !important; }
.catalogue-v4__aside { border-top: 4px solid var(--ui-red) !important; border-radius: 0 0 22px 22px !important; background: linear-gradient(145deg, #f8fbf9, #eef5f0) !important; box-shadow: 0 18px 54px rgba(18,51,35,.06) !important; }
.catalogue-v4__trust { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 28px !important; padding-bottom: 26px !important; border-bottom: 1px solid var(--ui-line) !important; }
.catalogue-v4__trust span { min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px 0 30px !important; position: relative; border: 1px solid var(--ui-line); border-radius: 999px; background: #fff; }
.catalogue-v4__trust span::before { content: ""; position: absolute; left: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-green); box-shadow: 0 0 0 5px rgba(65,108,79,.08); }

.catalogue-v5__toolbar {
  margin-top: 26px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  border: 1px solid var(--ui-line) !important;
  background: rgba(247,250,248,.96) !important;
  box-shadow: 0 18px 50px rgba(18,51,35,.06) !important;
}
.catalogue-v5__chip,
.catalogue-v5__layout-button,
.catalogue-v5__field input,
.catalogue-v5__sort select { min-height: 46px !important; }
.catalogue-v5__summary { padding: 12px 2px 0 !important; }
.catalogue-v4__results { margin-top: 24px !important; }
.catalogue-v5--compact .catalogue-v4__results .card-grid { grid-template-columns: 1fr !important; }
.catalogue-v5--compact .fundraiser-card-v4 { display: grid !important; grid-template-columns: 330px minmax(0,1fr) !important; }

/* ---------- Campaign detail ---------- */
.campaign-v4 { padding-top: clamp(54px, 6vw, 82px) !important; }
.campaign-v4__layout { display: grid !important; grid-template-columns: minmax(0,1fr) 360px !important; gap: 44px !important; align-items: start !important; }
.campaign-v4__media,
.campaign-cover,
.campaign-cover-fallback { border-radius: 30px !important; overflow: hidden !important; }
.donation-card-v4 { position: sticky !important; top: 140px !important; border-radius: 24px !important; box-shadow: 0 24px 70px rgba(18,51,35,.10) !important; }
.section-other-campaigns-v4 { padding-top: 70px !important; }

/* ---------- CTA / footer / assistant ---------- */
.home-create-v3,
.author-callout { margin-top: clamp(70px, 8vw, 104px) !important; border-radius: 28px !important; box-shadow: 0 20px 56px rgba(18,51,35,.06) !important; }
.carnation-assistant { position: fixed !important; right: 22px !important; bottom: 22px !important; transform: none !important; animation: none !important; }

/* ---------- Motion primitives ---------- */
.ui-v6-ready [data-v5-reveal] { opacity: 0; transform: translateY(20px); }
.ui-v6-ready [data-v5-reveal].is-visible { opacity: 1; transform: none; transition: opacity .65s var(--ui-ease), transform .65s var(--ui-ease); }
.ui-v6-ready .progress-fill { transform-origin: left center; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .hero-v4 { grid-template-columns: 1fr !important; }
  .impact-board { min-height: 560px !important; }
  .home-bento,
  .catalogue-v4__results .card-grid,
  .section-other-campaigns-v4 .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .campaign-v4__layout { grid-template-columns: 1fr !important; }
  .donation-card-v4 { position: static !important; top: auto !important; }
}

@media (max-width: 820px) {
  .hero-v4,
  .v4-process,
  .home-campaigns-v4,
  .home-create-v3,
  .catalogue-v4,
  .campaign-v4,
  .section-other-campaigns-v4,
  .author-callout,
  .foundation-footer__inner { width: calc(100% - 24px) !important; }

  .hero-v4 { border-radius: 26px !important; }
  .hero-v4__copy { padding: 42px 28px !important; }
  .hero-v4__copy h1 { font-size: clamp(50px, 14vw, 76px) !important; }
  .impact-board { min-height: 520px !important; padding: 34px 24px !important; }
  .impact-board__metric { margin-top: 46px !important; }
  .impact-board__metric strong { font-size: clamp(72px, 22vw, 108px) !important; }

  .v4-process { grid-template-columns: 1fr !important; }
  .v4-process__item + .v4-process__item { border-left: 0 !important; border-top: 1px solid var(--ui-line) !important; }

  .catalogue-v4__head { grid-template-columns: 1fr !important; }
  .catalogue-v5__toolbar { grid-template-columns: 1fr !important; }
  .catalogue-v5__summary { flex-direction: column !important; align-items: flex-start !important; }

  .home-bento,
  .catalogue-v4__results .card-grid,
  .section-other-campaigns-v4 .card-grid { grid-template-columns: 1fr !important; }
  .catalogue-v5--compact .fundraiser-card-v4 { grid-template-columns: 1fr !important; }
  .section-heading { align-items: flex-start !important; flex-direction: column !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}