/* Homepage-specific layout styles */
.page-home {}

/* Track MPs CTA Button */
.track-mps-cta {
  display: flex;
  justify-content: center;
  padding: 0 0 2rem;
}

.track-mps-cta__btn {
  display: inline-block;
  background: var(--colour-secondary);
  color: #fff;
  padding: 1rem 2.5rem;
  border-radius: 6px;
  font-size: clamp(1.3rem, 5vw, 2.2rem);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.track-mps-cta__btn span {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.track-mps-cta__btn:hover,
.track-mps-cta__btn:focus {
  background: var(--colour-secondary-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.hero-slider {
  position: relative;
  overflow: hidden;
  min-height: 240px;
}

.hero-slider-container {
  position: relative;
  width: 100%;
  height: clamp(15rem, 30vw, 30rem);
}

.hero-slide {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.8s ease;
}

.hero-slide.active {
  display: block;
  opacity: 1;
  z-index: 1;
}

.hero-slide__image {
  width: 100%;
  height: 100%;
  /* On-brand gradient default so imageless slides read as intentional rather
     than repeating the same stock photo. A post's own hero_image (set inline)
     overrides this. */
  background: linear-gradient(135deg,
      var(--colour-primary) 0%,
      #7a161d 55%,
      var(--colour-secondary) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-slide__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--colour-primary-alpha-80);
  z-index: 1;
}

.hero-slide__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  text-align: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 2rem;
}

.hero-slide__content-title {
  font-size: clamp(1.1rem, 3.5vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #fff;
}

.hero-slide__content-btn {
  display: inline-block;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: background 0.2s, color 0.2s;
}

.hero-slide__content-btn:hover,
.hero-slide__content-btn:focus {
  background: #fff;
  color: var(--colour-primary);
}

/* Sections shared styles */
.what-we-do,
.cta-banner {
  padding: 0 0.5rem;
  margin: 2rem auto;
}

/* What we do section styles */
.what-we-do h2 {
  color: var(--colour-secondary);
}

.what-we-do-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.what-we-do-card {
  background: #fff;
  border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.what-we-do-card__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.what-we-do-card__content {
  padding: 1rem 0;
}

.what-we-do-card__content h3 {
  color: var(--colour-secondary);
}

.what-we-do-card__content p {
  margin-bottom: 1rem;
}

.what-we-do-card__content-btn {
  display: inline-block;
  border: 1.5px solid var(--colour-secondary);
  color: var(--colour-secondary);
  background: #fff;
  border-radius: 4px;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.what-we-do-card__content-btn:hover,
.what-we-do-card__content-btn:focus {
  background: var(--colour-secondary);
  color: #fff;
}

.what-we-do__divider {
  color: var(--colour-secondary);
  width: 75%;
  height: 2px;
  margin: 2rem auto;
}

.cta-banner {
  padding: 0 0.5rem;
}

.cta-banner__link {
  transition: color 0.3s, background 0.3s;
  color
}

.cta-banner__link:hover .cta-banner__overlay {
  background: hsl(var(--secondary-hue) var(--secondary-saturation) 10% / 0.8);
  transition: background 0.3s;
}

.cta-banner__link:hover .cta-banner__content-text,
.cta-banner__link:hover .cta-banner__content-title {
  color: hsl(var(--secondary-hue) var(--secondary-saturation) 50%);
  transition: color 0.3s;
}

.cta-banner__container {
  position: relative;
  width: 100%;
}

.cta-banner__image {
  width: 100%;
  height: clamp(20rem, 30vw, 35rem);
  background-image: url("../img/home-cta-bonganamzalendo.dd5d2192b158.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.cta-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: hsl(var(--secondary-hue) var(--secondary-saturation) 20% / 0.8);
  border-radius: 8px;
  z-index: 2;
  mix-blend-mode: darken;
}

.cta-banner__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
  z-index: 3;
}

.cta-banner__content-title {
  color: #fff;
}

.mps-performance {
  position: relative;
  margin-top: auto;
}

.mps-performance__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.mps-performance__image {
  width: 100%;
  height: 20rem;
  background-image: url("../img/home-footer-eyeonparliament.ef711b988b82.jpg");
  background-size: cover;
  background-position: 50% 25%;
  position: relative;
  z-index: 1;
}

.mps-performance__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-4) var(--space-6);
  color: #fff;
}

.mps-performance__content-title {
  color: #fff;
  margin: 0;
  flex: none;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.mps-performance__content-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-5);
  flex: none;
  align-items: flex-start;
  text-align: left;
}

.mps-performance__content-links a {
  color: #fff;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-radius: var(--radius-sm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.mps-performance__content-links a::before {
  content: "\203A";
  font-size: 1.1em;
  line-height: 1;
  opacity: .8;
}

.mps-performance__content-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mps-performance__content-links a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .mps-performance__content {
    flex-direction: row;
    align-items: flex-start;
  }
  .mps-performance__content-title { flex: 1 1 40%; }
  .mps-performance__content-links {
    flex: 1 1 60%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet Media Query */
@media (min-width: 768px) {}

/* Desktop Media Query */
@media (min-width: 1024px) {
  .what-we-do-cards__grid {
    grid-template-columns: 1fr;
  }

  .what-we-do-card {
    flex-direction: row;
    gap: 2rem;
    align-items: stretch;
    height: clamp(14rem, 30vw, 15.5rem);
  }

  .what-we-do-card:nth-child(even) {
    flex-direction: row-reverse;
  }

  .what-we-do-card__image {
    width: 50%;
    max-width: none;
    height: auto;
    object-fit: cover;
    flex: 1 1 50%;
    border-radius: 8px;
  }

  .what-we-do-card__content {
    width: 50%;
    flex: 1 1 50%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .what-we-do-card__content-title,
  .what-we-do-card__content p {
    margin-top: 0;
    margin-bottom: 1rem;
    align-self: flex-start;
  }

  .what-we-do-card__content p {
    font-size: clamp(0.8rem, 10vh, 1.1rem);
  }

  .what-we-do-card__content-btn {
    margin-top: auto;
    align-self: flex-start;
  }
}

/* ===== Captivation-first homepage sections (W3) — tokenised ===== */
.home-hero { padding: var(--space-6) 0 var(--space-4); }
.home-hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-sm); font-weight: 700; color: var(--colour-secondary); margin: 0 0 var(--space-2); }
.home-hero__title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: var(--colour-text); margin: 0 0 var(--space-3); }
.home-hero__lead { font-size: var(--text-lg); color: var(--colour-text-muted); max-width: 60ch; margin: 0 0 var(--space-4); }
.home-hero__topical { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); background: var(--colour-primary-alpha-10); border: 1px solid var(--colour-border); border-radius: var(--radius-md); text-decoration: none; color: var(--colour-text); }
.home-hero__topical:hover { box-shadow: var(--shadow-sm); }
.home-hero__topical-title { font-weight: 700; }
.home-hero__topical-cta { color: var(--colour-primary); font-weight: 600; font-size: var(--text-sm); }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.home-verify { font-size: var(--text-sm); color: var(--colour-secondary-dark); font-weight: 600; margin: 0 0 var(--space-5); }

.home-live { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-6); }
@media (min-width: 900px) { .home-live { grid-template-columns: 2fr 1fr; } }
.home-live__link { font-weight: 600; color: var(--colour-text); text-decoration: none; }
.home-live__link:hover { color: var(--colour-primary); }
.home-live__side { display: flex; flex-direction: column; gap: var(--space-4); }
.home-featured-mp__img { width: 96px; height: 120px; object-fit: cover; border-radius: var(--radius-md); display: block; margin: var(--space-2) 0; }
.home-pulse { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; margin: var(--space-2) 0; border: 1px solid var(--colour-border); }
.home-pulse__seg { display: block; height: 100%; }

