/* ═══════════════════════════════════════════════════════════════════
   Charity event page — accent + specific patterns
   Inherits design system from /styles.css
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* HPA teal accent for this page */
  --c-accent:      #0891B2;
  --c-accent-hi:   #06B6D4;
  --c-accent-soft: rgba(8, 145, 178, 0.12);
}

/* Hero with HPA blue radial */
.hero-charity {
  background:
    radial-gradient(ellipse 70% 50% at 50% 25%, rgba(8, 145, 178, 0.18), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 85%, rgba(212, 165, 116, 0.08), transparent 65%);
}

/* Brand mark for header */
.brand-mark {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-crimson), #991B1B);
  color: #fff;
  font-weight: 800; font-family: var(--font-display);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}

/* Pull quote — Kevin's words */
.pull-quote {
  border-left: 4px solid var(--c-accent);
  padding: 18px 24px;
  margin: 40px 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--c-text);
  background: var(--c-accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .85rem;
  color: var(--c-text-dim);
  letter-spacing: .04em;
}

/* Artist card on charity page */
.artist-card .artist-style {
  font-size: .82rem;
  color: var(--c-gold);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 6px 0 12px;
}
.artist-card .card-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--c-accent);
  font-weight: 600;
  font-size: .9rem;
  font-family: var(--font-display);
}
.artist-card .card-link:hover { color: var(--c-accent-hi); }

/* Donate tiers */
.donate-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 32px 0;
}
.donate-tier {
  display: block;
  background: var(--c-bg-3);
  border: 2px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 24px 16px;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.donate-tier:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.donate-tier strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--c-accent);
  margin-bottom: 6px;
}
.donate-tier span {
  font-size: .82rem;
  color: var(--c-text-dim);
}
.donate-tier-featured {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* Share buttons */
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* Section-head paragraph */
.section-head p {
  color: var(--c-text-dim);
  margin-top: 8px;
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .pull-quote { padding: 14px 18px; }
  .donate-tier { padding: 18px 12px; }
  .donate-tier strong { font-size: 1.6rem; }

  /* Hero text safety */
  .hero h1 { overflow-wrap: anywhere; word-break: normal; max-width: 100%; }
  h1, h2, h3, .hero-tag, p {
    overflow-wrap: break-word; word-break: normal; hyphens: auto; max-width: 100%;
  }
  .hero h1 { font-size: 1.6rem !important; line-height: 1.2; padding: 0 16px; }
  .hero-tag { font-size: .95rem; padding: 0 16px; max-width: 100%; }
  .hero-trust { gap: 8px; padding: 0 16px; flex-direction: column; align-items: center; }
  .hero-trust li { font-size: .78rem; }
  .header-cta { display: none; }
  .brand-text small { font-size: .65rem; }
  .container, .container-narrow { padding-left: 16px !important; padding-right: 16px !important; }

  /* Sticky CTA not overlapping content too much */
  body { padding-bottom: 80px; }
}