/*
 * Figma MacBook 1512 (1:92) hero:
 * wordmark 21,131 (1471×185) | photo 21,345 (1479×910 r10)
 * monogram 1016,625 (149×110) | copy 1016,750 (372×299) Inter 16/23
 *
 * Mobile 390 (1:544): wordmark → photo 390×530 + monogram → copy below
 *
 * Breakpoints:
 * ≥1512  — exact Figma coords
 * 992–1511 — proportional / flex scale
 * ≤991 — stacked mobile
 */

body.has-atrin-hero-v2 {
	--atrin-hero-frame: 1512px;
	--atrin-hero-font: 'Inter', sans-serif;
	--atrin-hero-text: #000;
	--atrin-hero-pad-x: 21px;
}

/* Offset fixed header; Figma wordmark top = 131 on 100px header band */
body.has-atrin-hero-v2 .atrin-hero {
	position: relative;
	z-index: auto;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 0 0;
	/* White band above Events — body is #2a2a2a for Safari chrome */
	background: #fff;
	color: var(--atrin-hero-text);
	/* Start below sticky header; +30px to wordmark (Figma 131 − 100 / feedback) */
	padding-top: calc(var(--atrin-header-h, 100px) + 30px);
}

/* Merge duplicate wordmark rules */
body.has-atrin-hero-v2 .atrin-hero__wordmark {
	position: relative;
	z-index: 2;
	margin: 0 0 30px; /* feedback / Figma: wordmark → photo */
	padding: 0;
	line-height: 0;
	font-size: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

body.has-atrin-hero-v2 .atrin-hero__shell {
	position: relative;
	width: 100%;
	max-width: none; /* Figma grid: fill viewport; pad matches 20/1512 */
	margin: 0;
	box-sizing: border-box;
	padding: 0 var(--atrin-gutter-x);
}

body.has-atrin-hero-v2 .atrin-hero__wordmark img {
	display: block;
	width: 100%;
	max-width: none; /* match stage width (Figma grid) */
	height: auto;
}

body.has-atrin-hero-v2 .atrin-hero__stage {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: none;
	aspect-ratio: 1479 / 910;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	background: #f2f2f2;
}

/* Desktop: frame fills stage so photo crop + overlay share one clip box */
body.has-atrin-hero-v2 .atrin-hero__photo-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 10px;
	line-height: 0;
}

/*
 * Figma image 10 (1:287) crop — not plain object-fit:cover:
 * img absolute, w 130.83%, h 106.31%, left 0, top -6.31%
 * (uniform ~2:1 scale; crop right + slight top)
 */
body.has-atrin-hero-v2 .atrin-hero__photo {
	position: absolute;
	left: 0;
	top: -6.31%;
	display: block;
	width: 130.83%;
	height: 106.31%;
	max-width: none;
	object-fit: cover;
	object-position: left center;
	border-radius: 0;
}

/* Overlay: Figma monogram/copy relative to photo (995,280) / (995,405) */
body.has-atrin-hero-v2 .atrin-hero__overlay {
	position: absolute;
	left: 67.27%; /* 995/1479 */
	top: 30.77%; /* 280/910 */
	width: 25.15%; /* 372/1479 */
	max-width: calc(372 * var(--atrin-u));
	z-index: 2;
	pointer-events: none;
}

body.has-atrin-hero-v2 .atrin-hero__monogram {
	display: block;
	width: 40.05%; /* 149/372 */
	max-width: calc(149 * var(--atrin-u));
	height: auto;
	margin: 0 0 calc(15 * var(--atrin-u));
}

body.has-atrin-hero-v2 .atrin-hero__copy {
	pointer-events: auto;
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
	font-size: calc(16 * var(--atrin-u));
	font-weight: 400;
	line-height: calc(23 * var(--atrin-u));
	color: var(--atrin-hero-text);
	text-align: left;
}

body.has-atrin-hero-v2 .atrin-hero__copy p {
	margin: 0 0 calc(23 * var(--atrin-u));
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
}

body.has-atrin-hero-v2 .atrin-hero__copy p *,
body.has-atrin-hero-v2 .atrin-hero__copy strong {
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
}

body.has-atrin-hero-v2 .atrin-hero__copy p:last-child {
	margin-bottom: 0;
}

body.has-atrin-hero-v2 .atrin-hero__tagline,
body.has-atrin-hero-v2 .atrin-hero__tagline strong {
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
	font-weight: 700;
}

