/* Product Lineup block — Figma 722:554 / 722:555 / 722:556. Three products on a 3D ring: the featured one up front, the neighbors in the wings. */
.product-lineup {
	--pl-body-font: "Brandon Grotesque", "Brandon Grotesque Web", "brandon-grotesque", "Footer Brandon Fallback", Arial, sans-serif;
	--pl-heading-font: "Antonio", "Arial Narrow", sans-serif;
	--pl-navy: #001e50;
	--pl-red: #ac242a;
	--pl-tag-bg: #e8e8e8;
	--pl-stage-height: 767px;
	--pl-item-size: 640px;      /* featured product box (Figma: 586–714px) */
	--pl-side-scale: 0.52;      /* wings are ~319–348px */
	--pl-center-x: -206px;      /* featured product sits left of center and overlaps the tag's left edge */
	--pl-side-x: 590px;
	--pl-duration: .9s;
	--pl-ease: cubic-bezier(.22, .61, .36, 1);
	position: relative;
	margin: 0;
	padding: 90px 0 70px;
	color: var(--pl-navy);
	background: #fff;
	font-family: var(--pl-body-font);
	overflow: hidden;
}
.product-lineup__inner { position: relative; max-width: 1200px; margin-inline: auto; }
@media (max-width: 1247px) {
	.product-lineup__inner { max-width: none; padding-inline: max(24px, 8vw); }
}

/* Heading — Antonio Bold 50px, 6px tracking, sits 60px above the stage. */
.product-lineup__heading {
	margin: 0 0 60px;
	font-family: var(--pl-heading-font);
	font-size: 50px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: inherit;
}

/* Stage — 1440 × 767 in Figma; positions are measured from its center. */
.product-lineup__stage {
	position: relative;
	height: var(--pl-stage-height);
	margin-inline: calc(50% - 50vw);
	perspective: 1800px;
	perspective-origin: 50% 40%;
}
.product-lineup__ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.product-lineup__item {
	position: absolute;
	top: 20px;
	left: 50%;
	width: var(--pl-item-size);
	height: calc(var(--pl-item-size) * .9);
	margin-left: calc(var(--pl-item-size) / -2);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	transform-origin: 50% 60%;
	transition: transform var(--pl-duration) var(--pl-ease), opacity var(--pl-duration) var(--pl-ease), filter var(--pl-duration) var(--pl-ease);
	will-change: transform, opacity, filter;
	pointer-events: none;
}
.product-lineup__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; user-select: none; }
/* Slot transforms: featured product forward and left, wings pushed back into the corners, the rest parked behind. */
.product-lineup__item--center { z-index: 5; opacity: 1; filter: none; transform: translate3d(var(--pl-center-x), 0, 60px) scale(1); }
.product-lineup__item--left   { z-index: 1; opacity: .95; filter: blur(6px) saturate(.85); transform: translate3d(calc(-1 * var(--pl-side-x)), -20px, -260px) rotateY(24deg) scale(var(--pl-side-scale)); }
.product-lineup__item--right  { z-index: 1; opacity: .95; filter: blur(6px) saturate(.85); transform: translate3d(var(--pl-side-x), -20px, -260px) rotateY(-24deg) scale(var(--pl-side-scale)); }
.product-lineup__item--hidden { z-index: 0; opacity: 0; filter: blur(4px); transform: translate3d(0, -60px, -1100px) scale(.3); }
/* Items leaving through the back travel the short way round so the ring reads as a rotation. */
.product-lineup__item--hidden.is-exiting-left  { transform: translate3d(calc(-.6 * var(--pl-side-x)), -60px, -1100px) scale(.3); }
.product-lineup__item--hidden.is-exiting-right { transform: translate3d(calc(.6 * var(--pl-side-x)), -60px, -1100px) scale(.3); }

/* Tag — a grey ticket with scalloped sides and a navy inset rule, then the red button 25px below, right-aligned.
   Figma is 497px wide; ours is 550px, and the copy starts far enough in that the featured product (which sits on top of the tag) never covers it. */
