/**
 * uxneuron — layout.css
 *
 * Containers, section spacing utilities, and the handful of grid patterns
 * reused across pages (3-col cards, 4-col cards, asymmetric work grid).
 * Hero layout for each page lives in that page's own stylesheet since
 * every hero has a different height/decoration treatment.
 *
 * @package uxneuron
 */

.container {
	max-width: var( --container-max );
	margin: 0 auto;
	padding: 0 var( --section-x );
}

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

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

/* Generic section vertical-rhythm utilities. Horizontal padding always
   comes from --section-x (overridden per-breakpoint in responsive.css);
   these only control top/bottom spacing + optional borders/background,
   matching the various <section style="padding:..."> values from the
   original design. */

.section {
	padding: 90px var( --section-x );
}

.section--tight-top {
	padding-top: 30px;
}

.section--tight-bottom {
	padding-bottom: 40px;
}

.section--no-x {
	padding-left: 0;
	padding-right: 0;
}

.section--white {
	background: #fff;
}

.section--bordered-y {
	border-top: 1px solid var( --color-border-soft );
	border-bottom: 1px solid var( --color-border-soft );
}

.section--relative {
	position: relative;
	overflow: hidden;
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 54px;
	flex-wrap: wrap;
}

.section-head__heading {
	font-weight: 800;
	font-size: 50px;
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0;
	max-width: 620px;
}

.section-head__link {
	font-weight: 600;
	font-size: 16px;
	color: var( --color-text );
	white-space: nowrap;
	font-family: var( --font-heading );
}

.section-head--center {
	display: block;
	text-align: center;
	margin-bottom: 50px;
}

.section-head--center .section-head__heading {
	margin: 0 auto;
}

/* Grid patterns. */

.grid {
	display: grid;
	gap: 24px;
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.work-feature-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 24px;
}

.work-feature-grid--small {
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 24px;
}

.work-feature-card__media {
	overflow: hidden;
	border-radius: var( --radius-xl );
	height: 380px;
	position: relative;
	border: 1px solid var( --color-border-soft );
}

.work-feature-card__media--small {
	height: 230px;
	border-radius: 20px;
}

.work-feature-card__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.work-feature-card__tag {
	position: absolute;
	left: 26px;
	top: 26px;
	background: rgba(255,255,255,.22);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: 13px;
	padding: 7px 14px;
	border-radius: var( --radius-pill );
}

.work-feature-card__body {
	padding-top: 20px;
}

.work-feature-card__title {
	font-weight: 700;
	font-size: 25px;
	margin: 0 0 6px;
}

.work-feature-card__desc {
	font-size: 15.5px;
	color: var( --color-text-muted );
	margin: 0;
}

.work-feature-card__body--small {
	padding-top: 16px;
}

.work-feature-card__eyebrow--small {
	font-family: var( --font-heading );
	font-weight: 600;
	font-size: 12.5px;
	color: var( --color-primary );
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.work-feature-card__title--small {
	font-weight: 700;
	font-size: 19px;
	margin: 0;
}

/* ----------------------------------------------------------------------
   Shared secondary-page hero (Services / Work / About all use this exact
   pattern: badge, h1 with one accent word, single description paragraph).
   The Home hero and the two-column Contact hero are larger/different
   enough to get their own markup in home.css / contact.css.
   -------------------------------------------------------------------- */

.page-hero {
	position: relative;
	overflow: hidden;
	padding: 84px var( --section-x ) 70px;
}

.page-hero__inner {
	position: relative;
	max-width: var( --container-max );
	margin: 0 auto;
}

.page-hero__title {
	font-weight: 800;
	font-size: 66px;
	line-height: 1.04;
	letter-spacing: -.025em;
	margin: 0 0 22px;
	max-width: 840px;
}

.page-hero__title .text-accent {
	color: var( --color-primary );
}

.page-hero__description {
	font-size: 20px;
	line-height: 1.6;
	color: var( --color-text-soft );
	max-width: 580px;
	margin: 0;
}