/* ==========================================================================
   Shivganga — Get Involved
   Page-specific components only; tokens, resets, utilities, the page hero
   and the closing CTA band come from page.css, which must load first.
   Scoped under .sg-gi.
   ========================================================================== */

/* ==========================================================================
   THE MESSAGE — Mahesh Sharma's letter, beside his photograph
   ========================================================================== */
.sg-gi-msg {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

/* The photograph is a cutout on an opaque white ground, so it sits on a white
   card and the two whites meet invisibly. It is shown WHOLE and never
   cropped: no object-fit, no fixed aspect box, height follows width. The
   source is 361x636, and max-width holds it at native size so it stays sharp
   rather than being scaled up. */
.sg-gi-portrait {
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow);
  padding: clamp(14px, 2vw, 26px) clamp(14px, 2vw, 26px) 0;
  display: flex; flex-direction: column; align-items: center;
  align-self: end;
}
.sg-gi-portrait img {
  display: block;
  width: 100%;
  /* Native width is 361px; a touch above that keeps him prominent without
     going soft. A higher-resolution original would allow more. */
  max-width: 420px;
  height: auto;
}
.sg-gi-portrait figcaption {
  width: 100%;
  border-top: 1px solid var(--sg-cream-2);
  margin-top: clamp(10px, 1.4vw, 16px);
  padding: .9rem 0 1.1rem;
  text-align: center;
}
.sg-gi-portrait b {
  display: block;
  font-family: var(--sg-font-head); font-weight: 700; font-size: 1.05rem;
  color: var(--sg-ink);
}
.sg-gi-portrait span { font-size: .85rem; color: var(--sg-muted-2); }

/* The letter itself. It is in Hindi, so it gets a slightly larger size and a
   looser line height than the Latin body copy — Devanagari needs the room for
   its matras. */
.sg-gi-letter {
  background: var(--sg-green-tint);
  border-left: 4px solid var(--sg-orange);
  border-radius: 0 var(--sg-radius-lg) var(--sg-radius-lg) 0;
  padding: clamp(24px, 3.4vw, 44px);
}
.sg-page .sg-gi-letter__salute {
  font-family: var(--sg-font-head); font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--sg-green-dark); margin-bottom: 1rem;
}
.sg-page .sg-gi-letter p {
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.95;
  color: var(--sg-ink-2);
  margin-bottom: 1rem;
}
.sg-page .sg-gi-letter p:last-of-type { margin-bottom: 0; }
.sg-gi-letter__sign {
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--sg-green-pale);
}
.sg-page .sg-gi-letter__sign p { margin-bottom: 0; line-height: 1.7; }
.sg-gi-letter__sign b {
  font-family: var(--sg-font-head); font-weight: 700; color: var(--sg-ink);
}

/* The call that closes the letter, pulled out as its own line. */
.sg-page .sg-gi-call {
  margin-top: clamp(26px, 3.4vw, 40px);
  text-align: center;
  font-family: var(--sg-font-quote); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.6;
  color: var(--sg-green-dark);
}

/* ==========================================================================
   WAYS IN
   ========================================================================== */
.sg-gi-ways {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.sg-gi-way {
  display: flex; flex-direction: column;
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  border-radius: var(--sg-radius);
  padding: clamp(24px, 3vw, 36px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sg-gi-way:hover { transform: translateY(-4px); box-shadow: var(--sg-shadow-lg); border-color: var(--sg-green-soft); }
.sg-gi-way__icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--sg-orange-pale); color: var(--sg-orange-dark);
  display: grid; place-items: center; margin-bottom: 1.2rem;
}
.sg-gi-way__icon svg { width: 26px; height: 26px; }
.sg-page .sg-gi-way h3 { font-size: 1.25rem; margin-bottom: .4em; }
.sg-page .sg-gi-way p { font-size: .96rem; }
.sg-gi-way__link {
  margin-top: auto; padding-top: 1.2rem;
  font-family: var(--sg-font-head); font-weight: 600; font-size: .9rem;
  color: var(--sg-green);
  display: inline-flex; align-items: center; gap: .45rem;
  align-self: flex-start;
}
.sg-gi-way__link:hover { color: var(--sg-green-dark); text-decoration: underline; }

/* ==========================================================================
   PARTNER BAND — CSR and contribution
   ========================================================================== */
.sg-gi-partner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}
.sg-gi-partner__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-gi-partner__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   ANUBHUTI — what interns wrote afterwards
   The quotes were baked into image files, so search engines and screen
   readers got nothing from them. They are set as real text here, with the
   photograph cropped out of each card.
   ========================================================================== */
.sg-gi-quotes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.sg-gi-quote {
  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-gi-quote:hover { transform: translateY(-4px); box-shadow: var(--sg-shadow-lg); border-color: var(--sg-green-soft); }
.sg-gi-quote__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sg-cream); }
.sg-gi-quote__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Faces sit in the upper half of these crops. */
  object-position: center 22%;
}
.sg-gi-quote__body {
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; flex: 1;
  position: relative;
}
.sg-gi-quote__body::before {
  content: "\201C";
  position: absolute; top: -.1em; right: .3em;
  font-family: var(--sg-font-quote);
  font-size: 5rem; line-height: 1;
  color: var(--sg-green-pale);
}
.sg-page .sg-gi-quote blockquote {
  font-family: var(--sg-font-quote); font-style: italic;
  font-size: clamp(.96rem, 1.25vw, 1.05rem); line-height: 1.62;
  color: var(--sg-ink-2);
  margin: 0 0 1.2rem; position: relative; z-index: 1;
}
.sg-gi-quote figcaption { margin-top: auto; }
.sg-gi-quote figcaption b {
  display: block;
  font-family: var(--sg-font-head); font-weight: 700; font-size: 1rem;
  color: var(--sg-ink);
}
/* Block, so the credential and the occasion do not run together on one line. */
.sg-gi-quote figcaption span { display: block; font-size: .84rem; color: var(--sg-muted-2); }
.sg-gi-quote__when {
  margin-top: .6rem;
  font-family: var(--sg-font-head); font-weight: 600;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sg-orange-dark);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
  .sg-gi-quotes { grid-template-columns: repeat(2, 1fr); }
  .sg-gi-ways   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sg-gi-msg { grid-template-columns: 1fr; }
  .sg-gi-portrait { align-self: center; max-width: 420px; margin-inline: auto; }
  .sg-gi-letter { border-left: 0; border-top: 4px solid var(--sg-orange); border-radius: 0 0 var(--sg-radius-lg) var(--sg-radius-lg); }
  .sg-gi-partner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sg-gi-quotes { grid-template-columns: 1fr; }
  .sg-gi-ways   { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-gi-way, .sg-gi-quote { transition: none; }
  .sg-gi-way:hover, .sg-gi-quote:hover { transform: none; }
}