/* ==========================================================================
   campaign.css — the campaign page and the persuasive components.

   1. The Standard campaign layout (single-sbsi_campaign.php): the petition
      band, the constrained body column, the voices band, evidence, more.
   2. The component library that campaign bodies (and any page) are built
      from — every block pattern under "SBSI" in the inserter maps to one
      of these classes: stat strips, stat cards, section nav, card grids,
      step cards, fact panels, tag clouds, photo cards, statement bands,
      tick lists. All are plain Group/Heading/Paragraph/Image blocks with
      a class, so anything here can be edited word by word in WordPress.

   Loaded after main.css (design tokens) and before blocks.css (bridge).
   ========================================================================== */

/* ---- 1. Standard campaign layout ------------------------------------------ */

.campaign-petition-band { background: var(--parchment); border-top: 3px solid var(--gold); border-bottom: 1px solid rgba(16, 32, 64, .1); }
.campaign-petition-inner {
	padding-top: clamp(46px, 6vw, 84px); padding-bottom: clamp(46px, 6vw, 84px);
	display: flex; flex-wrap: wrap; gap: clamp(30px, 4vw, 56px); align-items: flex-start;
}
.campaign-petition-copy { flex: 1 1 440px; min-width: 0; }
.campaign-petition-copy > .kicker { margin-bottom: 14px; }
.campaign-petition-copy > h2 { margin: 0 0 18px; font: 600 clamp(28px, 3.6vw, 42px)/1.1 var(--serif); color: var(--navy); letter-spacing: -.012em; }
.campaign-petition-copy .petition-statement { margin: 0 0 30px; }

/* The petition text — a light panel that carries real formatting: an
   addressee line, bold lead-ins, and the asks as a numbered list. */
