/*
 * Figma Projects — MacBook Pro 14" (1:92) @ 1512
 * Title   1:106  x=144 y=3290  Futura 80 / lh 70
 * Tabs    1:299–302  y=3384  h=39  pad 10  radius 5
 * Panel   1:292  y=3503  title Futura ~48 / lh 42
 * Cols    353 + 20 + 353 + lineup 226 + image 351×432 @ x=1139
 * Frame pads: left 144 · right 20
 * Mobile  1:589 / 1:780
 */

.atrin-projects {
	--atrin-projects-bg: #ededed;
	--atrin-projects-text: #000000;
	--atrin-projects-ink: #110c00;
	--atrin-projects-muted: #ededed;
	--atrin-projects-font: 'Inter', sans-serif;
	/* Match Events / Figma Futura Medium — avoid Alt overlapping glyphs on section titles */
	--atrin-projects-display: Futura, 'Futura PT', 'Century Gothic', 'itc-avant-garde-gothic-pro', sans-serif;
	--atrin-frame: 1512;
	--atrin-pad-l: 144;
	--atrin-pad-r: 20;
	--atrin-col: 353;
	--atrin-col-gap: 20;
	--atrin-lineup: 226;
	--atrin-img-w: 351;
	--atrin-img-h: 432;
	--atrin-title-to-tabs: 24; /* 3384 − (3290 + 70) */
	--atrin-tabs-to-panel: 80; /* 3503 − (3384 + 39) */

	box-sizing: border-box;
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: calc(80 * var(--atrin-u)) 0 calc(100 * var(--atrin-u));
	background: var(--atrin-projects-bg);
	color: var(--atrin-projects-text);
	font-family: var(--atrin-projects-font);
	font-size: calc(16 * var(--atrin-u));
	line-height: calc(23 * var(--atrin-u));
	overflow-x: visible;
	overflow-y: visible;
}

.atrin-projects *,
.atrin-projects *::before,
.atrin-projects *::after {
	box-sizing: border-box;
}

.atrin-projects__inner {
	width: 100%;
	max-width: none; /* Figma grid: full-bleed like hero/events */
	margin-left: 0;
	margin-right: 0;
	padding: 0 var(--atrin-gutter-x) 0 var(--atrin-gutter-l);
	box-sizing: border-box;
}

.atrin-projects__title {
	margin: 0 0 calc(var(--atrin-title-to-tabs) * var(--atrin-u));
	padding: 0;
	max-width: 100%;
	/* Figma 1:106 — Futura Medium 80 / lh 70 */
	font-family: var(--atrin-projects-display);
	font-weight: 500;
	font-size: calc(80 * var(--atrin-u));
	line-height: calc(70 * var(--atrin-u));
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--atrin-projects-ink);
	white-space: nowrap;
	overflow: visible;
	min-height: calc(70 * var(--atrin-u));
	scroll-margin-top: 120px;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
}

.atrin-projects__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 calc(var(--atrin-tabs-to-panel) * var(--atrin-u));
	padding: 0;
}

.atrin-projects__tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--atrin-projects-ink);
	border-radius: 5px;
	background: transparent;
	color: var(--atrin-projects-ink);
	font-family: 'Inter', sans-serif !important;
	font-size: calc(16 * var(--atrin-u));
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	/* Keep fill/color smooth even when reveal motion sets transform/opacity */
	transition:
		background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease,
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.atrin-projects__tab:hover,
.atrin-projects__tab:focus-visible {
	outline: none;
	background: var(--atrin-projects-ink);
	color: var(--atrin-projects-muted) !important;
	border-color: var(--atrin-projects-ink);
}

.atrin-projects__tab:active:not(.is-active) {
	transform: scale(0.98);
}

.atrin-projects__tab.is-active {
	background: var(--atrin-projects-ink);
	color: var(--atrin-projects-muted) !important;
	border-color: var(--atrin-projects-ink);
	cursor: default;
}

