/*
 * Figma Events — MacBook 1:95 (1512×1062) + iPhone 1:497
 * BG #2A2A2A · text #E0E0E0 · hover row #D9D9D9 / #1F1F1F
 * Columns @ 1512: date 21 · title 270 · city 892 · tickets 1437
 * Title x=265 y=+362 · Year x=8 y=+485 · first row y=+562
 *
 * Hero photo ends y=1255; Events panel starts y=1004 → overlap 251px.
 * Negative margin pulls Events under the hero stage (hero z-index stays above).
 */

.atrin-events {
	--atrin-events-bg: #2a2a2a;
	--atrin-events-text: #e0e0e0;
	--atrin-events-hover-bg: #d9d9d9;
	--atrin-events-hover-text: #1f1f1f;
	--atrin-events-line: #e0e0e0;
	--atrin-events-font: 'Inter', sans-serif;
	--atrin-events-display: Futura, 'Futura PT', 'Century Gothic', 'itc-avant-garde-gothic-pro', sans-serif;
	--atrin-events-frame: 1512px;

	box-sizing: border-box;
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	/* Figma: 362px top band before EVENTS — scale with artboard (no max cap) */
	padding: calc(362 * var(--atrin-u)) 0 calc(241 * var(--atrin-u));
	min-height: calc(1062 * var(--atrin-u));
	background: var(--atrin-events-bg);
	color: var(--atrin-events-text);
	border-radius: calc(10 * var(--atrin-u));
	overflow: hidden;
	font-family: var(--atrin-events-font);
	font-size: calc(16 * var(--atrin-u));
	line-height: calc(37 * var(--atrin-u));
}

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

.atrin-events__inner {
	width: 100%;
	max-width: none; /* Figma grid: full artboard bleed, not a centered 1512 box */
	margin: 0;
	padding: 0;
}

/* EVENTS — Figma x=265, frame 298×106, 80px Futura Medium; 17px gap to year */
.atrin-events__title {
	margin: 0 0 calc(17 * var(--atrin-u));
	padding: 0 0 0 calc(265 * var(--atrin-u));
	min-height: calc(106 * var(--atrin-u));
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--atrin-events-display);
	font-weight: 500;
	font-size: calc(80 * var(--atrin-u));
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--atrin-events-text);
	text-align: left;
	/* Long DE title (VERANSTALTUNGEN) must stay visible — never clip mid-word */
	overflow: visible;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
}

.atrin-events__empty {
	margin: 0;
	padding: 0 calc(21 * var(--atrin-u));
	font-family: var(--atrin-events-font) !important;
	font-size: calc(16 * var(--atrin-u));
	line-height: 1.5;
	color: var(--atrin-events-text);
	opacity: 0.8;
}

.atrin-events__year-block + .atrin-events__year-block {
	margin-top: calc(72 * var(--atrin-u));
}

/* Year — Figma x=8, frame 124×66, 50px; 11px gap to first row */
.atrin-events__year {
	margin: 0 0 calc(11 * var(--atrin-u));
	padding: 0 0 0 calc(8 * var(--atrin-u));
	min-height: calc(66 * var(--atrin-u));
	font-family: var(--atrin-events-display);
	font-weight: 500;
	font-size: calc(50 * var(--atrin-u));
	line-height: 1;
	text-transform: uppercase;
	color: var(--atrin-events-text);
}

.atrin-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.atrin-events__item {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--atrin-events-line);
}

.atrin-events__item:last-child {
	border-bottom: 1px solid var(--atrin-events-line);
}

/*
 * Row — 39px tall. Figma column starts @ 1512:
 * date 21 · title 270 · city 892 · tickets 1437 (right inset ~20)
 * fr tracks = pixel gaps between those marks so they scale with width.
 */
