/* ===========================================================
   Nuru Hope Foundation – Hybrid Home Styles (Bootstrap 5)
   One source of truth. Remove older duplicate rules.
   =========================================================== */

/* -------- Theme tokens -------- */
:root{
  --nuru-primary:#238eee;  /* deep humanitarian teal */
  --nuru-amber:#edd213;    /* warm accent */
  --nuru-ink:#0F172A;      /* dark text */
  --nuru-sand:#FAFAF9;     /* soft bg */
  --nuru-tint:#e6edf4;     /* light teal tint */
}

/* -------- Base -------- */
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:#0f172a;
}
h1,h2,h3,.navbar-brand{
  font-family:Poppins,Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}
a{text-decoration:none}

/* Keep content comfortable on large screens */
.container{max-width:1140px;}

/* -------- Buttons -------- */
.btn-primary{
  background-color:var(--nuru-primary);
  border-color:var(--nuru-primary);
}
.btn-primary:hover{filter:brightness(0.95);}
.btn-outline-primary{
  color:var(--nuru-primary);
  border-color:var(--nuru-primary);
}
.btn-outline-primary:hover{
  background:var(--nuru-primary);
  color:#fff;
}

.xbtn{
  background:var(--nuru-primary);
  color:#fff;
}
.xbtn:hover{
  color:var(--nuru-primary);
  border-color:var(--nuru-primary);
  background:white;
}

.btn-amber{
  background-color:var(--nuru-amber);
  border-color:var(--nuru-amber);
  color:#111;
}
.btn-amber:hover{filter:brightness(0.95);}
.text-emph{color:var(--nuru-primary);font-weight:600;}

/* ===========================================================
   Navbar (scroll switch + volunteer button contrast)
   =========================================================== */
.navbar{
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.navbar-ghost{ background:transparent; }
.navbar-ghost .nav-link{ color:#fff; opacity:.9; }
.navbar-ghost .nav-link.active,
.navbar-ghost .nav-link:hover{ color:#fff; opacity:1; }
.navbar-ghost .navbar-toggler{ border-color:rgba(255,255,255,.4); }

.navbar-solid{
  background:#fff;
  box-shadow:0 6px 24px rgba(15,23,42,.06);
}
.navbar-solid .nav-link{ color:#334155; }
.navbar-solid .btn-volunteer{
  border-color:var(--nuru-primary);
  color:var(--nuru-primary);
}
.navbar-solid .btn-volunteer:hover{
  background:var(--nuru-primary);
  color:#fff;
}

/* ===========================================================
   Hero (background image + overlay + split layout)
   =========================================================== */
.hero{ position:relative; overflow:hidden; }
.hero-alt{
  padding-top:96px; /* keep content clear of fixed navbar */
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 65%, var(--nuru-sand) 100%);
}

/* Background image layer */
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.38;
}
.hero-img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1%) contrast(1.05);

  /* Focus control via CSS variables (defaults) */
  object-position: var(--hero-x, 50%) var(--hero-y, 65%);
}
.hero-zoom{ transform:scale(1.02); transition: transform 6s ease; }
.hero:hover .hero-zoom{ transform:scale(1.06); }

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,.52));
}
.hero .container{ position:relative; z-index:2; }

/* Badge in hero */
.badge-hope{
  background: var(--nuru-tint);
  color: var(--nuru-primary);
  border: 1px solid rgba(20,108,107,.15);
  padding: .4rem .7rem;
  border-radius: 999px;
  font-weight: 600; letter-spacing: .2px;
}

/* Utilities to set hero focus without conflicts */
.hero-pos-x-60{ --hero-x:60%; } .hero-pos-x-65{ --hero-x:65%; }
.hero-pos-x-68{ --hero-x:68%; } .hero-pos-x-70{ --hero-x:70%; } .hero-pos-x-80{ --hero-x:80%; }
.hero-pos-y-60{ --hero-y:60%; } .hero-pos-y-65{ --hero-y:65%; }
.hero-pos-y-70{ --hero-y:70%; } .hero-pos-y-72{ --hero-y:72%; } .hero-pos-y-80{ --hero-y:80%; }

/* Example:
   <img class="hero-img hero-zoom hero-pos-x-68 hero-pos-y-72" ...> */

/* ===========================================================
   Mosaic (right side grid)
   =========================================================== */