/* Hero copy must stay Inter — kill theme/Elementor Avant Garde on paragraphs */
body.has-atrin-hero-v2 .atrin-hero__copy,
body.has-atrin-hero-v2 .atrin-hero__copy p,
body.has-atrin-hero-v2 .atrin-hero__copy strong,
body.has-atrin-hero-v2 .atrin-hero__tagline {
	font-family: 'Inter', Helvetica, Arial, sans-serif !important;
}

/* Inter ü — no artificial gap (feedback: wrong Ü when padded) */
body.has-atrin-hero-v2 .atrin-ue {
	display: inline;
	margin: 0;
	padding: 0;
	font-family: inherit !important;
}

/* Subtle entrance — Figma micro-motion */
@media (prefers-reduced-motion: no-preference) {
	body.has-atrin-hero-v2 .atrin-hero__wordmark {
		animation: atrin-hero-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	body.has-atrin-hero-v2 .atrin-hero__stage {
		animation: atrin-hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
	}

	body.has-atrin-hero-v2 .atrin-hero__photo {
		animation: atrin-hero-photo-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
	}

	body.has-atrin-hero-v2 .atrin-hero__monogram {
		animation: atrin-hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
	}

	body.has-atrin-hero-v2 .atrin-hero__copy {
		animation: atrin-hero-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
	}

	body.has-atrin-hero-v2 .atrin-hero__copy p {
		animation: atrin-hero-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	body.has-atrin-hero-v2 .atrin-hero__copy p:nth-child(1) { animation-delay: 0.48s; }
	body.has-atrin-hero-v2 .atrin-hero__copy p:nth-child(2) { animation-delay: 0.56s; }
	body.has-atrin-hero-v2 .atrin-hero__copy p:nth-child(3) { animation-delay: 0.64s; }
}

@keyframes atrin-hero-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes atrin-hero-photo-in {
	from {
		opacity: 0.35;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.has-atrin-hero-v2 .atrin-hero__wordmark,
	body.has-atrin-hero-v2 .atrin-hero__stage,
	body.has-atrin-hero-v2 .atrin-hero__photo,
	body.has-atrin-hero-v2 .atrin-hero__monogram,
	body.has-atrin-hero-v2 .atrin-hero__copy,
	body.has-atrin-hero-v2 .atrin-hero__copy p {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

.elementor-editor-active body.has-atrin-hero-v2 .atrin-hero__wordmark,
.elementor-editor-active body.has-atrin-hero-v2 .atrin-hero__stage,
.elementor-editor-active body.has-atrin-hero-v2 .atrin-hero__photo,
.elementor-editor-active body.has-atrin-hero-v2 .atrin-hero__monogram,
.elementor-editor-active body.has-atrin-hero-v2 .atrin-hero__copy,
.elementor-editor-active body.has-atrin-hero-v2 .atrin-hero__copy p {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* ========== Exact artboard ≥1512 ========== */
@media (min-width: 1512px) {
	body.has-atrin-hero-v2 .atrin-hero__copy {
		font-size: calc(16 * var(--atrin-u));
		line-height: calc(23 * var(--atrin-u));
	}
}

/* ========== Laptop / mid (992–1511) ========== */
@media (min-width: 992px) and (max-width: 1511px) {
	body.has-atrin-hero-v2 .atrin-hero {
		padding-top: calc(var(--atrin-header-h, 90px) + 24px);
		padding-bottom: 40px;
	}

	body.has-atrin-hero-v2 .atrin-hero__shell {
		padding: 0 var(--atrin-gutter-x);
	}

	body.has-atrin-hero-v2 .atrin-hero__wordmark {
		margin-bottom: clamp(16px, 2vw, 28px);
	}

	/* Keep Figma desktop crop scale; overlay stays % of stage */
	body.has-atrin-hero-v2 .atrin-hero__overlay {
		left: 67.27%;
		top: 30.77%;
		right: auto;
		width: 25.15%;
		max-width: 372px;
	}

	body.has-atrin-hero-v2 .atrin-hero__copy {
		font-size: clamp(12px, 1.1vw, 15px);
		line-height: 1.45;
	}

	body.has-atrin-hero-v2 .atrin-hero__copy p {
		margin-bottom: 1em;
	}
}

/* ========== Mobile ≤991 — Figma 1:544 (390): wordmark → 390×530 photo → copy ========== */
@media (max-width: 991px) {
	body.has-atrin-hero-v2 .atrin-hero {
		padding-top: calc(var(--atrin-header-h, 53px) + 8px);
		/* Frame 81 ends ~998; Events dark panel @1094 → ~96px white band */
		padding-bottom: 70px;
	}

	body.has-atrin-hero-v2 .atrin-hero__shell {
		padding: 0;
		max-width: none;
	}

	body.has-atrin-hero-v2 .atrin-hero__wordmark {
		display: block;
		margin: 0 0 20px; /* wordmark → photo (127.5 − 107.5) */
		padding: 0 10px;
		justify-content: flex-start;
	}

	body.has-atrin-hero-v2 .atrin-hero__wordmark img {
		width: 100%;
		max-width: none;
		height: auto;
	}

	/*
	 * Stage becomes a column: photo frame (in-flow) then copy below.
	 * Fixes copy overlaying the portrait (was static inside clipped stage).
	 */
	body.has-atrin-hero-v2 .atrin-hero__stage {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: none;
		margin: 0;
		aspect-ratio: auto;
		height: auto;
		border-radius: 0;
		overflow: visible;
		background: transparent;
		line-height: 0;
	}

	/* Figma image 10: 390×530, r10, full-bleed */
	body.has-atrin-hero-v2 .atrin-hero__photo-frame {
		position: relative;
		inset: auto;
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 390 / 530;
		overflow: hidden;
		border-radius: 10px;
		background: #f2f2f2;
		line-height: 0;
	}

	/*
	 * Figma mobile crop (1:579):
	 * img w 289.17%, h 106.31%, left -26.67%, top -6.31%
	 */
	body.has-atrin-hero-v2 .atrin-hero__photo {
		position: absolute;
		left: -26.67%;
		top: -6.31%;
		width: 289.17%;
		height: 106.31%;
		max-width: none;
		object-fit: cover;
		object-position: left center;
		border-radius: 0;
	}

	/* Monogram on photo: Figma Ebene_1 @ 327,163.5 within 390 → top 36 / right 10 */
	body.has-atrin-hero-v2 .atrin-hero__monogram {
		position: absolute;
		top: 36px;
		right: 10px;
		left: auto;
		width: 53px;
		max-width: 53px;
		margin: 0;
		z-index: 3;
	}

	/* Copy below photo — Figma gap 25px, Inter 16/23, inset 10 */
	body.has-atrin-hero-v2 .atrin-hero__overlay {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		max-width: none;
		display: block;
		pointer-events: auto;
		transform: none;
		animation: none;
		line-height: normal;
	}

	body.has-atrin-hero-v2 .atrin-hero__copy {
		margin-top: 25px;
		padding: 0 10px;
		font-size: 16px;
		line-height: 23px;
	}

	body.has-atrin-hero-v2 .atrin-hero__copy p {
		margin-bottom: 23px;
	}

	body.has-atrin-hero-v2 .atrin-hero__copy p:last-child {
		margin-bottom: 0;
	}
}

/* Hide legacy Elementor first-section hero + scroll cue */
body.has-atrin-hero-v2 .first-section-home,
body.has-atrin-hero-v2 section.elementor-section.first-section-home,
body.has-atrin-hero-v2 .elementor-section.scroll-down-bottom {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
}

/* Elementor section wrapping the Atrin Hero widget */
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section,
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section > .elementor-container,
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section .elementor-widget-atrin_hero,
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section .elementor-widget-wrap {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

body.has-atrin-hero-v2 .elementor-element.atrin-hero-section > .elementor-container {
	display: block !important;
	width: 100% !important;
}

body.has-atrin-hero-v2 .elementor-element.atrin-hero-section .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section .elementor-element-populated {
	padding: 0 !important;
}

/* Kill Elementor column stretch gap above/around hero */
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section,
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section > .elementor-container,
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section .elementor-column,
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section .elementor-widget-wrap,
body.has-atrin-hero-v2 .elementor-element.atrin-hero-section .elementor-element-populated {
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: #fff !important;
	background-color: #fff !important;
}

/* Editor: keep header section collapsed so canvas has no blank band */
.elementor-editor-active .elementor-element.atrin-header-section,
.elementor-editor-preview .elementor-element.atrin-header-section,
.elementor-editor-active .elementor-element.atrin-header-section > .elementor-container,
.elementor-editor-active .elementor-element.atrin-header-section .elementor-column,
.elementor-editor-active .elementor-element.atrin-header-section .elementor-widget-wrap,
.elementor-editor-active .elementor-element.atrin-header-section .elementor-widget-atrin_header,
.elementor-editor-active .elementor-element.atrin-header-section .elementor-widget-container {
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}