.atrin-events__row {
	position: relative;
	z-index: 0;
	display: grid;
	grid-template-columns: 249fr 622fr 545fr 55fr;
	align-items: center;
	gap: 0;
	min-height: calc(39 * var(--atrin-u));
	height: calc(39 * var(--atrin-u));
	padding: 0 var(--atrin-gutter-x) 0 var(--atrin-gutter-x);
	margin: 0;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--atrin-events-text) !important;
	font-family: var(--atrin-events-font);
	font-size: calc(16 * var(--atrin-u));
	font-weight: 400;
	font-style: normal;
	line-height: calc(37 * var(--atrin-u));
	background: transparent;
	transition: color 0.35s ease;
}

/* Figma hover: light fill wipes bottom → top, then text flips to dark */
.atrin-events__row::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--atrin-events-hover-bg);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
	pointer-events: none;
}

.atrin-events__row > * {
	position: relative;
	z-index: 1;
}

/* Beat global `body span { font-family: … !important }` — inherit from row so Elementor typography applies */
.atrin-events__row * {
	font-family: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
	text-transform: none !important;
}

.atrin-events__row:hover,
.atrin-events__row:focus-visible {
	background: transparent;
	color: var(--atrin-events-hover-text) !important;
	outline: none;
}

.atrin-events__row:hover::before,
.atrin-events__row:focus-visible::before {
	transform: scaleY(1);
}

.atrin-events__row:hover *,
.atrin-events__row:focus-visible * {
	color: var(--atrin-events-hover-text) !important;
}

@media (prefers-reduced-motion: reduce) {
	.atrin-events__row,
	.atrin-events__row::before {
		transition: none;
	}
}

