/*
 * Figma Discography — MacBook Pro 14" (1:92) @ 1512
 * Section  1:124  y=4310  h=1313  bg #2a2a2a  radius 10
 * Title    1:128  x=20 y=4355  Futura 359 / lh ~349  #e0e0e0
 * Album1   cover 167² @ 20,5150 · meta @ 269 · order @ 888 · streams @ 1133
 * Divider  1:175  y=5338  x=20 w=1472
 * Album2   polaroid ~159×176 @ 20,5359
 * Mobile   1:590 / 1:591  390 · pad 10 · title ~90.5 · cover 370²
 */

.atrin-discography {
	--atrin-disco-bg: #2a2a2a;
	--atrin-disco-text: #e0e0e0;
	--atrin-disco-accent: #efe3d3;
	--atrin-disco-ink: #110c00;
	--atrin-disco-font: 'Inter', sans-serif;
	--atrin-disco-display: Futura, 'Futura PT', 'Century Gothic', 'itc-avant-garde-gothic-pro', sans-serif;
	--atrin-frame: 1512;
	--atrin-pad: 20;
	--atrin-cover: 167;
	--atrin-cover-gap: 82; /* 269 − 20 − 167 */
	--atrin-order-w: 239;
	--atrin-stream-w: 359;

	box-sizing: border-box;
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: calc(45 * var(--atrin-u)) 0 calc(80 * var(--atrin-u));
	background: var(--atrin-disco-bg);
	color: var(--atrin-disco-text);
	font-family: var(--atrin-disco-font);
	font-size: calc(16 * var(--atrin-u));
	line-height: calc(23 * var(--atrin-u));
	border-radius: calc(10 * var(--atrin-u));
	/* Title glyphs can optically overhang — don't clip fullscreen headline */
	overflow-x: visible;
	overflow-y: visible;
}

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

.atrin-discography__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);
	box-sizing: border-box;
}

.atrin-discography__title {
	margin: 0 0 calc(89 * var(--atrin-u, 1px));
	padding: 0;
	/* Figma 1:128 — fullscreen headline: fill frame between gutters */
	display: block;
	width: 100%;
	max-width: none;
	font-family: var(--atrin-disco-display);
	font-weight: 500;
	/* Base Figma 359 @ 1512; JS fitTitle scales so GRAPHY spans full width */
	font-size: calc(359 * var(--atrin-u, 1px)) !important;
	line-height: 0.972 !important;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--atrin-disco-text);
	/* Newlines → Disco / graphy stack (single text node, no <br>) */
	white-space: pre-line;
	overflow: visible;
	overflow-wrap: normal;
	word-break: normal;
	scroll-margin-top: 120px;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
}

.atrin-discography__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.atrin-discography__item {
	display: grid;
	/* cover | meta | order+streams — 3 cols so mid widths keep meta readable */
	grid-template-columns:
		calc(var(--atrin-cover) * var(--atrin-u))
		minmax(0, 1fr)
		minmax(calc(220 * var(--atrin-u)), calc((var(--atrin-order-w) + var(--atrin-stream-w)) * var(--atrin-u)));
	column-gap: calc(var(--atrin-cover-gap) * var(--atrin-u));
	align-items: start;
	padding: calc(21 * var(--atrin-u)) 0 calc(40 * var(--atrin-u));
	border-bottom: 1px solid rgba(224, 224, 224, 0.55);
}

.atrin-discography__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.atrin-discography__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 24px 40px;
	padding-top: 40px;
	min-width: 0;
}

.atrin-discography__cover {
	margin: 0;
	width: calc(var(--atrin-cover) * var(--atrin-u));
	max-width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	background: #111;
}

.atrin-discography__cover-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Polaroid-style second cover keeps natural ratio when taller */
.atrin-discography__item:nth-child(2) .atrin-discography__cover {
	aspect-ratio: auto;
	height: auto;
}

.atrin-discography__item:nth-child(2) .atrin-discography__cover-img {
	height: auto;
	aspect-ratio: 159 / 176;
	object-fit: cover;
}

.atrin-discography__meta {
	min-width: 0;
	padding-top: 8px; /* Figma title sits slightly below cover top */
}

.atrin-discography__artist {
	margin: 0;
	font-family: var(--atrin-disco-display);
	font-weight: 500;
	font-size: calc(25 * var(--atrin-u));
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--atrin-disco-text);
}

.atrin-discography__album {
	margin: 0;
	font-family: var(--atrin-disco-display);
	font-weight: 500;
	font-size: calc(40 * var(--atrin-u));
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--atrin-disco-text);
}

.atrin-discography__info {
	margin: calc(10 * var(--atrin-u)) 0 0;
	max-width: calc(496 * var(--atrin-u));
	font-family: var(--atrin-disco-font);
	font-weight: 400;
	font-size: calc(16 * var(--atrin-u));
	line-height: 1.35;
	color: var(--atrin-disco-text);
}

