/**
 * Collaborate — recruitment page.
 *
 * Layout: hero (60vh centered) + stacked role sections.
 * Each role uses a two-column grid on desktop (header left, body right).
 */

.slist-main--collaborate {
	padding: 0;
}

/* ================================================================
   Hero — shorter than about thesis, same atmospheric treatment
   ================================================================ */

.slist-collab__hero {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--slist-space-10) 16px;
	border-bottom: 1px solid var(--slist-separator);
	position: relative;
	background:
		radial-gradient(ellipse at 50% 80%, rgba(255, 0, 0, 0.06) 0%, transparent 50%);
}

/* Film grain overlay */
.slist-collab__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	background-size: 256px 256px;
	pointer-events: none;
	z-index: 1;
}

.slist-collab__hero-inner {
	position: relative;
	z-index: 2;
}

.slist-collab__hero-title {
	font-family: var(--slist-font-display);
	font-size: clamp(2.5rem, 8vw, 5rem);
	font-weight: var(--slist-weight-regular);
	letter-spacing: -0.03em;
	line-height: 0.9;
	color: var(--slist-text-primary);
	margin: 0 0 var(--slist-space-5);
}

.slist-collab__hero-sub {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-body);
	color: var(--slist-text-tertiary);
	margin: 0;
	line-height: 1.6;
}

/* ================================================================
   Role sections — two-column grid on desktop
   ================================================================ */

.slist-collab__roles {
	padding-top: 0;
	padding-bottom: var(--slist-space-8);
}

.slist-collab__role {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--slist-space-4);
	padding: var(--slist-space-8) 0;
	border-bottom: 1px solid var(--slist-separator);
}

.slist-collab__role:last-child {
	border-bottom: none;
}

@media (min-width: 768px) {
	.slist-collab__role {
		grid-template-columns: 260px 1fr;
		gap: var(--slist-space-7);
		align-items: start;
	}
}

/* ---- Role header (left column) ---- */

.slist-collab__role-title {
	font-family: var(--slist-font-display);
	font-size: var(--slist-text-title1);
	font-weight: var(--slist-weight-regular);
	color: var(--slist-text-primary);
	margin: var(--slist-space-2) 0 0;
	line-height: var(--slist-lh-snug);
}

/* ---- Role body (right column) ---- */

.slist-collab__role-pitch {
	font-family: var(--slist-font-body);
	font-size: var(--slist-text-body);
	color: var(--slist-text-secondary);
	line-height: var(--slist-lh-relaxed);
	margin: 0 0 var(--slist-space-4);
	max-width: 48ch;
}

/* ---- Coming soon badge ---- */

.slist-collab__soon {
	display: inline-block;
	font-family: var(--slist-font-body);
	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-quaternary);
	padding: var(--slist-space-1) var(--slist-space-3);
	border: 1px solid var(--slist-separator);
	border-radius: var(--slist-radius-pill);
}

/* ================================================================
   Reduced motion
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
	.slist-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}