/* ==========================================================================
   One Kind World Foundation — components.css
   Reusable section components: marquee, mission, stats, pillars, campaigns,
   programs index, science cards, quotes, donation widget, newsletter, footer.
   ========================================================================== */

/* ---------- Marquee strip ------------------------------------------------- */
.marquee {
  background: var(--color-terra); color: var(--color-cream); overflow: hidden;
  padding-block: 14px; white-space: nowrap; -webkit-user-select: none; user-select: none;
}
.marquee__track { display: inline-flex; gap: 0; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: inline-flex; align-items: center; }
.marquee__item { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); padding-inline: var(--space-3); display: inline-flex; align-items: center; }
.marquee__item::after { content: '·'; margin-left: var(--space-3); opacity: 0.5; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Mission ------------------------------------------------------- */
.mission__grid { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-8); align-items: start; }
.mission__aside .rule { margin-top: var(--space-3); }
.mission__body { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.6; color: var(--color-text); max-width: 620px; font-weight: 400; }
.mission__pull { margin-top: var(--space-5); font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); max-width: 560px; padding-left: var(--space-3); border-left: 2px solid var(--color-stone); }

/* ---------- Stats --------------------------------------------------------- */
.stats { position: relative; overflow: hidden; }
.stats__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.1; }
.stats__bg img { width: 100%; height: 100%; object-fit: cover; }
.stats .container { position: relative; z-index: 1; }
.stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-stone); border: 1px solid var(--color-stone); border-radius: var(--radius-lg); overflow: hidden; }
.stat-card { background: var(--color-cream); padding: var(--space-6); }
.stat-card .num { font-family: var(--font-serif); font-weight: 700; font-size: clamp(36px, 5vw, var(--text-4xl)); color: var(--color-forest); line-height: 1; letter-spacing: -0.02em; }
.stat-card .desc { margin-top: var(--space-2); color: var(--color-text-mid); font-size: var(--text-base); max-width: 34ch; }
.stats__full { margin-top: var(--space-4); background: var(--color-forest); color: var(--color-sage-light); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); }
.stats__full .big { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.5; color: var(--color-cream); }
.stats__full .src { display: block; margin-top: var(--space-2); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-sage); }

/* ---------- Pillars (what we do) ------------------------------------------ */
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.pillar { padding: var(--space-5); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 280px; transition: var(--transition); border: 1px solid transparent; }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pillar--dark { background: var(--color-forest); color: var(--color-sage-light); }
.pillar--dark h3 { color: var(--color-cream); }
.pillar--terra { background: var(--color-terra); color: #fff; }
.pillar--terra h3 { color: #fff; }
.pillar--light { background: var(--color-cream-dark); color: var(--color-text-mid); border-color: var(--color-stone); }
.pillar__icon { width: 44px; height: 44px; margin-bottom: var(--space-3); }
.pillar__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.pillar h3 { margin-bottom: var(--space-2); }
.pillar p { font-size: var(--text-sm); line-height: 1.65; }

/* ---------- Campaign cards ------------------------------------------------ */
.campaigns__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.campaign-card { background: var(--color-cream); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: var(--transition); }
.campaign-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.campaign-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.campaign-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.campaign-card:hover .campaign-card__media img { transform: scale(1.05); }
.campaign-card__tag { position: absolute; top: var(--space-2); left: var(--space-2); background: rgba(20,31,26,0.82); color: var(--color-cream); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); }
.campaign-card__body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.campaign-card__body h3 { color: var(--color-text); margin-bottom: var(--space-2); font-size: var(--text-xl); }
.campaign-card__body p { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.6; flex: 1; }
.progress { margin: var(--space-3) 0 var(--space-2); }
.progress__bar { height: 7px; background: var(--color-stone); border-radius: var(--radius-pill); overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--color-terra); border-radius: var(--radius-pill); transition: width 1.4s cubic-bezier(.2,.7,.2,1); }
.progress__meta { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.03em; }
.progress__meta .pct { color: var(--color-terra); font-weight: 600; }
.campaign-card .arrow-link { margin-top: var(--space-3); }

