/* =====================================================================
 * VB Candidate Roster — vb-candidates.css
 *
 * Same visual language as the Action Kits index and the home page bands: same
 * radius, shadows, toolbar and chip treatment. Own prefix (vbc-) so the three
 * files can never collide.
 *
 * The FLIP/HOLD colours are the home page's, deliberately — a volunteer who
 * has seen the home page tiles should not have to re-learn them here.
 *
 * Colours are written with a class in front, and links with the element name
 * too, because Impreza's per-row "custom text colour" emits rules that beat
 * flatter selectors on load order. That mistake cost three separate
 * white-on-white bugs during the home page build.
 * ===================================================================== */

.vbc {
	--vbc-navy: #0a2852;
	--vbc-blue: #1668d8;
	--vbc-sky: #38b6ff;
	--vbc-sky-soft: #e8f4ff;
	--vbc-flip: #e03131;
	--vbc-hold: #1a56b0;
	--vbc-ink: #20262e;
	--vbc-muted: #5a6675;
	--vbc-line: #e3e8ef;
	--vbc-radius: 14px;
	--vbc-shadow: 0 2px 14px rgba(10, 40, 82, .08);
	--vbc-shadow-lg: 0 10px 34px rgba(10, 40, 82, .16);
	--vbc-maxw: 1320px;
}

.vbc-wrap {
	max-width: var(--vbc-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- TOOLBAR ---------- */
.vbc-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin: 0 0 26px;
	padding: 18px 20px;
	background: var(--vbc-sky-soft);
	border-radius: var(--vbc-radius);
}

.vbc-tool {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.vbc .vbc-tool label {
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--vbc-navy);
}

.vbc .vbc-tool select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 190px;
	max-width: 100%;
	padding: 11px 38px 11px 14px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--vbc-ink);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a2852' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid #cfe0f5;
	border-radius: 9px;
	cursor: pointer;
}

.vbc .vbc-tool select:focus-visible {
	outline: 2px solid var(--vbc-blue);
	outline-offset: 1px;
}

.vbc-tool-status {
	margin-left: auto;
	align-items: flex-start;
}

.vbc .vbc-count {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--vbc-muted);
}

.vbc .vbc-count strong { color: var(--vbc-navy); }

.vbc button.vbc-clear,
.vbc button.vbc-clear-inline {
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--vbc-blue);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

/* ---------- GRID ----------
   Narrower minimum than the kits page: these cards are a face and two lines,
   so more of them fit a row without crowding. */
.vbc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: 20px;
}

.vbc-none {
	margin: 30px 0 0;
	font-size: 16px;
	color: var(--vbc-muted);
}

/* ---------- CARD ---------- */
.vbc-card {
	display: flex;
	background: #fff;
	border: 1px solid var(--vbc-line);
	border-radius: var(--vbc-radius);
	box-shadow: var(--vbc-shadow);
	overflow: hidden;
	/* Shadow only. A transform or filter would promote the card to its own
	   compositing layer and soften the type. */
	transition: box-shadow .15s ease;
}

.vbc-card:hover,
.vbc-card:focus-within {
	box-shadow: var(--vbc-shadow-lg);
}

/* `[hidden] { display: none }` is only a browser default and any author
   `display` on the element beats it — which silently broke filtering on the
   kits page. !important on purpose, so a later display change can't undo it. */
.vbc-card[hidden] {
	display: none !important;
}

.vbc .vbc-card-link,
.vbc a.vbc-card-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none !important;
}

/* Square, like the home page tiles. Headshots vary wildly in crop, so the
   image is anchored slightly above centre — faces sit in the top half of
   almost every portrait, and dead-centre cropping cuts foreheads. */
.vbc-shot {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--vbc-sky-soft);
	overflow: hidden;
}

.vbc .vbc-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.vbc-img-none {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vbc-navy);
}

.vbc .vbc-img-none span {
	font-family: inherit;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--vbc-sky);
}

/* FLIP red, HOLD blue — the same pairing as the home page tiles, so the
   meaning carries over. Both measured on their own fill: white on #e03131 is
   4.5:1, on #1a56b0 it is 6.9:1. */
.vbc .vbc-pill {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 11px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .9px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
	border-radius: 999px;
}

.vbc .vbc-pill.is-flip { background: var(--vbc-flip); }
.vbc .vbc-pill.is-hold { background: var(--vbc-hold); }

.vbc-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	padding: 13px 14px 15px;
}

.vbc .vbc-name {
	margin: 0;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vbc-navy);
}

.vbc-card:hover .vbc-name { color: var(--vbc-blue); }

/* The place reads first and loudest — on a roster people scan for the state or
   district, then read the name. The office is the quiet half of the same line. */
.vbc .vbc-loc {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	margin-top: auto;
	font-size: 13.5px;
	line-height: 1.3;
}

.vbc .vbc-place {
	font-weight: 700;
	color: var(--vbc-blue);
}

.vbc .vbc-office {
	font-weight: 600;
	color: var(--vbc-muted);
}

/* ---------- EDITOR NOTICE ---------- */
.vbc-empty {
	margin: 24px 0 0;
	padding: 14px 16px;
	font-size: 14.5px;
	line-height: 1.5;
	color: #6b5200;
	background: #fff8e1;
	border: 1px solid #ffe08a;
	border-radius: 10px;
}

/* ---------- NARROW SCREENS ---------- */
@media (max-width: 900px) {
	.vbc-tool-status { margin-left: 0; }
}

@media (max-width: 700px) {
	.vbc-wrap { padding: 0 16px; }

	.vbc-tools {
		gap: 12px;
		padding: 14px;
	}

	.vbc-tool { width: 100%; }
	.vbc .vbc-tool select { width: 100%; min-width: 0; }

	/* Two across, not one: a face and two lines doesn't need a full phone
	   width, and one-per-row would make this a very long page. */
	.vbc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.vbc .vbc-name { font-size: 15px; }
	.vbc .vbc-loc { font-size: 12.5px; }
	.vbc-body { padding: 11px 12px 13px; }
}