/* ==========================================================================
   ARKHOS ENERGY — Sustainability page
   New components only: transition pillars, emissions chart, low-carbon bento,
   report cover and document rows. Everything is built from style.css tokens.
   ========================================================================== */

/* ---------- 1. Transition pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
}
.pillars > * { min-width: 0; }
.pillar { display: flex; flex-direction: column; gap: 28px; padding-top: 28px; }
.pillar__intro { display: grid; gap: 16px; align-content: start; }
.pillar__intro h3 { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem); }
.pillar__detail { display: flex; flex-direction: column; gap: 28px; flex: 1; min-width: 0; }
.pillar__actions { list-style: none; border-top: 1px solid var(--rule); }
.pillar__actions li {
  position: relative;
  padding: 16px 0 16px 24px;
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.5;
}
.pillar__actions li::before {
  content: ""; position: absolute; left: 0; top: 27px;
  width: 12px; height: 2px; background: var(--accent-text);
}
.pillar__actions b { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.pillar__metric {
  margin-top: auto;
  padding-top: 22px;
  border-top: 2px solid var(--text);
  display: grid; gap: 10px;
}
/* `.feature p` would otherwise grey the figure and resize the label */
.pillar .pillar__metric .stat__value { font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4rem); color: var(--text); }
.pillar .pillar__label { color: var(--text-2); font-size: 0.95rem; max-width: 36ch; }

/* Spec lists on this page: labels on top, values share a bottom line even when a label wraps */
main .specs > div { align-content: space-between; }

/* Plan facts: six items, always in even rows (never an orphan cell) */
.plan-specs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1080px) { .plan-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plan-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 1080px) {
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pillar {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px clamp(32px, 5vw, 64px);
    padding-block: 32px 44px;
  }
  .pillar__metric { margin-top: 0; }
}
@media (max-width: 720px) {
  .pillar { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 2. Emissions chart ---------- */
.em-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.em-layout > * { min-width: 0; }
@media (max-width: 1080px) { .em-layout { grid-template-columns: minmax(0, 1fr); } }

/* One shrinkable column, so the opened data table scrolls inside .table-wrap instead of widening the page */
.emchart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; min-width: 0; }
.emchart > * { min-width: 0; }
.emchart__cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.emchart__title {
  font-family: var(--font-display); font-stretch: 108%; font-weight: 600;
  font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text);
}
.emchart__unit {
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.12em;
  color: var(--muted);
}
.emchart__legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2);
}
.emchart__legend > span { display: inline-flex; align-items: center; gap: 10px; }
@media (min-width: 561px) { .emchart__unit { margin-left: 6px; } }
.emchart__key { display: inline-block; flex: none; }
.emchart__key--bar { width: 10px; height: 14px; border-radius: 2px 2px 0 0; background: var(--flare); }
.emchart__key--path { width: 24px; height: 0; border-top: 2px dashed var(--sea); }

.emchart__plot { position: relative; min-height: 300px; }
.emchart__fallback { padding: 120px 0; text-align: center; }
.emchart__plot svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-mono); }

