/* ============================================================
   IDF Bangladesh — Home page
   Hero + impact band. Loaded only on the front page.
   ============================================================ */

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(var(--sp-6), 6vw, var(--sp-8)));
  padding-bottom: clamp(var(--sp-8), 9vw, calc(var(--sp-10) + var(--sp-6)));
  background:
    radial-gradient(1200px 600px at 82% -10%, rgba(197,162,83,.16), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(255,58,9,.10), transparent 55%),
    linear-gradient(160deg, var(--forest) 0%, var(--forest-d) 100%);
}
/* faint dotted texture — depth without noise */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(247,243,237,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: center;
}

.hero__content { max-width: 620px; }
.hero__title { margin-top: var(--sp-4); font-size: var(--fs-900); }
.hero__title-accent { color: var(--gold-rule); }
.hero__lead {
  margin-top: var(--sp-5);
  max-width: 54ch;
  font-size: var(--fs-500);
  color: var(--cream-70);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.hero__trust {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
  font-size: .85rem; color: var(--cream-70); max-width: none;
}
.hero__trust svg { flex: none; color: var(--gold-rule); }

/* Media side */
.hero__media { position: relative; }
.hero__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(247,243,237,.12);
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
/* gentle forest wash so any photo reads as on-brand and text-safe */
.hero__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(19,53,40,.45) 100%);
}

.hero__badge {
  position: absolute;
  left: calc(var(--sp-5) * -1);
  bottom: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--white);
  color: var(--ink);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-width: 300px;
  font-size: .85rem; line-height: 1.35;
}
.hero__badge strong { color: var(--forest); font-family: var(--font-display); }
.hero__badge-icon {
  flex: none;
  display: inline-flex; width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--forest); color: var(--cream);
}

/* ---------------- Impact band ---------------- */
/* Lifts up to overlap the hero, so the numbers bridge dark → light. */
.impact-band { position: relative; z-index: 2; margin-top: clamp(-72px, -6vw, -48px); padding-bottom: var(--sp-8); }
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--forest-08);
  border: 1px solid var(--forest-08);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: 0; padding: 0; list-style: none;
}
.impact-stat {
  background: var(--white);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7)) var(--sp-5);
  text-align: center;
}
.impact-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.impact-num::after { content: ""; display: block; width: 34px; height: 2px; background: var(--gold-rule); margin: var(--sp-3) auto 0; }
.impact-label {
  display: block;
  margin-top: var(--sp-3);
  font-size: .95rem;
  color: var(--muted);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 520px; margin-inline: auto; order: -1; }
  .hero__figure { aspect-ratio: 16 / 10; }
  .hero__badge { left: var(--sp-4); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hero__badge { position: static; margin-top: var(--sp-4); max-width: none; }
  .hero__figure { border-radius: var(--r-lg); }
}

/* ---------------- Mission / dual identity ---------------- */
.mission__grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: start; }
.mission__body h2 { margin-top: var(--sp-3); }
.mission__lead { font-size: var(--fs-500); color: var(--ink); margin-top: var(--sp-5); }
.mission__body > p { margin-top: var(--sp-4); color: var(--ink-70); }
.mission__body .link-arrow { margin-top: var(--sp-5); color: var(--saffron); }

.who-serve { background: var(--forest); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-md); }
.who-serve__title { color: var(--white); font-size: var(--fs-600); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(247,243,237,.14); }
.who-serve__list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.who-serve__list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: .98rem; color: var(--cream-70); }
.who-serve__list svg { flex: none; margin-top: 2px; color: var(--gold-rule); }

/* ---------------- Featured programs ---------------- */
.programs-home__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); max-width: none; margin-bottom: var(--sp-7); }
.programs-home__head .kicker { margin-bottom: var(--sp-3); }
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

/* ---------------- SDG grid (forest) ---------------- */
.sdg-home .section-head { margin-bottom: var(--sp-7); }
.sdg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.sdg-tile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  background: rgba(247,243,237,.05);
  border: 1px solid rgba(247,243,237,.10);
  border-radius: var(--r-md);
  transition: background var(--t-med) var(--ease-silk), transform var(--t-med) var(--ease-silk);
}
.sdg-tile:hover { background: rgba(247,243,237,.09); transform: translateY(-2px); }
.sdg-tile__num { flex: none; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 700; color: var(--white); }
.sdg-tile__name { font-size: .92rem; color: var(--cream); }

@media (max-width: 900px) {
  .mission__grid { grid-template-columns: 1fr; }
  .programs-home__head { flex-direction: column; align-items: flex-start; }
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
  .sdg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .programs-grid { grid-template-columns: 1fr; }
}

/* ---------------- Where your money goes (flow) ---------------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.flow__step { position: relative; }
.flow__num {
  display: inline-flex; width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background-image: var(--cta-grad); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(255,58,9,.25);
}
.flow__title { margin-top: var(--sp-4); font-size: var(--fs-600); }
.flow__step > p { margin-top: var(--sp-2); color: var(--ink-70); font-size: .95rem; }
.flow__step:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 62px; right: calc(var(--sp-6) * -1); height: 2px; background: linear-gradient(90deg, var(--gold-40), transparent); }

/* Latest articles use the global .articles-grid/.article-card (components.css) */

/* ---------------- Gallery teaser ---------------- */
.gallery-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.gallery-cell { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); background: var(--cream-d); }
.gallery-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-silk); }
.gallery-cell:hover img { transform: scale(1.08); }

/* ---------------- Testimonials ---------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.testimonial { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; background: var(--white); border: 1px solid var(--forest-08); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.testimonial blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-500); line-height: 1.5; color: var(--ink); }
.testimonial figcaption { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.testimonial__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial__who { display: flex; flex-direction: column; }
.testimonial__who strong { color: var(--forest); font-family: var(--font-display); }
.testimonial__who small { color: var(--muted); font-size: .85rem; }
.testimonial__photo--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--forest); color: var(--cream); font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.testimonial__prog { display: inline-block; width: fit-content; margin-top: 6px; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--forest); background: var(--gold-20); padding: 3px 9px; border-radius: var(--r-pill); }

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow__step:not(:last-child)::after { display: none; }
  .gallery-strip { grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
}