/*
 * SIMPulse layout: containers, section rhythm, grid helpers, alternating bands.
 * design/DESIGN-SYSTEM.md §3.1-§3.4.
 *
 * There are no @media queries here. Every column drop is produced by
 * repeat(auto-fit, minmax(Npx, 1fr)) and every size step by clamp().
 */

/* ------------------------------------------------------------ container */

.sp-container {
	width: 100%;
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.sp-container--mid {
	max-width: var(--sp-container-mid);
}

.sp-container--text {
	max-width: var(--sp-container-text);
}

.sp-container--copy {
	max-width: var(--sp-container-copy);
}

.sp-container--flush {
	padding-inline: 0;
}

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

.sp-section {
	position: relative;
	background: var(--sp-bg);
	padding-block: var(--sp-section-y);
}

/* First section on an inner page sits a little tighter to the header. */
.sp-section--top {
	padding-block: var(--sp-section-y-top);
}

/* Alternating dark band. */
.sp-section--deep {
	background: var(--sp-bg-deep);
	border-top: 1px solid var(--sp-line-faint);
	border-bottom: 1px solid var(--sp-line-faint);
}

.sp-section--band {
	padding-block: var(--sp-section-y-band);
}

.sp-section--flush-top {
	padding-block-start: 0;
}

.sp-section--flush-bottom {
	padding-block-end: 0;
}

.sp-section--clip {
	overflow: hidden;
}

/*
 * ------------------------------------------------------ last section rhythm
 *
 * components/footer.css lifts the red panel --sp-footer-bleed ABOVE the footer's
 * top edge, so on every page the top of that panel sits inside the last
 * section's bottom padding and eats it. The section then reads as if its content
 * were pressed against the footer.
 *
 * So the last section on the page pays the bleed back: its own bottom padding,
 * plus exactly the height the panel steals from it. The optical gap between the
 * closing content and the footer is then the same as between any two sections.
 *
 * One rule per padding modifier because each starts from a different base, and
 * they are ordered so that the more specific modifier is the one that lands
 * (equal specificity -- source order decides).
 */
.sp-main > .sp-section:last-child {
	padding-block-end: calc(var(--sp-section-y) + var(--sp-footer-bleed));
}

.sp-main > .sp-section--top:last-child {
	padding-block-end: calc(var(--sp-section-y-top) + var(--sp-footer-bleed));
}

.sp-main > .sp-section--band:last-child {
	padding-block-end: calc(var(--sp-section-y-band) + var(--sp-footer-bleed));
}

/* Flush-bottom has no padding of its own to add to -- the bleed is all it needs. */
.sp-main > .sp-section--flush-bottom:last-child {
	padding-block-end: var(--sp-footer-bleed);
}

/* -------------------------------------------------------------- rhythm */

/* heading -> content */
.sp-stack {
	margin-top: var(--sp-heading-gap);
}

/* heading -> card grid */
.sp-stack--lg {
	margin-top: var(--sp-heading-gap-lg);
}

/* grid -> trailing CTA */
.sp-stack--cta {
	margin-top: var(--sp-cta-gap);
}

/* ---------------------------------------------------------------- grid */

.sp-grid {
	display: grid;
	gap: var(--sp-grid-gap);
}

/*
 * The one grid pattern the whole design uses. --sp-grid-min is the minmax()
 * floor; override it per component instead of writing a new grid rule.
 */
.sp-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(var(--sp-grid-min, 290px), 1fr));
}

.sp-grid--auto-sm {
	--sp-grid-min: 260px;
	grid-template-columns: repeat(auto-fit, minmax(var(--sp-grid-min), 1fr));
	gap: var(--sp-grid-gap-sm);
}

.sp-grid--auto-lg {
	--sp-grid-min: 300px;
	grid-template-columns: repeat(auto-fit, minmax(var(--sp-grid-min), 1fr));
	gap: var(--sp-grid-gap-lg);
}

/* Split band: copy + artwork, vertically centred. */
.sp-grid--split {
	--sp-grid-min: 300px;
	grid-template-columns: repeat(auto-fit, minmax(var(--sp-grid-min), 1fr));
	gap: var(--sp-grid-gap-lg);
	align-items: center;
}

