/* Exhibit RSGDX — custom-brand-grid.css — v1
   BRAND GRID — alternative, non-slider presentation of the same "brands"
   CPT data used by custom-brand-slider.css. Fixed 4-column layout (this
   site has 4 brands) — grid-template-columns is explicit rather than
   auto-fit/auto-fill so 4 cards never accidentally wrap to 3+1 on a
   slightly narrower desktop viewport. */

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

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__header {
	max-width: var(--exhibitrsgdx-content-max-width);
	margin: 0 auto var(--exhibitrsgdx-space-5);
	padding: 0 var(--exhibitrsgdx-space-6);
	text-align: center;
}

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

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__section-description {
	color: var(--exhibitrsgdx-color-text-muted);
	margin-bottom: 0;
}

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

/* Fixed 4-up grid — see file header note on why this isn't auto-fit */
#exhibitrsgdx-main .exhibitrsgdx-brand-grid__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--exhibitrsgdx-space-5);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card {
	display: flex;
	flex-direction: column;
	background: var(--exhibitrsgdx-color-surface);
	border: 1px solid var(--exhibitrsgdx-color-border);
	overflow: hidden;
	transition: transform var(--exhibitrsgdx-transition), border-color var(--exhibitrsgdx-transition);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card:hover {
	transform: translateY(-4px);
	/* Uses this card's own accent (custom color if set, otherwise the
	   rotating fallback below) instead of a flat border-light — so
	   hovering a card visually confirms "this is that brand's color". */
	border-color: var(--exhibitrsgdx-brand-grid-accent, var(--exhibitrsgdx-color-border-light));
}

/* Accent color cycles per card — 4 distinct colors already defined in
   root-variables.css (no new theme colors introduced) rather than one
   flat color for every card, echoing the varied checkmark colors in
   the reference layout. */
#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card {
	--exhibitrsgdx-brand-grid-accent: var(--exhibitrsgdx-color-primary);
}
#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card[style*="--exhibitrsgdx-brand-grid-accent-index: 1"] {
	--exhibitrsgdx-brand-grid-accent: var(--exhibitrsgdx-color-success);
}
#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card[style*="--exhibitrsgdx-brand-grid-accent-index: 2"] {
	--exhibitrsgdx-brand-grid-accent: var(--exhibitrsgdx-color-warning);
}
#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card[style*="--exhibitrsgdx-brand-grid-accent-index: 3"] {
	--exhibitrsgdx-brand-grid-accent: var(--exhibitrsgdx-color-primary-light);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--exhibitrsgdx-color-surface-alt);
	overflow: hidden;
}

/* Default + Hover images are stacked absolutely (same technique as
   .exhibitrsgdx-brand-slider__image--default / --hover in
   custom-brand-slider.css) so they can crossfade in place rather than
   swapping the src, which would flash/reflow. */