/* SVG marks (classes set by js/pages/sustainability.js) */
.em-grid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.em-base { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.em-minor { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.em-tick { fill: var(--muted); font-size: 11px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.em-tick--strong { fill: var(--text-2); }
.em-zone-label { fill: var(--muted); font-size: 10px; letter-spacing: 0.16em; }
.em-future { fill: var(--sea); fill-opacity: 0.05; }
.em-divider { stroke: var(--sea); stroke-opacity: 0.45; stroke-width: 1; shape-rendering: crispEdges; }
.em-area { fill: var(--sea); fill-opacity: 0.1; }
.em-path { fill: none; stroke: var(--sea); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; }
.em-mark { fill: var(--flare); transition: fill 0.2s, opacity 0.25s; }
.em-dot { fill: var(--sea); stroke: var(--bg); stroke-width: 2; transition: r 0.2s; }
.em-break { fill: var(--bg); }
.em-break-mark { stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; }
.em-val {
  fill: var(--text); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round;
}
.em-hit { fill: transparent; stroke: none; transition: fill 0.2s; }
.em-col { outline: none; cursor: default; }
.em-col.is-active .em-hit { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.em-col:focus-visible .em-hit { fill: color-mix(in srgb, var(--text) 5%, transparent); stroke: var(--flare); stroke-width: 1.5; }
.em-col.is-active .em-mark { fill: color-mix(in srgb, var(--flare) 70%, #ffffff); }
.em-svg.has-active .em-col:not(.is-active) .em-mark { opacity: 0.45; }
.em-col--path.is-active .em-dot { r: 7; }

@media (prefers-reduced-motion: no-preference) {
  .em-svg.is-growing .em-mark {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: emGrow 0.9s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  .em-svg.is-growing .em-pathway,
  .em-svg.is-growing .em-col--path,
  .em-svg.is-growing .em-val { animation: emFade 0.8s var(--ease) 0.6s both; }
}
@keyframes emGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes emFade { from { opacity: 0; } to { opacity: 1; } }

/* Tooltip */
.emchart__tip {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: max-content; max-width: min(250px, 80vw);
  padding: 12px 14px;
  background: rgba(5, 15, 21, 0.95);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity 0.18s;
}
.emchart__tip.is-visible { opacity: 1; }
.emchart__tip strong {
  display: block;
  font-family: var(--font-display); font-stretch: 110%; font-weight: 650; font-size: 1.12rem;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.emchart__tip span {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-mute);
}
.emchart__tip span::before { content: ""; width: 14px; height: 0; border-top: 2px solid var(--flare); flex: none; }
.emchart__tip.is-path span::before { border-top-style: dashed; border-color: var(--sea); }
.emchart__tip p {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 0.84rem; line-height: 1.4; color: var(--fg-2);
}

/* "View data" disclosure */
.emchart__data { border-top: 1px solid var(--rule); }
.emchart__data summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 0;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
  transition: color 0.2s;
}
.emchart__data summary::-webkit-details-marker { display: none; }
.emchart__data summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--accent-text); border-bottom: 1.5px solid var(--accent-text);
  transform: rotate(-45deg); transition: transform 0.3s var(--ease);
}
.emchart__data[open] summary::before { transform: rotate(45deg); }
.emchart__data summary:hover { color: var(--accent-text); }
.emchart__data .data-table { min-width: 720px; }
.emchart__data .data-table td:last-child { min-width: 280px; }
/* Space between the right-aligned numbers and the text column that follows */
.emchart__data .data-table .r { padding-right: 28px; }
.emchart__data .data-table th { white-space: nowrap; }
.emchart__data .data-table th:first-child,
.emchart__data .data-table td:first-child { width: 72px; }

.em-targets { display: grid; align-content: start; }
.em-targets__note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted); }

/* ---------- 3. Low-carbon bento ---------- */
.lc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.lc-grid > * { min-width: 0; }
.lc-grid .project-card { grid-column: span 2; min-height: 500px; }
/* Deeper scrim than the home rail: these cards carry longer copy over busy plant photos */
.lc-grid .project-card::after {
  background: linear-gradient(180deg, rgba(5, 15, 21, 0.4) 0%, rgba(5, 15, 21, 0) 24%, rgba(5, 15, 21, 0.62) 50%, rgba(5, 15, 21, 0.97) 100%);
}
.lc-grid .project-card--feature { grid-column: span 4; }
.project-card--feature h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
/* Body spans the card (so its scrim does too); the copy keeps a readable measure */
.project-card--feature .project-card__body > * { max-width: 700px; }
.project-card--feature p { font-size: 1rem; }
.lc-coords { display: block; margin-top: 4px; color: var(--fg-2); letter-spacing: 0.08em; opacity: 0.8; }
/* A scrim that follows the copy block, so the location line stays legible over bright plant photos */
.lc-grid .project-card__body { position: relative; }
.lc-grid .project-card__body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; bottom: 0; top: -96px;
  background: linear-gradient(180deg, rgba(5, 15, 21, 0) 0, rgba(5, 15, 21, 0.34) 48px, rgba(5, 15, 21, 0.64) 96px, rgba(5, 15, 21, 0.8) 160px, rgba(5, 15, 21, 0.9) 100%);
}@media (max-width: 1080px) {
  .lc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-grid .project-card { grid-column: span 1; }
  .lc-grid .project-card--feature { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .lc-grid { grid-template-columns: minmax(0, 1fr); }
  .lc-grid .project-card,
  .lc-grid .project-card--feature { grid-column: auto; min-height: 460px; }
}

/* ---------- 4. Nature ---------- */
.nature { align-items: center; }

/* ---------- 5. People ---------- */
.stories-head { align-items: center; }

/* ---------- 6. Governance ---------- */
.governance { align-items: start; }
.governance__quote { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); }

/* ---------- 7. Reports ---------- */
.reports {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.reports > * { min-width: 0; }
.reports__list { display: grid; align-content: start; }
/* The cover stays in view while the document list scrolls past */
@media (min-width: 1001px) {
  .reports > .report-cover { position: sticky; top: 104px; }
}
/* Stacked: the cover becomes a full-width band instead of a narrow card beside empty space */
@media (max-width: 1000px) {
  .reports { grid-template-columns: minmax(0, 1fr); }
  .reports > .report-cover { aspect-ratio: auto; min-height: 360px; }
  .reports > .report-cover .report-cover__title { max-width: 18ch; }
}

/* A report cover drawn in CSS: dark object on the limestone band */
.report-cover {
  --text: var(--fg); --text-2: var(--fg-2); --muted: var(--fg-mute);
  --rule: var(--line); --rule-strong: var(--line-strong); --accent-text: var(--flare);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 24px;
  aspect-ratio: 3 / 4;
  padding: clamp(24px, 2.6vw, 36px);
  padding-top: calc(clamp(24px, 2.6vw, 36px) + 4px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 70% at 100% 0%, var(--petrol-600) 0%, rgba(33, 70, 91, 0) 62%),
    linear-gradient(170deg, var(--petrol-800) 0%, var(--petrol-950) 100%);
  color: var(--fg);
  color-scheme: dark;
  box-shadow: 0 40px 80px -40px rgba(10, 26, 34, 0.6);
}
.report-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(176deg, transparent 0 22px, rgba(196, 222, 235, 0.06) 22px 23px);
  mask-image: linear-gradient(180deg, transparent 20%, #000 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 75%);
}
.report-cover::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--sheen);
}
.report-cover__top {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.22em; color: var(--fg-mute);
}
.report-cover__brand { color: var(--fg-2); }
.report-cover__year { color: var(--fg); letter-spacing: 0.12em; }
.report-cover__body { align-self: end; display: grid; gap: 14px; }
.report-cover__kicker {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--flare);
}
.report-cover__title {
  font-family: var(--font-display); font-stretch: 115%; font-weight: 700;
  font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.25rem); line-height: 1.05; letter-spacing: -0.025em;
  color: var(--fg); text-wrap: balance;
}
.report-cover__foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-mute);
}
.report-cover__btn { justify-self: start; }