.sp-grid--start {
	align-items: start;
}

.sp-grid--end {
	align-items: end;
}

.sp-grid--hairline {
	gap: 1px;
	background: var(--sp-line);
	border: 1px solid var(--sp-line);
}

.sp-span-full {
	grid-column: 1 / -1;
}

/* ---------------------------------------------------------------- flex */

.sp-row {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.sp-row--between {
	justify-content: space-between;
}

.sp-row--center {
	justify-content: center;
}

.sp-col {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.sp-center {
	text-align: center;
}

/* ------------------------------------------------- decorative speed streak */

.sp-streak {
	position: absolute;
	left: -6%;
	width: 112%;
	height: 46px;
	transform: rotate(-4deg);
	pointer-events: none;
	background: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.055) 0 16px,
		rgba(255, 255, 255, 0.012) 16px 27px
	);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 70%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 22%, #000 70%, transparent);
}

/* ------------------------------------------------------- page (legal) body */

/*
 * page.php renders WordPress content with the site's typography. Headings inside
 * the flow need their own spacing because base.css zeroes every heading margin.
 */
.sp-prose {
	max-width: var(--sp-container-text);
	color: var(--sp-text-60);
	font-size: var(--sp-fs-md);
	line-height: var(--sp-lh-body);
}

.sp-prose > h2,
.sp-prose > h3,
.sp-prose > h4,
.sp-prose > h5,
.sp-prose > h6 {
	margin-top: var(--sp-heading-gap);
	margin-bottom: var(--sp-4);
}

.sp-prose > h2 {
	font-size: var(--sp-fs-h2-sub);
}

.sp-prose > h3 {
	font-size: var(--sp-fs-2xl);
}

.sp-prose > *:first-child {
	margin-top: 0;
}

.sp-prose a {
	text-decoration: underline;
}

.sp-prose img,
.sp-prose figure {
	margin-block: var(--sp-9);
}

.sp-prose figcaption {
	margin-top: var(--sp-2);
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text-45);
}

/* Page hero for plain pages (legal, 404, search). */
.sp-page-head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.sp-page-head__title {
	font-size: var(--sp-fs-h1-page);
	font-weight: 900;
	line-height: var(--sp-lh-display);
}

/* ------------------------------------- fallback templates (index/search/404) */

/*
 * Minimal shells only. The real card, form and pagination components belong to
 * later tickets; these keep index.php / search.php / 404.php on-system.
 */

.sp-teaser {
	background: var(--sp-surface);
	border: var(--sp-border);
	padding: var(--sp-10);
	transition:
		transform var(--sp-dur-base) var(--sp-ease),
		border-color var(--sp-dur-base) var(--sp-ease);
}

.sp-teaser:hover {
	transform: translateY(-6px);
	border-color: var(--sp-line-hover);
}

.sp-teaser__title {
	margin: 0 0 var(--sp-3);
	font-size: var(--sp-fs-xl);
}

.sp-teaser__excerpt {
	margin: 0;
	font-size: var(--sp-fs-base);
	color: var(--sp-text-60);
}

.sp-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.sp-search__input {
	flex: 1 1 240px;
	min-width: 0;
	padding: var(--sp-4);
	background: var(--sp-bg-deep);
	border: var(--sp-border-field);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
	font-size: var(--sp-fs-base);
}

.sp-search__input::placeholder {
	color: var(--sp-text-45);
}

.sp-pagination {
	display: flex;
	gap: var(--sp-3);
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
}

.sp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.sp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: var(--sp-2) var(--sp-3);
	border: var(--sp-border-ghost);
	color: var(--sp-text);
	transition: border-color var(--sp-dur-fast) var(--sp-ease);
}

.sp-pagination .page-numbers:hover,
.sp-pagination .page-numbers.current {
	border-color: var(--sp-red);
	color: var(--sp-red);
}

.sp-page-links {
	margin-top: var(--sp-9);
	font-family: var(--sp-font-display);
	font-style: italic;
	text-transform: uppercase;
}