/* ==========================================================================
   Shivganga — Programs section
   One stylesheet for all seven programme pages. They are the same kind of
   page — a premise, a set of initiatives, the numbers, a call to act — so
   they share components rather than each carrying a near-copy.

   Tokens, resets, utilities, the page hero and the closing CTA band come from
   page.css, which must load first. Scoped under .sg-prog.
   ========================================================================== */

/* ==========================================================================
   PREMISE — the narrative that opens every programme page
   ========================================================================== */
.sg-prog-lede {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: start;
}
.sg-page .sg-prog-lede__body p { font-size: clamp(1rem, 1.35vw, 1.1rem); }
.sg-page .sg-prog-lede__body p:last-child { margin-bottom: 0; }

/* A short pull-quote or slogan beside the premise. Several of these pages
   are built around a Hindi slogan the villages actually chant. */
.sg-prog-slogan {
  background: var(--sg-green-tint);
  border-left: 4px solid var(--sg-orange);
  border-radius: 0 var(--sg-radius) var(--sg-radius) 0;
  padding: clamp(22px, 3vw, 32px);
}
.sg-prog-slogan blockquote {
  font-family: var(--sg-font-quote); font-style: italic;
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  line-height: 1.45; color: var(--sg-green-dark);
  margin: 0 0 .7rem;
}
.sg-page .sg-prog-slogan p { font-size: .95rem; margin-bottom: 0; }

/* ==========================================================================
   INITIATIVES — the numbered, alternating photograph/text rows that carry
   the actual programme content on every one of these pages.
   ========================================================================== */
.sg-prog-steps { display: grid; gap: clamp(40px, 6.5vw, 86px); }

.sg-prog-step {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(26px, 4.5vw, 60px);
  align-items: center;
}
.sg-prog-step:nth-child(even) .sg-prog-step__figure { order: 2; }

.sg-prog-step__figure {
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  box-shadow: var(--sg-shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--sg-green-tint);
}
.sg-prog-step__figure img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  transition: transform .6s ease;
}
.sg-prog-step:hover .sg-prog-step__figure img { transform: scale(1.03); }

.sg-prog-step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sg-orange-pale); color: var(--sg-orange-dark);
  font-family: var(--sg-font-head); font-weight: 700; font-size: .95rem;
  margin-bottom: 1rem;
}
.sg-page .sg-prog-step h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: .4em; }
.sg-page .sg-prog-step__hi {
  font-family: var(--sg-font-head); font-weight: 600;
  color: var(--sg-green); font-size: .95rem; margin: -.15rem 0 .9rem;
}

/* Bulleted detail inside an initiative. The pages this replaces put <ul>
   inside <p>, which is invalid and collapsed the spacing. */
.sg-prog-step__list { margin: 1.1rem 0 0; display: grid; gap: .5rem; }
.sg-prog-step__list li {
  position: relative; padding-left: 1.5rem;
  color: var(--sg-muted); font-size: .96rem; line-height: 1.55;
}
.sg-prog-step__list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sg-orange);
}
.sg-prog-step__list b { color: var(--sg-ink); font-weight: 600; }

/* A compact "where it stands" figure attached to an initiative. */
.sg-prog-step__tally {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin: 1.3rem 0 0; padding: 0;
}
.sg-prog-step__tally li {
  display: inline-flex; align-items: baseline; gap: .4rem;
  background: var(--sg-green-tint);
  border: 1px solid var(--sg-green-pale);
  border-radius: 999px; padding: .45rem .9rem;
  font-size: .85rem; color: var(--sg-ink-2);
}
.sg-prog-step__tally b {
  font-family: var(--sg-font-head); font-weight: 700;
  font-size: .98rem; color: var(--sg-green-dark);
}

/* ==========================================================================
   NUMBERS BAND
   ========================================================================== */
.sg-prog-stats {
  background: linear-gradient(135deg, var(--sg-green) 0%, var(--sg-green-dark) 100%);
  position: relative; overflow: hidden;
}
.sg-prog-stats::after {
  content: ""; position: absolute; right: -80px; top: -90px;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.sg-prog-stats__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  text-align: center;
}
.sg-prog-stat b {
  display: block;
  font-family: var(--sg-font-head); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1;
  color: #fff; letter-spacing: -.02em;
}
.sg-page .sg-prog-stat p {
  margin: .6rem 0 0;
  font-family: var(--sg-font-head); font-weight: 600;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.sg-prog-stats__note {
  position: relative; z-index: 1;
  text-align: center; margin-top: clamp(30px, 4vw, 48px);
}
.sg-page .sg-prog-stats__note p {
  color: rgba(255,255,255,.86); margin-bottom: 1.2rem;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}

/* ==========================================================================
   CARDS — success stories, traditions, anything that is a short list of
   photograph-plus-paragraph items.
   ========================================================================== */
.sg-prog-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.sg-prog-card {
  display: flex; flex-direction: column;
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sg-prog-card:hover { transform: translateY(-4px); box-shadow: var(--sg-shadow-lg); border-color: var(--sg-green-soft); }
.sg-prog-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sg-cream); }
.sg-prog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-prog-card__body { padding: 1.3rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.sg-prog-card__tag {
  font-family: var(--sg-font-head); font-weight: 700;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sg-orange-dark); margin-bottom: .55rem;
}
.sg-page .sg-prog-card h3 { font-size: 1.12rem; margin-bottom: .4em; }
.sg-page .sg-prog-card p { font-size: .93rem; margin-bottom: 0; }