/* ---------- Programs index ------------------------------------------------ */
.programs__list { border-top: 1px solid var(--color-stone); }
.program-row { display: grid; grid-template-columns: 64px 1fr auto 32px; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--color-stone); transition: var(--transition); color: var(--color-text); }
.program-row:hover { background: var(--color-cream-dark); padding-left: var(--space-3); }
.program-row__num { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-text-muted); }
.program-row__title { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-text); }
.program-row__cat { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.program-row__arrow { color: var(--color-terra); transition: transform 0.25s ease; justify-self: end; }
.program-row:hover .program-row__arrow { transform: translateX(5px); }
.program-row:hover .program-row__num { color: var(--color-terra); }

/* ---------- Science cards ------------------------------------------------- */
.science__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.science-card { background: var(--color-cream); border: 1px solid var(--color-stone); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; }
.science-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.science-card .kicker { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-terra); font-weight: 500; margin-bottom: var(--space-2); display: block; }
.science-card p { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-mid); flex: 1; }
.science-card .src { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-stone); font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }

/* ---------- Quote / testimonial ------------------------------------------ */
.quote { text-align: center; }
.quote__mark { font-family: var(--font-serif); font-size: 120px; line-height: 0.6; color: var(--color-stone); display: block; height: 70px; }
.quote__text { font-family: var(--font-serif); font-style: italic; font-size: var(--text-2xl); line-height: 1.45; max-width: 680px; margin: 0 auto var(--space-3); color: var(--color-text); }
.quote__attr { font-weight: 600; font-size: var(--text-base); color: var(--color-forest); }
.quote__sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 4px; }
.quote__divider { width: 40px; height: 1px; background: var(--color-stone); margin: var(--space-6) auto; }
.quote__small { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); color: var(--color-text-mid); max-width: 560px; margin: 0 auto; }
.quote__small cite { display: block; font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- Donation CTA + widget ----------------------------------------- */
.donate-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.donate-cta__grid--single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.donate-cta__copy h2 { color: var(--color-cream); margin-block: var(--space-2) var(--space-3); font-weight: 400; }
.donate-cta__copy h2 em { font-weight: 600; }
.donate-cta__copy p { color: var(--color-sage-light); font-size: var(--text-sm); line-height: 1.7; max-width: 46ch; }

.donate-widget { background: var(--color-cream); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-lift); color: var(--color-text); }
.donate-widget__tabs { display: flex; gap: var(--space-3); border-bottom: 1px solid var(--color-stone); margin-bottom: var(--space-4); }
.donate-tab { padding: 10px 2px; font-weight: 500; font-size: var(--text-sm); color: var(--color-text-muted); position: relative; letter-spacing: 0.02em; }
.donate-tab.is-active { color: var(--color-forest); }
.donate-tab.is-active::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--color-terra); }
.donate-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); margin-bottom: var(--space-2); }
.amount-btn { padding: 14px 0; border: 1px solid var(--color-stone); border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-base); background: var(--color-cream); transition: var(--transition); color: var(--color-text); }
.amount-btn:hover { border-color: var(--color-forest); }
.amount-btn.is-active { background: var(--color-forest); color: var(--color-cream); border-color: var(--color-forest); }
.amount-other { margin-bottom: var(--space-3); }
.amount-other label { display: block; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.amount-other input { width: 100%; padding: 13px 14px; border: 1px solid var(--color-stone); border-radius: var(--radius-md); background: #fff; font-size: var(--text-base); }
.amount-other input:focus { outline: none; border-color: var(--color-terra); }
.donate-impact { background: var(--color-cream-dark); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.5; margin-bottom: var(--space-3); min-height: 58px; display: flex; align-items: center; }
.donate-fine { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin-top: var(--space-2); letter-spacing: 0.02em; }
.donate-pledge { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-stone); }
.pledge-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--color-forest); color: var(--color-sage-light); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; border-radius: var(--radius-pill); margin-bottom: var(--space-2); }
.donate-pledge p { font-size: var(--text-sm); color: var(--color-text-mid); }
.donate-pledge a { color: var(--color-terra); font-weight: 500; }

