/* ============================================================================
   Template 2 — POLICY & FINANCE

   For ministries whose subject is policy, money and evidence: Finance,
   Planning & Budget, Justice, Commerce. There is no hero photograph on
   purpose — a stock image of a building says nothing, while a stated position
   in large type says exactly what this ministry believes.

   Palette: deep forest green with an ochre-gold accent — the colours of
   ledgers and seals, and a deliberate step away from the finance-blue default.
   ========================================================================= */

:root {
  --primary:      #0b3d2c;
  --primary-dark: #06251a;
  --accent:       #b8860b;

  /* ---- the supporting palette -------------------------------------------
     Five of the eight MDA sites run this template, and side by side they read
     as one long green-and-gold document: the same two colours doing every job
     on every page. A ministry front page is not a document — the figures, the
     sections and the leadership are DIFFERENT KINDS of thing, and they should
     look it.

     These are the accompanying hues, all held at the same weight and depth as
     the primary so nothing shouts over the seal-green. They are used to
     distinguish blocks from one another, never to decorate: each one has a job
     below. Deliberately NOT exposed to the site's own primary/accent override
     — an MDA that sets its house colours keeps them, and these stay as the
     supporting cast. */
  --tone-1: #0b3d2c;   /* the ministry green itself */
  --tone-2: #14556b;   /* teal — evidence, reporting */
  --tone-3: #7c3f12;   /* burnt amber — enterprise, trade */
  --tone-4: #4a3a7a;   /* indigo — policy, planning */
  --tone-5: #8c2f39;   /* oxblood — regulation, enforcement */
}

/* ---- typography ---------------------------------------------------------
   Policy & Finance: a SERIF display over a humanist body. A finance ministry's
   subject is the record and the ledger, and a serif headline carries that
   authority in a way a UI sans does not. Self-hosted system faces only. */
:root {
  --font-body: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", "Liberation Serif", serif;
}

/* ---- hero: typographic ------------------------------------------------- */
.hero {
  /* Was a single flat --primary-dark fill. A soft double wash — indigo drifting
     in from the top right, teal from the bottom left — gives the band depth
     without introducing an image, which is the one thing this template
     deliberately does not have. Both sit at low alpha over the original colour,
     so the hero is still unmistakably the ministry green. */
  background:
    radial-gradient(120% 90% at 88% 0%,  rgb(74 58 122 / .55) 0%, transparent 62%),
    radial-gradient(105% 85% at 0% 100%, rgb(20 85 107 / .45) 0%, transparent 58%),
    var(--primary-dark);
  color: #fff;
  padding-block: clamp(3.5rem, 10vw, 8rem);
  position: relative;
  overflow: hidden;
}

/* The hero carries NO ruled texture. It was here as "the ledger the ministry
   keeps" — a repeating 46px rule at 4.5% white. Removed at the agency's
   request: over the colour washes it reads as banding or a rendering fault
   rather than as paper, and it gives the eye horizontal lines to follow across
   a band whose content is already left-aligned. */
