/* ══════════════════════════════════════════════════════════
   SUPPORT STRIP — Membership + donation CTAs below hero
══════════════════════════════════════════════════════════ */

.support-strip {
  scroll-margin-top: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-top: 2px solid var(--red);
}

/* ─── Card base ─── */
.support-card {
  position: relative;
  overflow: hidden;
  transition: background .2s;
}

/* CI texture overlay */
.support-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--ci-texture); background-size: 18.75rem; opacity: .12;
  z-index: 0;
}

.support-card-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .75rem;
  padding: 2.5rem 2.5rem 2.75rem;
  height: 100%;
}

/* ─── Primary card (membership) ─── */
.support-card--primary {
  background-color: var(--red-d);
  background-image:
  radial-gradient(circle at 18% 22%, rgba(0,0,0,0.0) 0 6%, transparent 20%),
  radial-gradient(circle at 72% 35%, rgba(0,0,0,0.0) 0 9%, transparent 24%),
  radial-gradient(circle at 30% 78%, rgba(0,0,0,0.0) 0 10%, transparent 24%),
  radial-gradient(circle at 82% 76%, rgba(0,0,0,0.0) 0 11%, transparent 25%),
  linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}
/* Noise overlay via pseudo-element — avoids Safari background-blend-mode bug */
.support-card--primary::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .08;
  mix-blend-mode: overlay;
}
.support-card--primary:hover { background-color: var(--red); }

.support-card--primary .support-card-icon { color: var(--gray-100); }
.support-card--primary .support-card-eyebrow { color: var(--gray-100); }
.support-card--primary .support-card-title { color: var(--white); }
.support-card--primary .support-card-title em { color: var(--white); font-style: normal; opacity: .85; }
.support-card--primary .support-card-body { color: var(--gray-100); }
.support-card--primary .support-card-incentive { color: var(--gray-100); border-color: var(--gray-300); }
.support-card--primary .support-card-incentive svg { stroke: var(--gray-100); }

/* ─── Secondary card (donation) ─── */
.support-card--secondary {
  background: var(--surface);
}
.support-card--secondary:hover { background: var(--surface2); }

.support-card--secondary .support-card-icon { color: var(--red); }
.support-card--secondary .support-card-eyebrow { color: var(--red); }
.support-card--secondary .support-card-title { color: var(--white); }
.support-card--secondary .support-card-title em { color: var(--red); font-style: normal; }
.support-card--secondary .support-card-body { color: var(--muted); }

/* ─── Elements ─── */
.support-card-icon {
  margin-bottom: .25rem;
}
.support-card-icon svg {
  display: block;
  stroke: currentColor; fill: none;
}

.support-card-eyebrow {
  font-size: 1.2rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase;
}

.support-card-title {
  font-family: 'Teko', sans-serif;
  font-size: clamp(1.625rem, 2.5vw, 2.125rem);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1;
  margin: 0;
}

.support-card-body {
  line-height: 1.5;
  max-width: 26rem;
  margin-bottom: .25rem;
}

/* Incentive pill — membership only */
.support-card-incentive {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: 1.2rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid; padding: .3rem .6rem;
  margin-bottom: .25rem;
}
.support-card-incentive svg { flex-shrink: 0; }

/* Buttons use the global .btn-primary / .btn-secondary classes from shared.css */
.support-card-inner .btn-primary,
.support-card-inner .btn-primary-invert,
.support-card-inner .btn-secondary { margin-top: auto; }

/* ─── Responsive ─── */
@media (max-width: 48rem) {
  .support-strip {
    grid-template-columns: 1fr;
  }
  .support-card--primary {
    border-right: none;
    border-bottom: 1px solid var(--subtle);
  }
  .support-card-inner {
    padding: 2rem 1.5rem 2.25rem;
  }
}

/* iOS Safari: background-blend-mode darkens red to near-black */
@supports (-webkit-touch-callout: none) {
  .support-card--primary {
    background-image: none;
    background-blend-mode: normal;
  }
  .support-card--primary::before {
    mix-blend-mode: normal;
  }
}