/* ============================================================
   Homepage v2 — bold, engaging, tokenised (design overhaul)
   ============================================================ */
.page-homepage .page-heading { display: none; }   /* hero replaces the heading */

/* HERO — full-bleed brand gradient + Find-your-MP */
.hero2 { position: relative; color: #fff; overflow: hidden;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0; margin-bottom: var(--space-5);
  background:
    radial-gradient(1100px 420px at 82% -15%, hsl(144 65% 32% / 0.40), transparent 60%),
    linear-gradient(135deg, var(--colour-primary-dark) 0%, var(--colour-primary) 55%, hsl(358 72% 33%) 100%); }
.hero2__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: hsl(144 70% 78%); margin: 0 0 var(--space-2); }
/* Explicit white: the global `h1 { color: var(--colour-primary) }` rule beats
   the white the hero only sets for inheritance, which made the H1 red-on-red. */
.hero2__title { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 800; line-height: 1.1; margin: 0 0 var(--space-2); max-width: none; }
.hero2__lead { font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.45; color: rgba(255,255,255,.9); max-width: none; margin: 0 0 var(--space-3); }
.hero2__find { display: flex; align-items: center; gap: var(--space-2); background: #fff; border-radius: var(--radius-pill);
  padding: 5px 5px 5px 18px; max-width: 640px; box-shadow: var(--shadow-lg); }