/* ==========================================================================
   PEOPLE — compact fellow cards. The full biographies live on About
   Shivganga; these are a pointer to them, not a second copy.
   ========================================================================== */
/* Fixed column counts rather than auto-fit: there are six fellows, and
   auto-fit left five on one row and one stranded on the next. */
.sg-prog-people {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.sg-prog-person {
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius);
  overflow: hidden; text-align: center;
  padding-bottom: 1.2rem;
}
/* These are photographs of people at work, not studio portraits, so they are
   given a landscape frame rather than squeezed into a square. */
.sg-prog-person__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sg-cream); }
.sg-prog-person__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.sg-page .sg-prog-person h3 { font-size: 1rem; margin: 1rem .8rem .2em; }
.sg-prog-person__cred {
  display: block; padding: 0 .8rem;
  font-size: .78rem; color: var(--sg-muted-2); line-height: 1.4;
}

/* ==========================================================================
   INSTITUTION LOGOS
   Static grid rather than the autoplaying carousel these replaced: twelve
   logos fit on one screen and there is nothing to page through.
   ========================================================================== */
.sg-prog-logos {
  /* Five per row: there are twenty logos, and auto-fit left a ragged tail. */
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  align-items: center;
}
.sg-prog-logos li {
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius);
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  padding: clamp(12px, 1.6vw, 20px);
}
.sg-prog-logos img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter .22s ease, opacity .22s ease;
}
.sg-prog-logos li:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   PLACES STRIP — the cities and countries a programme reaches
   ========================================================================== */
.sg-prog-places {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin-top: clamp(20px, 3vw, 30px);
}
.sg-prog-places li {
  border: 1px solid var(--sg-green-soft);
  border-radius: 999px; padding: .45rem 1rem;
  font-size: .88rem; color: var(--sg-green-dark);
  font-family: var(--sg-font-head); font-weight: 600;
}

/* ==========================================================================
   NOTE — a single arresting figure, used where a page makes an argument out
   of arithmetic rather than out of a photograph.
   ========================================================================== */
.sg-prog-note {
  background: var(--sg-cream);
  border-radius: var(--sg-radius-lg);
  padding: clamp(28px, 4vw, 52px);
  text-align: center;
}
.sg-prog-note__sum {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: clamp(12px, 2.4vw, 30px);
  margin-bottom: 1.4rem;
}
.sg-prog-note__sum span {
  font-family: var(--sg-font-head);
  font-size: clamp(.95rem, 1.5vw, 1.08rem); color: var(--sg-muted);
  max-width: 15ch; line-height: 1.4;
}
.sg-prog-note__sum b {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800;
  color: var(--sg-green-dark); letter-spacing: -.02em;
}
.sg-prog-note__op { color: var(--sg-orange); font-size: 1.6rem; font-weight: 700; }
.sg-page .sg-prog-note__out {
  font-family: var(--sg-font-head); font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  color: var(--sg-ink); margin: 0 0 1.6rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .sg-prog-people { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .sg-prog-lede { grid-template-columns: 1fr; }
  .sg-prog-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .sg-prog-step { grid-template-columns: 1fr; }
  /* Stacked, the photograph always leads. */
  .sg-prog-step:nth-child(even) .sg-prog-step__figure { order: 0; }
  .sg-prog-stats__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 700px) {
  .sg-prog-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .sg-prog-stats__grid { grid-template-columns: 1fr; gap: 30px; }
  .sg-prog-people { grid-template-columns: repeat(2, 1fr); }
  .sg-prog-note__sum { flex-direction: column; gap: 14px; }
  .sg-prog-note__sum span { max-width: none; }
  .sg-prog-note__op { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-prog-step__figure img, .sg-prog-card, .sg-prog-logos img { transition: none; }
  .sg-prog-step:hover .sg-prog-step__figure img { transform: none; }
  .sg-prog-card:hover { transform: none; }
}