/**
 * Section — page section wrappers, layout primitives, footer, prose.
 *
 * Content widths: 680px (default), 1120px (wide), 1440px (max).
 * 3 breakpoints: compact (<768), regular (768-1023), large (1024+).
 */

.slist-container {
	max-width: var(--slist-content-default);
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 768px) {
	.slist-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (min-width: 1024px) {
	.slist-container {
		padding-left: 0;
		padding-right: 0;
	}
}

.slist-container--wide {
	max-width: var(--slist-content-wide);
}

.slist-container--max {
	max-width: var(--slist-content-max);
}

.slist-section {
	padding-top: var(--slist-space-7);
	padding-bottom: var(--slist-space-7);
}

.slist-section--tight {
	padding-top: var(--slist-space-5);
	padding-bottom: var(--slist-space-5);
}

.slist-section--loose {
	padding-top: var(--slist-space-9);
	padding-bottom: var(--slist-space-9);
}

.slist-section__header {
	text-align: center;
	margin-bottom: var(--slist-space-5);
}

.slist-section__title {
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-title1);
	font-weight: var(--slist-weight-regular);
	letter-spacing: var(--slist-ls-snug);
	color: var(--slist-text-primary);
	margin: 0 0 var(--slist-space-2);
}

.slist-section__subtitle {
	font-size: var(--slist-text-body);
	color: var(--slist-text-secondary);
	margin: 0;
}

/* ---- Hero ---- */

.slist-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--slist-space-9) 16px;
	min-height: 60vh;
}

@media (min-width: 768px) {
	.slist-hero {
		padding-left: 24px;
		padding-right: 24px;
	}
}

.slist-hero__title {
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-hero);
	font-weight: var(--slist-weight-regular);
	letter-spacing: var(--slist-ls-tight);
	line-height: var(--slist-lh-tight);
	color: var(--slist-text-primary);
	margin: 0 0 var(--slist-space-3);
}

.slist-hero__subtitle {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-body);
	color: var(--slist-text-secondary);
	max-width: 480px;
	margin: 0 0 var(--slist-space-5);
	line-height: var(--slist-lh-default);
}

.slist-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slist-space-2);
	justify-content: center;
}

/* ---- Grid layouts ---- */

.slist-grid {
	display: grid;
	gap: var(--slist-space-4);
}

.slist-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.slist-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.slist-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.slist-stack {
	display: flex;
	flex-direction: column;
	gap: var(--slist-space-3);
}

.slist-stack--tight { gap: var(--slist-space-2); }
.slist-stack--loose { gap: var(--slist-space-5); }

.slist-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slist-space-2);
	align-items: center;
}

/* ---- Prose — styled wrapper for the_content() ---- */

.slist-prose {
	max-width: var(--slist-content-default);
	margin: 0 auto;
	font-size: var(--slist-text-body);
	line-height: var(--slist-lh-default);
	color: var(--slist-text-primary);
}

.slist-prose > * + * {
	margin-top: var(--slist-space-3);
}

.slist-prose h2 { margin-top: var(--slist-space-8); }
.slist-prose h3 { margin-top: var(--slist-space-5); }
.slist-prose h4 { margin-top: var(--slist-space-4); }

.slist-prose img {
	border-radius: var(--slist-radius-lg);
	margin: var(--slist-space-5) auto;
}

.slist-prose blockquote {
	border-left: 3px solid var(--slist-primary);
	padding: var(--slist-space-2) var(--slist-space-4);
	margin: var(--slist-space-5) 0;
	color: var(--slist-text-secondary);
	font-style: italic;
	font-size: var(--slist-text-title3);
}

.slist-prose pre,
.slist-prose code {
	font-family: var(--slist-font-mono);
	background: var(--slist-surface);
	border: 1px solid var(--slist-separator);
	border-radius: var(--slist-radius-sm);
	padding: 0.15em 0.4em;
	font-size: 0.92em;
}

.slist-prose pre {
	padding: var(--slist-space-3) var(--slist-space-4);
	overflow-x: auto;
}

/* ================================================================
   Footer
   ================================================================ */

.slist-footer {
	background: var(--slist-bg);
	border-top: 1px solid var(--slist-separator);
	padding: var(--slist-space-8) 0 var(--slist-space-5);
	color: var(--slist-text-primary);
}

