/* =====================================================================
   Performance Highlights — inside page (performance-highlights.html)
   ---------------------------------------------------------------------
   Loaded AFTER main.css (tokens, nav/footer, #site-waves, [data-reveal])
   and about.css (the container/row/col grid and the shared .abt-hero
   furniture). Only what differs on this page lives here.
   ===================================================================== */

/* ---- 1. hero ---------------------------------------------------------
   Type-only plate, like Global Footprint and the verticals chapter: no
   banner photograph, so the parts of .abt-hero that exist to serve a
   picture are undone and the title takes brand blue for its contrast. */
.perf-hero {
  min-height: 0;
  display: block;
  overflow: visible;
  /* top pad clears the fixed nav, which sits over the hero on every page */
  padding: 150px 0 0;
  background: #fff;
}
.perf-hero .abt-hero__inner { padding-bottom: 0; }
.perf-hero .abt-hero__title {
  color: var(--brand-blue);
  text-shadow: none;
  max-width: none;
}

/* ---- 2. the charts ---------------------------------------------------
   Four across on desktop via the page's own col-xl-3, stacking through
   about.css's breakpoints. Each figure is the title on its own line, then
   a line carrying the unit on the left with the rule running out to the
   right of it, then the plate. Where a chart has no unit — its units live
   in its own legend — the rule takes that line on its own.

   Two rules do the alignment work, and both matter:
     * .perf-graph__title and .perf-graph__meta each carry a min-height, so
       a two-line title ("Profit After Tax & PAT Margin") next to a
       one-line title, or a chart with a unit next to one without, still
       begin their plate on the same baseline;
     * every plate gets the SAME fixed height with object-fit: contain, so
       the supplied SVGs — which do not share an aspect ratio — scale
       inside an identical box rather than each setting its own height and
       leaving the grid ragged. */
.perf-section {
  padding: 40px 0 30px;
  background: #fff;
  /* the height of the PLOT — bars, value labels and the FY axis. Every
     chart gets exactly this much, which is what makes the bars sit on one
     baseline across all seven. */
  --perf-plot: clamp(240px, 22vw, 300px);
  /* 598.95 / 500 — see .perf-graph--legend below */
  --perf-legend-scale: 1.1979;
}
.perf-graph {
  margin: 0 0 15px;
}

/* The head is packed from the BOTTOM, which is what keeps the two kinds of
   chart in line. Titles wrap at col-xl-3 ("Profit After Tax & PAT Margin"
   takes two lines, "Net Debt" one), so anchoring the top would leave every
   rule and plate at a different height; padding the title out to two lines
   instead fixes that but drops a visible gap under every one-line title —
   which is not how the print sets it. Bottom-aligned, a wrapped title
   grows upward into the reserved space while its rule stays tight beneath
   it, so all seven rules, and all seven plates, land on one baseline. */
.perf-graph__head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Room for two title lines plus the unit/rule line. Without this the
     head is only as tall as its own text, so a one-line title starts its
     plate ~23px higher than the two-line title beside it and the whole
     row goes ragged — this is what holds the ABOVE-the-graph alignment,
     the same way --perf-plot holds the below. */
  min-height: 76px;
  margin: 0 0 0.9rem;
}
.perf-graph__title {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand-blue);
}
/* the unit sits at the left of this line and the rule fills the rest of
   it; with no unit the rule simply takes the whole line */
.perf-graph__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  margin-top: 4px;
}
.perf-graph__unit {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}
.perf-graph__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--abt-hair);
}

/* Aligning the plates across the two kinds of chart.

   Five of the supplied SVGs have a viewBox 500 units tall. The two that
   carry their own legend — EBITDA & EBITDA Margin, Profit After Tax & PAT
   Margin — are 598.95: the SAME 500-unit plot, plus ~99 units of legend
   underneath it. Given one identical box, object-fit:contain scales those
   two down by 500/598.95 to make the legend fit, which drops their bars
   and FY labels ~17% short of everyone else's.

   So the box is sized to the PLOT, and the two legend charts get a box
   taller by exactly that ratio. Both then render their plot at the same
   height, and anchoring to `top` puts every plot on one baseline with the
   legend hanging below it — which is how the print sets it. */
.perf-graph img {
  display: block;
  width: 100%;
  height: var(--perf-plot);
  object-fit: contain;
  object-position: left top;
}
.perf-graph--legend img {
  height: calc(var(--perf-plot) * var(--perf-legend-scale));
}

@media (max-width: 767px) {
  .perf-hero { padding-top: 120px; }
  /* Stacked one per screen, the plates have the full column width to
     themselves, so they can stand taller than they do four-across. This
     retunes the PLOT VARIABLE rather than setting height on .perf-graph
     img directly: that selector and .perf-graph--legend img have the same
     specificity, so a height here would win on source order and flatten
     the two legend charts back out of line. */
  .perf-section { --perf-plot: 280px; }
}