.hero .wrap { position: relative; }
.hero .eyebrow { color: var(--accent); }
.hero h1 {
  color: #fff;
  font-size: var(--t-4xl);
  max-width: 20ch;
  margin-bottom: var(--s-3);
}
.hero .lede {
  font-size: var(--t-lg);
  color: rgb(255 255 255 / .84);
  max-width: 60ch;
  margin-bottom: var(--s-4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero .btn-ghost { color: #fff; border-color: rgb(255 255 255 / .5); }
.hero .btn-ghost:hover { background: #fff; color: var(--primary); border-color: #fff; }

/* A short gold tick along the bottom edge of the hero band — the seal on a
   government notice. Positioned, not in flow: as a flow element it sat on top
   of the hero buttons. */
.hero-rule {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  width: clamp(120px, 22%, 320px); height: 6px;
  background: var(--accent);
}

/* ---- headline figures -------------------------------------------------- */
/* Sits directly under the hero as a single band — on a finance site the
   figures ARE the summary, so they precede the prose. */
/* The figures band. Previously one flat green rectangle with hairline dividers,
   which made three genuinely different numbers look like one paragraph. Each
   figure now sits on its own tone, so the eye separates them at a glance and
   the band becomes the most colourful thing on the page — which is right,
   because on a policy site the figures ARE the headline. */
.ledger { background: var(--primary); color: #fff; }
/* The LAST figure runs to the right edge of the screen.
   The grid lives inside .wrap, so on a wide screen there is a strip either side
   of it painted by .ledger itself — which left the final block looking cut off
   halfway. Rather than recolour the whole band (which would also repaint the
   strip on the LEFT, behind the first figure), the last item paints its own
   overflow with a pseudo-element pinned to the viewport edge.
   `overflow: hidden` on .ledger keeps it from widening the page. */
.ledger { position: relative; overflow: hidden; }
.ledger-item:last-child { position: relative; }
.ledger-item:last-child::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 100%;
  width: 100vw;
  background: inherit;     /* whichever tone this item happens to carry */
}
.ledger-item:nth-child(1) { background: var(--tone-1); }
.ledger-item:nth-child(2) { background: var(--tone-2); }
.ledger-item:nth-child(3) { background: var(--tone-3); }
.ledger-item:nth-child(4) { background: var(--tone-4); }
.ledger-item:nth-child(5) { background: var(--tone-5); }
/* With solid blocks the dividing rules become seams between colours; drop them. */
.ledger-item { border-right: none !important; border-bottom: none !important; }
/* NO second gold rule across the band. The demo has exactly ONE gold mark here
   — the short tick at the hero's bottom-left (.hero-rule) — and a full-width
   rule under it read as a duplicate of that tick rather than as part of it. */
.ledger-item .value { transition: transform .25s ease; }
.ledger-item:hover .value { transform: translateY(-2px); }
.ledger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.ledger-item {
  padding: var(--s-4) var(--s-3);
  border-right: 1px solid rgb(255 255 255 / .14);
  display: grid; gap: .35rem;
}
.ledger-item:last-child { border-right: none; }
@media (max-width: 700px) {
  .ledger-item { border-right: none; border-bottom: 1px solid rgb(255 255 255 / .14); }
  .ledger-item:last-child { border-bottom: none; }
}
.ledger-item .value {
  font-family: var(--font-display);
  font-size: var(--t-2xl); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
}
.ledger-item .label {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgb(255 255 255 / .72);
}

/* ---- about ------------------------------------------------------------- */
.about-grid { display: grid; gap: var(--s-5); }
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
}
.lead-p {
  font-size: var(--t-lg); color: var(--ink); font-weight: 600;
  margin-block: var(--s-2);
}

.pillars { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.pillar {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
}
.pillar > .i { width: 30px; height: 30px; color: var(--accent); flex: none; margin-top: .2rem; }
.pillar h3 { font-size: var(--t-lg); margin-bottom: .15rem; }
.pillar p { font-size: var(--t-sm); }

.panel-note {
  background: var(--ground);
  border-top: 5px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--s-4) var(--s-3);
}
.panel-note h3 { margin-bottom: var(--s-2); }
.panel-note ul { display: grid; gap: .8rem; }
.panel-note li {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
}
.panel-note .i { color: var(--primary); width: 19px; height: 19px; flex: none; margin-top: .2em; }

/* ---- the lead officer -------------------------------------------------- */
/* TWO COLUMNS: the portrait on one side, the welcome note on the other. This
   is how a citizen expects to meet the person in charge — a stacked photo with
   text underneath reads as a caption, not an introduction. The other three
   templates already do this; template 2 had no lead styling at all, so it fell
   back to a single stacked column. */
.lead-grid { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 860px) {
  .lead-grid { grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr); gap: var(--s-5); }
}
.lead-photo { margin: 0; }
.lead-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: var(--radius); background: var(--line); box-shadow: var(--shadow-2);
}
.lead-role {
  color: var(--accent); font-weight: 800; font-size: var(--t-lg); margin-top: .3rem;
}
.lead-quote {
  margin: var(--s-3) 0;
  padding-left: var(--s-3);
  border-left: 4px solid var(--accent);
  font-size: var(--t-lg); font-weight: 600; font-style: italic;
  color: var(--ink); text-wrap: pretty;
}

/* ---- impact ------------------------------------------------------------ */
.impact-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.impact {
  padding: var(--s-4) var(--s-3);
  border-top: 5px solid var(--primary);
  background: var(--ground);
  border-radius: 0 0 var(--radius) var(--radius);
}
.impact:nth-child(2) { border-top-color: var(--accent); }
.impact:nth-child(3) { border-top-color: var(--primary-dark); }
.impact .value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-3xl); font-weight: 800; line-height: 1;
  color: var(--primary); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.impact .label {
  display: block; margin-top: .5rem;
  font-size: var(--t-sm); font-weight: 800; color: var(--ink);
}
.impact p { font-size: var(--t-sm); margin-top: .5rem; }