.slist-footer__inner {
	max-width: var(--slist-content-wide);
	margin: 0 auto;
	padding: 0 16px;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: var(--slist-space-5);
	align-items: start;
}

.slist-footer__brand {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-body);
	font-weight: var(--slist-weight-semibold);
	margin: 0 0 var(--slist-space-2);
	color: var(--slist-text-primary);
}

.slist-footer__blurb {
	font-size: var(--slist-text-callout);
	color: var(--slist-text-secondary);
	margin: 0;
	line-height: var(--slist-lh-default);
	max-width: 300px;
}

.slist-footer__nav {
	margin: 0;
}

.slist-footer__menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--slist-space-2);
}

.slist-footer__menu li a {
	color: var(--slist-text-secondary);
	text-decoration: none;
	font-size: var(--slist-text-callout);
	transition: color var(--slist-transition-fast);
}

.slist-footer__menu li a:hover {
	color: var(--slist-text-primary);
}

.slist-footer__social-label {
	font-size: var(--slist-text-eyebrow);
	font-weight: var(--slist-weight-semibold);
	letter-spacing: var(--slist-ls-wider);
	text-transform: uppercase;
	color: var(--slist-text-secondary);
	margin: 0 0 var(--slist-space-2);
}

.slist-footer__discord {
	display: inline-flex;
	align-items: center;
	gap: var(--slist-space-2);
	color: var(--slist-text-primary);
	text-decoration: none;
	font-size: var(--slist-text-callout);
	font-weight: var(--slist-weight-medium);
	padding: 8px 16px;
	background: var(--slist-surface);
	border: 1px solid var(--slist-separator);
	border-radius: var(--slist-radius-md);
	transition: border-color var(--slist-transition-fast);
}

.slist-footer__discord:hover {
	border-color: var(--slist-separator-medium);
}

.slist-footer__discord svg {
	width: 18px;
	height: 18px;
	color: var(--slist-primary);
}

.slist-footer__bottom {
	max-width: var(--slist-content-wide);
	margin: var(--slist-space-5) auto 0;
	padding: var(--slist-space-3) 16px 0;
	border-top: 1px solid var(--slist-separator);
}

.slist-footer__copy {
	font-size: var(--slist-text-caption);
	color: var(--slist-text-tertiary);
	margin: 0;
}

@media (max-width: 767px) {
	.slist-footer {
		padding: var(--slist-space-5) 0 var(--slist-space-3);
	}

	.slist-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--slist-space-4) var(--slist-space-4);
		padding: 0 var(--slist-space-3);
	}

	.slist-footer__col--about {
		grid-column: 1 / -1;
	}

	.slist-footer__blurb {
		font-size: var(--slist-text-caption);
		max-width: none;
	}

	.slist-footer__menu {
		gap: var(--slist-space-1);
	}

	.slist-footer__menu li a {
		font-size: var(--slist-text-caption);
	}

	.slist-footer__social-label {
		margin-bottom: var(--slist-space-1);
	}

	.slist-footer__discord {
		padding: 6px 12px;
		font-size: var(--slist-text-caption);
	}

	.slist-footer__bottom {
		margin-top: var(--slist-space-3);
		padding-top: var(--slist-space-2);
		padding-left: var(--slist-space-3);
		padding-right: var(--slist-space-3);
	}
}

/* ---- Stat card ---- */

.slist-stat-card {
	background: var(--slist-surface);
	border: 1px solid var(--slist-separator);
	border-radius: var(--slist-radius-lg);
	padding: var(--slist-space-4) var(--slist-space-5);
	margin: var(--slist-space-5) 0;
}

.slist-stat-card h3 {
	color: var(--slist-primary);
	margin: 0 0 var(--slist-space-2);
}

/* ---- Link card ---- */

.slist-link-card {
	background: var(--slist-surface);
	border: 1px solid var(--slist-separator);
	border-radius: var(--slist-radius-lg);
	padding: var(--slist-space-4);
	transition: border-color var(--slist-transition-fast);
}

.slist-link-card:hover {
	border-color: var(--slist-separator-medium);
}

/* ---- Section "view more" link ---- */

.slist-section__more {
	margin-top: var(--slist-space-6);
}