/* ==========================================================================
   Shivganga — News & Stories
   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-nw.

   page.css sets .sg-page p / li / h2 / a at (0,1,1), so every rule here that
   targets one of those elements is prefixed .sg-page to win.
   ========================================================================== */

/* ==========================================================================
   IN THE NEWS — cards that leave the site
   Each one is a link to somebody else's article, so the card says where it
   goes before it is clicked, not after.
   ========================================================================== */
.sg-nw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.sg-nw-card {
  position: relative;
  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-nw-card:hover { transform: translateY(-4px); box-shadow: var(--sg-shadow-lg); border-color: var(--sg-green-soft); }
.sg-nw-card:focus-within { border-color: var(--sg-green); box-shadow: var(--sg-shadow-lg); }

.sg-nw-card__media {
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--sg-green-tint);
}
.sg-nw-card__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transition: transform .4s ease;
}
.sg-nw-card:hover .sg-nw-card__media img { transform: scale(1.04); }

.sg-nw-card__body {
  padding: clamp(18px, 2.2vw, 26px);
  display: flex; flex-direction: column; flex: 1;
}

/* Publication and date, above the headline the way a cutting reads. */
.sg-nw-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
  font-family: var(--sg-font-head); font-weight: 600;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sg-green);
  margin-bottom: .7rem;
}
.sg-nw-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sg-green-soft); }
.sg-nw-card__meta time { color: var(--sg-muted-2); letter-spacing: .06em; }

.sg-page .sg-nw-card h3 {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.4; margin-bottom: .5em;
}
/* The whole card is the link, but only the headline carries the accessible
   name — so the anchor sits in the heading and is stretched over the card. */
.sg-page .sg-nw-card h3 a { color: var(--sg-ink); }
.sg-page .sg-nw-card h3 a::after { content: ""; position: absolute; inset: 0; }
.sg-page .sg-nw-card h3 a:hover { color: var(--sg-green-dark); }
.sg-page .sg-nw-card h3 a:focus-visible { outline: 3px solid var(--sg-orange); outline-offset: 3px; }

.sg-page .sg-nw-card p {
  font-size: .93rem; line-height: 1.62;
  color: var(--sg-muted); margin-bottom: 1.1rem;
}
.sg-nw-card__go {
  margin-top: auto;
  font-family: var(--sg-font-head); font-weight: 600; font-size: .86rem;
  color: var(--sg-green);
  display: inline-flex; align-items: center; gap: .4rem;
}
.sg-nw-card__go svg { width: 13px; height: 13px; }

/* Devanagari needs more room between lines than the Latin body face. */
.sg-nw-card [lang="hi"] { line-height: 1.55; }
.sg-page .sg-nw-card p[lang="hi"] { line-height: 1.8; }

/* Nothing published yet — better than an empty grid. */
.sg-page .sg-nw-empty {
  grid-column: 1 / -1;
  text-align: center; padding: clamp(30px, 5vw, 60px);
  background: var(--sg-white); border: 1px dashed var(--sg-cream-2);
  border-radius: var(--sg-radius);
  margin: 0;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.sg-nw-letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 3.4vw, 48px);
  align-items: center;
  background: var(--sg-white);
  border: 1px solid var(--sg-cream-2);
  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);
  box-shadow: var(--sg-shadow);
}
.sg-page .sg-nw-letter h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .5em; }
.sg-page .sg-nw-letter p { font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; }
.sg-page .sg-nw-letter p:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   STORIES OF CHANGE — long form
   ========================================================================== */
.sg-nw-story + .sg-nw-story {
  margin-top: clamp(44px, 6vw, 84px);
  padding-top: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--sg-cream-2);
}
.sg-nw-story__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}
/* The second story leads with the text, so the page does not march. */
.sg-nw-story--flip .sg-nw-story__media { order: 2; }

.sg-nw-story__media {
  border-radius: var(--sg-radius-lg); overflow: hidden;
  box-shadow: var(--sg-shadow-lg);
  aspect-ratio: 16 / 9; background: var(--sg-green-tint);
  margin: 0;
}
.sg-nw-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sg-nw-story__role {
  font-family: var(--sg-font-head); font-weight: 700;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sg-orange-dark);
  display: block; margin-bottom: .6rem;
}
.sg-page .sg-nw-story h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: .5em;
}
.sg-page .sg-nw-story__where {
  font-size: .92rem; color: var(--sg-muted-2);
  margin-top: -.4rem; margin-bottom: 1.1rem;
}
.sg-page .sg-nw-story p {
  font-size: 1rem; line-height: 1.85; color: var(--sg-muted);
  margin-bottom: 1.1rem;
}
.sg-page .sg-nw-story p:last-child { margin-bottom: 0; }

/* The rest of the piece, held to a readable measure under the two columns. */
.sg-nw-story__rest {
  max-width: 76ch;
  margin-top: clamp(24px, 3.4vw, 40px);
}
.sg-page .sg-nw-story__rest a { color: var(--sg-green); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .sg-nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sg-nw-letter { grid-template-columns: 1fr; }
  .sg-nw-story__top { grid-template-columns: 1fr; }
  /* Flipping only matters when there are two columns to flip. */
  .sg-nw-story--flip .sg-nw-story__media { order: 0; }
}
@media (max-width: 620px) {
  .sg-nw-grid { grid-template-columns: 1fr; }
  /* One card per row means the publication name takes the whole line and
     the separator is left dangling at the end of it. */
  .sg-nw-card__meta .dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-nw-card, .sg-nw-card__media img { transition: none; }
  .sg-nw-card:hover { transform: none; }
  .sg-nw-card:hover .sg-nw-card__media img { transform: none; }
}

/* Visually hidden, still announced. Bootstrap ships a .sr-only, but it comes
   from a CDN that may not load, so this page carries its own. */
.sg-nw-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}