/* Art Direction V3 — cinematic philanthropy, story-first, calm motion. */

:root {
  --v3-red: #ef1018;
  --v3-red-deep: #c90c14;
  --v3-green: #416c4f;
  --v3-green-dark: #173e2c;
  --v3-green-deeper: #102e20;
  --v3-cream: #f8f4ed;
  --v3-ink: #151715;
  --v3-muted: #6e756f;
  --v3-line: rgba(23, 62, 44, .13);
  --v3-shadow: 0 28px 80px rgba(23, 62, 44, .12);
  --v3-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --- Cinematic home hero ------------------------------------------------ */
.hero-v3 {
  width: min(1380px, calc(100% - clamp(24px, 5vw, 76px)));
  min-height: clamp(620px, 72vh, 790px);
  margin: clamp(28px, 4vw, 60px) auto 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
  overflow: hidden;
  border: 1px solid rgba(23,62,44,.12);
  border-radius: 42px;
  background: var(--v3-cream);
  box-shadow: 0 34px 110px rgba(23,62,44,.10);
}

.hero-v3__copy {
  position: relative;
  z-index: 3;
  padding: clamp(58px, 7vw, 102px) clamp(34px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 14% 12%, rgba(239,16,24,.055), transparent 18rem),
    linear-gradient(135deg, #fbf8f2 0%, #f8f4ed 60%, #f2eee8 100%);
}

.hero-v3__copy::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  left: -92px;
  bottom: 58px;
  border-radius: 58% 42% 64% 36% / 48% 61% 39% 52%;
  background: rgba(65,108,79,.055);
  transform: rotate(18deg);
  pointer-events: none;
}

.hero-v3 .eyebrow {
  margin-bottom: 22px !important;
}

.hero-v3 h1 {
  margin: 0;
  max-width: 840px;
  font-size: clamp(58px, 6.4vw, 96px) !important;
  line-height: .88 !important;
  letter-spacing: -.06em !important;
  color: var(--v3-ink) !important;
}

.hero-v3 h1 span {
  display: block;
  color: var(--v3-green-dark);
}

.hero-v3__lead {
  max-width: 720px;
  margin: 30px 0 0;
  color: #5f665f;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.62;
}

.hero-v3__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-v3__actions .button {
  min-height: 52px;
  padding-inline: 25px !important;
  font-size: 14px !important;
}

.hero-v3__secondary {
  border-color: rgba(23,62,44,.26) !important;
  background: transparent !important;
  color: var(--v3-green-dark) !important;
}

.hero-v3__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-v3__trust span {
  min-height: 38px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(23,62,44,.11);
  border-radius: 999px;
  color: #5c665f;
  background: rgba(255,255,255,.58);
  font-size: 12px;
}

.hero-v3__trust i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v3-green);
  box-shadow: 0 0 0 5px rgba(65,108,79,.08);
}

.hero-v3__stage {
  --stage-x: 0px;
  --stage-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background:
    radial-gradient(circle at calc(74% + var(--stage-x)) calc(18% + var(--stage-y)), rgba(255,255,255,.08), transparent 11rem),
    radial-gradient(circle at calc(18% + var(--stage-x)) calc(84% + var(--stage-y)), rgba(239,16,24,.20), transparent 17rem),
    linear-gradient(145deg, #224e38 0%, #173e2c 48%, #102e20 100%);
}

.hero-v3__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .22;
  background-image: radial-gradient(rgba(255,255,255,.32) .6px, transparent .6px);
  background-size: 22px 22px;
  mask-image: linear-gradient(150deg, #000, transparent 76%);
}

.hero-v3__stage::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -170px;
  bottom: -150px;
  z-index: -2;
  border: 48px solid rgba(255,255,255,.055);
  border-radius: 50%;
}

.hero-v3__halo {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
  animation: heroHalo 8s ease-in-out infinite alternate;
}

.hero-v3__halo--one {
  width: 170px;
  height: 170px;
  left: 8%;
  top: 11%;
  background: rgba(239,16,24,.12);
}

.hero-v3__halo--two {
  width: 105px;
  height: 105px;
  right: 10%;
  top: 34%;
  background: rgba(255,255,255,.055);
  animation-delay: -3s;
}

