/* ==========================================================================
   Shivganga — About Shivganga page
   Page-specific components only; tokens, resets and utilities come from
   page.css, which must be loaded first. Scoped under .sg-about.
   ========================================================================== */

/* ==========================================================================
   OUR STORY — timeline
   ========================================================================== */
.sg-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

.sg-story__aside { position: sticky; top: calc(var(--sg-header-h) + 24px); }
.sg-story__figure {
  border-radius: var(--sg-radius-lg); overflow: hidden;
  box-shadow: var(--sg-shadow-lg);
  aspect-ratio: 5 / 4; background: var(--sg-green-tint);
}
.sg-story__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-story__caption {
  margin: .9rem 0 0; font-size: .87rem; color: var(--sg-muted-2);
}

/* Vertical rule with a marker per entry. */
.sg-time { position: relative; padding-left: 34px; }
.sg-time::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--sg-green-soft), var(--sg-cream-2));
  border-radius: 2px;
}
.sg-time__item { position: relative; padding-bottom: clamp(26px, 3.4vw, 40px); }
.sg-time__item:last-child { padding-bottom: 0; }
.sg-time__item::before {
  content: ""; position: absolute; left: -34px; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sg-white); border: 3px solid var(--sg-green);
  box-shadow: 0 0 0 4px var(--sg-paper);
}
.sg-time__item--now::before { background: var(--sg-orange); border-color: var(--sg-orange); }
.sg-time__year {
  display: inline-block;
  font-family: var(--sg-font-head); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sg-green); background: var(--sg-green-tint);
  border-radius: 999px; padding: .3rem .8rem; margin-bottom: .6rem;
}
.sg-time__item--now .sg-time__year { color: var(--sg-orange-dark); background: var(--sg-orange-pale); }
.sg-time h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-bottom: .4rem; }
.sg-about .sg-time p { margin-bottom: 0; }

/* ==========================================================================
   PHILOSOPHY — four principles
   ========================================================================== */
.sg-prin { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.sg-prin__card {
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.sg-prin__card:hover { transform: translateY(-4px); box-shadow: var(--sg-shadow-lg); }
.sg-prin__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sg-green-tint); }
.sg-prin__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.sg-prin__card:hover .sg-prin__media img { transform: scale(1.04); }
.sg-prin__body { padding: clamp(20px, 2.4vw, 30px); }
.sg-prin__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sg-green); color: #fff;
  font-family: var(--sg-font-head); font-weight: 700; font-size: .85rem;
  margin-bottom: .8rem;
}
.sg-prin h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .1em; }
.sg-prin__gloss {
  font-family: var(--sg-font-head); font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sg-orange);
  display: block; margin-bottom: .9rem;
}
.sg-about .sg-prin__body p { margin-bottom: 0; font-size: .97rem; }

/* The principles are a chain, not a list — the last card says so explicitly. */
.sg-chain {
  margin-top: clamp(22px, 3vw, 34px);
  background: var(--sg-ink); color: #fff;
  border-radius: var(--sg-radius-lg);
  padding: clamp(20px, 3vw, 34px) clamp(20px, 3.4vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
}
.sg-chain__label {
  font-family: var(--sg-font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sg-green-soft);
  width: 100%; margin-bottom: .35rem;
}
.sg-chain__steps { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
.sg-chain__steps b {
  font-family: var(--sg-font-head); font-weight: 700;
  font-size: clamp(.98rem, 1.7vw, 1.22rem); color: #fff;
}
.sg-chain__steps i { font-style: normal; color: var(--sg-orange); font-size: 1.1rem; line-height: 1; }

/* ==========================================================================
   FOUNDERS
   ========================================================================== */
.sg-founders { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.sg-founder {
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius-lg);
  padding: clamp(22px, 3vw, 38px);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.sg-founder__portrait {
  /* mahesh.jpg is only 244px square — held at 190px so it is never upscaled. */
  width: 190px; height: 190px; flex: 0 0 auto;
  border-radius: 20px; overflow: hidden;
  background: var(--sg-green-tint);
  box-shadow: 0 10px 30px rgba(21,33,29,.14);
}
.sg-founder__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.sg-founder__role {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--sg-font-head); font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sg-green); background: var(--sg-green-tint);
  border-radius: 999px; padding: .32rem .8rem; margin-bottom: .7rem;
}
.sg-founder h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); margin-bottom: .15em; }
.sg-founder__honour {
  font-family: var(--sg-font-head); font-weight: 600; font-size: .93rem;
  color: var(--sg-orange-dark); display: block; margin-bottom: .9rem;
}
.sg-about .sg-founder__body p { margin-bottom: 0; }

/* ==========================================================================
   FELLOWS — stories of change
   ========================================================================== */
.sg-fellows { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); }
.sg-fellow {
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.sg-fellow:hover { transform: translateY(-4px); box-shadow: var(--sg-shadow-lg); }
.sg-fellow__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sg-green-tint); position: relative; }
.sg-fellow__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Several of these are portrait-orientation field photographs; anchoring
     to the top keeps faces in frame instead of centre-cropping them out. */
  object-position: center 28%;
  display: block; transition: transform .5s ease;
}
.sg-fellow:hover .sg-fellow__media img { transform: scale(1.05); }
.sg-fellow__tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: var(--sg-font-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sg-green-dark); background: rgba(255,255,255,.93);
  border-radius: 999px; padding: .3rem .7rem;
}
.sg-fellow__body { padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; flex: 1; }
.sg-fellow h3 { font-size: 1.12rem; margin-bottom: .2em; }
.sg-fellow__cred {
  font-size: .82rem; color: var(--sg-green); font-weight: 600;
  display: block; margin-bottom: .7rem;
}
.sg-about .sg-fellow__body p { font-size: .93rem; margin-bottom: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .sg-story { grid-template-columns: 1fr; }
  .sg-story__aside { position: static; }
  .sg-story__figure { aspect-ratio: 16 / 9; }
  .sg-fellows { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .sg-prin { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sg-founder { grid-template-columns: 1fr; }
  .sg-founder__portrait { width: 150px; height: 150px; }
  .sg-fellows { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-prin__card, .sg-fellow { transition: none; }
  .sg-prin__card:hover, .sg-fellow:hover { transform: none; }
  .sg-prin__media img, .sg-fellow__media img { transition: none; }
  .sg-prin__card:hover .sg-prin__media img,
  .sg-fellow:hover .sg-fellow__media img { transform: none; }
}