/* ======================================================================================================
   File:    eco-restoration.css
   Path:    /assets/css/eco/eco-restoration.css
   Version: v2.6.2
   Issued:  2026-08-01
   Owner:   Buktika Webdesk (Binka)
   Scope:   Eco Restoration channel page, beginning with the approved photographic hero treatment.
   Changelog:
     v2.6.2 (2026-08-01): Added mobile hyphenation and emergency wrapping to
       translated hero, section, progression and CTA headings so long German
       compounds cannot create horizontal page overflow.
     v2.6.1 (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 v2.6.0 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.
     v2.6.0 (2026-07-31): Added the canonical EduTower media-lightbox to all five
       narrative-section photographs — same pattern as .page-eco-conservation
       (assets/css/eco/eco-conservation.css) and now also
       /eco/restoration-programme.html: a page-scoped .media-thumb reset (block, no
       border/padding/background, cursor:zoom-in) on .eco-restoration-media, plus a
       #media-lightbox .lightbox-caption sizing override (full-width) for the
       title+description caption pairs. Shared component files unchanged.
     v2.5.0 (2026-07-31): Lightened and shortened the left-edge hero overlay to match the
       restrained vignette approved on /eco/restoration-programme.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 wetland/veld
       photography stays bright instead of sitting under a broad dark wash. Text-shadow on
       headline/tagline/intro left untouched.
     v2.4.0 (2026-07-30): Added the Claim Boundary section (image-and-prose threshold pattern
                          approved for Eco Conservation) and removed the source/"Where this
                          comes from" section, which is not part of the approved public
                          narrative for this channel.
     v2.3.0 (2026-07-30): Added the Record section (image-and-progression pattern approved for Eco Conservation).
     v2.2.0 (2026-07-29): Added the alternating intervention image-and-prose section.
     v2.1.1 (2026-07-29): Darkened section eyebrows to the governed deep green.
     v2.1.0 (2026-07-29): Added the land-focused image-and-prose opening section.
     v2.0.0 (2026-07-29): Replaced the gradient hero with a bright restoration
                          landscape, localized left vignette and the approved
                          Eco Conservation/EduTower hero typography.
     v1.1.0 (2026-07-21): Structural rules consolidated into public-entity.css (Batch 2 audit).
   ====================================================================================================== */

.page-eco-restoration {
  --page-bg:            var(--sdx-color-shell-bg);
  --page-primary:       var(--sdx-color-restoration-glow);
  --page-secondary:     var(--sdx-color-restoration-lime);
  --page-accent:        var(--sdx-color-restoration-lime);
  --page-depth:         var(--sdx-color-eco-dark-base);

  --hero-image: url("/assets/images/eco/restoration/eco-restoration-hero-south-africa.webp");
}

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

.page-eco-restoration .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-restoration .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-restoration .hero > .container {
  width: 100%;
}

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

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

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

.page-eco-restoration .hero .intro {
  margin-left: 0;
  margin-right: 0;
}

/* Exact approved EduTower tagline treatment. */
.page-eco-restoration .hero .tagline {
  color: var(--sdx-color-mama-amber);
  text-shadow:
    0 4px 50px rgb(0, 0, 0),
    0 4px 30px rgb(0, 0, 0),
    0 8px 32px rgb(0, 0, 0);
}

.page-eco-restoration .eyebrow {
  display: block;
  margin-bottom: 2.25rem;
  color: var(--sdx-color-green-deep);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

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

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

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

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

.page-eco-restoration .eco-restoration-section-body .section-intro,
.page-eco-restoration .eco-restoration-prose,
.page-eco-restoration .eco-restoration-prose p {
  color: var(--muted);
  font-family: var(--text-font);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.7;
}

.page-eco-restoration .eco-restoration-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-restoration .eco-restoration-media {
  min-width: 0;
  margin: 0;
}

.page-eco-restoration .eco-restoration-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);
}

/* EduTower-matched media-lightbox trigger reset — same pattern as
   .page-eco-conservation .eco-conservation-media .media-thumb in eco-conservation.css. */
.page-eco-restoration .eco-restoration-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-restoration .eco-restoration-media .media-thumb::-moz-focus-inner {
  border: 0;
  padding: 0;
}

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

.page-eco-restoration .eco-restoration-prose > :first-child {
  margin-top: 0;
}

.page-eco-restoration .eco-restoration-prose > :last-child {
  margin-bottom: 0;
}

/* Approved Eco Conservation Record pattern: documentary image beside one continuous progression. */
.page-eco-restoration .eco-restoration-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-restoration .eco-restoration-record-content {
  min-width: 0;
}

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

.page-eco-restoration .eco-restoration-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-restoration .eco-restoration-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-restoration .eco-restoration-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-restoration .eco-restoration-progression-step h3 {
  margin: 0 0 0.35rem;
  color: var(--fg);
  font-family: var(--headline-font);
  font-size: 1.25rem;
}

.page-eco-restoration .eco-restoration-progression-step p {
  margin: 0;
  color: var(--muted);
  font-family: var(--text-font);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.7;
}

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

.page-eco-restoration .eco-restoration-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-restoration .eco-restoration-boundary-copy {
  min-width: 0;
}

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

.page-eco-restoration .eco-restoration-boundary-prose,
.page-eco-restoration .eco-restoration-boundary-prose p {
  color: var(--muted);
  font-family: var(--text-font);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.7;
}

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

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

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

/* Lightbox caption sizing override — same fix as .page-eco-conservation and
   .page-restoration-programme. `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-restoration #media-lightbox .lightbox-caption {
  display: block;
  box-sizing: border-box;
  align-self: center;
  width: auto;
  max-width: min(90vw, 640px);
}

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

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

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

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

@media (max-width: 640px) {
  .page-eco-restoration .headline,
  .page-eco-restoration .eco-restoration-section-body h2,
  .page-eco-restoration .eco-restoration-progression-step h3,
  .page-eco-restoration .sdx-cta-band-inner h2 {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .page-eco-restoration .hero-wrap {
    background-position: 64% 50%;
  }

  .page-eco-restoration .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-restoration .eco-restoration-progression-step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

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

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