/* Home page ADDITIONS, 2026-09-20 — MZ-20260920-DESIGNIA (W1).
 *
 * This file loads AFTER `home_classic.css` and only adds to it. The client was
 * hesitant to change the home page much (owner direction, 2026-09-20), so the
 * page keeps the classic layout and this sheet carries three things:
 *
 *   1. the "find your MP" search beside the Track-MPs button;
 *   2. the band of four figures — the audit's finding was that the front door
 *      of a parliamentary warehouse carried NOT ONE NUMBER;
 *   3. the "what changed recently" list.
 *
 * Plus ONE fix to existing chrome: a scrim under "Eye on Parliament", whose
 * white links sat directly on a photograph and failed contrast at 390px.
 *
 * `home_classic.css` IS NOT EDITED. The archived page (`home_page_2026_09.html`,
 * selectable from the Wagtail admin) loads the same file, and a change there
 * would restyle the copy the client may switch back to — which would stop it
 * being a copy of what they saw.
 *
 * Tokens come from core.css. NO raw hex anywhere: `lint_design_system.py`
 * counts any file containing one, and a new file with hex steps the ratchet UP.
 */

/* ============================================================
   1. Find your MP, under the Track-MPs button
   ============================================================ */

.hp-cta {
  /* `.track-mps-cta` is a centred flex row. Stacking it puts the search
     directly under the big button instead of fighting it for the same line. */
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.hp-find {
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

.hp-find__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.hp-find__row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.hp-find__input {
  flex: 1 1 16rem;
  /* min-width:0 or a flex item refuses to shrink below its content and the
     button is pushed off a 320px screen. */
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-main);
  font-size: var(--text-base);
  color: var(--colour-text);
  background: var(--colour-bg);
  border: 2px solid var(--colour-border-strong);
  border-radius: var(--radius-md);
}

.hp-find__input:focus-visible {
  outline: 3px solid var(--colour-primary);
  outline-offset: 1px;
  border-color: var(--colour-primary);
}

.hp-find__btn {
  flex: 0 0 auto;
  /* 44px minimum touch target — the same floor the region-navigation check
     enforces on the county tabs. */
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-main);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--colour-bg);
  background: var(--colour-primary);
  border: 2px solid var(--colour-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}

.hp-find__btn:hover { background: var(--colour-primary-dark); border-color: var(--colour-primary-dark); }
.hp-find__btn:focus-visible { outline: 3px solid var(--colour-dark); outline-offset: 2px; }

.hp-find__alt {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}

/* ============================================================
   2. The four figures
   ============================================================ */

.hp-figures-band { margin-bottom: var(--space-6); }

.hp-figures {
  display: grid;
  /* auto-fit + minmax, so this reflows from four across to two to one without
     a breakpoint. `min(10rem, 100%)` rather than a bare track: a long figure
     must shrink the column, not overflow the page. */
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}

.hp-figure {
  padding: var(--space-4);
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-top: 4px solid var(--colour-secondary);
  border-radius: var(--radius-md);
}

.hp-figure__label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.hp-figure__value {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: var(--fw-extrabold);
  color: var(--colour-secondary);
  /* Tabular figures so four numbers of different widths line up. */
  font-variant-numeric: tabular-nums;
}

/* A date is words, not a quantity, so it does not get the numeric size. */
.hp-figure__value--date { font-size: var(--text-lg); }

.hp-figure__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

/* ============================================================
   3. What changed recently
   ============================================================ */

.hp-latest { margin-block: var(--space-6); }

.hp-latest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.hp-latest__title {
  margin: 0;
  /* Matches `.what-we-do h2` above it, so the two section headings read as
     one family rather than as two designs. */
  color: var(--colour-secondary);
}

.hp-latest__all { font-size: var(--text-sm); font-weight: var(--fw-semibold); }

.hp-latest__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--colour-border);
}

.hp-latest__row {
  display: grid;
  /* Kind | title | date. The title track is the flexible one and is given
     minmax(0,1fr) so a long Bill name wraps instead of widening the row. */
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--colour-border);
}

.hp-latest__kind {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.hp-latest__link { font-weight: var(--fw-medium); }

.hp-latest__meta {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  /* On a phone the three-column row becomes two lines: kind + date on one,
     the title beneath it. Stacking all three wastes a line on nothing. */
  .hp-latest__row { grid-template-columns: minmax(0, 1fr) auto; }
  .hp-latest__link { grid-column: 1 / -1; order: 2; }
  .hp-latest__meta { order: 1; }
}

/* ============================================================
   4. Fixes to existing chrome
   ============================================================ */

/* The Bonga band was one giant link with nothing that looked clickable. The
   button is inside the same <a>, so the click target is unchanged. */
.cta-banner__content-btn {
  display: inline-block;
  margin-top: var(--space-4);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  font-weight: var(--fw-bold);
  color: var(--colour-dark);
  background: var(--colour-bg);
  border-radius: var(--radius-md);
}

.cta-banner__link:hover .cta-banner__content-btn,
.cta-banner__link:focus-visible .cta-banner__content-btn {
  background: var(--colour-lighter);
  text-decoration: underline;
}

/* "Eye on Parliament" set white links DIRECTLY on a photograph. At 390px the
   bright part of the image runs under them and the contrast fails outright
   (audit S8). The photograph is what the client knows, so it stays and a scrim
   goes between: a gradient rather than a flat wash, because the text sits in
   the upper half and a flat wash would dull the whole picture.
   `pointer-events: none` so the links underneath stay clickable. */
.mps-performance__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    hsl(0 0% 0% / 0.68) 0%,
    hsl(0 0% 0% / 0.52) 55%,
    hsl(0 0% 0% / 0.32) 100%
  );
  pointer-events: none;
}

.mps-performance__content-title,
.mps-performance__content-links a {
  /* Belt and braces with the scrim: a shadow keeps a thin white glyph legible
     over the brightest pixel the gradient does not fully cover. */
  text-shadow: 0 1px 3px hsl(0 0% 0% / 0.6);
}

@media (max-width: 40rem) {
  /* Measured at 390px: the last link's box ended 1px BELOW the photograph, so
     its descender sat on white. The photo is a fixed 20rem and the seven links
     stack, so it needs the extra room only here. */
  .mps-performance__image { height: 22rem; }
}

.mps-performance__content-links a:focus-visible {
  outline: 3px solid var(--colour-bg);
  outline-offset: 3px;
}