/* Reusable components (§5): buttons, chips, index rows, split sections, bands. */

/* ---------- Buttons ---------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 24px;
	background: var(--ink);
	color: var(--ink-inverse);
	border: 1px solid var(--ink);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: var(--tracking-label);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.button:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--ink-inverse);
}

.button--secondary {
	background: transparent;
	color: var(--ink);
}

.button--secondary:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--ink-inverse);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

@media (max-width: 899.98px) {
	.actions {
		flex-direction: column;
		gap: 10px;
	}

	.actions .button {
		width: 100%;
		font-size: 10.5px;
	}
}

/* ---------- Chips ---------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 15px;
	background: var(--paper);
	color: var(--text-3);
	border: 1px solid var(--rule-input);
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.chip:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.chip[aria-current],
.chip[aria-pressed="true"],
.chip.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--ink-inverse);
}

/* ---------- Bands and section headings ---------- */

.band {
	padding: 48px var(--pad-x);
	border-bottom: 1px solid var(--rule);
}

.band--tint {
	background: var(--paper-2);
}

.section-title {
	font-size: var(--fs-section);
	line-height: 1.05;
}

/* ---------- Index rows (services, shows, posts) ---------- */

.index-list {
	border-bottom: 1px solid var(--rule);
}

.index-row {
	display: grid;
	align-items: center;
	gap: 24px;
	min-height: var(--tap);
	padding: 16px var(--pad-x);
	border-bottom: 1px solid var(--rule-soft);
	transition: background-color var(--dur) var(--ease);
}

.index-list > li:last-child .index-row {
	border-bottom: 0;
}

.index-row:hover {
	background: var(--paper-hover);
	color: var(--ink);
}

.index-row--simple {
	grid-template-columns: 120px 1fr;
}

.index-row__date {
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: 0.08em;
	color: var(--text-5);
}

.index-row__title {
	font-family: var(--font-serif);
	font-size: var(--fs-row-title);
	line-height: 1.2;
}

@media (max-width: 599.98px) {
	.index-row--simple {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ---------- Split section ---------- */

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--rule);
}

.split > :first-child {
	border-right: 1px solid var(--rule);
}

.split__media {
	position: relative;
	min-height: 100%;
	background: var(--image-bg);
}

.split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 899.98px) {
	.split {
		grid-template-columns: 1fr;
	}

	.split > :first-child {
		border-right: 0;
	}

	/* Image leads on mobile, except where the headline should (service heroes). */
	.split:not(.split--text-first) .split__media {
		order: -1;
	}

	.split__media {
		aspect-ratio: 390 / 330;
		min-height: 0;
	}
}

/* ---------- Pagination ---------- */

.pagination {
	padding: 28px var(--pad-x);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rule-input);
}

.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--ink-inverse);
}