/* Home page (Phase 2) */

/* Hero: left-weighted type over a dark green shade; photo slots in underneath when supplied */
.hero { position: relative; isolation: isolate; color: var(--white); background: var(--green-900); min-height: min(88vh, 46rem); display: flex; align-items: center; overflow: hidden; }
.hero__img, .hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__img { object-fit: cover; }
.hero__fallback { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l24 24-24 24L4 28z' fill='none' stroke='%23c99a2e' stroke-opacity='.16' stroke-width='1.5'/%3E%3Cpath d='M28 16l12 12-12 12-12-12z' fill='none' stroke='%23c99a2e' stroke-opacity='.12' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/56px 56px,
  radial-gradient(120% 90% at 85% 10%, var(--green-700), var(--green-900) 62%); }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 59 44 / .92) 0%, rgb(11 59 44 / .78) 45%, rgb(11 59 44 / .25) 100%); }
@media (max-width: 47.9375rem) { .hero__shade { background: linear-gradient(180deg, rgb(11 59 44 / .88), rgb(11 59 44 / .82)); } }
.hero__inner { padding-block: var(--s-8); }
.hero__name { margin: 0 0 var(--s-4); font-weight: 600; font-size: var(--fs-300); color: var(--gold-200); letter-spacing: .02em; }
.hero__title { color: var(--white); max-width: 18ch; font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem); text-wrap: pretty; line-height: 1.05; margin-bottom: var(--s-5); }
.hero__line { display: block; }
@media (min-width: 56.25rem) { .hero__title { max-width: none; } }
.hero__text { font-size: var(--fs-500); color: #e9f2ec; max-width: 40rem; margin-bottom: var(--s-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__note { margin: var(--s-6) 0 0; font-size: .8rem; color: var(--gold-200); opacity: .8; }
@media (max-width: 29.9375rem) { .hero__actions .btn { width: 100%; } }


/* What we do */
.objectives { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4) var(--s-7); }
@media (min-width: 56.25rem) { .objectives { grid-template-columns: repeat(2, 1fr); } }
.objectives__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.objectives__mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green-800); color: var(--gold-200); margin-top: .1rem; }

/* Why support */
.why { display: grid; gap: var(--s-6); }
@media (min-width: 56.25rem) { .why { grid-template-columns: 1fr 1.4fr; gap: var(--s-8); } .why__lead { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.why__item { padding-left: var(--s-5); border-left: 4px solid var(--gold-500); }
.why__item p { margin: 0; color: var(--ink-soft); }
.why__title { font-size: var(--fs-600); margin-bottom: var(--s-2); }

/* Donation amounts */
.amounts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); max-width: 46rem; }
@media (min-width: 48rem) { .amounts { grid-template-columns: repeat(3, 1fr); } }
.amount { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; border: 2px solid var(--green-800); border-radius: var(--r-md); background: var(--white); color: var(--green-900); font: 600 var(--fs-600)/1 var(--font-display); text-decoration: none; transition: background-color .15s, color .15s; }
.amount:hover { background: var(--green-800); color: var(--white); }
.amount--other { font: 600 var(--fs-400)/1.2 var(--font-body); border-style: dashed; }

/* Recent activity (empty state + future list) */
.empty { display: grid; justify-items: start; gap: var(--s-2); max-width: 36rem; padding: var(--s-5); border: 1.5px dashed var(--earth-600); border-radius: var(--r-lg); background: var(--cream-50); }
.empty__icon { color: var(--gold-700); }
.empty__title { margin: 0; font: 600 var(--fs-500)/1.3 var(--font-display); color: var(--green-900); }
.empty__text { margin: 0; color: var(--ink-soft); }
.activity { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); max-width: 36rem; }
.activity__item { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); background: var(--cream-50); border-radius: var(--r-md); }
.activity__heart { color: var(--danger); }


.activity__more { margin: var(--s-4) 0 0; }