.atrin-discography__order {
	padding-top: 0;
	font-family: var(--atrin-disco-font);
	font-size: calc(16 * var(--atrin-u));
	line-height: calc(23 * var(--atrin-u));
	color: var(--atrin-disco-accent);
	flex: 0 1 auto;
	min-width: 0;
}

.atrin-discography__order-label {
	display: block;
	margin: 0;
	padding: 0;
}

.atrin-discography__order-links {
	display: inline;
	margin: 0;
	padding: 0;
}

/*
 * Figma 1:138 — JPC / TIMEZONE underlined (or is not).
 * Use border-bottom: Elementor `.elementor a { text-decoration:none }` beats a single-class rule.
 */
.atrin-discography a.atrin-discography__order-link,
.atrin-discography__order-link {
	color: inherit;
	text-decoration: none !important;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 0.2s ease;
}

.atrin-discography a.atrin-discography__order-link:hover,
.atrin-discography a.atrin-discography__order-link:focus-visible,
.atrin-discography__order-link:hover,
.atrin-discography__order-link:focus-visible {
	opacity: 0.75;
	outline: none;
}

.atrin-discography__order-joiner {
	text-decoration: none;
	border-bottom: 0;
}

.atrin-discography__streams {
	display: flex;
	align-items: center;
	gap: 16px 18px;
	padding-top: 0;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

.atrin-discography__stream {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	opacity: 1;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.atrin-discography__stream:hover,
.atrin-discography__stream:focus-visible {
	opacity: 0.8;
	transform: translateY(-1px);
	outline: none;
}

.atrin-discography__stream-icon {
	display: block;
	height: 28px !important;
	width: auto !important;
	max-width: 150px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.atrin-discography__empty {
	margin: 0;
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.atrin-discography__order-link,
	.atrin-discography__stream {
		transition: none;
	}

	.atrin-discography__stream:hover,
	.atrin-discography__stream:focus-visible {
		transform: none;
	}
}

/* —— Mid / tablet: keep meta readable; stack buy + streams ——
   Align with header desktop (≥992): avoid phone stack in this band. */
@media (max-width: 1511px) and (min-width: 992px) {
	.atrin-discography {
		--atrin-cover: 150;
		--atrin-cover-gap: 36;
		padding: 40px 0 72px;
		border-radius: 0;
		overflow: visible;
	}

	.atrin-discography__title {
		/* Keep fullscreen fit (JS sets exact size; CSS base scales with --atrin-u) */
		font-size: calc(359 * var(--atrin-u, 1px)) !important;
		line-height: 0.972 !important;
		width: 100%;
		max-width: none;
		margin-bottom: calc(48 * var(--atrin-u, 1px));
	}

	.atrin-discography__item {
		grid-template-columns:
			calc(var(--atrin-cover) * var(--atrin-u))
			minmax(200px, 1fr)
			minmax(200px, calc(320 * var(--atrin-u)));
		column-gap: calc(var(--atrin-cover-gap) * var(--atrin-u));
	}

	.atrin-discography__actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding-top: 8px;
	}

	.atrin-discography__album {
		font-size: clamp(28px, 3.2vw, 40px);
	}

	.atrin-discography__streams {
		gap: 12px 14px;
	}
}

/* —— Wide desktop: Figma 4-track row (cover · meta · order · streams) —— */
@media (min-width: 1512px) {
	.atrin-discography__item {
		grid-template-columns:
			calc(var(--atrin-cover) * var(--atrin-u))
			minmax(0, 1fr)
			calc(var(--atrin-order-w) * var(--atrin-u))
			calc(var(--atrin-stream-w) * var(--atrin-u));
		column-gap: calc(var(--atrin-cover-gap) * var(--atrin-u));
	}

	.atrin-discography__actions {
		display: contents;
	}

	.atrin-discography__order {
		padding-top: calc(40 * var(--atrin-u));
		align-self: start;
		justify-self: start;
		width: 100%;
		max-width: calc(var(--atrin-order-w) * var(--atrin-u));
	}

	.atrin-discography__streams {
		padding-top: calc(48 * var(--atrin-u));
		align-self: start;
		justify-self: start;
		width: 100%;
		max-width: calc(var(--atrin-stream-w) * var(--atrin-u));
	}

	.atrin-discography__title {
		font-size: calc(359 * var(--atrin-u, 1px)) !important;
		line-height: 0.972 !important;
	}
}

/* —— Mobile (Figma 1:591 @ 390) — ≤991 matches header mobile chrome —— */
@media (max-width: 991px) {
	.atrin-discography {
		--atrin-pad: 10;
		--atrin-cover: 100%;
		--atrin-frame: 390;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 60px 0 48px;
		border-radius: 0;
		overflow-x: clip;
		overflow-y: visible;
	}

	.atrin-discography__inner {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.atrin-discography__title {
		margin-bottom: 50px;
		/* Fill content width (370 within 10px gutters) like Figma GRAPHY */
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		font-size: clamp(64px, 22vw, 100px) !important;
		line-height: 0.97 !important;
		min-height: 0;
		scroll-margin-top: 120px;
		white-space: pre-line;
	}

	.atrin-discography__list {
		width: 100%;
	}

	.atrin-discography__item {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 0 0 36px;
		width: 100%;
		border-bottom: 1px solid rgba(224, 224, 224, 0.55);
	}

	.atrin-discography__item + .atrin-discography__item {
		padding-top: 36px;
	}

	.atrin-discography__item:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.atrin-discography__cover {
		order: 1;
		width: 100%;
		max-width: none;
		aspect-ratio: 1 / 1;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	}

	.atrin-discography__cover-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* Polaroid cover — Figma 1106×1168 */
	.atrin-discography__item:nth-child(2) .atrin-discography__cover {
		aspect-ratio: 1106 / 1168;
		height: auto;
	}

	.atrin-discography__item:nth-child(2) .atrin-discography__cover-img {
		aspect-ratio: 1106 / 1168;
		height: 100%;
		object-fit: cover;
	}

	.atrin-discography__meta {
		order: 2;
		padding-top: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.atrin-discography__artist {
		font-size: 25px;
		line-height: 42px;
	}

	.atrin-discography__album {
		font-size: 40px;
		line-height: 42px;
	}

	.atrin-discography__info {
		max-width: none;
		margin-top: 10px;
		font-size: 16px;
		line-height: 23px;
	}

	.atrin-discography__actions {
		order: 3;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding-top: 4px;
		width: 100%;
	}

	.atrin-discography__order {
		padding-top: 0;
		font-size: 16px;
		line-height: 23px;
		color: var(--atrin-disco-accent);
	}

	.atrin-discography__order-label {
		display: block;
	}

	.atrin-discography__order-links {
		display: block;
	}

	/* Figma: Spotify · Amazon · Apple on one row */
	.atrin-discography__streams {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding-top: 0;
		width: 100%;
	}

	.atrin-discography__stream {
		flex: 0 1 auto;
		min-width: 0;
	}

	.atrin-discography__stream-icon {
		height: 26px !important;
		width: auto !important;
		max-width: 100%;
		max-height: 32px;
	}

	.atrin-discography__stream:nth-child(1) .atrin-discography__stream-icon {
		height: 31px !important;
		max-width: 103px;
	}

	.atrin-discography__stream:nth-child(2) .atrin-discography__stream-icon {
		height: 28px !important;
		max-width: 143px;
	}

	.atrin-discography__stream:nth-child(3) .atrin-discography__stream-icon {
		height: 20px !important;
		max-width: 79px;
	}
}

@media (max-width: 360px) {
	.atrin-discography__streams {
		gap: 6px;
	}

	.atrin-discography__stream:nth-child(1) .atrin-discography__stream-icon {
		max-width: 90px;
	}

	.atrin-discography__stream:nth-child(2) .atrin-discography__stream-icon {
		max-width: 120px;
	}

	.atrin-discography__stream:nth-child(3) .atrin-discography__stream-icon {
		max-width: 70px;
	}
}

/* —— Kill Elementor + legacy discography chrome —— */
body.home .elementor-element.atrin-discography-section,
body.home .elementor-element.atrin-discography-section.discography-section,
body.home .elementor-element.discography-section.atrin-discography-section {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	overflow: visible !important;
	position: relative !important;
	z-index: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	width: 100% !important;
	max-width: none !important;
	left: 0 !important;
	right: 0 !important;
}

body.home .elementor-element.atrin-discography-section > .elementor-container,
body.home .elementor-element.atrin-discography-section .elementor-column,
body.home .elementor-element.atrin-discography-section .elementor-widget-wrap,
body.home .elementor-element.atrin-discography-section .elementor-element-populated,
body.home .elementor-element.atrin-discography-section .elementor-widget-atrin_discography,
body.home .elementor-element.atrin-discography-section .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
}

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

/* Keep hash/nav jumps clear of fixed header */
body.home #discography-show,
body.home .atrin-discography-section,
.atrin-discography,
.atrin-discography__title {
	scroll-margin-top: 120px;
}

/* Elementor editor / preview — keep widget visible despite legacy panel CSS */
.elementor-editor-active .atrin-discography,
.elementor-editor-preview .atrin-discography,
.elementor-editor-active .elementor-widget-atrin_discography,
.elementor-editor-preview .elementor-widget-atrin_discography {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
	overflow: visible !important;
	position: relative !important;
	z-index: 1 !important;
}

.elementor-editor-active .atrin-discography__title,
.elementor-editor-preview .atrin-discography__title {
	font-size: clamp(48px, 12vw, 164px) !important;
	max-width: 100% !important;
	white-space: pre-line !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
}

.elementor-editor-active .elementor-section.discography-section,
.elementor-editor-preview .elementor-section.discography-section,
.elementor-editor-active .elementor-section.atrin-discography-section,
.elementor-editor-preview .elementor-section.atrin-discography-section {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	transform: none !important;
	overflow: visible !important;
}

.elementor-editor-active .site-footer,
.elementor-editor-preview .site-footer {
	display: none !important;
}