/* Exhibit RSGDX — custom-different.css — v3 (v3: 60px desktop padding, hover zoom animation, darker overlay)
   WHAT MAKES US DIFFERENT — 4 cards, hovering swaps the short
   description for a separate, longer full description via a pure CSS
   crossfade (no JS needed). */

#exhibitrsgdx-main .exhibitrsgdx-different {
	padding: 60px 0;
}

#exhibitrsgdx-main .exhibitrsgdx-different__inner {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto;
	padding: 0 var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-different__title {
	font-size: var(--exhibitrsgdx-text-2xl);
	margin-bottom: var(--exhibitrsgdx-space-5);
}

#exhibitrsgdx-main .exhibitrsgdx-different__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--exhibitrsgdx-space-5);
	margin-bottom: var(--exhibitrsgdx-space-6);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card {
	position: relative;
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border);
	overflow: hidden;
	transition: border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card:hover {
	border-color: var(--exhibitrsgdx-color-primary);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card-default {
	position: relative;
	z-index: 1;
	padding: var(--exhibitrsgdx-space-4);
	background: var(--exhibitrsgdx-color-surface);
	transition: opacity var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card:hover .exhibitrsgdx-different__card-default {
	opacity: 0;
}

#exhibitrsgdx-main .exhibitrsgdx-different__card-image {
	margin-bottom: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card-image img {
	width: 100%;
	height: 140px;
	object-fit: cover;
}

#exhibitrsgdx-main .exhibitrsgdx-different__card-title {
	font-size: var(--exhibitrsgdx-text-md);
	margin-bottom: var(--exhibitrsgdx-space-2);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card-subtext {
	color: var(--exhibitrsgdx-color-primary);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card-short-desc {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: 0;
}

/* Hover state — the card's own image as a full-size background, a dark
   overlay so it stays readable, and the (separate, longer) full
   description centered on top. Sits absolutely over the default
   content, hidden until hover. */
#exhibitrsgdx-main .exhibitrsgdx-different__card-hover {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: var(--exhibitrsgdx-different-card-image);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.1);
	transition: opacity 0.4s ease, transform 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card-hover::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.88);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card:hover .exhibitrsgdx-different__card-hover {
	opacity: 1;
	transform: scale(1);
}

#exhibitrsgdx-main .exhibitrsgdx-different__card-full-desc {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: var(--exhibitrsgdx-text-sm);
	text-align: center;
	margin-bottom: 0;
	max-height: 100%;
	overflow-y: auto;
}

#exhibitrsgdx-main .exhibitrsgdx-different__buttons {
	display: flex;
	gap: var(--exhibitrsgdx-space-3);
	margin-bottom: var(--exhibitrsgdx-space-5);
}

@media (max-width: 1200px) {
#exhibitrsgdx-main .exhibitrsgdx-different {
		padding: var(--exhibitrsgdx-space-6) 0;
	}
#exhibitrsgdx-main .exhibitrsgdx-different__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 500px) {
#exhibitrsgdx-main .exhibitrsgdx-different__grid {
		grid-template-columns: 1fr;
	}
#exhibitrsgdx-main .exhibitrsgdx-different__buttons {
		flex-direction: column;
	}
}