/* ======================================================================================================
   File:    eco-conservation.css
   Path:    /assets/css/eco/eco-conservation.css
   Version: v2.5.4
   Issued:  2026-07-31
   Owner:   Buktika Webdesk (Binka)
   Scope:   Eco Conservation narrative page, using the approved EduTower section language.
   Changelog:
     v2.5.4 (2026-07-31): Fixed the lightbox caption rendering far wider than the image
       when gallery arrows are visible (.lightbox-inner/.lightbox-media switch to a wide
       flex row to make room for the arrows; the width:100% override stretched the
       caption to that full row). Capped the caption back to max-width:min(90vw,640px)
       and centred it instead of stretching it. Same fix applied to
       /eco/eco-restoration.html and /eco/restoration-programme.html.
     v2.5.3 (2026-07-31): Darkened the hero intro paragraph's text-shadow (0.58 → 0.78
       opacity, plus a tighter second layer) now that the lighter left-edge overlay (v2.5.2)
       lets more bright photography show through behind the white intro text. Headline and
       tagline shadows unchanged.
     v2.5.2 (2026-07-31): Lightened and shortened the left-edge hero overlay to match the
       restrained vignette approved on /eco/restoration-programme.html and
       /eco/eco-restoration.html — peak opacity dropped from 0.78 to 0.30 (mobile 0.82 to
       0.34) and it now clears to transparent by 16% of width instead of 49% (mobile 20%
       instead of 88%), so the Bosveld/Laeveld photography stays bright instead of sitting
       under a broad dark wash. Text-shadow on headline/tagline/intro left untouched.
     v2.5.1 (2026-07-29): Widened the hero text container for longer translated
                          headlines, including the German title.
     v2.4.2 (2026-07-29): Tightened the hero tagline shadow to remove the broad
                          dark halo while retaining local text contrast.
     v2.4.1 (2026-07-29): Widened the terminal CTA content container so its heading
                          remains on one line at desktop and tablet widths.
     v2.4.0 (2026-07-29): Added EduTower-matched media-thumb resets and lightbox
                          caption sizing for all five narrative photographs.
     v2.3.0 (2026-07-29): Rebuilt the Claim Boundary as a 56/44 image-and-prose
                          section using a bright 4:3 documentary field image.
     v2.2.2 (2026-07-29): Removed the inherited auto margins from the hero introduction
                          so headline, tagline and introduction share one left axis.
     v2.2.1 (2026-07-29): Widened the desktop hero text block so the Eco Conservation
                          headline can remain on one line.
     v2.2.0 (2026-07-29): Re-centred the page on intact land, Ecological Age and
                          continued protection; unified every content-section
                          introduction and body line on one computed typography.
     v2.1.2 (2026-07-29): Removed the legal-note font-size exception so all Claim
                          Boundary prose uses the canonical body size.
     v2.1.1 (2026-07-29): Added the refined claim-boundary hierarchy and its quiet
                          subordinate legal note.
     v2.1.0 (2026-07-29): Rebuilt the hero with the unfiltered Bosveld/Laeveld image,
                          canonical hero typography and a localized readability gradient.
     v2.0.2 (2026-07-29): Tightened the concise boundary section and removed the
                          superseded governance-reference note treatment.
     v2.0.1 (2026-07-29): Added the Bosveld/Laeveld conservation hero photograph with a
                          restrained readability veil for the centred hero copy.
     v2.0.0 (2026-07-29): Rebuilt around generational stewardship with EduTower-aligned
                          heading, image-and-prose, progression and boundary treatments.
   ====================================================================================================== */

.page-eco-conservation {
  --page-bg:        var(--sdx-color-shell-bg);
  --page-primary:   var(--sdx-color-eco-muted);
  --page-secondary: var(--sdx-color-eco-sage);
  --page-accent:    var(--sdx-color-eco-mint);
  --page-depth:     var(--sdx-color-eco-dark-base);

  --hero-image: url("/assets/images/eco/conservation/eco-conservation-hero-bosveld-laeveld.webp");
}

