/* ─── Get Involved: alternating feature showcase ─── */
.involvement-options {
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 16%, rgba(215, 232, 162, .38), transparent 20rem),
    radial-gradient(circle at 94% 82%, rgba(255, 213, 189, .26), transparent 24rem),
    #fffefa;
}

.involvement-options .container {
  position: relative;
  z-index: 1;
}

.involvement-intro {
  max-width: 45rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.involvement-intro .eyebrow,
.feature-number {
  margin: 0 0 .9rem;
  color: var(--al-green, #3d7018);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.involvement-intro h2 {
  margin: 0 0 1rem;
  color: var(--al-green-dark, #315009);
  font-size: clamp(2.45rem, 5vw, 4.5rem);
  line-height: 1.03;
}

.involvement-intro > p:last-child {
  max-width: 38rem;
  margin: 0;
  color: var(--body-muted);
  font-size: clamp(1rem, 1.45vw, 1.15rem);
  line-height: 1.75;
}

.involvement-showcase {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}

.involvement-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, .85fr);
  align-items: center;
  gap: clamp(2.5rem, 8vw, 8rem);
  scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}

.involvement-feature--reverse {
  grid-template-columns: minmax(19rem, .85fr) minmax(0, 1fr);
}

.involvement-feature--reverse {
  grid-template-columns: minmax(20rem, 1fr) minmax(15rem, .72fr);
}

.involvement-media {
  position: relative;
  min-height: clamp(19rem, 35vw, 31rem);
  isolation: isolate;
}

.involvement-media::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1rem 7% 1rem -1rem;
  border: 1px solid rgba(112, 159, 41, .28);
  border-radius: 43% 57% 52% 48% / 44% 42% 58% 56%;
  transform: rotate(-4deg);
}

.involvement-feature--reverse .involvement-media::before {
  inset: -1rem -1rem 1rem 7%;
  transform: rotate(4deg);
}

.involvement-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 9px solid rgba(255, 254, 250, .94);
  border-radius: 43% 57% 52% 48% / 44% 42% 58% 56%;
  box-shadow: 0 1.6rem 3.4rem rgba(48, 78, 22, .18), inset 0 0 0 2px rgba(184, 217, 74, .34);
}

.involvement-feature--reverse .involvement-media img {
  border-radius: 57% 43% 48% 52% / 42% 44% 56% 58%;
}

