/* ==========================================================================
   Politicians — index (directory) + individual profile.
   On-theme: all colours/spacing/radii/shadows come from core.css tokens.
   Brand chamber coding mirrors the shared meter legend: MP = primary (red),
   Senator = secondary (green). Era pills are neutral tints of the brand.
   ========================================================================== */

/* ---- Index: intro + filter bar ---- */
.politicians-intro {
  margin-bottom: var(--space-5);
}

/* Lead paragraph — calm, readable; no shouty uppercase/underline. */
.politicians .page-intro-text {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: var(--leading-snug);
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
  margin-bottom: var(--space-2);
}
.politicians-intro > p {
  color: var(--colour-text-muted);
  max-width: none;
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

.politicians-filter {
  margin: var(--space-5) 0 0;
}


.politicians-filter--input,
.politicians-filter--select {
  font: inherit;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--colour-text);
  transition: border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.politicians-filter--input {
  flex: 1 1 18rem;
  min-width: 0;
}

.politicians-filter--input:focus,
.politicians-filter--select:focus {
  outline: none;
  border-color: var(--colour-primary);
  box-shadow: 0 0 0 3px var(--colour-primary-alpha-20);
}

.politicians-filter--input::placeholder {
  color: var(--colour-text-muted);
}

.politicians-filter--select {
  padding-right: 2.25rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

.politicians-filter--apply {
  font: inherit;
  font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-5);
  background: var(--colour-primary);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard);
}
.politicians-filter--apply:hover {
  background: var(--colour-primary-dark);
}

.politicians-filter--count {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
}
.politicians-filter--count a {
  color: var(--colour-primary);
  font-weight: var(--fw-semibold);
}
.politicians-filter--count a:hover {
  text-decoration: underline;
}

/* ---- Index: card grid ---- */
.politicians-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.politicians-list--item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
}

.politicians-list--item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--colour-primary);
}
.politicians-list--item:hover .politicians-list--heading {
  color: var(--colour-primary);
}
.politicians-list--item:focus-visible {
  outline: 2px solid var(--colour-primary);
  outline-offset: 2px;
}

.politicians-list--image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 4.2;
  background: var(--colour-bg-subtle);
}

.politicians-list--heading {
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  padding: var(--space-3) var(--space-4) var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--motion-base) var(--ease-standard);
}

.politicians-list--excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--colour-text-muted);
  padding: 0 var(--space-4) var(--space-4);
  margin-top: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.politicians-list--excerpt p {
  margin: 0;
}

/* ---- Era + chamber pills (brand palette only) ---- */
.politicians-list--era,
.politicians-list--chamber {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px 8px;
  font-size: 0.66rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  white-space: nowrap;
}

/* Era: a neutral pill; the current (13th) era is highlighted in brand red so
   sitting-era members read at a glance, without a rainbow of off-theme hues. */
.politicians-list--era {
  background: var(--colour-lighter);
  color: var(--colour-text-muted);
}
.politicians-list--era.era-13 {
  background: var(--colour-primary-alpha-10);
  color: var(--colour-primary);
}

/* ---- Current / Former status badge ----
   A corner ribbon over the card image so visitors can tell, at a glance, who is
   a sitting (13th-Parliament) member versus a past/former member. Current =
   brand green (active/positive); Former = neutral grey. */
.politicians-list--status {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  padding: 2px 9px;
  font-size: 0.66rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.politicians-list--status.status-current {
  background: var(--colour-secondary);
  color: #fff;
}
.politicians-list--status.status-former {
  background: var(--colour-lighter);
  color: var(--colour-text-muted);
}

/* Chamber follows the site-wide convention: MP = red, Senator = green. */
.politicians-list--chamber.chamber-mp {
  background: var(--colour-primary-alpha-10);
  color: var(--colour-primary);
}
.politicians-list--chamber.chamber-sen {
  background: var(--colour-secondary-alpha-10);
  color: var(--colour-secondary-dark);
}

/* Hide filtered items (JS) */
.politicians-list--item.hidden {
  display: none;
}

.no-politicians {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--colour-text-muted);
  padding: var(--space-7) var(--space-5);
}