.hero2__find-icon { color: var(--colour-text-muted); flex: none; }
.hero2__find input { flex: 1; min-width: 0; border: 0; outline: none; padding: .65rem .5rem; font: inherit; color: var(--colour-text); background: transparent; }
.hero2__find input::placeholder { color: var(--colour-text-muted); }
.hero2__find:focus-within { box-shadow: var(--shadow-lg), 0 0 0 3px rgba(255,255,255,.6); }
.hero2__find .btn { flex: none; }
.hero2__quick { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.hero2__quick a { display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--text-sm); opacity: .92; border-radius: var(--radius-sm); transition: opacity var(--motion-fast) var(--ease-standard); }
.hero2__quick a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.hero2__quick a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; opacity: 1; }
.hero2__quick i { margin-right: .45rem; }

/* TOPICAL feature band */
.topical { background: linear-gradient(120deg, var(--colour-primary-alpha-10), transparent 70%), #fff;
  border: 1px solid var(--colour-border); border-left: 5px solid var(--colour-primary); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); }
.topical__flag { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--colour-primary); margin-bottom: var(--space-2); }
.topical__title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 0 0 var(--space-2); color: var(--colour-text); }
.topical__text { color: var(--colour-text-muted); max-width: 72ch; margin: 0 0 var(--space-4); }
.topical__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Featured MP card */
.home-featured-mp { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4); }
.home-featured-mp__img { width: 84px; height: 105px; object-fit: cover; border-radius: var(--radius-md); flex: none; }
.home-featured-mp__body { display: flex; flex-direction: column; gap: var(--space-1); }

/* Explore tiles */
/* 6 tiles: balanced 3x2 (desktop) / 2x3 (tablet) / 1col (mobile) — no orphan row */
.explore-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .explore-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .explore-grid { grid-template-columns: 1fr; } }
.explore-tile__icon { font-size: 1.6rem; color: var(--colour-primary); margin-bottom: var(--space-2); display: block; }

.home-live__more { display: inline-block; margin-top: var(--space-3); color: var(--colour-primary); font-weight: 600; text-decoration: none; }
.home-verify i { color: var(--colour-secondary); }

/* ===== Citizen-entry hero (Phase A10 — topic-first reframe) =====
   Tokenised against core.css: the earlier hardcoded fallbacks (#f7f4ef line,
   #A51E27 "red", #6b6157 ink) drifted off-palette. Everything now resolves to
   the brand tokens so the section matches the rest of the site exactly. */
.citizen-entry {
  background: linear-gradient(180deg, var(--colour-bg-subtle) 0%, var(--colour-bg) 100%);
  border-bottom: 1px solid var(--colour-border);
  padding: var(--space-7) 0 var(--space-6);
}
.citizen-entry__inner { display: flex; flex-direction: column; gap: var(--space-5); }
.citizen-entry__eyebrow {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--colour-text-muted); margin: 0;
}
.citizen-entry__mood { font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; }
.citizen-entry__mood small { color: var(--colour-text-muted); font-weight: var(--fw-regular); }
.citizen-entry__title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: var(--leading-tight); margin: 0; }
.citizen-entry__lead { font-size: var(--text-lg); color: var(--colour-text-muted); margin: 0; max-width: 60ch; }

