/* ============================================================================
   Template 1 — SERVICE MINISTRY

   For ministries whose public face is the service a citizen turns up for:
   Health, Education, Transport, Water. The hero carries a photograph because
   these ministries are about people and places, and the figures sit inside it
   so the scale of the service is the first fact you learn.

   Palette: a deep clinical teal-blue with a warm coral accent — signals care
   without the flat corporate navy every ministry site defaults to.
   ========================================================================= */

:root {
  --primary:      #0e5c7f;
  --primary-dark: #08394f;
  --accent:       #e0553f;
}

/* ---- typography ---------------------------------------------------------
   The originals pulled Inter and Poppins from Google Fonts. A government site
   must not fetch its own type from a third-party host, so each template gets a
   distinct SYSTEM stack instead — chosen per template so the four still read
   as four designs rather than one.

   Service Ministry: the humanist UI faces (Segoe/Roboto/Helvetica). Neutral and
   institutional, which is right for a ministry a citizen turns up to. */
:root {
  --font-body: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

/* ---- hero -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--primary-dark);
  color: #fff;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
}

/* The photograph and its scrims are separate layers so the text contrast is
   controlled rather than hoped for. The gradient is heaviest on the left,
   where the headline sits. */
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  /* Set per-site by the builder via --hero (the MDA's uploaded photo).
     Falls back to the template gradient when no photo was supplied. */
  background-image: var(--hero, none);
  background-size: cover;
  background-position: center 30%;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgb(8 57 79 / .96) 0%,
      rgb(8 57 79 / .88) 42%,
      rgb(8 57 79 / .58) 72%,
      rgb(8 57 79 / .42) 100%);
}

.hero-inner {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 1020px) {
  .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: var(--s-6); }
}

.hero h1 {
  color: #fff;
  font-size: var(--t-4xl);
  margin-bottom: var(--s-3);
}
.hero .eyebrow { color: #fff; opacity: .9; }
.hero .lede {
  font-size: var(--t-lg);
  color: rgb(255 255 255 / .9);
  max-width: 54ch;
  margin-bottom: var(--s-4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Figures live in the hero: on a service ministry the scale IS the headline. */
.hero-stats { display: grid; gap: var(--s-2); }
@media (min-width: 560px) and (max-width: 1019px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
}
.hero-stat {
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: var(--radius);
  padding: var(--s-3);
  backdrop-filter: blur(8px);
  display: grid;
  gap: .3rem;
  justify-items: start;
}
.hero-stat .i { width: 26px; height: 26px; color: var(--accent); margin-bottom: .3rem; }
.hero-stat .value {
  font-family: var(--font-display);
  font-size: var(--t-2xl); font-weight: 800; line-height: 1;
  color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.hero-stat .label {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgb(255 255 255 / .78);
}

/* ---- emergency strip --------------------------------------------------- */
/* Its own band, not a card: an emergency number that scrolls past inside a
   grid is a number nobody finds. */
.alert-strip { background: var(--accent); color: #fff; }
.alert-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem var(--s-2);
  padding-block: var(--s-2);
}
.alert-strip .tag {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; background: rgb(0 0 0 / .22);
  padding: .3rem .7rem; border-radius: 100px; flex: none;
}
.alert-strip p { font-size: var(--t-sm); font-weight: 600; }
.alert-strip a { color: #fff; }

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

.pledges { display: grid; gap: var(--s-2); }
.pledge {
  background: var(--ground);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-3);
}
.pledge:last-child { border-left-color: var(--accent); }
.pledge:last-child .icon-badge {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.pledge h3 { font-size: var(--t-lg); margin-bottom: .3rem; }
.pledge p { font-size: var(--t-sm); }

/* ---- commissioner ------------------------------------------------------ */
.lead-grid { display: grid; gap: var(--s-4); }
@media (min-width: 880px) {
  .lead-grid { grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: var(--s-5); align-items: center; }
}
.lead-photo { margin: 0; }
.lead-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  background: var(--line);
}
.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;
  color: var(--ink);
  font-style: italic;
  text-wrap: pretty;
}

/* ---- departments ------------------------------------------------------- */
.dept-list { margin-top: var(--s-5); }
.dept-list h3 { margin-bottom: var(--s-2); }
.dept-list ul {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.dept-list li {
  display: flex; align-items: center; gap: .6rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .8rem 1rem;
  font-weight: 650; color: var(--ink); font-size: var(--t-sm);
}
.dept-list .i { color: var(--primary); width: 18px; height: 18px; }