/* Document rows */
.doclist { list-style: none; border-top: 1px solid var(--rule-strong); }
.doc {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 210px auto;
  align-items: center;
  gap: 12px 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  transition: background 0.25s, padding 0.35s var(--ease);
}
.doc:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); padding-left: 14px; padding-right: 14px; }
.doc__type {
  position: relative;
  width: 46px; height: 58px;
  display: grid; align-items: end; justify-items: center;
  padding-bottom: 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 3px 14px 3px 3px;
  background: var(--surface);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--accent-text);
}
.doc__type::before {
  content: ""; position: absolute; left: 9px; right: 9px; top: 12px; height: 13px;
  background: repeating-linear-gradient(180deg, var(--rule-strong) 0 1px, transparent 1px 4px);
}
.doc__type--data { color: var(--sea-ink); }
.doc__main { display: grid; gap: 4px; min-width: 0; }
.doc__title { font-size: 1.15rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; }
.doc__desc { color: var(--text-2); font-size: 0.94rem; }
.doc__meta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.doc__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: transparent; font-family: inherit; line-height: 1.2;
  font-weight: 500; font-size: 0.92rem; color: var(--text);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.doc__link::after { content: ""; position: absolute; inset: 0; }
.doc__link svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.doc:hover .doc__link { background: var(--text); color: var(--bg); border-color: var(--text); }
.doc:hover .doc__link svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .doc { grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 12px 18px; }
  .doc:hover { padding-left: 0; padding-right: 0; }
  .doc__type { grid-row: span 3; }
  .doc__meta, .doc__link { grid-column: 2; }
  .doc__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .doc__link { justify-self: start; padding: 8px 14px; }
}

.reports__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 24px 40px;
  margin-top: 32px;
}
.frameworks { --cluster-gap: 8px; list-style: none; }
.reports__contact { display: grid; gap: 8px; min-width: 0; }
.reports__email { font-size: 0.9rem; color: var(--text); overflow-wrap: anywhere; }

/* ---------- Report preview dialog ---------- */
.sus-docmodal { width: min(860px, calc(100vw - 32px)); }
.sus-docmodal__body {
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.sus-docmodal__info { display: grid; gap: 16px; justify-items: start; min-width: 0; padding-top: 8px; }
.sus-docmodal__info > h3 { margin-top: 8px; }
.sus-docmodal__list { display: grid; gap: 10px; width: 100%; border-top: 1px solid var(--line); padding-top: 14px; }
.sus-docmodal__list li { position: relative; padding-left: 24px; color: var(--fg-2); font-size: 0.95rem; line-height: 1.45; }
.sus-docmodal__list li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 12px; height: 2px; background: var(--flare);
}
.report-cover--sm {
  grid-template-rows: auto 1fr auto; gap: 18px;
  padding: 24px; padding-top: 28px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
/* `.modal__body p` would otherwise grey the cover's kicker and title */
.sus-docmodal .report-cover__kicker { color: var(--flare); }
.sus-docmodal .report-cover__title { color: var(--fg); font-size: 1.4rem; }
@media (max-width: 640px) {
  /* Block flow: only the cover sits beside the floating close button; the text below gets the full width */
  .sus-docmodal__body { display: block; }
  .sus-docmodal__info { margin-top: 24px; }
  .report-cover--sm { aspect-ratio: auto; min-height: 200px; }
}

/* ---------- CTA: keep the lead clear of the bright monitor wall on wide screens ---------- */
.sus-cta .lead { max-width: 52ch; }

/* ---------- CTA: deeper veil on phones and tablets, where copy spans the busy right side of the photo ---------- */
@media (max-width: 960px) {
  .sus-cta::before {
    background:
      linear-gradient(180deg, var(--petrol-900) 0%, rgba(5, 15, 21, 0.8) 22%, rgba(5, 15, 21, 0.84) 78%, var(--petrol-950) 100%);
  }
}