/* Exhibit Central (rsgdx) plugin — custom-product-spotlight.css
   Product Spotlight homepage section. One large, deliberately dominant
   product image (not a grid) with a soft blurred glow behind it for
   depth, plus a slow continuous float — separate from the entrance
   fade-in every other section already uses (data-animate), since this
   is meant to keep drawing the eye gently even after it's scrolled into
   view, given it's the one section built specifically to highlight a
   single product. */

#exhibitrsgdx-main .exhibitrsgdx-spotlight {
	padding: 100px 0;
	background-color: var(--exhibitrsgdx-color-bg);
	overflow: hidden;
}

#exhibitrsgdx-main .exhibitrsgdx-spotlight__inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: 0 var(--exhibitrsgdx-space-6);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--exhibitrsgdx-space-6);
	align-items: center;
}

/* --- Media column --- */

#exhibitrsgdx-main .exhibitrsgdx-spotlight__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#exhibitrsgdx-main .exhibitrsgdx-spotlight__glow {
	position: absolute;
	width: 70%;
	height: 70%;
	background: var(--exhibitrsgdx-color-primary);
	opacity: 0.18;
	filter: blur(80px);
	border-radius: 50%;
	z-index: 0;
}

#exhibitrsgdx-main .exhibitrsgdx-spotlight__image {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
	animation: exhibitrsgdx-spotlight-float 6s ease-in-out infinite;
}

@keyframes exhibitrsgdx-spotlight-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-16px); }
}

/* --- Content column --- */

#exhibitrsgdx-main .exhibitrsgdx-spotlight__content {
	display: flex;
	flex-direction: column;
}

#exhibitrsgdx-main .exhibitrsgdx-spotlight__badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--exhibitrsgdx-color-primary);
	color: #fff;
	font-size: var(--exhibitrsgdx-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 6px 14px;
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main .exhibitrsgdx-spotlight__title {
	font-size: var(--exhibitrsgdx-text-3xl);
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main .exhibitrsgdx-spotlight__desc {
	color: var(--exhibitrsgdx-color-text-muted);
	margin-bottom: var(--exhibitrsgdx-space-5);
}

#exhibitrsgdx-main .exhibitrsgdx-spotlight__buttons {
	display: flex;
	gap: var(--exhibitrsgdx-space-3);
	flex-wrap: wrap;
}

/* --- Mobile --- */

@media (max-width: 900px) {
	#exhibitrsgdx-main .exhibitrsgdx-spotlight__inner {
		grid-template-columns: 1fr;
	}

	#exhibitrsgdx-main .exhibitrsgdx-spotlight__media {
		order: -1;
	}

	#exhibitrsgdx-main .exhibitrsgdx-spotlight__image {
		max-width: 320px;
	}
}

/* --- Respect reduced-motion preference — the continuous float is a nice-
   to-have, not essential, so it's the first thing to drop --- */

@media (prefers-reduced-motion: reduce) {
	#exhibitrsgdx-main .exhibitrsgdx-spotlight__image {
		animation: none;
	}
}