.citizen-entry__topics {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
@media (max-width: 880px) { .citizen-entry__topics { grid-template-columns: 1fr; } }
.citizen-entry__topic-card {
  background: var(--colour-bg); border: 1px solid var(--colour-border);
  border-left: 4px solid var(--accent, var(--colour-primary));
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.citizen-entry__topic-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.citizen-entry__topic-card a { display: block; padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none; }
.citizen-entry__domain {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent, var(--colour-primary)); margin-bottom: var(--space-2);
}
.citizen-entry__topic-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: var(--leading-snug); }
.citizen-entry__topic-tag { margin: 0; color: var(--colour-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }

.citizen-entry__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
@media (max-width: 880px) { .citizen-entry__row { grid-template-columns: 1fr; } }
.citizen-entry__featured, .citizen-entry__politician, .citizen-entry__bonga {
  border: 1px solid var(--colour-border); border-radius: var(--radius-lg);
  padding: var(--space-5); background: var(--colour-bg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-2);
  color: inherit; text-decoration: none;
  transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.citizen-entry__featured:hover, .citizen-entry__politician:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.citizen-entry__featured { border-top: 4px solid var(--accent, var(--colour-primary)); }
.citizen-entry__politician { border-top: 4px solid var(--colour-primary); }
.citizen-entry__bonga { border-top: 4px solid var(--colour-secondary); }
.citizen-entry__featured-eyebrow, .citizen-entry__politician-eyebrow, .citizen-entry__bonga-eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
  color: var(--colour-text-muted);
}
.citizen-entry__featured strong, .citizen-entry__politician strong, .citizen-entry__bonga strong {
  font-size: var(--text-lg); line-height: var(--leading-snug);
}
.citizen-entry__featured > span:last-child,
.citizen-entry__politician > span:last-child {
  color: var(--colour-primary); font-weight: var(--fw-semibold); font-size: var(--text-sm); margin-top: auto;
}
.citizen-entry__bonga p { margin: 0; font-size: var(--text-sm); color: var(--colour-text-muted); line-height: var(--leading-normal); }
.citizen-entry__bonga .btn { margin-top: var(--space-2); align-self: flex-start; }

.citizen-entry__more { font-size: var(--text-sm); color: var(--colour-text-muted); margin: 0; }
.citizen-entry__more a { color: var(--colour-primary); font-weight: var(--fw-semibold); }

/* ===== Homepage polish pass (typography, rhythm, numerals) ===== */
/* Tabular figures keep stat counts and percentages vertically aligned. */
.page-homepage .stat__num,
.page-homepage .home-pulse,
.citizen-entry__mood { font-variant-numeric: tabular-nums; }
.page-homepage .stat__label { font-weight: var(--fw-semibold); }

/* Topical "in focus" band — give the heading link a clear hover affordance and
   tidy the lead measure/leading. */
.topical__title a:hover { color: var(--colour-primary); }
.topical__text { line-height: var(--leading-normal); }

/* Live timeline: comfortable leading + a clearer "see full timeline" affordance. */
.home-live__main .section__title { margin-bottom: var(--space-3); }
.vtimeline__item .home-live__link { line-height: var(--leading-snug); display: inline-block; margin-top: 2px; }
.home-live__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Explore tiles — even internal rhythm and a stronger title. */
.explore-tile { display: flex; flex-direction: column; gap: var(--space-1); }
.explore-tile .card__title { margin-bottom: var(--space-1); }
.explore-tile .card__meta { line-height: var(--leading-snug); }

/* Featured-MP badge spacing inside the side card. */
.home-featured-mp__body .badge { margin-top: var(--space-1); align-self: flex-start; }

/* Section heading rhythm across the homepage. */
.page-homepage .section { margin: var(--space-7) 0; }
.page-homepage .section__title { font-size: var(--text-2xl); margin-bottom: var(--space-5); }

/* Roster-verified trust line — keep it quiet but legible. */
.home-verify { display: inline-flex; align-items: center; gap: var(--space-2); }