.mosaic{
  display:grid;
  grid-template-columns: 1.1fr .9fr;  /* left tile a bit wider for a natural feel */
  grid-template-rows: 1fr 1fr;
  grid-auto-rows: clamp(110px, 14vw, 160px);
  gap:14px;
  margin-left:auto; /* align grid to the right inside its column */
}
.mosaic-item{
  width:100%; height:100%; object-fit:cover;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.mosaic .r1c1{ grid-column:1; grid-row:1; }
.mosaic .r2c1{ grid-column:1; grid-row:2; }
.mosaic .r1c2{ grid-column:2; grid-row:1 / span 2; }

/* If you want the mosaic to fully fill its column on large screens */
@media (min-width: 992px){
  .mosaic-lg{ max-width:100%; }
}
/* Optionally cap width on very wide screens to avoid huge tiles */
@media (min-width: 1200px){
  .mosaic-lg{ max-width:720px; } /* adjust: 680–780px looks good */
}

/* ===========================================================
   Impact ribbon (stats)
   =========================================================== */
.ribbon{
  background: var(--nuru-tint);
  padding: 1.1rem 0 1.3rem;
  border-top: 1px solid rgba(20,108,107,.12);
  border-bottom: 1px solid rgba(20,108,107,.12);
}
.stat{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px;
  padding:.9rem .95rem;
}
.stat-value{
  font-size: clamp(22px, 4.2vw, 28px);
  font-weight:800;
  color: var(--nuru-primary);
  line-height:1;
}
.stat-value small{ font-size:.7em; margin-left:2px; }
.stat-label{ color:#475569; font-size:.92rem; margin-top:.25rem }

/* ===========================================================
   Pillars (programs preview)
   =========================================================== */
.pillar{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:16px;
  padding:1.25rem 1.2rem;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pillar:hover{
  transform: translateY(-3px);
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.pillar-icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background: var(--nuru-tint);
  color: var(--nuru-primary);
  margin-bottom:.75rem; font-size:20px;
}
.link-simple{ color:var(--nuru-primary); text-decoration:none; font-weight:600; }
.link-simple:hover{ text-decoration:underline; }

/* ===========================================================
   Featured story, Cards polish, Partners, CTA
   =========================================================== */
.feature-card{
  border-radius:18px; overflow:hidden;
  box-shadow:0 14px 36px rgba(15,23,42,.10);
}
.feature-card img{ width:100%; height:300px; display:block; object-fit:cover; }

/* Global card micro-interactions */
.card{
  border:0; border-radius:1rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover, .card:focus-within{
  transform: translateY(-4px);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}


/* Partners (trust) */
.partners-strip img{
  height:38px; object-fit:contain;
  filter:grayscale(100%) contrast(1.05);
  opacity:.85;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.partners-strip img:hover{
  filter:none; opacity:1; transform: translateY(-2px);
}

/* Dual CTA */
.cta-dual{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}

/* ===========================================================
   Footer
   =========================================================== */
.footer .btn, .footer a.btn{ border-color:#fff; }

/* ===========================================================
   Responsive tweaks
   =========================================================== */
@media (max-width: 991.98px){
  /* Mosaic becomes a compact 2x layout */
  .mosaic{
    grid-template-columns: 1fr 1fr;
    grid-template-rows:auto;
    grid-auto-rows: clamp(110px, 26vw, 150px);
    gap:10px;
    margin-left:0; /* center inside the column on mobile/tablet */
  }
  .mosaic .r1c1{ grid-column:1; grid-row:1; }
  .mosaic .r2c1{ grid-column:2; grid-row:1; }
  .mosaic .r1c2{ grid-column:1 / span 2; grid-row:2; }
}
@media (max-width: 575.98px){
  .container{ padding-left:1rem; padding-right:1rem; }
  .badge-hope{ font-size:.82rem; }
  .stat{ padding:.8rem .85rem; }
  /* Slightly different focus on very small screens if needed */
  .hero-img{ --hero-y:70%; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-zoom{ transition:none; transform:none; }
  .card, .pillar{ transition:none; }
}


/* Helpers rapides selon l’emplacement du visage dans la photo */
.hero-img.focus-top    { object-position: 25% 15%; }  /* montre plus le haut de l'image */
.hero-img.focus-center { object-position: 50% 50%; }  /* centré par défaut */
.hero-img.focus-bottom { object-position: 50% 80%; }  /* montre plus le bas de l'image */

/* Option mobile : souvent recadrer un peu différemment */
@media (max-width: 575.98px){
  .hero-img{ object-position: 50% 70%; }
}

/* Stories carousel polish */
.story-carousel .carousel-item{ padding: .25rem 0; }
.story-carousel .story-image{ height: 420px; }           /* desktop height */
.story-carousel .story-image img{ width:100%; height:100%; object-fit:cover; }

.story-carousel .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
  background-color: var(--nuru-primary); opacity:.35;
}
.story-carousel .carousel-indicators .active{ opacity:1; }

.story-carousel .carousel-control-prev-icon,
.story-carousel .carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

@media (max-width: 575.98px){
  .story-carousel .story-image{ height: 260px; }         /* mobile height */
}

/* About: value chips */
.value-chip{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid rgba(15,23,42,.06);
  border-radius:999px; padding:.55rem .9rem;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
  font-weight:600; color:#0f172a;
}
.value-chip i{ color:var(--nuru-primary); }

/* About: timeline */
.timeline{
  position:relative; margin: 0 auto; max-width: 820px;
  padding-left: 20px;
}
.timeline::before{
  content:""; position:absolute; left:8px; top:0; bottom:0;
  width:2px; background: rgba(15,23,42,.15);
}
.timeline-item{ position:relative; padding: .6rem 0 .6rem 1.4rem; }
.timeline-year{ font-weight:800; color:var(--nuru-primary); font-size:.95rem; }
.timeline-dot{
  position:absolute; left:-2px; top:16px; width:10px; height:10px; border-radius:50%;
  background: var(--nuru-primary);
  box-shadow: 0 0 0 3px rgba(20,108,107,.15);
}
.timeline-text{ color:#475569; }

/* About: download cards */
.download-card{
  display:flex; gap:.75rem; align-items:flex-start;
  text-decoration:none; background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px; padding: .9rem .95rem;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition: transform .15s ease, box-shadow .15s ease;
  color:#0f172a;
}
.download-card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.download-card i{
  color: var(--nuru-primary); font-size:1.25rem; margin-top:.15rem;
}
/* When a page forces a solid navbar, start solid immediately */
.force-solid-nav .navbar { background:#fff; box-shadow:0 6px 24px rgba(15,23,42,.06); }
.force-solid-nav .navbar .nav-link { color:#334155; }
.force-solid-nav .brand-logo-light { display:none !important; }
.force-solid-nav .brand-logo-dark  { display:inline !important; }


/* Programs page */
.chip-link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .8rem; border-radius:999px;
  border:1px solid rgba(15,23,42,.10); background:#fff; color:#0f172a;
  font-weight:600; box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.chip-link:hover{ text-decoration:none; border-color: rgba(15,23,42,.16); }

.service-card{
  background:#fff; border:1px solid rgba(15,23,42,.06);
  border-radius:18px; padding:1.25rem 1.2rem; margin-bottom:1.25rem;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.bar-title{ display:flex; align-items:center; gap:.6rem; margin-bottom: .75rem; }
.bar-dot{ width:10px; height:10px; border-radius:50%; background:var(--nuru-primary); box-shadow:0 0 0 3px rgba(20,108,107,.15); }

/* Modal polish */
.modal-content{ border:0; box-shadow:0 18px 48px rgba(15,23,42,.18); }
/* Programs v2 */
.programs-hero{ padding-top:120px; background:linear-gradient(180deg,#fff 0%,#fff 65%, var(--nuru-sand) 100%); }
.hero-card{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:1.25rem;
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:18px;
  padding:1.25rem; box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.hero-art img{ width:100%; height:100%; object-fit:cover; border-radius:14px; }
.sticky-nav{ position:sticky; top:72px; z-index:3; display:flex; gap:.5rem; padding:.75rem 0; background:transparent; }

/* Program blocks */
.program-block{ margin:2rem 0; }
.program-card{
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:16px;
  padding:1.25rem 1.2rem; box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.program-icon{
  width:48px;height:48px;border-radius:12px;background:var(--nuru-tint);color:var(--nuru-primary);
  display:grid;place-items:center;font-size:20px;margin-bottom:.65rem;
}

/* Responsive */
@media (max-width: 991.98px){
  .hero-card{ grid-template-columns: 1fr; }
}

/* ===== Stories Listing ===== */
.stories-filters .form-control,
.stories-filters .form-select{ min-width: 220px; }

.story-feature .ratio img{ object-position:center 60%; }

.story-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid rgba(15,23,42,.06);
  border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.story-card:hover{ transform: translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.08); }
.story-thumb{ display:block; aspect-ratio: 16/10; background:#f3f4f6; }
.story-thumb img{ width:100%; height:300px; object-fit:cover; display:block; }
.story-body{ padding: .9rem .95rem 1.05rem; }

/* ===== Single Story ===== */
.story-hero{
  position:relative; padding-top:96px; overflow:hidden;
  background: linear-gradient(180deg, #fff 0%, #fff 65%, var(--nuru-sand) 100%);
}
.story-hero-bg{ position:absolute; inset:0; opacity:.38; z-index:0; pointer-events:none; }
.story-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position: 50% 60%; filter:grayscale(6%) contrast(1.04); }
.story-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,42,.12), rgba(15,23,42,.4)); }
.story-hero .container{ position:relative; z-index:2; }
.story-hero-inner{ padding: 28px 0 12px; }

.story-cover img{ width:100%; height:auto; border-radius:16px; }
.prose{ color:#0f172a; line-height:1.8; font-size:1.06rem; }
.prose h2, .prose h3{ margin-top:1.2em; }
.prose img{ max-width:100%; border-radius:12px; margin: .75rem 0; }

.story-aside.card{
  border:1px solid rgba(15,23,42,.06); border-radius:16px; box-shadow:0 8px 22px rgba(15,23,42,.06);
}

/* Mobile tweaks */
@media (max-width: 575.98px){
  .stories-filters .form-control,
  .stories-filters .form-select{ min-width: 100%; }
}

/* Limit stretched-link overlay to cards only and ensure the card is the containing block */
.story-card,
.card { position: relative; }      /* containing block for the ::after overlay */

.story-card .stretched-link::after,
.card .stretched-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

/* ===== Team cards ===== */
.team-card{



  display:flex; flex-direction:column; background:#fff; border:1px solid rgba(15,23,42,.06);
  border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease; align-items:center; text-align:center; padding-bottom: 10px;
}
.team-card:hover{ transform: translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.08); }



.team-avatar{
  width:100%; height:160px; overflow:hidden; margin-bottom:.75rem;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}
.team-avatar img{ width:100%; height:300px; object-fit:cover; display:block; }

.team-body{ margin-bottom:.6rem; }
.team-actions .btn{ padding:.35rem .75rem; }

/* Ensure stretched-link overlays never block the whole page */
.team-card, .card{ position:relative; }
.team-card .stretched-link::after,
.card .stretched-link::after{ position:absolute; inset:0; content:""; }

.icon-chip{
  width:42px;height:42px;border-radius:12px;
  background:var(--nuru-tint,#E6F4F1); color:var(--nuru-primary,#146C6B);
  display:grid; place-items:center; font-size:18px; flex:0 0 auto;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}


/* Donate page polish */
.nav-tabs .nav-link { font-weight:600; }
.nav-tabs .nav-link i { vertical-align:-2px; }
#donationTabsContent .card { border:1px solid rgba(15,23,42,.06); border-radius:14px; }

/* Legal pages */
.card p, .card li { color:#475569; }
.card h2 { scroll-margin-top: 100px; }

/* ===== Stories highlight (trio) ===== */
.stories-trio .story-feature-card{
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:18px;
  overflow:hidden; box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.story-feature-media{
  display:block; position:relative; aspect-ratio: 16/9; background:#f3f4f6;
}
.story-feature-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  display:block; transition:transform .35s ease;
}
.story-feature-media:hover img{ transform: scale(1.02); }
.story-badge{
  position:absolute; left:12px; top:12px; border-radius:999px; padding:.25rem .6rem;
}
.story-feature-body{ padding:1rem 1.05rem 1.15rem; }

.story-compact-card{
  display:flex; gap:.85rem; background:#fff; border:1px solid rgba(15,23,42,.06);
  border-radius:16px; padding:.6rem; box-shadow:0 8px 22px rgba(15,23,42,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.story-compact-card:hover{ transform: translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.08); }
.story-compact-media{
  flex:0 0 42%; border-radius:12px; overflow:hidden; background:#f3f4f6; aspect-ratio: 4/3;
}
.story-compact-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-compact-body{ flex:1 1 auto; }

@media (max-width: 991.98px){
  /* On tablet/phone, keep all cards full width stacked */
  .stories-trio .offset-lg-8{ margin-left:0; }
}
@media (max-width: 575.98px){
  .story-compact-card{ flex-direction:column; }
  .story-compact-media{ width:100%; aspect-ratio: 16/10; }
}