/* Homepage-specific section layout - donor-focused redesign. */

/* Every section heading gets consistent breathing room below it (used to
   come from a .section-heading-wrap wrapper div, now applied directly so
   markup doesn't need an extra wrapper on every section). */
.section-heading {
  margin-bottom: var(--space-10);
}

/* Hero */
.hero {
  background-color: var(--color-green-50);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-16);
}

.hero__title {
  font-size: var(--font-size-3xl);
}

.hero__description {
  max-width: 34rem;
  margin-top: var(--space-6);
  font-size: var(--font-size-md);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.hero__trust .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-green-700);
}

.hero__visual {
  position: relative;
  /* No fixed/aspect-ratio-locked height - the panel sizes to its content,
     so a longer live figure (e.g. a large formatted total) never gets
     clipped on any screen size or browser. */
  width: 100%;
}

/* Professional "Our Impact" visual - replaces the old decorative panel with
   a real data panel using the same live figures shown further down the
   page (see PublicImpactService / the "impact" section's stat_cards). */
.hero-impact-panel {
  width: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background-image: linear-gradient(135deg, var(--color-green-800), var(--color-green-700) 55%, var(--color-green-900));
  box-shadow: var(--shadow-lg);
}

.hero-impact-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-impact-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.12);
}

.hero-impact-panel__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gold-400);
}

.hero-impact-panel__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
}

.hero-impact-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.hero-impact-panel__stat {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.06);
  /* min-width: 0 lets the value/label truncate-wrap instead of forcing the
     grid track (and the whole hero) wider than the viewport on narrow
     phones with a long formatted number - part of preventing horizontal
     overflow site-wide. */
  min-width: 0;
}

.hero-impact-panel__value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-white);
  overflow-wrap: break-word;
  word-break: break-word;
}

.hero-impact-panel__label {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.7);
}

.hero-impact-panel__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gold-400);
}

.hero-impact-panel__link .icon {
  width: 1rem;
  height: 1rem;
}

.hero-impact-panel__link:hover {
  color: var(--color-gold-500);
}

/* Grids shared across sections */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--announcements,
.grid--testimonials,
.grid--winners,
.grid--community-preview {
  grid-template-columns: 1fr;
}

.grid--stats {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.grid--impact-tiers {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* How Scholar Ghana works - semester model points */
.semester-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 44rem;
  margin-inline: auto;
}

.semester-point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.semester-point__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background-color: var(--color-green-100);
}

.semester-point__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-green-700);
}

.semester-point p {
  padding-top: var(--space-1);
  font-weight: 500;
}

/* Visual timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 20rem;
  margin-inline: auto;
}

.timeline-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-left: 2px dashed var(--color-border);
  padding-left: var(--space-6);
  margin-left: 1.375rem;
}

.timeline-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline-step__marker {
  position: absolute;
  left: -1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  border: 3px solid var(--color-gold-500);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.timeline-step__marker .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-green-700);
}

.timeline-step__title {
  font-weight: 600;
}

.timeline-step__description {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Why donate */
.why-donate {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.why-donate__points {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.why-donate__point {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-weight: 500;
}

.why-donate__point .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-green-700);
}

/* Donation impact tier cards */
.impact-tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.impact-tier-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold-500);
}

/* Icon + GHS amount + "/" + USD amount all on one horizontal line -
   flex-wrap is a safety net only (font sizes/gaps below are chosen to fit
   on one line at every card width down to the smallest supported phone). */
.impact-tier-card__amount-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.impact-tier-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-gold-100);
}

.impact-tier-card__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gold-600);
}

.impact-tier-card__amount {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-green-800);
  overflow-wrap: break-word;
}

.impact-tier-card__usd {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.impact-tier-card__title {
  font-weight: 600;
}

.impact-tier-card__description {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  flex-grow: 1;
}

.impact-tier-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-green-700);
}

.impact-tier-card__cta .icon {
  width: 1rem;
  height: 1rem;
}

/* Reusable donate CTA banner */
.cta-banner {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  border-radius: var(--radius-xl);
}

.cta-banner--green {
  background-image: linear-gradient(135deg, var(--color-green-800), var(--color-green-900));
}

.cta-banner--gold {
  background-image: linear-gradient(135deg, var(--color-green-900), var(--color-green-700));
}

.cta-banner__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gold-400);
}

.cta-banner__title {
  font-size: var(--font-size-2xl);
  color: var(--color-white);
}

.cta-banner__description {
  max-width: 34rem;
  margin-inline: auto;
  margin-top: var(--space-4);
  font-size: var(--font-size-md);
  color: rgba(255, 255, 255, 0.8);
}

.cta-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Scholarship winners */
.winner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.winner-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-green-100);
  color: var(--color-green-800);
  font-weight: 700;
  font-size: var(--font-size-lg);
}

.winner-card__avatar--photo {
  object-fit: cover;
}

.winner-card__name {
  font-weight: 700;
  font-size: var(--font-size-md);
}

.winner-card__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.winner-card__note {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Recent donor impact highlights */
.donor-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 40rem;
  margin-inline: auto;
}

.donor-highlight-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.donor-highlight-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-gold-100);
}

.donor-highlight-card__icon .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-gold-600);
}

.donor-highlight-card__name {
  font-weight: 600;
}

.donor-highlight-card__name span {
  font-weight: 400;
  color: var(--color-text-muted);
}

.donor-highlight-card__message {
  margin-top: var(--space-1);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.donor-highlight-card__date {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.empty-section-note {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
  color: var(--color-text-muted);
}

/* Scholars Community homepage preview - deliberately non-interactive
   (click-through only), see community_preview_card.php. */
.community-preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

.community-preview-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold-500);
}

.community-preview-card__title {
  margin-top: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-charcoal);
}

.community-preview-card__excerpt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  flex-grow: 1;
}

.community-preview-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.community-preview-card__stats {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.community-preview-card__stats .icon {
  width: 0.9rem;
  height: 0.9rem;
}

/* Announcements */
.announcement-card {
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.announcement-card__title {
  margin-top: var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.announcement-card__date {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.announcement-card__summary {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

/* Testimonials */
.testimonial-card {
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.testimonial-card .icon--quote {
  width: 2rem;
  height: 2rem;
  color: var(--color-gold-400);
}

.testimonial-card__quote {
  margin-top: var(--space-4);
  font-size: var(--font-size-md);
}

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.testimonial-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background-color: var(--color-green-100);
  color: var(--color-green-800);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.testimonial-card__name {
  font-weight: 700;
}

.testimonial-card__role,
.testimonial-card__scholarship {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Scroll-reveal animation. [data-reveal] elements are fully visible by
   default (progressive enhancement) - assets/js/scroll-reveal.js is solely
   responsible for adding .reveal-pending (the hidden starting state) right
   before it starts observing, so if that script never runs or errors,
   content simply stays visible rather than being permanently hidden by
   CSS alone. Respects prefers-reduced-motion (base.css zeroes transition
   durations globally, and scroll-reveal.js skips the hidden state entirely
   under that setting). */
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].reveal-pending.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Error pages (404/500) */
.error-page {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.error-page__title {
  font-size: var(--font-size-3xl);
}

.error-page__description {
  margin-top: var(--space-4);
}

.error-page__actions {
  margin-top: var(--space-8);
}