.page-eco-conservation .hero-wrap {
  position: relative;
  min-height: var(--hero-min);
  background-image: var(--hero-image);
  background-size: cover;
  background-position: 52% 50%;
}

.page-eco-conservation .hero-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(7, 27, 17, 0.30) 0%,
    rgba(7, 27, 17, 0.12) 8%,
    rgba(7, 27, 17, 0) 16%
  );
}

.page-eco-conservation .hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: none;
  min-height: var(--hero-min);
  padding: 0;
  text-align: left;
}

.page-eco-conservation .hero > .container {
  width: 100%;
}

.page-eco-conservation .hero-content {
  max-width: 60rem;
  margin: 0;
  text-align: left;
}

.page-eco-conservation .hero .headline {
  margin: 0 0 1.5rem;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

.page-eco-conservation .hero .headline {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58);
}

.page-eco-conservation .hero .intro {
  margin-left: 0;
  margin-right: 0;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.78),
    0 1px 4px rgba(0, 0, 0, 0.65);
}

.page-eco-conservation .hero .tagline {
  color: var(--sdx-color-mama-amber);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72);
}

/* Canonical EduTower heading block: eyebrow, heading and introduction share one left axis. */
.page-eco-conservation .eyebrow {
  display: block;
  margin-bottom: 2.25rem;
  color: var(--page-primary);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.page-eco-conservation .eco-conservation-section-body {
  text-align: left;
}

.page-eco-conservation .eco-conservation-section-body h2 {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  text-align: left;
}

.page-eco-conservation .eco-conservation-section-body p {
  text-align: left;
}

.page-eco-conservation .eco-conservation-section-body .section-intro {
  max-width: none;
  margin: 0 0 1.25rem;
}

/* One prose contract across every content section. Introductions are not leads here:
   they carry the same approved EduTower body typography as the paragraphs that follow. */
.page-eco-conservation .eco-conservation-section-body .section-intro,
.page-eco-conservation .eco-conservation-prose,
.page-eco-conservation .eco-conservation-prose p,
.page-eco-conservation .eco-conservation-prose li,
.page-eco-conservation .eco-conservation-progression-step p,
.page-eco-conservation .eco-conservation-boundary-prose,
.page-eco-conservation .eco-conservation-boundary-prose p {
  color: var(--muted);
  font-family: var(--text-font);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.7;
}

/* EduTower image-and-prose section pattern. */
.page-eco-conservation .eco-conservation-narrative-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 2.25rem;
}

.page-eco-conservation .eco-conservation-media {
  min-width: 0;
  margin: 0;
}

.page-eco-conservation .eco-conservation-media .media-thumb {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.75rem;
  background: none;
  cursor: zoom-in;
  text-align: left;
}

.page-eco-conservation .eco-conservation-media .media-thumb::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.page-eco-conservation .eco-conservation-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 0.75rem;
  box-shadow: var(--card-shadow);
}

.page-eco-conservation .eco-conservation-prose {
  min-width: 0;
}

.page-eco-conservation .eco-conservation-prose > :first-child,
.page-eco-conservation .eco-conservation-boundary-prose > :first-child {
  margin-top: 0;
}

.page-eco-conservation .eco-conservation-prose > :last-child,
.page-eco-conservation .eco-conservation-boundary-prose > :last-child {
  margin-bottom: 0;
}

/* Approved EduTower Record pattern: documentary image beside one continuous progression. */
.page-eco-conservation .eco-conservation-record-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 2.25rem;
}

.page-eco-conservation .eco-conservation-record-media {
  display: block;
}

.page-eco-conservation .eco-conservation-record-media img {
  height: auto;
  min-height: 0;
}

.page-eco-conservation .eco-conservation-record-content {
  min-width: 0;
}

.page-eco-conservation .eco-conservation-progression {
  max-width: 44rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.page-eco-conservation .eco-conservation-progression-step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0 0 1.75rem;
  text-align: left;
}

.page-eco-conservation .eco-conservation-progression-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 3rem 0;
  inset-inline-start: calc(1.5rem - 1px);
  width: 2px;
  background: color-mix(in srgb, var(--page-primary) 32%, var(--border));
}