.petition-statement {
	background: #fff; color: var(--ink);
	border: 1px solid rgba(16, 32, 64, .16); border-left: 4px solid var(--red); border-radius: 6px;
	padding: clamp(22px, 3vw, 34px);
}
.petition-statement-label {
	margin: 0 0 16px; font: 600 11px/1 var(--mono); letter-spacing: .16em;
	text-transform: uppercase; color: var(--red);
}
.petition-statement-text p { margin: 0 0 14px; font: 400 15px/1.7 var(--sans); color: #3a4553; }
.petition-statement-text p:last-child { margin-bottom: 0; }
.petition-statement-text strong { color: var(--navy); font-weight: 600; }
.petition-statement-text em { font-style: italic; }
.petition-statement-text a { color: var(--red); border-bottom: 1px solid rgba(163, 42, 33, .35); }
.petition-statement-text ol, .petition-statement-text ul {
	margin: 0 0 14px; padding-left: 1.6em; display: flex; flex-direction: column; gap: 10px;
	font: 400 15px/1.65 var(--sans); color: #3a4553;
}
.petition-statement-text ol:last-child, .petition-statement-text ul:last-child { margin-bottom: 0; }
.petition-statement-text li { padding-left: .3em; }
.petition-statement-text li::marker { color: var(--navy); font-weight: 600; }
.campaign-petition-side { flex: 1 1 320px; max-width: 430px; position: sticky; top: 120px; }

.campaign-body-section { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(44px, 6vw, 76px); }
.campaign-body > * { max-width: 780px; }
.campaign-body > .alignwide,
.campaign-body > .stat-cards, .campaign-body > .card-grid, .campaign-body > .step-cards,
.campaign-body > .photo-cards, .campaign-body > .section-nav, .campaign-body > .nom-charts,
.campaign-body > .two-col { max-width: none; }
.campaign-body > .alignfull { max-width: none; }
.campaign-body > * + * { margin-top: 18px; }
.campaign-body > h2 + *, .campaign-body > h3 + * { margin-top: 0; }
.campaign-body > .alignfull + *, .campaign-body > * + .alignfull { margin-top: clamp(40px, 5vw, 64px); }
.campaign-body > .wp-block-image { margin-left: 0; }
.campaign-body figcaption { font: 400 13px/1.5 var(--sans); color: var(--muted); margin-top: 8px; }

/* Won / Archived campaigns. */
.campaign-badge--archived { background: var(--muted); color: #fff; }
.campaign-closed-note { margin: 18px 0 0; font: 400 14.5px/1.55 var(--sans); color: #b7c3d4; max-width: 620px; }

/* "The full case" — the panel pointing to the page with the long version. */
.campaign-case { padding-top: clamp(8px, 1vw, 16px); padding-bottom: clamp(44px, 6vw, 72px); }
.campaign-case-card {
	background: var(--navy); color: #fff; border-radius: 8px; padding: clamp(26px, 3.5vw, 44px);
	display: flex; flex-wrap: wrap; gap: 24px clamp(24px, 4vw, 56px); align-items: center; justify-content: space-between;
}
.campaign-case-copy { flex: 1 1 420px; min-width: 0; }
.campaign-case-card .kicker { color: var(--gold-bright); margin-bottom: 10px; }
.campaign-case-card h2 { margin: 0; font: 600 clamp(24px, 3vw, 34px)/1.1 var(--serif); color: #fff; letter-spacing: -.01em; }
.campaign-case-card p { margin: 10px 0 0; font: 400 15px/1.6 var(--sans); color: #c9d2df; max-width: 620px; }
.campaign-case-card .btn { flex: none; }

/* "Read more" — related material as buttons. */
.campaign-related-section { padding-top: clamp(8px, 1vw, 16px); padding-bottom: clamp(44px, 6vw, 72px); }
.campaign-related-section .section-head-pair { margin-bottom: 20px; }
.campaign-related-section .section-head-pair h2 { margin: 0; }
.campaign-related-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.campaign-related-btn {
	display: inline-flex; flex-direction: column; gap: 6px; max-width: 420px;
	background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 6px;
	padding: 14px 18px; transition: border-color .15s, transform .15s;
}
.campaign-related-btn:hover { border-color: var(--navy); transform: translateY(-2px); }
.campaign-related-type { font: 700 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.campaign-related-title { font: 600 15.5px/1.3 var(--serif); color: var(--navy); }
.campaign-body-section + .campaign-case, .campaign-body-section + .campaign-related-section { padding-top: 0; }

.campaign-voices-band { background: #fff; border-top: 1px solid var(--line); padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(44px, 6vw, 72px); }
.campaign-voices-band .section-head-pair,
.campaign-evidence-section .section-head-pair { margin-bottom: 24px; }
.campaign-voices-band .section-head-pair h2,
.campaign-evidence-section .section-head-pair h2 { margin: 0; }
.campaign-voices-band .campaign-voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.campaign-evidence-section { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(44px, 6vw, 72px); }
.campaign-more { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(44px, 6vw, 80px); }
.campaign-more .section-head .kicker { margin-bottom: 10px; }

/* ---- 2. Components ----------------------------------------------------------- */

/* Kicker + heading pairs. In the body column the kicker carries the
   section rule, so the heading that follows it does not draw its own. */
.section-kicker { font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.band-navy .section-kicker, .is-style-band-navy .section-kicker { color: var(--gold-bright); }
.campaign-body > .section-kicker { margin-top: 40px; padding-top: 26px; border-top: 2px solid var(--navy); }
.campaign-body > .section-kicker + h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.campaign-body > .alignfull + .section-kicker, .campaign-body > .section-nav + .section-kicker { margin-top: clamp(40px, 5vw, 64px); }
.band-inner > .section-kicker + h2 { margin-top: 0; border-top: 0; padding-top: 0; }

/* Text inside a band keeps a readable measure, aligned with the grids. */
.band-inner > p, .band-inner > h2, .band-inner > h3, .band-inner > .section-kicker, .band-inner > ul, .band-inner > ol { max-width: 820px; margin-left: 0; }
.band-inner > h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.band-inner > * + * { margin-top: 18px; }
.band-inner > h2 + *, .band-inner > h3 + * { margin-top: 0; }
.band-inner > .step-cards, .band-inner > .stat-cards, .band-inner > .card-grid, .band-inner > .photo-cards, .band-inner > .nom-charts { margin-top: clamp(26px, 3vw, 40px); margin-bottom: clamp(26px, 3vw, 40px); }
.band-inner > .wp-block-buttons { margin-top: 8px; }

/* Steps stacked in a column (the right-hand column of a two-col). */
.two-col .step + .step { margin-top: 18px; }
.statement-copy > * + * { margin-top: 0; }

/* Stat strip — a full-bleed navy band of headline figures. */
.stat-strip { background: var(--navy); color: #fff; border-top: 3px solid var(--gold); padding: clamp(26px, 3vw, 38px) var(--pad-x); }
.stat-strip-inner, .stat-strip > .wp-block-group { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.stat { min-width: 0; }
.stat-label { font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8ea0bd; margin: 0 0 10px; }
.stat-number { font: 600 clamp(30px, 3.4vw, 40px)/1 var(--serif); color: #fff; margin: 0 0 8px; }
.stat-number--gold { color: var(--gold-bright); }
.stat-note { font: 400 13.5px/1.55 var(--sans); color: #9fadc2; margin: 0; }
.stat-note strong { color: #fff; font-weight: 600; }

/* Stat cards — the same figures as light cards inside the body. */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.stat-cards > .stat { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 8px; padding: 22px 22px 20px; }
.stat-cards .stat-label { color: var(--sand); }
.stat-cards .stat-number { color: var(--navy); font-size: clamp(30px, 3.4vw, 42px); }
.stat-cards .stat-number--gold { color: var(--gold); }
.stat-cards .stat-number--red { color: var(--red); }
.stat-cards .stat-note { color: var(--body); }
.stat-cards .stat-note strong { color: var(--navy); }
.stat-bar { height: 6px; background: #eee5d3; border-radius: 4px; overflow: hidden; margin: 0 0 12px; }
.stat-bar > span { display: block; height: 100%; background: var(--gold); }
.stat-bar--red > span { background: var(--red); }

/* Section nav — anchor pills that jump down a long campaign. */
.section-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.section-nav a, .section-nav .wp-block-button__link {
	display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
	color: var(--navy); background: #fff; border: 1px solid rgba(16, 32, 64, .2); border-radius: 40px;
	padding: 10px 14px; text-decoration: none; transition: all .15s;
}
.section-nav a:hover, .section-nav .wp-block-button__link:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.section-nav.wp-block-buttons > .wp-block-button { margin: 0; }

/* Card grid — label / heading / text cards ("Held in trust"). */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; min-width: 0; }
.card-label { font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.card > h3 { margin: 0 0 8px; font: 600 20px/1.2 var(--serif); color: var(--navy); }
.card > p { margin: 0; font: 400 14.5px/1.6 var(--sans); color: var(--body); }
.card > p + p { margin-top: 8px; }

/* Step cards — numbered demands / steps. */
.step-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.step { border-top: 3px solid var(--gold); padding-top: 18px; min-width: 0; }
.step-num { font: 500 28px/1 var(--serif); color: var(--gold); margin: 0 0 12px; }
.step > h3 { margin: 0 0 8px; font: 600 19px/1.25 var(--serif); color: var(--navy); }
.step > p { margin: 0; font: 400 14.5px/1.6 var(--sans); color: var(--body); }
.band-navy .step, .is-style-band-navy .step { border-top-color: rgba(224, 180, 88, .5); }
.band-navy .step > h3, .is-style-band-navy .step > h3 { color: #fff; }
.band-navy .step > p, .is-style-band-navy .step > p { color: #b7c3d4; }
.band-navy .step-num, .is-style-band-navy .step-num { color: var(--gold-bright); }

/* Two columns — argument beside a panel. */
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
.two-col > * { min-width: 0; }
.two-col p { margin: 0 0 16px; }

/* Fact panel — the Bill, the report, the motion: a labelled reference box. */
.fact-panel { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 6px; padding: clamp(22px, 2.6vw, 30px); }
.fact-panel > p { margin: 0 0 14px; font: 400 15px/1.6 var(--sans); color: #3a4553; }
.fact-panel > p:last-child { margin-bottom: 0; }
.fact-label { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 0 0 8px !important; }
.fact-label + p { font: 500 16.5px/1.45 var(--serif); color: var(--navy); }
.fact-panel .wp-block-buttons { margin-top: 6px; }
.fact-links { display: flex; flex-direction: column; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.fact-links li { margin: 0; }
.fact-links a { display: block; font: 600 15px/1.35 var(--serif); color: var(--navy); padding: 9px 0; border-bottom: 1px solid rgba(16, 32, 64, .1); border-left: 0; }
.fact-links li:last-child a { border-bottom: 0; }
.fact-links a:hover { color: var(--red); }

/* Tag cloud — short pills ("No rezoning · No subdivision pathway"). */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.tag-cloud span, .tag-cloud li {
	display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
	background: var(--navy); color: #fff; padding: 8px 11px; border-radius: 3px;
}
ul.tag-cloud { list-style: none; padding: 0; }

/* Photo cards — a picture with a label, heading, meta line and text. */
.photo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(14px, 2vw, 20px); }
.photo-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; min-width: 0; }
.photo-card > .wp-block-image { margin: 0; }
.photo-card > .wp-block-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.photo-card-body { padding: 20px 22px 22px; }
.photo-card-body > .card-label { margin-bottom: 8px; }
.photo-card-body > h3 { margin: 0 0 6px; font: 600 20px/1.2 var(--serif); color: var(--navy); }
.photo-card-meta { font: 500 11px/1.5 var(--mono); color: var(--sand); margin: 0 0 10px; }
.photo-card-body > p { margin: 0; font: 400 14px/1.6 var(--sans); color: var(--body); }

/* Statement band — a portrait beside a long quotation (a speech, a letter). */
.statement-band { background: var(--navy); color: #fff; padding: clamp(46px, 6vw, 84px) var(--pad-x); }
.statement-inner, .statement-band > .wp-block-group { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 760px) { .statement-inner, .statement-band > .wp-block-group { grid-template-columns: 1fr; } }
.statement-person > .wp-block-image { margin: 0 0 16px; }
.statement-person > .wp-block-image img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.statement-name { font: 600 17px/1.3 var(--serif); color: #fff; margin: 0 0 4px; }
.statement-role { font: 400 13px/1.5 var(--sans); color: #b7c3d4; margin: 0; }
.statement-source { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); margin: 0 0 18px; }
.statement-quote { margin: 0; padding: 0; border: 0; font: 500 clamp(17px, 1.9vw, 22px)/1.5 var(--serif); color: #fff; }
.statement-quote p { margin: 0 0 16px; font: inherit; color: inherit; }
.statement-quote p:last-child { margin-bottom: 0; }
.statement-quote strong { color: var(--gold-bright); font-weight: 600; }

/* Tick list — a ✓ before each item. */
ul.tick-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
ul.tick-list li { position: relative; padding-left: 30px; font: 400 15px/1.55 var(--sans); color: #3a4553; margin: 0; }
ul.tick-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: var(--gold-bright); font: 700 11px/20px var(--sans); text-align: center; }

/* Bands used inside campaign bodies (full-width groups). */
.band-navy { background: var(--navy); color: #fff; padding: clamp(46px, 6vw, 84px) var(--pad-x); }
.band-parchment { background: var(--parchment); border-top: 1px solid rgba(16, 32, 64, .1); border-bottom: 1px solid rgba(16, 32, 64, .1); padding: clamp(46px, 6vw, 84px) var(--pad-x); }
.band-white { background: #fff; padding: clamp(46px, 6vw, 84px) var(--pad-x); }
.band-navy > *, .band-parchment > *, .band-white > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy p { color: #c9d2df; }
.band-navy .campaign-argument h2, .campaign-body .band-navy h2 { border-top-color: rgba(224, 180, 88, .35); }
.band-inner { max-width: 1180px; margin: 0 auto; }
.band-navy .card, .band-navy .stat-cards > .stat { background: rgba(255, 255, 255, .06); border-color: rgba(224, 180, 88, .35); }
.band-navy .card > h3 { color: #fff; }
.band-navy .card > p, .band-navy .stat-note { color: #b7c3d4; }
.band-navy .stat-cards .stat-number { color: #fff; }
.band-navy .stat-cards .stat-label { color: #8ea0bd; }
.band-navy .stat-bar { background: rgba(255, 255, 255, .12); }

/* Full-bleed sections inside the campaign body column. */
.campaign-body > .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.campaign-body > .alignfull > h2:first-child,
.campaign-body > .alignfull > .section-kicker + h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.campaign-body .band-navy > .campaign-argument h2 { border-top-color: rgba(224, 180, 88, .35); }