.involvement-icon {
  position: absolute;
  right: clamp(-.35rem, -1.2vw, -1rem);
  bottom: clamp(-.65rem, -1.5vw, -1.25rem);
  display: grid;
  width: clamp(4.35rem, 7vw, 6.2rem);
  height: clamp(4.35rem, 7vw, 6.2rem);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: linear-gradient(145deg, #fffef9 12%, #eff6cc 100%);
  box-shadow: 0 1rem 2.2rem rgba(48, 78, 22, .2), inset 0 0 0 6px rgba(255, 255, 255, .65);
  color: var(--al-green, #3d7018);
}

.involvement-feature--reverse .involvement-icon {
  right: auto;
  left: clamp(-.35rem, -1.2vw, -1rem);
}

.involvement-icon svg {
  width: 45%;
  height: 45%;
}

.involvement-copy {
  position: relative;
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid rgba(74, 112, 29, .12);
  border-radius: 1.7rem;
  background: rgba(255, 255, 252, .78);
  box-shadow: 0 1.1rem 3rem rgba(48, 78, 22, .07);
}

.involvement-copy::before {
  content: '';
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  width: 3.7rem;
  height: 3.7rem;
  border-top: 1px solid rgba(184, 217, 74, .45);
  border-right: 1px solid rgba(184, 217, 74, .45);
  border-radius: 0 100% 0 0;
  pointer-events: none;
}

.involvement-copy h3 {
  max-width: 30rem;
  margin: 0 0 .9rem;
  color: var(--al-green-dark, #315009);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.05;
}

.involvement-copy > p:not(.feature-number) {
  max-width: 31rem;
  margin: 0 0 1.65rem;
  color: var(--body-muted);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.75;
}

.involvement-copy .btn {
  gap: .65rem;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.involvement-copy .btn span {
  font-size: 1.2em;
  transition: transform .25s ease;
}

.involvement-copy .btn:hover,
.involvement-copy .btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.4rem rgba(235, 84, 72, .2);
}

.involvement-copy .btn:hover span,
.involvement-copy .btn:focus-visible span { transform: translateX(.22rem); }

/* Existing JS adds .visible when each feature reaches the viewport. */
.involvement-feature.fade-in-left,
.involvement-feature.fade-in-right {
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 840px) {
  .involvement-feature,
  .involvement-feature--reverse {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .involvement-feature--reverse .involvement-media,
  .involvement-feature--reverse .involvement-copy { order: initial; }

  .involvement-feature--reverse .involvement-media { order: 1; }
  .involvement-feature--reverse .involvement-copy { order: 2; }

  .involvement-media { min-height: min(76vw, 34rem); }
}

@media (max-width: 640px) {
  .involvement-options { padding-block: 4rem; }
  .involvement-intro { margin-bottom: 3.2rem; }
  .involvement-showcase { gap: 4.25rem; }
  .involvement-media { min-height: 17.5rem; }
  .involvement-media img { border-width: 6px; }
  .involvement-copy { padding: 1.45rem; border-radius: 1.3rem; }
  .involvement-copy h3 { font-size: 2.15rem; }
  .involvement-icon { width: 4.35rem; height: 4.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .involvement-feature,
  .involvement-copy .btn,
  .involvement-copy .btn span { transition: none; }
}

/* Unified image-and-copy panels: intentionally compact so each action reads as one feature. */
.involvement-feature,
.involvement-feature--reverse {
  grid-template-columns: minmax(15rem, .72fr) minmax(20rem, 1fr);
  gap: 0;
  min-height: clamp(18rem, 27vw, 23rem);
  overflow: hidden;
  border: 1px solid rgba(74, 112, 29, .13);
  border-radius: 1.7rem;
  background: rgba(255, 255, 252, .92);
  box-shadow: 0 1.15rem 2.75rem rgba(48, 78, 22, .10);
}

.involvement-feature--reverse {
  grid-template-columns: minmax(20rem, 1fr) minmax(15rem, .72fr);
}

.involvement-feature--reverse .involvement-media { order: 2; }
.involvement-feature--reverse .involvement-copy { order: 1; }

.involvement-media {
  min-height: 100%;
  height: 100%;
  background: #edf4d7;
}

.involvement-media::before { display: none; }

.involvement-media img,
.involvement-feature--reverse .involvement-media img {
  min-height: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.involvement-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.involvement-icon,
.involvement-feature--reverse .involvement-icon {
  right: 1rem;
  bottom: 1rem;
  left: auto;
  width: clamp(3.6rem, 5vw, 4.6rem);
  height: clamp(3.6rem, 5vw, 4.6rem);
}

.involvement-feature--reverse .involvement-icon { right: auto; left: 1rem; }

@media (max-width: 840px) {
  .involvement-feature,
  .involvement-feature--reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .involvement-media { min-height: 14.5rem; height: 14.5rem; }
  .involvement-media img,
  .involvement-feature--reverse .involvement-media img { min-height: 14.5rem; height: 14.5rem; }
}

@media (max-width: 640px) {
  .involvement-feature,
  .involvement-feature--reverse { border-radius: 1.3rem; }
  .involvement-media { min-height: 12.5rem; height: 12.5rem; }
  .involvement-media img,
  .involvement-feature--reverse .involvement-media img { min-height: 12.5rem; height: 12.5rem; }
  .involvement-copy { padding: 1.65rem; }
  .involvement-icon,
  .involvement-feature--reverse .involvement-icon { width: 3.5rem; height: 3.5rem; }
}

@media (max-width: 840px) {
  .involvement-feature--reverse .involvement-media { order: 1; }
  .involvement-feature--reverse .involvement-copy { order: 2; }
}

/* Compact, organic photo moments: each action keeps its own soft color story. */
.involvement-feature,
.involvement-feature--reverse {
  grid-template-columns: minmax(12rem, .55fr) minmax(20rem, 1.45fr);
  min-height: clamp(18rem, 24vw, 21rem);
  position: relative;
  isolation: isolate;
}

.involvement-feature--reverse {
  grid-template-columns: minmax(20rem, 1.45fr) minmax(12rem, .55fr);
}

.involvement-feature--volunteer { --feature-tint: #edf5db; --feature-accent: #709334; }
.involvement-feature--events { --feature-tint: #fff0e8; --feature-accent: #d9816d; }
.involvement-feature--fundraise { --feature-tint: #f8f0d8; --feature-accent: #aa8134; }
.involvement-feature--partners { --feature-tint: #eaf2e6; --feature-accent: #587c4b; }

.involvement-feature::after {
  content: '♥';
  position: absolute;
  z-index: -1;
  right: 1.65rem;
  bottom: 1rem;
  color: var(--feature-accent, #709334);
  font: 2.7rem/1 Arial, sans-serif;
  opacity: .14;
  pointer-events: none;
}

.involvement-feature--reverse::after { right: auto; left: 1.65rem; }

.involvement-media {
  min-height: 0;
  height: auto;
  display: grid;
  place-items: stretch;
  margin: 1.1rem 0 1.1rem 1.1rem;
  padding: .5rem;
  overflow: hidden;
  background: var(--feature-tint, #edf5db);
  border-radius: 42% 58% 48% 52% / 48% 40% 60% 52%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feature-accent, #709334) 22%, white), 0 .7rem 1.4rem rgba(48, 78, 22, .12);
}

.involvement-feature--reverse .involvement-media {
  margin: 1.1rem 1.1rem 1.1rem 0;
  border-radius: 58% 42% 52% 48% / 40% 48% 52% 60%;
}

.involvement-media img,
.involvement-feature--reverse .involvement-media img {
  min-height: 0;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  animation: al-involvement-photo-drift 8s ease-in-out infinite;
  will-change: transform;
}

.involvement-feature--events .involvement-media { border-radius: 28% 72% 40% 60% / 55% 35% 65% 45%; }
.involvement-feature--fundraise .involvement-media { border-radius: 58% 42% 64% 36% / 34% 52% 48% 66%; }
.involvement-feature--partners .involvement-media { border-radius: 48% 52% 30% 70% / 60% 44% 56% 40%; }

.involvement-icon,
.involvement-feature--reverse .involvement-icon {
  right: .65rem;
  bottom: .65rem;
  width: clamp(3rem, 3.6vw, 3.75rem);
  height: clamp(3rem, 3.6vw, 3.75rem);
  color: var(--feature-accent, #709334);
  background: #fffef9;
  box-shadow: 0 .5rem 1.2rem rgba(48, 78, 22, .16), inset 0 0 0 5px var(--feature-tint, #edf5db);
}

.involvement-feature--reverse .involvement-icon { right: auto; left: .65rem; }

.involvement-copy { padding: clamp(1.75rem, 3vw, 2.75rem); }
.involvement-copy .feature-number { color: var(--feature-accent, #709334); }

@keyframes al-involvement-photo-drift {
  0%, 100% { transform: scale(1.01) translate3d(0, 0, 0); }
  50% { transform: scale(1.045) translate3d(-.45%, -.65%, 0); }
}

.involvement-feature--reverse .involvement-media img { animation-delay: -3s; }
.involvement-feature:hover .involvement-media img { animation-play-state: paused; transform: scale(1.06); }

@media (max-width: 840px) {
  .involvement-feature,
  .involvement-feature--reverse { grid-template-columns: 1fr; }
  .involvement-media,
  .involvement-feature--reverse .involvement-media {
    min-height: 13rem;
    height: 13rem;
    margin: 1rem 1rem 0;
  }
  .involvement-feature--reverse .involvement-media { order: 1; }
  .involvement-feature--reverse .involvement-copy { order: 2; }
}

@media (max-width: 640px) {
  .involvement-media,
  .involvement-feature--reverse .involvement-media { min-height: 11rem; height: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  .involvement-media img,
  .involvement-feature:hover .involvement-media img { animation: none; transform: none; }
}