.hero-carnation {
  position: absolute;
  right: 8%;
  top: 7%;
  width: min(76%, 480px);
  aspect-ratio: 1;
  transform: translate3d(calc(var(--stage-x) * .22), calc(var(--stage-y) * .22), 0);
  transition: transform .32s var(--v3-ease);
}

.hero-carnation__petal,
.hero-carnation__core,
.hero-carnation__leaf,
.hero-carnation__stem {
  position: absolute;
  display: block;
}

.hero-carnation__petal {
  width: 28%;
  height: 28%;
  left: 36%;
  top: 25%;
  border-radius: 58% 42% 65% 35% / 42% 62% 38% 58%;
  background: linear-gradient(145deg, #ff3038, #d60b13 72%);
  box-shadow: inset -12px -14px 24px rgba(108,0,5,.18), 0 16px 32px rgba(0,0,0,.08);
  transform-origin: 50% 75%;
  animation: petalBreath 5.4s ease-in-out infinite alternate;
}

.hero-carnation__petal--1 { transform: translate(-34%, -24%) rotate(-42deg); }
.hero-carnation__petal--2 { transform: translate(30%, -28%) rotate(38deg); animation-delay: -.8s; }
.hero-carnation__petal--3 { transform: translate(-42%, 24%) rotate(-92deg); animation-delay: -1.6s; }
.hero-carnation__petal--4 { transform: translate(42%, 26%) rotate(92deg); animation-delay: -2.4s; }
.hero-carnation__petal--5 { width: 31%; height: 31%; transform: translate(0, 22%) rotate(174deg); animation-delay: -3.1s; }

.hero-carnation__core {
  width: 18%;
  height: 18%;
  left: 41%;
  top: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, #ab0810, #69060a);
}

.hero-carnation__stem {
  width: 5%;
  height: 40%;
  left: 49%;
  top: 49%;
  border-radius: 999px;
  background: linear-gradient(180deg, #4b7a59, #28513a);
  transform: rotate(7deg);
}

.hero-carnation__leaf {
  width: 24%;
  height: 9%;
  top: 69%;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(90deg, #4f7d5e, #28513a);
}

.hero-carnation__leaf--left { left: 27%; transform: rotate(-28deg); }
.hero-carnation__leaf--right { left: 48%; transform: rotate(32deg) scaleX(-1); }

.hero-v3__stage-copy {
  position: relative;
  z-index: 4;
  max-width: 440px;
}

.hero-v3__stage-kicker {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,.64);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-v3__stage-copy strong {
  display: block;
  max-width: 420px;
  color: #fff;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hero-v3__stage-copy p {
  max-width: 390px;
  margin: 14px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 14px;
  line-height: 1.55;
}

.hero-v3__floating-card {
  position: absolute;
  z-index: 5;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  backdrop-filter: blur(14px);
  animation: cardFloat 6s ease-in-out infinite alternate;
}

.hero-v3__floating-card span,
.hero-v3__floating-card strong {
  display: block;
}

.hero-v3__floating-card span {
  color: rgba(255,255,255,.58);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero-v3__floating-card strong {
  margin-top: 3px;
  color: #fff;
  font-size: 13px;
}

.hero-v3__floating-card--top { right: 5%; top: 42%; }
.hero-v3__floating-card--bottom { left: 6%; bottom: 31%; animation-delay: -2.8s; }

@keyframes petalBreath {
  from { filter: saturate(.92); scale: .98; }
  to { filter: saturate(1.08); scale: 1.035; }
}

@keyframes heroHalo {
  from { transform: translate3d(0,0,0) scale(.96); }
  to { transform: translate3d(10px,-8px,0) scale(1.08); }
}

@keyframes cardFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* --- Process ------------------------------------------------------------- */
.impact-path-v3 {
  width: min(1280px, calc(100% - clamp(24px, 6vw, 96px))) !important;
  margin-top: -8px !important;
  padding: 12px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 46px rgba(23,62,44,.07) !important;
}

.impact-path-v3 .impact-path__item {
  min-height: 120px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg,#fbfcfb,#f3f7f4) !important;
}

/* --- Home campaign section ---------------------------------------------- */
.home-campaigns-v3 {
  padding-top: clamp(64px, 7vw, 96px) !important;
}

.home-campaigns-v3 .section-heading h2 {
  font-size: clamp(48px, 5.4vw, 76px) !important;
}

.home-campaigns-v3 .fundraiser-card:nth-child(1) {
  border-color: rgba(65,108,79,.20) !important;
  box-shadow: 0 18px 44px rgba(23,62,44,.07) !important;
}

/* --- Campaign cards: photographic-first --------------------------------- */
.fundraiser-card {
  border-radius: 26px !important;
}

.card-media {
  aspect-ratio: 5 / 4 !important;
  background: #edf3ee !important;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.card-media__scrim {
  display: none !important;
}

.card-media-fallback {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.11) 0 52px, transparent 53px),
    radial-gradient(circle at 78% 18%, transparent 0 84px, rgba(255,255,255,.06) 85px 101px, transparent 102px),
    linear-gradient(145deg, #557e62 0%, #31583f 60%, #173e2c 100%) !important;
}

.card-media-fallback::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -24px;
  bottom: -22px;
  border-radius: 58% 42% 64% 36% / 42% 64% 36% 58%;
  background: rgba(239,16,24,.16);
  transform: rotate(20deg);
}

.card-media-fallback__mark {
  position: absolute !important;
  left: 24px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 55% 45% 62% 38% / 43% 60% 40% 57%;
  background: linear-gradient(145deg,#ff343b,#cc0c13);
  box-shadow: 18px -10px 0 rgba(239,16,24,.18), -8px -14px 0 rgba(239,16,24,.13);
}

.card-media-fallback__kicker {
  position: absolute !important;
  left: 24px;
  top: 24px;
  z-index: 2;
  color: rgba(255,255,255,.7) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

.card-body__badge {
  border: 1px solid rgba(65,108,79,.10);
  background: #f2f7f3 !important;
}

.fundraiser-card h3 {
  font-size: clamp(22px, 2.1vw, 28px) !important;
}

.fundraiser-card:hover {
  transform: translateY(-10px) rotateX(.35deg) !important;
  box-shadow: 0 26px 70px rgba(23,62,44,.12) !important;
}

/* --- Create CTA ---------------------------------------------------------- */
.home-create-v3 {
  width: min(1240px, calc(100% - clamp(24px, 6vw, 96px)));
  margin: 0 auto clamp(70px, 8vw, 118px);
  padding: clamp(40px, 5vw, 66px);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 34px;
  overflow: hidden;
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(239,16,24,.25), transparent 13rem),
    linear-gradient(135deg, #214b36, #173e2c 62%, #102e20);
  box-shadow: 0 26px 74px rgba(23,62,44,.14);
}

.home-create-v3 .eyebrow { color: rgba(255,255,255,.68) !important; }
.home-create-v3 .eyebrow::before { background: #ff3038 !important; }
.home-create-v3 h2 {
  max-width: 820px;
  margin: 0;
  color: #fff !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  line-height: 1.02 !important;
}
.home-create-v3 p:not(.eyebrow) {
  max-width: 760px;
  margin: 14px 0 0;
  color: rgba(255,255,255,.68);
}
.home-create-v3 .button {
  min-height: 52px;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(239,16,24,.22) !important;
}

/* --- Catalogue ----------------------------------------------------------- */
.catalogue-heading {
  min-height: 0 !important;
  padding-top: clamp(56px, 6vw, 84px) !important;
  padding-bottom: 34px !important;
}
.catalogue-results {
  padding-top: 18px !important;
}
.catalogue-meta {
  margin-top: 24px !important;
}

/* --- Detail page: image is sacred --------------------------------------- */
.campaign-detail-v2 {
  padding-top: clamp(54px, 6vw, 88px) !important;
}

.campaign-detail__header-v2 {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 28px;
  padding-bottom: 34px !important;
}

.campaign-detail__header-v2 h1 {
  max-width: 980px;
  font-size: clamp(52px, 6.2vw, 88px) !important;
}

.campaign-detail__quick-trust {
  display: grid !important;
  justify-items: end;
  gap: 8px;
}

.campaign-detail__quick-trust span {
  padding: 8px 12px;
  border: 1px solid rgba(65,108,79,.10);
  border-radius: 999px;
  color: #5d685f;
  background: #f6f9f6;
  font-size: 11px;
}

.campaign-cover-wrap-v2 {
  border-radius: 32px !important;
  overflow: hidden;
  background: #edf2ed;
  box-shadow: 0 28px 76px rgba(23,62,44,.11);
}

.campaign-cover-v2 {
  display: block;
  width: 100%;
  height: auto;
  min-height: 520px;
  max-height: 720px;
  object-fit: cover;
  object-position: center center;
}

.campaign-cover-fallback-v2 {
  min-height: 560px !important;
  background:
    radial-gradient(circle at 76% 20%, rgba(255,255,255,.11) 0 72px, transparent 73px),
    radial-gradient(circle at 76% 20%, transparent 0 112px, rgba(255,255,255,.06) 113px 132px, transparent 133px),
    linear-gradient(145deg,#557e62 0%,#31583f 58%,#173e2c 100%) !important;
}

.campaign-cover-fallback-v2__label {
  display: none !important;
}

.campaign-story__content-v2 {
  padding-top: 10px;
}

.donation-panel-v2 {
  border-radius: 28px !important;
  box-shadow: 0 28px 82px rgba(23,62,44,.13) !important;
}

.donation-panel-v2__head {
  align-items: center;
}

.donation-submit {
  min-height: 56px !important;
}

/* --- Assistant: no flying mascot --------------------------------------- */
.carnation-mascot {
  display: none !important;
}

.carnation-assistant__trigger {
  animation: assistantIntro 700ms var(--v3-ease) both;
}

.carnation-assistant__trigger::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  right: 10px;
  top: 8px;
  border-radius: 50%;
  background: var(--v3-red);
  box-shadow: 0 0 0 0 rgba(239,16,24,.2);
  animation: assistantPulse 2.8s ease-out 1.1s 2;
}

.carnation-assistant__panel {
  border-radius: 24px !important;
}

@keyframes assistantIntro {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes assistantPulse {
  0% { box-shadow: 0 0 0 0 rgba(239,16,24,.22); }
  70% { box-shadow: 0 0 0 10px rgba(239,16,24,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,16,24,0); }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero-v3 {
    grid-template-columns: 1fr;
  }
  .hero-v3__stage {
    min-height: 520px;
  }
  .hero-carnation {
    width: min(62%, 420px);
  }
  .home-create-v3 {
    grid-template-columns: 1fr;
  }
  .campaign-detail__header-v2 {
    grid-template-columns: 1fr;
  }
  .campaign-detail__quick-trust {
    justify-items: start;
  }
}

@media (max-width: 680px) {
  .hero-v3 {
    width: calc(100% - 24px);
    min-height: 0;
    margin-top: 18px;
    border-radius: 28px;
  }
  .hero-v3__copy {
    padding: 42px 22px;
  }
  .hero-v3 h1 {
    font-size: clamp(48px, 14vw, 66px) !important;
  }
  .hero-v3__actions .button {
    width: 100%;
    justify-content: center;
  }
  .hero-v3__trust {
    display: grid;
  }
  .hero-v3__stage {
    min-height: 430px;
    padding: 28px 22px;
  }
  .hero-carnation {
    width: 78%;
    right: -4%;
  }
  .hero-v3__floating-card {
    display: none;
  }
  .hero-v3__stage-copy strong {
    font-size: 34px;
  }
  .home-create-v3 {
    width: calc(100% - 24px);
    padding: 34px 24px;
    border-radius: 26px;
  }
  .home-create-v3 .button {
    width: 100%;
    justify-content: center;
  }
  .campaign-cover-v2,
  .campaign-cover-fallback-v2 {
    min-height: 360px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v3__halo,
  .hero-carnation__petal,
  .hero-v3__floating-card,
  .carnation-assistant__trigger::after {
    animation: none !important;
  }
  .hero-carnation {
    transform: none !important;
  }
}