/* ---------- Newsletter ---------------------------------------------------- */
.newsletter { text-align: center; }
.newsletter__inner { max-width: 560px; margin-inline: auto; }
.newsletter h2 { margin-bottom: var(--space-2); }
.newsletter p { color: var(--color-text-mid); margin-inline: auto; margin-bottom: var(--space-4); }
.newsletter__form { display: flex; gap: var(--space-1); background: #fff; border: 1px solid var(--color-stone); border-radius: var(--radius-pill); padding: 6px; max-width: 460px; margin: 0 auto var(--space-2); }
.newsletter__form input { flex: 1; border: none; background: transparent; padding: 10px 18px; font-size: var(--text-base); }
.newsletter__form input:focus { outline: none; }
.newsletter__form .btn { padding-inline: var(--space-4); }
.newsletter__fine { font-size: var(--text-xs); color: var(--color-text-muted); }
.newsletter__social { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.newsletter__social a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--color-stone); border-radius: var(--radius-pill); color: var(--color-text-mid); transition: var(--transition); }
.newsletter__social a:hover { background: var(--color-forest); color: var(--color-cream); border-color: var(--color-forest); transform: translateY(-2px); }
.newsletter__social svg { width: 18px; height: 18px; }

/* ---------- Footer -------------------------------------------------------- */
.footer { background: var(--color-dark); color: var(--color-sage-light); padding-block: var(--space-10) var(--space-5); }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1.1fr; gap: var(--space-8); align-items: start; }
.footer__brand .brand-name { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-cream); display: block; }
.footer__brand .brand-sub { font-family: var(--font-serif); font-style: italic; color: var(--color-sage); display: block; margin-bottom: var(--space-3); }
.footer__brand .tagline { font-family: var(--font-serif); font-style: italic; color: var(--color-sage-light); font-size: var(--text-base); margin-bottom: var(--space-3); }
.footer__brand .ein { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-sage); }
.footer h4 { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-sage); margin-bottom: var(--space-3); font-weight: 600; }
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-1); }
.footer__col a { font-size: var(--text-sm); color: var(--color-sage-light); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-cream); }
.footer__legal .btn { margin-bottom: var(--space-3); }
.footer__legal p { font-size: var(--text-xs); line-height: 1.7; color: var(--color-sage); margin-bottom: var(--space-3); }
.footer__legal a { display: inline-block; font-size: var(--text-xs); color: var(--color-sage-light); margin-right: var(--space-2); }
.footer__legal a:hover { color: var(--color-cream); }
.footer__bottom { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid rgba(184,212,188,0.15); font-size: var(--text-xs); color: var(--color-sage); letter-spacing: 0.04em; }

/* ---------- Generic editorial split (interior pages) ---------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-card); }
.split__body h2 { margin-bottom: var(--space-3); }
.split__body p + p { margin-top: var(--space-3); }
.prose p { color: var(--color-text-mid); margin-bottom: var(--space-3); max-width: 68ch; }
.prose h3 { margin: var(--space-5) 0 var(--space-2); }

/* value / governance cards */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.info-card { background: var(--color-cream); border: 1px solid var(--color-stone); border-radius: var(--radius-lg); padding: var(--space-4); }
.info-card h4 { font-size: var(--text-lg); margin-bottom: var(--space-1); color: var(--color-forest); }
.info-card p { font-size: var(--text-sm); color: var(--color-text-mid); }

.callout { background: var(--color-forest); color: var(--color-sage-light); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }
.callout h2 { color: var(--color-cream); margin-bottom: var(--space-2); }
.callout p { color: var(--color-sage-light); max-width: 50ch; margin: 0 auto var(--space-4); }

/* ---------- Figures band (at-a-glance stats) ------------------------------ */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.figure { border-left: 1px solid rgba(245,239,224,0.22); padding-left: var(--space-3); }
.figure__num { font-family: var(--font-serif); font-weight: 700; font-size: clamp(34px, 4vw, var(--text-4xl)); line-height: 1; letter-spacing: -0.02em; color: var(--color-cream); }
.figure__label { margin-top: var(--space-1); font-size: var(--text-sm); line-height: 1.4; color: var(--color-sage-light); }
.section--cream .figure { border-left-color: var(--color-stone); }
.section--cream .figure__num { color: var(--color-forest); }
.section--cream .figure__label { color: var(--color-text-mid); }

/* ---------- Field notes --------------------------------------------------- */
.note-card { background: var(--color-cream); border: 1px solid var(--color-stone); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; }
.note-card .note-date { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-terra); font-weight: 500; margin-bottom: var(--space-1); }
.note-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.note-card p { font-size: var(--text-sm); color: var(--color-text-mid); line-height: 1.6; }