/* ===========================================================================
   IHF PROJECT PAGES  ·  css/ihf-project.css
   ---------------------------------------------------------------------------
   Lifted unchanged from the original project pages so that the database driven
   page at /project/name looks exactly like the hand built ones it replaces.

   Keeping it in one file means a change here updates every project page at
   once, rather than needing the same edit repeated in five places.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

  :root {
    --green:       #1a6b4a;
    --green-light: #2EC774;
    --green-mid:   #27AE60;
    --gold:        #F5A623;
    --gold-light:  #FCD34D;
    --charcoal:    #0d1b14;
    --charcoal-2:  #162b1e;
    --cream:       #f4f9f6;
    --cream-2:     #edf5f0;
    --text:        #1a2e22;
    --text-muted:  #4a6b57;
    --white:       #FFFFFF;
    --border:      rgba(26,107,74,0.12);
    --font-display:'Playfair Display', Georgia, serif;
    --font-body:   'Outfit', 'Helvetica Neue', sans-serif;
    --ease-out:    cubic-bezier(0.22,1,0.36,1);
    --shadow-sm:   0 4px 16px rgba(26,107,74,0.10);
    --shadow-md:   0 8px 40px rgba(26,107,74,0.15);
  }

  body  { font-family:var(--font-body); color:var(--text); background:var(--cream); }
  a     { text-decoration:none; color:inherit; }
  img   { display:block; max-width:100%; }
  p, li { line-height:1.85; color:var(--text-muted); font-size:15.5px; }
  ul    { padding-left:20px; margin-bottom:16px; }
  li    { margin-bottom:8px; }
  ul ul { margin-top:8px; }
  strong{ color:var(--text); }
  em    { color:var(--green); font-style:italic; }

  @keyframes proj-in { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
  @keyframes spin     { to{transform:rotate(360deg)} }
  @keyframes bar      { from{width:0} to{width:100%} }
  @keyframes dot-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(46,199,116,0.5)} 50%{box-shadow:0 0 0 8px rgba(46,199,116,0)} }

  /* ── Loader ─────────────────────────────────────────────────── */
  #ihf-loader {
    position:fixed; inset:0; z-index:9999; background:var(--charcoal);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
    transition:opacity 0.9s var(--ease-out),visibility 0.9s;
  }
  #ihf-loader.out { opacity:0; visibility:hidden; }
  .loader-logo-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
  .loader-ring {
    position:absolute; width:120px; height:120px; border-radius:50%;
    border:2px solid transparent;
    border-top-color:var(--green-light); border-right-color:var(--gold);
    animation:spin 1.4s linear infinite;
  }
  .loader-ring-2 { width:100px; height:100px; border-top-color:var(--green); border-right-color:transparent; animation-duration:1s; animation-direction:reverse; }
  .loader-logo-img { width:72px; height:auto; filter:brightness(0) invert(1); position:relative; z-index:1; }
  .loader-org-name { font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,0.35); }
  .loader-bar { width:200px; height:1.5px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; }
  .loader-bar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--green-light),var(--gold)); animation:bar 1.9s var(--ease-out) forwards; }
  #ihf-go-top {
    position:fixed; bottom:32px; right:32px; z-index:999;
    width:44px; height:44px; border-radius:50%;
    background:var(--green); color:var(--white); border:none;
    display:none; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer; box-shadow:0 4px 18px rgba(26,107,74,0.40);
    transition:all 0.3s;
  }
  #ihf-go-top:hover { background:var(--green-mid); transform:translateY(-3px); }
  #ihf-go-top.visible { display:flex; }

  /* ── Hero ───────────────────────────────────────────────────── */
  .proj-hero {
    position:relative; background:var(--charcoal);
    padding:90px 0 80px; overflow:hidden;
    min-height:420px; display:flex; align-items:center;
  }
  .proj-hero__photo {
    position:absolute; inset:0;
    background:url('/img/ihf-hero-default.svg') center/cover no-repeat;
    filter:saturate(0.55) brightness(0.62);
    /* Visible from the outset. This used to start at opacity:0 and wait for a
       script to add .loaded, which the database driven project page never did,
       so the photograph was on the page but permanently invisible. It now
       fades itself in, and .loaded is kept for the older hand built pages. */
    opacity:1;
    animation:proj-photo-in 1.2s ease both;
  }
  @keyframes proj-photo-in { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { .proj-hero__photo { animation:none; } }
  .proj-hero__photo.loaded { opacity:1; }
  .proj-hero__overlay {
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(120deg,rgba(13,27,20,0.93) 0%,rgba(26,107,74,0.28) 55%,rgba(13,27,20,0.78) 100%);
  }
  .proj-hero__grid {
    position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px);
    background-size:52px 52px;
  }
  .proj-hero__glow-g { position:absolute; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(46,199,116,0.09) 0%,transparent 70%); width:520px; height:520px; top:-180px; left:-120px; }
  .proj-hero__glow-o { position:absolute; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(245,166,35,0.07) 0%,transparent 70%); width:380px; height:380px; bottom:-130px; right:-60px; }
  .proj-hero__inner {
    position:relative; z-index:2;
    max-width:1140px; margin:0 auto; padding:0 24px;
  }
  .proj-hero__eyebrow {
    display:inline-flex; align-items:center; gap:12px;
    font-family:var(--font-body); font-size:11px; font-weight:700;
    letter-spacing:3px; text-transform:uppercase; color:var(--green-light);
    margin-bottom:18px; animation:proj-in 0.6s var(--ease-out) 0.1s both;
  }
  .proj-hero__eyebrow::before {
    content:''; display:inline-block; width:32px; height:2px; border-radius:2px;
    background:linear-gradient(90deg,var(--green-light),var(--gold));
  }
  .proj-hero__title {
    font-family:var(--font-display);
    font-size:clamp(36px,6vw,76px);
    font-weight:900; line-height:1.05; color:var(--white);
    margin:0 0 14px; letter-spacing:-1.5px;
    animation:proj-in 0.6s var(--ease-out) 0.22s both;
  }
  .proj-hero__title em {
    font-style:italic;
    background:linear-gradient(90deg,var(--green-light),var(--gold));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .proj-hero__sub {
    font-size:15px; color:rgba(255,255,255,0.48); font-weight:300; max-width:520px;
    line-height:1.8; margin:0 0 22px;
    animation:proj-in 0.6s var(--ease-out) 0.34s both;
  }

  /* Status badge */
  .proj-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 18px; border-radius:50px;
    font-family:var(--font-body); font-size:12px; font-weight:700;
    letter-spacing:0.05em;
    animation:proj-in 0.6s var(--ease-out) 0.44s both;
  }
  .proj-badge--ongoing {
    background:rgba(46,199,116,0.14); color:var(--green-light);
    border:1px solid rgba(46,199,116,0.30);
  }
  .proj-badge--completed {
    background:rgba(245,166,35,0.13); color:var(--gold-light);
    border:1px solid rgba(245,166,35,0.32);
  }
  .proj-badge__dot {
    width:8px; height:8px; border-radius:50%; background:var(--green-light);
    animation:dot-pulse 2s ease infinite;
  }

  /* ── Breadcrumb ─────────────────────────────────────────────── */
  .proj-breadcrumb { background:var(--white); border-bottom:1px solid var(--border); padding:13px 0; }
  .proj-breadcrumb__inner {
    max-width:1140px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted);
  }
  .proj-breadcrumb a { color:var(--green); font-weight:600; transition:color 0.2s; }
  .proj-breadcrumb a:hover { color:var(--green-mid); }
  .proj-breadcrumb i { font-size:10px; }

  /* ── Stats strip ─────────────────────────────────────────────── */
  .proj-stats {
    background:var(--charcoal-2);
    padding:36px 0 38px;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .proj-stats__inner {
    max-width:1140px; margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  }
  .proj-stat {
    text-align:center; padding:20px 12px;
    border-radius:16px; border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.03);
    animation:proj-in 0.7s var(--ease-out) both;
  }
  .proj-stat:nth-child(1){ animation-delay:0.10s; }
  .proj-stat:nth-child(2){ animation-delay:0.20s; }
  .proj-stat:nth-child(3){ animation-delay:0.30s; }
  .proj-stat:nth-child(4){ animation-delay:0.40s; }
  .proj-stat__icon {
    width:44px; height:44px; border-radius:12px; margin:0 auto 12px;
    background:rgba(46,199,116,0.10); border:1px solid rgba(46,199,116,0.18);
    display:flex; align-items:center; justify-content:center;
    color:var(--green-light); font-size:16px;
  }
  .proj-stat__value {
    font-family:var(--font-display); font-size:clamp(22px,3vw,32px); font-weight:900;
    color:var(--white); line-height:1; margin-bottom:6px;
  }
  .proj-stat__label { font-size:12px; color:rgba(255,255,255,0.38); font-weight:500; line-height:1.4; }

  /* ── Main content layout ────────────────────────────────────── */
  .proj-body {
    max-width:1140px; margin:0 auto; padding:64px 24px 88px;
    display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start;
  }

  /* Gallery */
  .proj-gallery { margin-bottom:40px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); }
  .proj-gallery__img { width:100%; height:420px; object-fit:cover; display:block; }
  .swiper-pagination-bullet { background:var(--green-light); opacity:0.5; }
  .swiper-pagination-bullet-active { opacity:1; }

  /* Content sections */
  .proj-section { margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(--border); }
  .proj-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
  .proj-section__head {
    display:flex; align-items:center; gap:14px; margin-bottom:18px;
  }
  .proj-section__icon {
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    background:rgba(26,107,74,0.08); border:1px solid rgba(26,107,74,0.15);
    display:flex; align-items:center; justify-content:center;
    color:var(--green); font-size:15px;
  }
  .proj-section__title {
    font-family:var(--font-display); font-size:20px; font-weight:800;
    color:var(--text); margin:0; line-height:1.2;
  }
  .proj-section__body p { margin-bottom:14px; }
  .proj-section__body p:last-child { margin-bottom:0; }

  /* ── Sidebar ─────────────────────────────────────────────────── */
  .proj-sidebar { position:sticky; top:100px; display:flex; flex-direction:column; gap:20px; }

  .proj-side-card {
    background:var(--white); border-radius:18px; padding:24px;
    border:1px solid var(--border); box-shadow:var(--shadow-sm);
  }
  .proj-side-card--dark {
    background:var(--charcoal-2); border-color:rgba(255,255,255,0.06);
  }
  .proj-side-card__title {
    font-family:var(--font-body); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.10em; color:var(--text-muted);
    margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:8px;
  }
  .proj-side-card--dark .proj-side-card__title {
    color:rgba(255,255,255,0.38); border-color:rgba(255,255,255,0.06);
  }
  .proj-side-card__title i { color:var(--green); }
  .proj-side-card--dark .proj-side-card__title i { color:var(--green-light); }

  /* SDG chips */
  .proj-sdgs { display:flex; flex-wrap:wrap; gap:8px; }
  .proj-sdg {
    padding:5px 12px; border-radius:50px; font-size:11px; font-weight:700;
    background:rgba(26,107,74,0.08); border:1px solid rgba(26,107,74,0.15);
    color:var(--green);
  }

  /* Related projects */
  .proj-related-list { display:flex; flex-direction:column; gap:12px; }
  .proj-related-item {
    display:flex; gap:10px; align-items:center;
    padding:10px 12px; border-radius:12px;
    border:1px solid var(--border); background:var(--cream);
    font-size:13px; font-weight:600; color:var(--text);
    transition:all 0.25s var(--ease-out);
  }
  .proj-related-item:hover {
    border-color:var(--green); background:var(--white);
    box-shadow:var(--shadow-sm); transform:translateX(4px);
  }
  .proj-related-item i { color:var(--green); font-size:13px; flex-shrink:0; }

  /* Donate / partner CTA */
  .proj-cta-btn {
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; padding:13px 20px; border-radius:50px;
    background:linear-gradient(135deg,var(--green),var(--green-mid));
    color:var(--white); font-family:var(--font-body); font-size:14px; font-weight:700;
    border:none; cursor:pointer; margin-top:4px;
    box-shadow:0 5px 22px rgba(26,107,74,0.38);
    transition:all 0.3s var(--ease-out);
  }
  .proj-cta-btn:hover {
    background:linear-gradient(135deg,var(--green-mid),var(--green-light));
    transform:translateY(-2px); box-shadow:0 10px 32px rgba(26,107,74,0.48);
    color:var(--white);
  }
  .proj-cta-btn--outline {
    background:transparent; color:var(--green);
    border:1.5px solid rgba(26,107,74,0.30); box-shadow:none;
  }
  .proj-cta-btn--outline:hover {
    background:var(--green); color:var(--white);
    box-shadow:0 6px 22px rgba(26,107,74,0.35);
  }

  /* ── Bottom CTA strip ───────────────────────────────────────── */
  .proj-footer-cta {
    background:var(--charcoal-2); padding:52px 0 56px;
    border-top:1px solid rgba(255,255,255,0.05);
  }
  .proj-footer-cta__inner { max-width:1140px; margin:0 auto; padding:0 24px; }
  .proj-footer-cta__label {
    font-family:var(--font-body); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:3px;
    color:rgba(255,255,255,0.32); margin-bottom:14px;
    display:flex; align-items:center; gap:12px;
  }
  .proj-footer-cta__label::before {
    content:''; display:inline-block; width:32px; height:1.5px;
    background:linear-gradient(90deg,var(--green-light),var(--gold));
  }
  .proj-footer-cta p { color:rgba(255,255,255,0.40); font-size:15px; max-width:520px; margin-bottom:24px; line-height:1.8; }
  .proj-footer-btns { display:flex; gap:14px; flex-wrap:wrap; }
  .proj-footer-btn {
    display:inline-flex; align-items:center; gap:9px; padding:13px 28px; border-radius:50px;
    font-family:var(--font-body); font-size:14px; font-weight:700;
    transition:all 0.3s var(--ease-out);
  }
  .proj-footer-btn--green {
    background:linear-gradient(135deg,var(--green),var(--green-mid));
    color:var(--white); box-shadow:0 5px 22px rgba(26,107,74,0.40);
  }
  .proj-footer-btn--green:hover {
    background:linear-gradient(135deg,var(--green-mid),var(--green-light));
    transform:translateY(-2px); color:var(--white);
  }
  .proj-footer-btn--outline {
    color:rgba(255,255,255,0.65);
    border:1.5px solid rgba(255,255,255,0.15);
  }
  .proj-footer-btn--outline:hover {
    border-color:var(--green-light); color:var(--green-light);
  }

  /* ── Responsive ─────────────────────────────────────────────── */
  @media (max-width:1024px) {
    .proj-body { grid-template-columns:1fr; gap:36px; }
    .proj-sidebar { position:static; display:grid; grid-template-columns:1fr 1fr; }
    .proj-stats__inner { grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:767px) {
    .proj-hero { padding:68px 0 56px; min-height:0; }
    .proj-body { padding:36px 20px 60px; }
    .proj-gallery__img { height:260px; }
    .proj-sidebar { grid-template-columns:1fr; }
    .proj-stats__inner { grid-template-columns:repeat(2,1fr); gap:14px; }
    .proj-footer-btns { flex-direction:column; }
  }
  @media (max-width:480px) {
    .proj-stats__inner { grid-template-columns:1fr 1fr; }
  }


/* ===========================================================================
   SIDEBAR FIT
   ---------------------------------------------------------------------------
   The support and volunteer cards were cramped: the buttons sat too close to
   the text and wrapped awkwardly on a narrow column. These give them room and
   let them stack cleanly at any width.
   =========================================================================== */
.proj-side-card { padding: 22px 22px 24px; }
.proj-side-card + .proj-side-card { margin-top: 18px; }
.proj-side-card__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 700; line-height: 1.4;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.proj-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 18px; border-radius: 11px;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  text-align: center; text-decoration: none; white-space: nowrap;
}
.proj-cta-btn + .proj-cta-btn { margin-top: 10px; }

.proj-sdgs { display: flex; flex-wrap: wrap; gap: 8px; }
.proj-sdg { font-size: 12px; line-height: 1.45; padding: 7px 13px; border-radius: 100px; }

.proj-related-list { display: flex; flex-direction: column; gap: 2px; }
.proj-related-item {
  display: block; padding: 11px 0; font-size: 13.8px; line-height: 1.5;
  border-bottom: 1px solid rgba(0,0,0,.06); text-decoration: none;
}
.proj-related-item:last-child { border-bottom: 0; }

.proj-footer-cta { padding: 64px 24px; }
.proj-footer-btns {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px;
}
.proj-footer-btns .proj-cta-btn { width: auto; min-width: 210px; }

@media (max-width: 900px) {
  .proj-body { display: block; }
  .proj-sidebar { margin-top: 36px; }
  .proj-footer-btns .proj-cta-btn { width: 100%; }
}