#exhibitrsgdx-main .exhibitrsgdx-brand-grid__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.5s ease, transform 0.5s ease;
	/* Slight baseline scale so the slow float below never uncovers an
	   edge of the frame — .exhibitrsgdx-brand-grid__media clips overflow
	   anyway, but this keeps the crop looking intentional rather than a
	   sliver of empty background peeking in at the float's extremes. */
	transform: scale(1.06);
	will-change: transform, opacity;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__image--hover {
	opacity: 0;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card:hover .exhibitrsgdx-brand-grid__image--default {
	opacity: 0;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card:hover .exhibitrsgdx-brand-grid__image--hover {
	opacity: 1;
}

/* --- Slow floating image movement (same idea as the Product Spotlight
   section's exhibitrsgdx-spotlight-float, see custom-product-spotlight.css)
   — each card gets its own duration/delay/direction via the existing
   accent-index cycle (0–3), so the four images drift out of sync with
   each other instead of bobbing in unison. Respects prefers-reduced-
   motion by only running under the no-preference query. --- */
@media (prefers-reduced-motion: no-preference) {

	#exhibitrsgdx-main .exhibitrsgdx-brand-grid__image {
		animation: exhibitrsgdx-brand-grid-float-0 7s ease-in-out infinite;
	}
	#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card[style*="--exhibitrsgdx-brand-grid-accent-index: 1"] .exhibitrsgdx-brand-grid__image {
		animation-name: exhibitrsgdx-brand-grid-float-1;
		animation-duration: 8.5s;
		animation-delay: 0.6s;
	}
	#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card[style*="--exhibitrsgdx-brand-grid-accent-index: 2"] .exhibitrsgdx-brand-grid__image {
		animation-name: exhibitrsgdx-brand-grid-float-2;
		animation-duration: 6.2s;
		animation-delay: 1.4s;
	}
	#exhibitrsgdx-main .exhibitrsgdx-brand-grid__card[style*="--exhibitrsgdx-brand-grid-accent-index: 3"] .exhibitrsgdx-brand-grid__image {
		animation-name: exhibitrsgdx-brand-grid-float-3;
		animation-duration: 9.3s;
		animation-delay: 0.2s;
	}

	@keyframes exhibitrsgdx-brand-grid-float-0 {
		0%, 100% { transform: scale(1.06) translate(0, 0); }
		50%      { transform: scale(1.06) translate(0, -10px); }
	}
	@keyframes exhibitrsgdx-brand-grid-float-1 {
		0%, 100% { transform: scale(1.06) translate(0, 0); }
		50%      { transform: scale(1.06) translate(8px, 6px); }
	}
	@keyframes exhibitrsgdx-brand-grid-float-2 {
		0%, 100% { transform: scale(1.06) translate(0, 0); }
		50%      { transform: scale(1.06) translate(-7px, -6px); }
	}
	@keyframes exhibitrsgdx-brand-grid-float-3 {
		0%, 100% { transform: scale(1.06) translate(0, 0); }
		50%      { transform: scale(1.06) translate(6px, -9px); }
	}

}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__body {
	padding: var(--exhibitrsgdx-space-4);
	display: flex;
	flex-direction: column;
	flex: 1;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__brand-name {
	font-size: var(--exhibitrsgdx-text-lg);
	margin-bottom: var(--exhibitrsgdx-space-3);
	text-align: center;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__points {
	list-style: none;
	margin-bottom: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--exhibitrsgdx-space-2);
	margin-bottom: var(--exhibitrsgdx-space-2);
	font-size: var(--exhibitrsgdx-text-sm);
	color: var(--exhibitrsgdx-color-text);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__points li i {
	color: var(--exhibitrsgdx-brand-grid-accent, var(--exhibitrsgdx-color-primary));
	margin-top: 2px;
}

/* fa-circle-check wasn't rendering — same defensive pattern already used
   for the nav caret and mobile menu caret elsewhere in this file's parent
   custom-style.css (raw unicode content + explicit font-family/weight on
   the icon itself), rather than relying only on the .fa-solid class
   picking up the right font from wherever Font Awesome happens to load.
   \f058 is the "circle-check" glyph — same codepoint FA has used for
   this icon since v4 ("check-circle"), so this doesn't depend on which
   FA version is actually active. This overrides the empty ::before
   content that would otherwise come from the class alone if something
   sitewide is interfering with it. */
#exhibitrsgdx-main .exhibitrsgdx-brand-grid__points li i.fa-circle-check::before {
	content: "\f058";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__price {
	text-align: center;
	font-size: var(--exhibitrsgdx-text-xl);
	font-weight: 800;
	color: var(--exhibitrsgdx-brand-grid-accent, var(--exhibitrsgdx-color-primary));
	margin-bottom: var(--exhibitrsgdx-space-3);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__description {
	color: var(--exhibitrsgdx-color-text-muted);
	font-size: var(--exhibitrsgdx-text-sm);
	margin-bottom: var(--exhibitrsgdx-space-4);
}

#exhibitrsgdx-main .exhibitrsgdx-brand-grid__cta {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: auto;
}

@media (max-width: 1200px) {
#exhibitrsgdx-main .exhibitrsgdx-brand-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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