/* ==========================================================================
   Homepage-specific styles
   (Shared components — event-feature, faq, support-card, stats-row,
   section-cta, quote-card__mark, logo-wall__text — now live in components.css
   so every page styles them.)
   ========================================================================== */

/* ---- Hero ---- */
.hero { position: relative; overflow: clip; padding-block: clamp(3.5rem, 3rem + 6vw, 7rem); }
.hero__bg { position: absolute; inset: 0; background: var(--grad-hero); z-index: -2; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  /* faint red + green glows echo the logo's tri-colour without lifting off the navy */
  background:
    radial-gradient(38% 48% at 85% 18%, rgba(236, 43, 52, 0.20), transparent 70%),
    radial-gradient(34% 44% at 8% 92%, rgba(22, 184, 102, 0.16), transparent 70%);
}
.hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__title { font-size: var(--fs-display); color: #fff; line-height: 1.02; margin: var(--space-4) 0 var(--space-5); }
.hero__lead { font-size: var(--fs-lead); color: #cdd3f0; max-width: 46ch; line-height: 1.55; }
.hero__copy .hero__actions { margin-top: var(--space-7); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-7); list-style: none; padding: 0; }
.hero__trust li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: #b9c0e4; }
.hero__trust svg { width: 18px; height: 18px; color: var(--green-500); }

.hero__card {
  background: rgba(255,255,255,0.98); border-radius: var(--radius-xl); padding: var(--space-6);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.5);
  color: var(--ink-900); /* reset: don't inherit the dark section's light text */
}
.hero__card-top { margin-bottom: var(--space-4); }
.hero__card-num { font-family: var(--font-display); font-size: clamp(2.75rem, 2rem + 3vw, 3.75rem); color: var(--blue-700); line-height: 1; letter-spacing: var(--ls-tight); }
.hero__card-sub { color: var(--ink-500); margin-top: var(--space-2); font-size: var(--fs-small); }
.hero__card-list { list-style: none; padding: 0; margin: var(--space-5) 0; display: grid; gap: var(--space-1); }
.hero__card-list li { display: flex; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.hero__card-list li span:last-child { font-family: var(--font-display); color: var(--blue-700); }
.hero__card-list li:last-child { border-bottom: 0; }
.hero__card-link { color: var(--blue-700); }

/* Brand: logo stacked above the impact card in the hero's right column */
.hero__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.hero__logo { width: min(430px, 92%); height: auto; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.35)); }
.hero__logo--top { display: none; } /* mobile-only logo beside the title (shown < 900px) */

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__card { max-width: 460px; }
  .hero__brand { max-width: 460px; margin-inline: auto; }
  /* Logo sits in the blue space beside the heading, matching the interior
     page heroes. Sized in vw so it never crowds the title on narrow phones. */
  .hero__logo { display: none; }
  .hero__logo--top {
    display: block; float: right;
    width: clamp(72px, 23vw, 104px); height: auto;
    margin: 0 0 var(--space-3) var(--space-4); shape-margin: 8px; z-index: 3;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  }
  /* .eyebrow is inline-flex, which makes it an atomic box: it cannot flow
     beside a float and was being pushed below it, which is what left the logo
     stranded in the corner with a gap. Plain inline text flows around it. */
  .hero__copy .eyebrow { display: inline; }
  .hero__copy .eyebrow::before {
    display: inline-block; vertical-align: middle; margin-right: var(--space-2);
  }
  /* The eyebrow is inline now, so the title needs to break to its own line. */
  .hero__title { margin-top: var(--space-4); }
}

/* ---- Recent grants (home) ---- */
.grant-amount { font-family: var(--font-display); color: var(--green-700); font-size: var(--fs-h3); margin: var(--space-2) 0 var(--space-3) !important; }

/* ---- Testimonials carousel (home only) ---- */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; gap: var(--space-6); transition: transform var(--dur-slow) var(--ease-out); padding: 0; margin: 0; list-style: none; }
.carousel__slide { flex: 0 0 calc((100% - (var(--space-6) * 2)) / 3); }
.carousel__slide .quote-card { min-height: 260px; }
@media (max-width: 899px) { .carousel__slide { flex-basis: calc((100% - var(--space-6)) / 2); } }
@media (max-width: 599px) { .carousel__slide { flex-basis: 100%; } }
.carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.carousel__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; display: grid; place-items: center; color: var(--blue-700); transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.carousel__btn:hover { background: var(--blue-050); box-shadow: var(--shadow-sm); }
.carousel__btn svg { width: 22px; height: 22px; }
.carousel__dots { display: flex; gap: var(--space-2); }
.carousel__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--line-strong); padding: 0; transition: width var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.carousel__dots button[aria-current="true"] { width: 26px; border-radius: 5px; background: var(--blue-500); }
.carousel__note { text-align: center; margin-top: var(--space-5); font-size: var(--fs-small); color: var(--ink-400); }

/* ---- News teaser (home only) ---- */
.news-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.news-teaser__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.news-teaser__card h3 { font-size: var(--fs-h3); margin: var(--space-3) 0; }
.news-teaser__card p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.news-teaser__card .link-arrow { color: var(--blue-700); }
@media (max-width: 800px) { .news-teaser { grid-template-columns: 1fr; } }