.page-eco-conservation .eco-conservation-progression-number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--page-primary) 0%,
    color-mix(in srgb, var(--page-primary) 65%, black) 100%
  );
  color: #ffffff;
  font-weight: 700;
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--page-primary) 35%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.page-eco-conservation .eco-conservation-progression-step h3 {
  margin: 0 0 0.35rem;
  color: var(--fg);
  font-family: var(--headline-font);
  font-size: 1.25rem;
}

.page-eco-conservation .eco-conservation-progression-step p {
  margin: 0;
}

/* Final image-and-prose threshold: evidence remains visibly connected to the land. */
.page-eco-conservation .eco-conservation-boundary {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.page-eco-conservation .eco-conservation-boundary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.page-eco-conservation .eco-conservation-boundary-copy {
  min-width: 0;
}

.page-eco-conservation .eco-conservation-boundary-prose {
  margin-top: 2.25rem;
}

.page-eco-conservation .eco-conservation-boundary-media {
  min-width: 0;
}

/* display:block keeps the title+description pair readable (canonical
   .lightbox-caption is inline-flex, which collapsed the split caption).
   align-self:stretch/width:100% (the original fix) is wrong once a gallery's
   prev/next arrows are visible: .lightbox-inner/.lightbox-media switch to a wide
   flex row to make room for the arrows, and the caption stretched to that full row
   width — much wider than the image above it. Capped back to the canonical
   max-width so the caption reads as a caption, not a banner. */
.page-eco-conservation #media-lightbox .lightbox-caption {
  display: block;
  box-sizing: border-box;
  align-self: center;
  width: auto;
  max-width: min(90vw, 640px);
}

.page-eco-conservation .sdx-cta-band-inner {
  width: 100%;
  max-width: 56rem;
}

/* The CTA remains still on pointer and keyboard interaction. */
.page-eco-conservation .sdx-cta-band .sdx-btn-primary,
.page-eco-conservation .sdx-cta-band .sdx-btn-primary:hover,
.page-eco-conservation .sdx-cta-band .sdx-btn-primary:focus,
.page-eco-conservation .sdx-cta-band .sdx-btn-primary:focus-visible {
  transform: none;
}

@media (max-width: 968px) {
  .page-eco-conservation .eco-conservation-narrative-layout,
  .page-eco-conservation .eco-conservation-record-layout,
  .page-eco-conservation .eco-conservation-boundary-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .page-eco-conservation .eco-conservation-narrative-layout--reverse .eco-conservation-prose {
    order: 2;
  }

  .page-eco-conservation .eco-conservation-narrative-layout--reverse .eco-conservation-media {
    order: 1;
  }

}

@media (max-width: 768px) {
  .page-eco-conservation .sdx-card-section {
    padding: 2rem 1.25rem;
  }
}

@media (max-width: 640px) {
  .page-eco-conservation .hero-wrap {
    background-position: 66% 50%;
  }

  .page-eco-conservation .hero-wrap::after {
    background:
      linear-gradient(
        to top,
        rgba(7, 27, 17, 0.32) 0%,
        rgba(7, 27, 17, 0.14) 24%,
        rgba(7, 27, 17, 0) 44%
      ),
      linear-gradient(
        to right,
        rgba(7, 27, 17, 0.34) 0%,
        rgba(7, 27, 17, 0.14) 10%,
        rgba(7, 27, 17, 0) 20%
      );
  }

  .page-eco-conservation .eco-conservation-progression-step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .page-eco-conservation .eco-conservation-progression-number {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.9375rem;
  }

  .page-eco-conservation .eco-conservation-progression-step:not(:last-child)::after {
    inset-block-start: 2.5rem;
    inset-inline-start: calc(1.25rem - 1px);
  }

}

[data-theme="dark"] .page-eco-conservation {
  --page-bg: var(--bg);
  background: var(--bg);
  color: var(--fg);
}

[data-theme="dark"] .page-eco-conservation .eyebrow {
  color: var(--page-accent);
}

[data-theme="dark"] .page-eco-conservation .eco-conservation-media img {
  box-shadow: var(--card-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .page-eco-conservation * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}