.product-lineup__tags {
	position: absolute;
	top: 100px;
	left: calc(50% + 40px);
	width: 500px;
	transform: translateZ(0);
}
.product-lineup__tag-wrap { position: relative; }
.product-lineup__tag-wrap[hidden] { display: none; }
.product-lineup__tag-wrap.is-active { animation: product-lineup-tag-in var(--pl-duration) var(--pl-ease); }
@keyframes product-lineup-tag-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.product-lineup__tag {
	position: relative;
	min-height: 0;
	padding: 14px 15px 16px 16.83px;
	background: var(--pl-tag-bg);
	/* Scalloped left and right edges (ticket stub). */
	-webkit-mask:
		radial-gradient(circle at 0 50%, transparent 5px, #000 5.5px) 0 0 / 12px 21px repeat-y,
		radial-gradient(circle at 100% 50%, transparent 5px, #000 5.5px) 100% 0 / 12px 21px repeat-y,
		linear-gradient(#000, #000) 12px 0 / calc(100% - 24px) 100% no-repeat;
	mask:
		radial-gradient(circle at 0 50%, transparent 5px, #000 5.5px) 0 0 / 12px 21px repeat-y,
		radial-gradient(circle at 100% 50%, transparent 5px, #000 5.5px) 100% 0 / 12px 21px repeat-y,
		linear-gradient(#000, #000) 12px 0 / calc(100% - 24px) 100% no-repeat;
}
.product-lineup__tag-inner {
	min-height: 0;
	padding: 24px;
	border: 1.75px solid var(--pl-navy);
}
.product-lineup__tag-title {
	margin: 0;
	padding-bottom: 14px;
	font-size: 20px;
	font-weight: 900;
	line-height: 25px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	/* Double rule: two 1.75px navy lines 4px apart. */
	border-bottom: 1.75px solid var(--pl-navy);
	box-shadow: 0 4px 0 -2.25px var(--pl-navy);
}
.product-lineup__tag-text { margin: 12px 0 0; font-size: 21px; font-weight: 500; line-height: 30px; }
.product-lineup__button {
	position: absolute;
	right: 14px;
	top: calc(100% + 25px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 15px;
	border-radius: 10px;
	color: #fff;
	background: var(--pl-red);
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	/* Lift, shadow and transition come from the shared pill-button rule in style.css. */
}
.product-lineup__button:hover,
.product-lineup__button:focus-visible { background: #8a181b; color: #fff; }

/* Prev / Next — two 118 × 65 grey blocks centered at the bottom of the stage, 10px apart. */
.product-lineup__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 37px;
	display: flex;
	gap: 10px;
	width: max-content;
	/* Keep centering independent of the scroll reveal's transform and its cleanup. */
	margin-inline: auto;
	z-index: 5;
}
.product-lineup__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	width: 118px;
	height: 65px;
	padding: 0;
	border: 0;
	background: var(--pl-tag-bg);
	color: var(--pl-navy);
	font: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 34px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease;
}
.product-lineup__control:hover,
.product-lineup__control:focus-visible { background: #dcdcdc; }
.product-lineup__control--prev .product-lineup__control-label { color: #808080; }
.product-lineup__arrow { display: block; width: 0; height: 0; border-block: 5.5px solid transparent; }
.product-lineup__control--next .product-lineup__arrow { border-left: 10px solid var(--pl-navy); }
.product-lineup__control--prev .product-lineup__arrow { border-right: 10px solid var(--pl-navy); }
.product-lineup.is-animating .product-lineup__control { pointer-events: none; }

.product-lineup__empty { margin: 0 0 40px; font-size: 18px; }

/* Stacked list used on phones only (Figma 582:1759). */
.product-lineup__list { display: none; }

/* Full-bleed inside the theme's content column. */
body:has(.product-lineup.alignfull) { overflow-x: clip; }
.entry-content > .product-lineup.alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }

@media (prefers-reduced-motion: reduce) {
	.product-lineup__item { transition: none; }
	.product-lineup__tag-wrap.is-active { animation: none; }
}

/* Narrower desktops: shrink the whole stage proportionally. */
@media (max-width: 1439px) {
	.product-lineup {
		--pl-item-size: clamp(360px, 44vw, 640px);
		--pl-center-x: clamp(-206px, -14.3vw, -100px);
		--pl-side-x: clamp(300px, 41vw, 590px);
		--pl-stage-height: clamp(560px, 53vw, 767px);
	}
	.product-lineup__tags { width: min(500px, 40vw); }
	.product-lineup__tag { min-height: 0; }
	.product-lineup__tag-inner { min-height: 0; }
	.product-lineup__tag-title { font-size: clamp(15px, 1.4vw, 20px); line-height: 1.2; }
	.product-lineup__tag-text { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.45; }
	.product-lineup__heading { font-size: clamp(36px, 3.5vw, 50px); }
}

/* Tablet and phone — product on top, tag and button beneath, controls last. */
@media (max-width: 899px) {
	.product-lineup { padding: 48px 0 40px; }
	.product-lineup__heading { margin-bottom: 24px; font-size: 32px; letter-spacing: 0.12em; }
	.product-lineup__inner { padding-inline: 24px; }
}
/* Phones — Figma 582:1759: no carousel. Heading, then every product stacked: cutout overlapping the top of its
   ticket by ~50px, the ticket spanning the inner column, and the red button centered 12px beneath it. */
@media (max-width: 767px) {
	.product-lineup { padding: 48px 0 56px; }
	.product-lineup__inner { padding-inline: var(--dc-mobile-inset, 35px); }
	.product-lineup__heading { margin-bottom: 40px; font-size: 42px; line-height: 1; letter-spacing: 0.12em; }
	.product-lineup__stage,
	.product-lineup__controls { display: none; }
	.product-lineup__list { display: flex; flex-direction: column; gap: 64px; }
	.product-lineup__card { display: flex; flex-direction: column; align-items: center; }
	.product-lineup__card-image {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
		max-width: 431px;
		height: auto;
		max-height: 382px;
		margin-bottom: -50px;
		object-fit: contain;
		object-position: 50% 100%;
		user-select: none;
	}
	.product-lineup__card .product-lineup__tag { width: 100%; padding: 14px 19px 16px; }
	.product-lineup__card .product-lineup__tag-inner { padding: 25px 23px 28px; }
	.product-lineup__card .product-lineup__tag-title { padding-bottom: 15px; font-size: 20px; line-height: 26px; letter-spacing: 0.2em; }
	.product-lineup__card .product-lineup__tag-text { margin-top: 15px; font-size: 20px; line-height: 27px; }
	.product-lineup__card .product-lineup__button { position: static; margin-top: 12px; }
}

/* Fit the complete desktop section to the viewport, then scale the composition
   inside the space left by the heading and navigation. Phones retain the stacked list. */
@media (min-width: 768px) {
	.product-lineup {
		box-sizing: border-box;
		height: min(80vh, 1052px);
		max-height: 80vh;
		padding-block: min(4vh, 40px);
	}
	.product-lineup__inner {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		min-height: 0;
	}
	.product-lineup__heading {
		flex: 0 0 auto;
		margin-bottom: min(2vh, 24px);
		font-size: min(50px, 3.5vw, 5vh);
	}
	.product-lineup__stage {
		flex: 1 1 0;
		min-height: 0;
		height: auto;
		container-type: size;
	}
	.product-lineup__ring {
		/* One design pixel, limited by both stage width and its available height.
		   Reserve 72px below the products for full-sized, stable controls. */
		--pl-unit: max(0px, min(.069444vw, calc((100cqh - 72px) / 640)));
		--pl-item-size: calc(640 * var(--pl-unit));
		--pl-center-x: calc(-206 * var(--pl-unit));
		--pl-side-x: calc(590 * var(--pl-unit));
	}
	.product-lineup__item { top: calc(20 * var(--pl-unit)); }
	.product-lineup__tags {
		top: calc(100 * var(--pl-unit));
		left: calc(50% + 40 * var(--pl-unit));
		width: max(300px, calc(500 * var(--pl-unit)));
		max-width: calc(50% - 40 * var(--pl-unit) - 16px);
	}
	.product-lineup__tag {
		padding: max(10px, calc(16 * var(--pl-unit)));
		max-height: max(44px, calc(100cqh - 144px - 116 * var(--pl-unit)));
		overflow-y: auto;
	}
	.product-lineup__tag-inner { padding: max(10px, calc(24 * var(--pl-unit))); }
	.product-lineup__tag-title {
		font-size: max(14px, calc(20 * var(--pl-unit)));
		line-height: 1.25;
		padding-bottom: calc(14 * var(--pl-unit));
	}
	.product-lineup__tag-text {
		margin-top: calc(12 * var(--pl-unit));
		font-size: max(14px, calc(21 * var(--pl-unit)));
		line-height: 1.43;
	}
	.product-lineup__button {
		top: calc(100% + 16 * var(--pl-unit));
		right: calc(14 * var(--pl-unit));
		font-size: max(12px, calc(16 * var(--pl-unit)));
		padding-inline: max(10px, calc(15 * var(--pl-unit)));
	}
	.product-lineup__controls { bottom: 0; }
	.product-lineup__control { height: clamp(44px, 6vh, 65px); }
}