/* =============================================================
   Strategic Priorities — STANDALONE PAGE overrides
   (strategic-priorities.html)

   The page reuses sp-drawer.css (the cinematic modal styling) but
   renders it as a normal scrolling page under .sp-page instead of a
   fixed full-screen drawer. This file:
     1. neutralises the fixed-modal shell,
     2. adds Energy-Saver (light) theming via body.energy-saver,
     3. keeps the Related-risks triangles orange in BOTH themes,
     4. makes the whole thing responsive (incl. the gradient title).
   ============================================================= */

/* ── 1. Shell: turn the modal into an in-flow page ───────────── */
.sp-cine-drawer.sp-page {
  position: static;
  inset: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
  min-height: auto;
}
.sp-cine-drawer.sp-page .perf-drawer-scroll {
  height: auto;
  overflow: visible;
}

/* Dark (cinematic) page base */
body.cinematic { background: #040214; }

/* ── Banner — 1:1 with about-hzl.html ─────────────────────────
   Same wrapper (env-body-wrap), breadcrumb, gradient slab, gradient
   statement, lede and magazine grid — identical dimensions so the
   layout matches the other pages exactly. The S1–S5 content below
   still uses the sp-drawer.css styling. */

/* Page wrapper: match .env-page exactly (header height + 16px, so the
   breadcrumb gets the same space above it as about-hzl). */
.sp-cine-drawer.sp-page { padding-top: calc(var(--header-h, 76px) + 16px); }

/* Content column: match .env-body-wrap exactly */
.sp-cine-drawer.sp-page .env-body-wrap {
  max-width: 1400px; margin: 0 auto;
  padding: 142px clamp(2rem, 8vw, 7rem) 70px;
}

/* Breadcrumb — same classes & placement as about-hzl */
.env-breadcrumb {
  position: absolute;
  top: calc(var(--header-h, 76px) + 8px);
  left: 0; width: 100%;
  z-index: 89; background: transparent; border: none; pointer-events: none;
}
.env-breadcrumb__inner {
  max-width: 1400px; margin: 0 auto; padding: 0 clamp(2rem, 8vw, 7rem);
  display: flex; align-items: center; flex-wrap: wrap; pointer-events: auto;
}
.env-breadcrumb__item {
  font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: uppercase;
  color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s ease; white-space: nowrap;
}
.env-breadcrumb__item:hover { color: #7fb942; }
.env-breadcrumb__sep { font-size: 11px; color: rgba(255,255,255,0.25); padding: 0 12px; user-select: none; }
.env-breadcrumb__item--active { color: rgba(255,255,255,0.75); pointer-events: none; }

/* Gradient-slab title block ("Strategic Priorities") — exact about-hzl */
.about-titleblock {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 10px 24px 10px 18px; isolation: isolate; margin: 0;
}
.about-titleblock__bg {
  position: absolute; top: 0; left: 0; width: 25px; height: 50px; z-index: -1;
  background: linear-gradient(180deg, #4D6DB3 0%, #70AAA5 55%, #5DB787 100%);
}
.about-titleblock__title {
  display: block; margin: 0; font-family: 'League Gothic', sans-serif;
  font-size: 35px; font-weight: 400; line-height: 0.95;
  letter-spacing: 0; text-transform: uppercase; color: #ffffff;
}

/* Big gradient statement — exact about-hzl */
.about-statement {
  font-family: 'League Gothic', sans-serif; font-size: 35px; font-weight: 400;
  line-height: 1.0; text-transform: uppercase; letter-spacing: 0; margin: 14px 0 0;
  background: linear-gradient(90deg, #1A6FBF 0%, #1B2F8A 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Lede paragraph — exact about-hzl (18px) */
.env-lede {
  font-size: 18px; font-weight: 700; line-height: 1.55;
  color: rgba(255,255,255,0.92); margin: 24px 0 24px;
}

/* Scroll-reveal animation — exact about-hzl (slide in from left + fade) */
.env-climate-reveal {
  opacity: 0; transform: translateX(-60px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.env-climate-reveal.revealed { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .env-climate-reveal { opacity: 1; transform: none; transition: none; }
}

/* Magazine hero (text left, image right) — exact about-hzl */
.about-mag {
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 44px;
  align-items: start; margin-bottom: 6px;
}
.about-mag__media { position: static; }
.about-hero-top {
  width: 100%; aspect-ratio: 1962 / 1335; max-height: 380px;
  object-fit: cover; display: block; border-radius: 14px;
}
@media (max-width: 880px) {
  .about-mag { grid-template-columns: 1fr; gap: 26px; }
  .about-mag__media { order: -1; }
}

/* Light / Energy-Saver banner theming */
body.energy-saver .env-breadcrumb__item { color: rgba(12,35,64,0.5); }
body.energy-saver .env-breadcrumb__item:hover { color: #1559a6; }
body.energy-saver .env-breadcrumb__sep { color: rgba(12,35,64,0.3); }
body.energy-saver .env-breadcrumb__item--active { color: #0C2340; }
body.energy-saver .about-titleblock__title { color: #0c2340; }
body.energy-saver .env-lede { color: #495464; }
/* .about-statement stays gradient-clipped (reads on light too). */

/* ── 2. Energy-Saver (light) theme ───────────────────────────── */
/* The shared home-header.css already flips body.energy-saver to a
   light page (white bg / dark text). Re-skin the drawer content so it
   reads on light, mirroring the other pages' Energy-Saver treatment. */
body.energy-saver .sp-cine-drawer.sp-page { background: #ffffff; color: #0c2340; }

/* Intro band keeps its own dark gradient -> text stays white (both modes). */
/* .pd-title is gradient-clipped text -> reads on light too, leave it. */

body.energy-saver .sp-cine-drawer .pd-eyebrow { color: #0069aa; }
body.energy-saver .sp-cine-drawer .pd-block {  }
body.energy-saver .sp-cine-drawer .id-lead { color: #495464; }
body.energy-saver .sp-cine-drawer .id-list > li { color: #495464; }
body.energy-saver .sp-cine-drawer .id-list ul > li { color: #5a6573; }
body.energy-saver .sp-cine-drawer .sp-divider { background: rgba(12, 35, 64, 0.14); }

body.energy-saver .sp-cine-drawer .id-num {
  background: rgba(0, 105, 170, 0.08);
  border-color: rgba(0, 105, 170, 0.45);
  color: #0069aa;
  -webkit-text-fill-color: #0069aa;
}

body.energy-saver .sp-cine-drawer .sp-infobox {
  background: #ffffff;
  border-color: rgba(12, 35, 64, 0.12);
}
body.energy-saver .sp-cine-drawer .sp-infosec + .sp-infosec { border-top-color: rgba(12, 35, 64, 0.12); }
/* "Way forward" heading = BLUE in both themes (light = brand blue, dark = brighter blue) */
body.energy-saver .sp-cine-drawer .sp-wf-head { color: #1559a6; }
body.cinematic .sp-cine-drawer .sp-wf-head { color: #4a9fe6; }
/* id-sub-head / sp-infohead / id-tl-theme / id-tl-year colours are set in
   section 3b below (brand purple/blue + white pills). */

/* ── 3. Related-risks triangles: ALWAYS orange ───────────────── */
.sp-cine-drawer .sp-risk,
body.energy-saver .sp-cine-drawer .sp-risk,
body.cinematic .sp-cine-drawer .sp-risk {
  background: linear-gradient(160deg, #F8A930, #ED8A1C) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── 3b. Brand colours from the source design (index1.html) ─────
   "Actions taken" sub-head + Way-forward phase themes = PURPLE.
   Bullet squares = BLUE, sub-bullets = GREEN.
   Infobox heads (Related risks / Capitals / KPIs) = PURPLE.
   FY year pills keep their gradient + WHITE text in both modes.

   LIGHT (energy-saver) uses the exact source values; DARK (cinematic)
   uses lighter tints so purple/blue stay legible on the near-black bg. */

/* --- LIGHT / Energy-Saver: exact source colours --- */
body.energy-saver .sp-cine-drawer .id-sub-head { color: #6D4099; }
body.energy-saver .sp-cine-drawer .id-tl-theme { color: #6D4099; }
body.energy-saver .sp-cine-drawer .sp-infohead { color: #6D4099; }
body.energy-saver .sp-cine-drawer .id-list > li::before { background: #1e73c8; }
body.energy-saver .sp-cine-drawer .id-list ul > li::before { background: #4e7d23; }

/* --- DARK / Cinematic: lighter purple/blue so they read on #040214 --- */
body.cinematic .sp-cine-drawer .id-sub-head { color: #b79de0; }
body.cinematic .sp-cine-drawer .id-tl-theme { color: #b79de0; }
body.cinematic .sp-cine-drawer .sp-infohead { color: #b79de0; }
body.cinematic .sp-cine-drawer .id-list > li::before { background: #4a9fe6; }
body.cinematic .sp-cine-drawer .id-list ul > li::before { background: #7fb942; }

/* FY year pills: gradient background, WHITE text — both modes */
.sp-cine-drawer .id-tl-year,
body.energy-saver .sp-cine-drawer .id-tl-year,
body.cinematic .sp-cine-drawer .id-tl-year {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Section title (e.g. "Maintaining a Portfolio of Mines with Long Life"):
   smaller than the modal default, and BLUE in both themes
   (light = brand blue #1559a6, dark = brighter blue for legibility). */
.sp-cine-drawer.sp-page .id-block-title {
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.1;
}
body.energy-saver .sp-cine-drawer .id-block-title { color: #1559a6; }
body.cinematic .sp-cine-drawer .id-block-title { color: #4a9fe6; }

/* ── 4. Responsive ───────────────────────────────────────────── */
/* Gradient statement: never let the clipped-gradient headline overflow. */
.about-statement {
  max-width: 100%;
  overflow-wrap: break-word;
}
html, body { overflow-x: hidden; }

@media (max-width: 880px) {
  /* match about-hzl: tighter body-wrap padding on tablets/phones */
  .sp-cine-drawer.sp-page .env-body-wrap {
    padding: clamp(96px, 16vw, 120px) clamp(1.25rem, 6vw, 3rem) 48px;
  }
}

@media (max-width: 600px) {
  .about-titleblock__title { font-size: 30px; }
  .about-statement { font-size: 30px; }
  /* keep the risk triangles from shrinking too far on phones */
  .sp-cine-drawer .sp-risk { width: 46px; height: 40px; }
}