/* ==========================================================================
   SCCWS Nepal — Impact & Stories page additions
   Builds on top of assets/css/style.css (shared design tokens, header,
   footer, buttons, section-heading, icon-badge, etc.). Only the
   component styles that Home/About/Our-Work don't already define live here.
   ========================================================================== */

.icon-badge--solid-forest-light { background-color: var(--color-brand-forest-light); color: var(--color-brand-mint-pale); }

/* ---- Compact section heading (eyebrow + small heading), unique to this page ---- */
.impact-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.impact-kicker {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--color-brand-amber);
  margin-bottom: 10px;
}

.impact-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-brand-forest);
}

.impact-lede {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-body);
  margin-top: var(--space-2);
  max-width: 672px;
}

.impact-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.impact-head-row__aside {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-body);
  max-width: 448px;
}

.impact-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
  max-width: 576px;
}

.impact-head--center .impact-lede {
  font-size: 16px;
  margin-inline: auto;
}

.impact-section-gap { margin-bottom: var(--space-12); }

@media (max-width: 767.98px) {
  .impact-head-row { align-items: flex-start; }
}

/* ---- Pill badge (dark, used on Hero + CTA) ------------------------------- */
.pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-forest-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-brand-mint);
  white-space: nowrap;
}

/* ---- Impact hero ---------------------------------------------------------- */
.impact-hero {
  position: relative;
  overflow: hidden;
}

.impact-hero__glow {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 400' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(90.51 0 0 28.284 640 200)'><stop stop-color='rgba(158,209,189,1)' offset='0.088388'/><stop stop-color='rgba(158,209,189,0)' offset='0.088388'/></radialGradient></defs></svg>");
}

.impact-hero__content {
  position: relative;
  z-index: 1;
}

.impact-hero h1 {
  font-size: 48px;
  line-height: 56px;
  color: var(--color-white);
  max-width: 672px;
  margin: 2rem 0;
}

.impact-hero__lede {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 576px;
}

@media (max-width: 767.98px) {
  .impact-hero h1 { font-size: 30px; line-height: 38px; }
  .impact-hero__lede { font-size: 15px; line-height: 22px; }
}

/* ---- What Impact Means cards ----------------------------------------------- */
.impact-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.impact-value-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.impact-value-card .icon-badge svg { width: 22px; height: auto; }
.impact-value-card h3 { font-size: 20px; }
.impact-value-card p { font-size: 14px; line-height: 20px; }

@media (max-width: 991.98px) {
  .impact-value-grid { grid-template-columns: 1fr; }
}

/* ---- Tag pill (peach, used on program tiles + story cards) ----------------- */
.pill-tag-peach {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 220, 195, 0.3);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-brand-amber);
  white-space: nowrap;
}

/* ---- Inline "learn more" style link (reused arrow icon) -------------------- */
.impact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-brand-forest);
}
.impact-link svg { width: 10.667px; height: 10.667px; flex-shrink: 0; }

/* ---- Our Work in Action: program tiles -------------------------------------- */
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.program-tile {
  background-color: var(--color-bg-page);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.program-tile__image { height: 192px; overflow: hidden; }
.program-tile__image img { width: 100%; height: 100%; object-fit: cover; }

.program-tile__body {
  padding: var(--space-6);
}

.program-tile__body .pill-tag-peach { margin-bottom: var(--space-2); }
.program-tile__body h3 { font-size: 20px; margin: var(--space-2) 0; }
.program-tile__body p { font-size: 14px; line-height: 20px; margin-bottom: var(--space-4); }
.program-tile .impact-link { margin-top: auto; }

@media (max-width: 991.98px) {
  .program-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .program-grid { grid-template-columns: 1fr; }
}

/* ---- Past Initiatives: milestone cards -------------------------------------- */
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.milestone-card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.milestone-card__eyebrow { font-size: 12px; font-weight: 700; color: var(--color-text-body); }
.milestone-card h3 { font-size: 20px; }
.milestone-card p { font-size: 14px; line-height: 20px; }

@media (max-width: 767.98px) {
  .milestone-grid { grid-template-columns: 1fr; }
}

/* ---- Impact Stories: story cards --------------------------------------------- */
.story-grid {
  display: flex;
  gap: var(--space-8);
  align-items: stretch;
}

.story-card {
  flex: 1 1 0;
  min-width: 0;
  background-color: var(--color-bg-page);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.story-card__image { height: 256px; overflow: hidden; }
.story-card__image img { width: 100%; height: 100%; object-fit: cover; }

.story-card__body {
  padding: var(--space-8);
}

.story-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.story-card__date { font-size: 12px; font-weight: 700; color: var(--color-text-body); white-space: nowrap; }
.story-card__body h3 { font-size: 20px; margin: var(--space-2) 0; }
.story-card__body p { font-size: 14px; line-height: 20px; }
.story-card .impact-link { margin-top: auto; padding-top: var(--space-4); }

@media (max-width: 767.98px) {
  .story-grid { flex-direction: column; }
}

/* ---- Photo Gallery ------------------------------------------------------------ */
.gallery-grid {
  display: flex;
  gap: var(--space-6);
}

.gallery-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 288px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }

.gallery-tile__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-6);
  background: linear-gradient(to top, rgba(0, 54, 41, 0.8) 0%, rgba(0, 54, 41, 0) 55%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery-tile:hover .gallery-tile__caption,
.gallery-tile:focus-within .gallery-tile__caption { opacity: 1; }

.gallery-tile__caption span { font-size: 14px; color: var(--color-white); }

@media (max-width: 767.98px) {
  .gallery-grid { flex-direction: column; }
  .gallery-tile { height: 240px; }
  .gallery-tile__caption { opacity: 1; background: linear-gradient(to top, rgba(0, 54, 41, 0.75) 0%, rgba(0, 54, 41, 0) 65%); }
}

/* ---- Transparency: disclosure cards -------------------------------------------- */
.disclosure-grid {
  display: flex;
  gap: var(--space-6);
  align-items: stretch;
}

.disclosure-card {
  flex: 1 1 0;
  min-width: 0;
  background-color: var(--color-bg-page);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.disclosure-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.disclosure-card__icon { width: 22px; height: auto; color: var(--color-brand-forest); flex-shrink: 0; }

.disclosure-card h3 { font-size: 20px; font-weight: 600; color: var(--color-brand-forest); }
.disclosure-card p { font-size: 14px; line-height: 20px; }

.disclosure-card__status {
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  color: rgba(64, 73, 69, 0.6);
  margin-top: auto;
}

@media (max-width: 991.98px) {
  .disclosure-grid { flex-wrap: wrap; }
  .disclosure-card { flex: 1 1 calc(50% - var(--space-6)); }
}
@media (max-width: 575.98px) {
  .disclosure-card { flex: 1 1 100%; }
}

/* ---- Impact CTA (dark, centered) ------------------------------------------------ */
.impact-cta {
  text-align: center;
}

.impact-cta__inner {
  max-width: 672px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.impact-cta h2 {
  font-size: 36px;
  font-weight: 400;
  color: var(--color-white);
}

.impact-cta p {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
}

.impact-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.btn-light {
  background-color: var(--color-bg-page);
  color: var(--color-brand-forest);
  box-shadow: var(--shadow-card);
}
.btn-light:hover { background-color: var(--color-white); color: var(--color-brand-forest); }