/* ==========================================================================
   Individual politician profile
   ========================================================================== */
.politician-container {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--space-7);
  align-items: start;
  margin-bottom: var(--space-7);
}

aside.politician-profile {
  position: sticky;
  top: var(--space-5);
}

.politician-pic {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--colour-border);
  background: var(--colour-bg-subtle);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.politician-pic .politicians-list--image {
  aspect-ratio: 4 / 5;
  border-radius: 0;
}

.politician-profile > p {
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  margin-bottom: var(--space-2);
}
.politician-profile > p .highlight {
  color: var(--colour-text);
}

main.politician-content {
  min-width: 0;
}

.politician-info {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--colour-border);
}

.politician-name {
  color: var(--colour-primary);
  margin-bottom: var(--space-2);
}

.politician-designation {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
  margin-bottom: var(--space-2);
}
.politician-info > p {
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.content-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.content-grid section {
  margin: 0;
}

.content-grid section h2 {
  font-size: var(--text-xl);
  border-left: 4px solid var(--colour-primary);
  padding-left: var(--space-3);
  margin-bottom: var(--space-4);
}

.biography-content,
.education-content,
.job-history-content,
.previous-parties-content {
  line-height: var(--leading-normal);
  color: var(--colour-text);
}
.biography-content p,
.job-history-content p,
.previous-parties-content p {
  margin-bottom: var(--space-4);
}

.content-grid ol,
.job-history-content ol,
.previous-parties-content ol {
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}
.job-history-content ol li,
.previous-parties-content ol li {
  list-style-type: disc;
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-2);
}

/* ---- Education: token-driven table-like timeline ---- */
.education-section {
  overflow-x: auto;
}
.education-headers {
  display: grid;
  grid-template-columns: 20% 50% 30%;
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--colour-text-muted);
  padding: var(--space-2) var(--space-4);
  background: var(--colour-bg-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 1px solid var(--colour-border);
}

.education-timeline {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--colour-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

.education-record {
  display: grid;
  grid-template-columns: 20% 50% 30%;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}
.education-record:last-child {
  border-bottom: 0;
}
.education-record:nth-child(even) {
  background: var(--colour-bg-subtle);
}

.education-period {
  min-width: 0;
}
.year-range {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  font-variant-numeric: tabular-nums;
}

/* The citation line is a FOURTH child of a three-column grid, so without this it
   wraps into the 20%-wide "Dates" column and the Source link renders squeezed
   under the year range. Span the whole row instead. The source link itself only
   landed in d3dc2850, so this was never visibly wrong for long. */
.education-source {
  grid-column: 1 / -1;
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}
.education-source .source-note {
  margin-left: var(--space-2);
}

.education-qualification {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--colour-text);
}
.education-institution {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--colour-secondary-dark);
}

.education-content {
  line-height: var(--leading-normal);
  color: var(--colour-text);
}

/* ---- Contact ---- */
.contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-pill);
  background: var(--colour-bg-subtle);
  font-size: var(--text-sm);
  color: var(--colour-text);
  transition: border-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard);
}
.contact-item svg {
  color: var(--colour-primary);
  flex: none;
}
.contact-item a {
  color: inherit;
  font-weight: var(--fw-medium);
}
.contact-item:hover {
  border-color: var(--colour-primary);
}
.contact-item:hover a {
  color: var(--colour-primary);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .politician-container {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  aside.politician-profile {
    position: static;
    max-width: 320px;
  }
  .education-headers,
  .education-record {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .education-headers {
    display: none;
  }
  .education-record {
    padding: var(--space-3) var(--space-4);
  }
  .year-range {
    font-size: var(--text-xs);
  }
}