.atrin-events__date,
.atrin-events__detail,
.atrin-events__city,
.atrin-events__cta {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atrin-events__detail {
	padding-right: 12px;
}

.atrin-events__city {
	padding-right: 12px;
}

.atrin-events__cta {
	text-align: right;
	justify-self: end;
}

.atrin-events__date-mobile,
.atrin-events__name-mobile {
	display: none;
}

.atrin-events__name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atrin-events__info {
	display: none;
}

@media (hover: none) {
	.atrin-events__row:hover {
		background: transparent;
		color: var(--atrin-events-text) !important;
	}

	.atrin-events__row:hover::before {
		transform: scaleY(0);
	}

	.atrin-events__row:hover * {
		color: var(--atrin-events-text) !important;
	}

	.atrin-events__row:active {
		color: var(--atrin-events-hover-text) !important;
	}

	.atrin-events__row:active::before {
		transform: scaleY(1);
	}

	.atrin-events__row:active * {
		color: var(--atrin-events-hover-text) !important;
	}
}

/* ========== Mobile ≤991 — Figma 1:497 (370 content) ==========
 * Date stacked @ x≈0 · title/city @ x≈125 · Tickets @ x≈313
 * German months (Oktober/November) need ~100px date column.
 */
@media (max-width: 991px) {
	.atrin-events {
		border-radius: 0;
		padding: 72px 16px 64px;
		min-height: 0;
	}

	.atrin-events__inner {
		padding: 0;
		max-width: none;
	}

	.atrin-events__title {
		padding: 0;
		text-align: center;
		margin: 0 0 30px;
		/*
		 * Figma mobile uses "EVENTS"; DE site uses "VERANSTALTUNGEN".
		 * Scale so the full word fits one line in the padded panel (~100vw − 32px).
		 */
		font-size: clamp(28px, calc((100vw - 32px) / 9), 64px);
		line-height: 1.05;
		min-height: 0;
		max-width: 100%;
		white-space: nowrap;
		overflow: visible;
	}

	.atrin-events__year {
		padding: 0;
		font-size: clamp(36px, 12.8vw, 50px);
		margin: 0 0 19px;
		min-height: 0;
	}

	.atrin-events__item {
		border-top-color: var(--atrin-events-line);
	}

	.atrin-events__row {
		display: grid;
		grid-template-columns: 115px minmax(0, 1fr) auto;
		grid-template-areas:
			"date detail cta"
			"date city cta";
		align-items: start;
		column-gap: 12px;
		row-gap: 0;
		height: auto !important;
		min-height: 0;
		padding: 12px 0 16px;
		line-height: 21px;
		font-size: 16px;
	}

	.atrin-events__row * {
		line-height: 21px !important;
	}

	.atrin-events__date,
	.atrin-events__detail,
	.atrin-events__city,
	.atrin-events__cta {
		overflow: visible;
		text-overflow: unset;
		white-space: normal;
		min-width: 0;
	}

	.atrin-events__date {
		grid-area: date;
		padding: 0;
		width: auto;
	}

	.atrin-events__detail {
		grid-area: detail;
		padding: 0;
	}

	.atrin-events__city {
		grid-area: city;
		align-self: start;
		padding: 0;
	}

	.atrin-events__cta {
		grid-area: cta;
		align-self: start;
		justify-self: end;
		padding: 0;
		white-space: nowrap;
		line-height: 37px !important;
		text-align: right;
	}

	.atrin-events__cta,
	.atrin-events__cta * {
		line-height: 37px !important;
	}

	.atrin-events__date-desktop {
		display: none !important;
	}

	.atrin-events__date-mobile {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		line-height: 21px !important;
	}

	.atrin-events__day,
	.atrin-events__month {
		display: block;
		white-space: nowrap;
		line-height: 21px !important;
	}

	.atrin-events__name {
		display: none !important;
	}

	.atrin-events__name-mobile {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		white-space: normal;
	}

	.atrin-events__event-title,
	.atrin-events__event-venue {
		display: block;
		line-height: 21px !important;
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
	}

	.atrin-events__info {
		display: block;
		margin-top: 4px;
		font-size: 13px !important;
		line-height: 1.35 !important;
		opacity: 0.75;
		white-space: normal;
	}
}

/* Kill Elementor chrome around Events */
body.home .elementor-element.atrin-events-section,
body.home .elementor-element.atrin-events-section > .elementor-container,
body.home .elementor-element.atrin-events-section .elementor-column,
body.home .elementor-element.atrin-events-section .elementor-widget-wrap,
body.home .elementor-element.atrin-events-section .elementor-element-populated,
body.home .elementor-element.atrin-events-section .elementor-widget-atrin_events,
body.home .elementor-element.atrin-events-section .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

body.home .elementor-element.atrin-events-section {
	--atrin-events-pull: clamp(-251px, -16.6vw, -80px);
	background-color: transparent !important;
	background-image: none !important;
	/* Pull under hero photo — must NOT be clipped by .all-section overflow */
	margin-top: var(--atrin-events-pull) !important;
	position: relative;
	z-index: 1;
	overflow: visible !important;
}

/* .all-section { overflow:hidden } in style.css clips the Figma overlap — override */
body.home .elementor-element.atrin-events-section.all-section,
body.home .elementor-element.atrin-events-section.upcoming-section {
	overflow: visible !important;
}

body.home .elementor-element.atrin-events-section > .elementor-container {
	display: block !important;
	max-width: none !important;
}

/* Mobile pull must win over desktop clamp (same specificity, later in file) */
@media (max-width: 991px) {
	body.home .elementor-element.atrin-events-section {
		--atrin-events-pull: 0px;
		margin-top: 0 !important;
	}

	.atrin-events {
		overflow: visible;
	}
}


/* Exact Figma artboard type */
@media (min-width: 1512px) {
	.atrin-events__title {
		padding-left: calc(265 * var(--atrin-u));
		font-size: calc(80 * var(--atrin-u));
		line-height: 1;
		min-height: calc(106 * var(--atrin-u));
	}
	.atrin-events__year {
		font-size: calc(50 * var(--atrin-u));
		min-height: calc(66 * var(--atrin-u));
	}
}