/*
 * Party hub (/parties/, issue #134).
 * The page itself is generated by scripts/analysis/build_party_pages.py.
 *
 * Laid out like the research index rather than content.css's single card:
 * the page sits on --base at the research column width, and each party is
 * its own --raised card, the same idiom as .piece-card in research.css. The
 * text people are meant to read (the position sentence, the description,
 * the links and the closing note) uses --text at the research posts' body
 * size and line height (1rem, 1.7).
 *
 * Every colour is a token from site.css except the logo tiles, which are the
 * parties' own colours: see LOGOS in build_party_pages.py for each one's
 * source and contrast, which build_party_pages_test.py keeps in step with
 * the rules below.
 */

/* Drop content.css's card: the party cards are the cards here. */
.prose.party-answer {
  max-width: 760px;
  background: none;
  border: 0;
  padding: 0;
}

.party-answer h1 {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.2;
  max-width: 23ch;
  margin: 0 0 14px;
}

.prose p.answer {
  color: var(--text);
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 60ch;
  margin: 0;
}

.party-index {
  list-style: none;
  padding: 0;
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prose .party-index > li {
  background-color: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 28px);
}

.party-entry-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.party-entry-head {
  flex-wrap: wrap;
}

/* The card's main action: the shared .cta-button, a little more compact,
   pushed to the right of the logo and name on wide screens and given its own
   full-width row on phones. */
.prose .party-entry-cta {
  margin: 0 0 0 auto;
  padding: 12px 22px;
  min-height: 46px;
  color: var(--on-bone);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .prose .party-entry-cta {
    margin: 4px 0 0;
    width: 100%;
    justify-content: center;
  }
}

.prose .party-entry-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Every tile is the same size and shape; only its colour changes, to the
   background each party designs its logo for. */
.party-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 56px;
  padding: 9px 12px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
}

.party-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.party-logo--act { background-color: #000000; }
.party-logo--greens { background-color: #023015; }
.party-logo--labour { background-color: #ffffff; }
.party-logo--national { background-color: #0072ce; }
.party-logo--nz-first { background-color: #001f50; }
.party-logo--opp { background-color: #443a84; }
.party-logo--te-pati-maori { background-color: #000000; }

/* No logo: the neutral initial badge sits on the card itself. */
.party-logo-badge {
  background-color: var(--base);
}

.party-logo-badge svg {
  width: 36px;
  height: 36px;
}

.prose .party-index p.party-where,
.prose .party-index p.party-about {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 12px;
  max-width: 68ch;
}

.prose .party-index p.party-where {
  font-weight: 600;
}

.prose .party-index p.party-sources {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.prose .party-index p.party-sources a {
  color: var(--muted);
}

.prose .party-index p.party-research-label {
  margin: 20px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.party-research {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prose .party-research li {
  font-size: 1rem;
  line-height: 1.5;
}

.prose .party-research li + li {
  margin-top: 8px;
}

.prose p.party-note {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 68ch;
  margin: 0;
}

/* content.css's `.page-footer a` (bone) outranks site.css's `.cta-button`
   colour (on-bone), which leaves the button's label bone on bone. */
.page-footer a.cta-button {
  color: var(--on-bone);
}