.atrin-projects__tab.is-activating {
	animation: atrin-projects-tab-pop 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.atrin-projects__panels {
	position: relative;
	min-height: 520px;
	overflow: hidden;
}

.atrin-projects__panel {
	position: relative;
	width: 100%;
	will-change: transform;
}

.atrin-projects__panel[hidden] {
	display: none !important;
}

.atrin-projects__panel.is-active {
	display: block;
}

/* Card-push: incoming card slides in from the right and shoves the old one left */
.atrin-projects__panel.is-entering {
	animation: atrin-projects-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.atrin-projects__panels.is-switching .atrin-projects__panel.is-leaving {
	display: block !important;
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	pointer-events: none;
	z-index: 1;
	animation: atrin-projects-card-out 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.atrin-projects__panels.is-switching .atrin-projects__panel.is-entering {
	position: relative;
	z-index: 2;
}

@keyframes atrin-projects-card-in {
	from {
		transform: translate3d(100%, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes atrin-projects-card-out {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes atrin-projects-tab-pop {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.03);
	}
	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.atrin-projects__panel.is-entering,
	.atrin-projects__panels.is-switching .atrin-projects__panel.is-leaving,
	.atrin-projects__tab.is-activating {
		animation: none;
	}

	.atrin-projects__tab {
		transition: none !important;
	}

	.atrin-projects__more,
	.atrin-projects__panel.is-expanded .atrin-projects__more {
		transition: none !important;
		transform: none !important;
	}
}

.atrin-projects__panel-head {
	display: block;
	margin: 0 0 calc(45 * var(--atrin-u)); /* 3591 − (3503 + 43) ≈ 45 */
}

.atrin-projects__panel-title {
	margin: 0;
	padding: 0;
	max-width: calc(972 * var(--atrin-u));
	/* Figma 1:294 — Futura Medium ~48 / lh 42; lh:1 avoids Alt-style clip */
	font-family: var(--atrin-projects-display);
	font-weight: 500;
	font-size: calc(48 * var(--atrin-u));
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--atrin-projects-ink);
	white-space: pre-line;
	overflow: visible;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
}

.atrin-projects__panel--wide .atrin-projects__panel-title,
.atrin-projects__panel--wide-stack .atrin-projects__panel-title {
	max-width: calc(1141 * var(--atrin-u));
}

/* Expand — Figma 1:298 Maximize: 16×16 ON the photo (top-right, y+20 / x inset ~19) */
.atrin-projects__media-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding-right: 0;
	box-sizing: border-box;
	overflow: visible;
}

.atrin-projects__expand {
	position: absolute;
	top: 20px;
	right: 12px;
	left: auto;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	transform: none;
	color: #000;
	text-decoration: none;
	opacity: 1;
	filter: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.atrin-projects__expand:hover,
.atrin-projects__expand:focus-visible {
	opacity: 1;
	outline: none;
	transform: scale(1.08);
}

.atrin-projects__expand-icon {
	display: block;
	width: 16px;
	height: 16px;
}

.atrin-projects__panel-body {
	display: grid;
	/* Figma proportions 353 / 353 / 226 / 351 — fill available width, no overflow */
	grid-template-columns: 353fr 353fr 226fr 351fr;
	column-gap: calc(var(--atrin-col-gap) * var(--atrin-u));
	align-items: start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.atrin-projects__panel--wide .atrin-projects__panel-body,
.atrin-projects__panel--wide-stack .atrin-projects__panel-body {
	grid-template-columns: 353fr 353fr 602fr;
}

.atrin-projects__copy {
	display: contents;
}

.atrin-projects__more {
	display: contents;
}

.atrin-projects__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	grid-column: 4;
	min-width: 0;
	max-width: none;
	justify-self: stretch;
	width: 100%;
	position: relative;
	overflow: visible;
}

.atrin-projects__panel--wide .atrin-projects__aside,
.atrin-projects__panel--wide-stack .atrin-projects__aside {
	grid-column: 3;
	max-width: none;
}

.atrin-projects__col {
	min-width: 0;
	color: var(--atrin-projects-text);
	font-family: 'Inter', sans-serif !important;
	font-size: calc(16 * var(--atrin-u));
	font-weight: 400;
	line-height: calc(23 * var(--atrin-u));
}

.atrin-projects__col--a {
	grid-column: 1;
}

.atrin-projects__col--b {
	grid-column: 2;
}

.atrin-projects__col--c {
	grid-column: 3;
	min-width: 0;
}

.atrin-projects__panel--wide .atrin-projects__col--c,
.atrin-projects__panel--wide-stack .atrin-projects__col--c {
	grid-column: auto;
}

/* Beat global `body p / body span { itc-avant-garde… }` */
.atrin-projects__col p,
.atrin-projects__col span,
.atrin-projects__col li,
.atrin-projects__lineup,
.atrin-projects__lineup li {
	font-family: 'Inter', sans-serif !important;
	font-weight: 400 !important;
}

.atrin-projects__col p {
	margin: 0 0 23px;
	font-size: inherit;
	line-height: inherit;
}

.atrin-projects__col p:last-child {
	margin-bottom: 0;
}

.atrin-projects__col strong,
.atrin-projects__col b {
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
}

.atrin-projects__lineup {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	grid-column: 3;
	color: var(--atrin-projects-text);
	font-family: 'Inter', sans-serif !important;
	font-size: calc(16 * var(--atrin-u));
	font-weight: 400;
	line-height: calc(23 * var(--atrin-u));
}

.atrin-projects__lineup li {
	margin: 0;
	padding: 0;
}

.atrin-projects__media {
	margin: 0;
	width: 100%;
	max-width: 100%;
	position: relative;
	overflow: visible;
}

.atrin-projects__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.atrin-projects__panel--wide .atrin-projects__img,
.atrin-projects__panel--wide-stack .atrin-projects__img {
	border-radius: 12px;
}

.atrin-projects__more--aside {
	display: block;
}

.atrin-projects__more-btn {
	display: none;
}

/* —— Mid desktop: keep Figma 4-col via --atrin-u (only stack below 1100) —— */
@media (max-width: 1099px) and (min-width: 992px) {
	.atrin-projects {
		padding: calc(64 * var(--atrin-u)) 0 calc(80 * var(--atrin-u));
	}

	.atrin-projects__panel-body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: calc(28 * var(--atrin-u));
	}

	.atrin-projects__panel--wide .atrin-projects__panel-body,
	.atrin-projects__panel--wide-stack .atrin-projects__panel-body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.atrin-projects__col--a {
		grid-column: 1;
		grid-row: 1;
	}

	.atrin-projects__col--b {
		grid-column: 2;
		grid-row: 1;
	}

	.atrin-projects__lineup,
	.atrin-projects__col--c {
		grid-column: 1;
		grid-row: 2;
	}

	.atrin-projects__aside {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		max-width: calc(320 * var(--atrin-u));
	}

	.atrin-projects__panel--wide .atrin-projects__aside,
	.atrin-projects__panel--wide-stack .atrin-projects__aside {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: calc(480 * var(--atrin-u));
		justify-self: start;
	}

	.atrin-projects__panel--wide .atrin-projects__lineup,
	.atrin-projects__panel--wide .atrin-projects__col--c,
	.atrin-projects__panel--wide-stack .atrin-projects__lineup,
	.atrin-projects__panel--wide-stack .atrin-projects__col--c {
		grid-row: 3;
	}
}

/* —— Mobile (Figma 1:589) — ≤991 matches header mobile chrome —— */
@media (max-width: 991px) {
	.atrin-projects {
		--atrin-pad-l: 10;
		--atrin-pad-r: 10;
		padding: 30px 0 60px;
		overflow: hidden;
	}

	.atrin-projects__inner {
		padding: 0 10px;
	}

	.atrin-projects__title {
		margin-bottom: 20px;
		font-size: 68px;
		line-height: 1;
		min-height: 70px;
		width: 100%;
		max-width: 370px;
		white-space: normal;
	}

	.atrin-projects__tabs {
		flex-wrap: nowrap;
		gap: 10px;
		margin-bottom: 20px;
		padding-bottom: 4px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		width: calc(100% + 10px);
		margin-right: -10px;
		padding-right: 10px;
	}

	.atrin-projects__tabs::-webkit-scrollbar {
		display: none;
	}

	.atrin-projects__tab {
		flex: 0 0 auto;
	}

	.atrin-projects__panels {
		min-height: 0;
	}

	.atrin-projects__panel-head {
		margin-bottom: 20px;
	}

	.atrin-projects__panel-title {
		font-size: 45px;
		line-height: 1;
		max-width: 370px;
	}

	.atrin-projects__expand {
		display: none;
	}

	.atrin-projects__panel-body {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.atrin-projects__col--a,
	.atrin-projects__col--b,
	.atrin-projects__col--c,
	.atrin-projects__lineup,
	.atrin-projects__media,
	.atrin-projects__aside {
		grid-column: auto;
		grid-row: auto;
	}

	/* Flatten copy so expanded “more” can sit below the image */
	.atrin-projects__copy {
		display: contents;
		width: auto;
		max-width: none;
	}

	.atrin-projects__col--a {
		order: 1;
		width: 100%;
	}

	.atrin-projects__aside {
		order: 2;
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
		max-width: 370px;
		justify-self: stretch;
	}

	.atrin-projects__more {
		order: 3;
		display: flex;
		flex-direction: column;
		gap: 20px;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transform: translate3d(0, 14px, 0);
		visibility: hidden;
		pointer-events: none;
		transition:
			max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.4s ease,
			transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0.45s,
			margin 0.35s ease;
		margin: 0;
	}

	.atrin-projects__panel.is-expanded .atrin-projects__more {
		max-height: 2400px;
		opacity: 1;
		transform: translate3d(0, 0, 0);
		visibility: visible;
		pointer-events: auto;
		margin: 0;
		transition:
			max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.4s ease,
			transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0s,
			margin 0.35s ease;
	}

	.atrin-projects__more--aside {
		order: unset;
		max-width: none;
	}

	.atrin-projects__media {
		order: unset;
		width: 100%;
		max-width: 100%;
		justify-self: stretch;
	}

	.atrin-projects__img {
		max-width: 100%;
		border-radius: 12px;
	}

	.atrin-projects__more-btn,
	body.home .elementor-element .atrin-projects__more-btn,
	body button.atrin-projects__more-btn {
		appearance: none !important;
		-webkit-appearance: none !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		padding: 10px;
		border: 1px solid var(--atrin-projects-ink) !important;
		border-radius: 5px;
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
		color: #000 !important;
		-webkit-text-fill-color: #000 !important;
		font-family: var(--atrin-projects-font) !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: normal;
		text-transform: uppercase;
		cursor: pointer;
		margin: 20px 0 0;
	}

	.atrin-projects__more-btn:hover,
	.atrin-projects__more-btn:focus,
	.atrin-projects__more-btn:focus-visible,
	.atrin-projects__more-btn:active,
	body.home .elementor-element .atrin-projects__more-btn:hover,
	body.home .elementor-element .atrin-projects__more-btn:focus,
	body.home .elementor-element .atrin-projects__more-btn:focus-visible,
	body.home .elementor-element .atrin-projects__more-btn:active,
	body button.atrin-projects__more-btn:hover,
	body button.atrin-projects__more-btn:focus,
	body button.atrin-projects__more-btn:active {
		outline: none;
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		color: #000 !important;
		-webkit-text-fill-color: #000 !important;
		border-color: var(--atrin-projects-ink) !important;
	}
}

@media (max-width: 480px) {
	.atrin-projects__title {
		font-size: 68px;
		line-height: 1;
		min-height: 70px;
	}

	.atrin-projects__panel-title {
		font-size: 40px;
		line-height: 1;
	}
}

@media (max-width: 360px) {
	.atrin-projects__title {
		font-size: 56px;
		line-height: 1;
		min-height: 58px;
		white-space: normal;
	}

	.atrin-projects__panel-title {
		font-size: 36px;
		line-height: 1;
	}
}

/* —— Kill Elementor + legacy projects chrome —— */
body.home .elementor-element.atrin-projects-section,
body.home .elementor-element.atrin-projects-section.projects-section,
body.home .elementor-element.projects-section.atrin-projects-section {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	overflow: visible !important;
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: flex-start !important;
	scroll-margin-top: calc(var(--atrin-header-h, 100px) + 16px);
}

body.home .elementor-element.atrin-projects-section > .elementor-container,
body.home .elementor-element.atrin-projects-section .elementor-column,
body.home .elementor-element.atrin-projects-section .elementor-widget-wrap,
body.home .elementor-element.atrin-projects-section .elementor-element-populated,
body.home .elementor-element.atrin-projects-section .elementor-widget-atrin_projects,
body.home .elementor-element.atrin-projects-section .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	display: block !important;
}

body.home .elementor-element.atrin-projects-section > .elementor-container {
	display: block !important;
}

/* Desktop mid-widths inherit global --atrin-u (100vw/1512) from :root */