/* ---- colour across the rest of the page ---------------------------------
   The same reasoning as the ledger: give the page's parts distinct identities
   so a long front page reads as sections rather than as one continuous slab.
   All of these are accents on an otherwise white page — the text stays black
   on white, so contrast is untouched. */

/* Section eyebrows alternate through the palette down the page. */
.section:nth-of-type(4n+1) .eyebrow { color: var(--tone-2); }
.section:nth-of-type(4n+2) .eyebrow { color: var(--tone-3); }
.section:nth-of-type(4n+3) .eyebrow { color: var(--tone-4); }
.section:nth-of-type(4n+4) .eyebrow { color: var(--tone-5); }

/* The "what we do" cards: a coloured top rule that cycles, so five services do
   not present as five identical grey boxes. */
.col-card, .section .card { border-top: 4px solid var(--line); }
.grid > .card:nth-child(5n+1), .grid > .col-card:nth-child(5n+1) { border-top-color: var(--tone-1); }
.grid > .card:nth-child(5n+2), .grid > .col-card:nth-child(5n+2) { border-top-color: var(--tone-2); }
.grid > .card:nth-child(5n+3), .grid > .col-card:nth-child(5n+3) { border-top-color: var(--tone-3); }
.grid > .card:nth-child(5n+4), .grid > .col-card:nth-child(5n+4) { border-top-color: var(--tone-4); }
.grid > .card:nth-child(5n+5), .grid > .col-card:nth-child(5n+5) { border-top-color: var(--tone-5); }
/* The icon badge picks up its card's rule rather than staying uniformly gold. */
.grid > .card:nth-child(5n+2) .icon-badge { background: rgb(20 85 107 / .1);  color: var(--tone-2); }
.grid > .card:nth-child(5n+3) .icon-badge { background: rgb(124 63 18 / .1);  color: var(--tone-3); }
.grid > .card:nth-child(5n+4) .icon-badge { background: rgb(74 58 122 / .1);  color: var(--tone-4); }
.grid > .card:nth-child(5n+5) .icon-badge { background: rgb(140 47 57 / .1);  color: var(--tone-5); }

/* ---- the leadership section --------------------------------------------
   This block was the plainest on the page — a white grid of portraits with a
   grey placeholder where no photograph had been supplied yet, which is most of
   them. It now sits on a tinted ground with coloured cards, so an MDA that has
   not yet sent photographs still has a section worth looking at. */
#team, #leadership { background: linear-gradient(180deg, var(--ground) 0%, #fff 70%); }
#team .officer, #leadership .officer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--tone-1);
  border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
#team .officer:hover, #leadership .officer:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-2);
}
#team .officer:nth-child(4n+2), #leadership .officer:nth-child(4n+2) { border-top-color: var(--tone-2); }
#team .officer:nth-child(4n+3), #leadership .officer:nth-child(4n+3) { border-top-color: var(--tone-3); }
#team .officer:nth-child(4n+4), #leadership .officer:nth-child(4n+4) { border-top-color: var(--tone-4); }
/* The silhouette shown until a photograph arrives: tinted, not dead grey. */
#team .officer .placeholder, #leadership .officer .placeholder {
  background: linear-gradient(160deg, rgb(11 61 44 / .09), rgb(184 134 11 / .12));
  color: var(--primary);
}