/**
 * RWO Sponsor Manager — frontend grid styles.
 *
 * Designed to play nicely with The7, WPBakery, and Ultimate Addons,
 * which means: low specificity, no global element overrides, no !important.
 *
 * Breakpoints follow Race World Offshore's existing pattern:
 *   >=1024px  → declared columns (default 6)
 *   600-1023  → 3 columns
 *   <600      → 2 columns
 *
 * Hero tier (Official) overrides this and shows one large centered logo.
 */

.rwo-sm-wrap {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
.rwo-sm-wrap *,
.rwo-sm-wrap *::before,
.rwo-sm-wrap *::after {
	box-sizing: border-box;
}

/* Tier sections */
.rwo-sm-tier {
	margin: 0 0 36px 0;
	padding: 0;
}
.rwo-sm-tier-title {
	text-align: center;
	margin: 0 0 18px 0;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Grid                                                                */
/*                                                                     */
/* Column count and logo height are driven by CSS custom properties     */
/* that the shortcode writes INLINE on each <ul class="rwo-sm-grid">:   */
/*                                                                     */
/*   --rwo-sm-cols-d / -t / -m     columns at desktop/tablet/mobile     */
/*   --rwo-sm-logo-h-d / -t / -m   logo max-height at each breakpoint   */
/*                                                                     */
/* Everything here is only a fallback. Because an inline custom         */
/* property outranks any stylesheet, a per-page columns="N" can never   */
/* be overridden by the global default again (the 1.0.2/1.0.3 bug).     */
/* ------------------------------------------------------------------ */
.rwo-sm-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
	align-items: center;
	justify-items: center;

	/* Mobile-first */
	--rwo-sm-cols: var(--rwo-sm-cols-m, 2);
	--rwo-sm-logo-h: var(--rwo-sm-logo-h-m, 270px);
	grid-template-columns: repeat(var(--rwo-sm-cols), minmax(0, 1fr));
}

/* Tablet */
@media (min-width: 600px) {
	.rwo-sm-grid {
		--rwo-sm-cols: var(--rwo-sm-cols-t, 3);
		--rwo-sm-logo-h: var(--rwo-sm-logo-h-t, 180px);
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.rwo-sm-grid {
		--rwo-sm-cols: var(--rwo-sm-cols-d, 6);
		--rwo-sm-logo-h: var(--rwo-sm-logo-h-d, 90px);
	}
}

/* Legacy column classes.
   These do double duty: they keep hand-written markup and page-cached HTML
   from 1.0.3 and earlier rendering the right column count, AND they act as a
   safety net if a security plugin ever strips the inline style attribute.
   Heights mirror the scale used by RWO_SM_CSS::scaled_height() at the stock
   90px base (6 columns = 90px, halve the columns and the cap doubles). */
.rwo-sm-grid-cols-1  { --rwo-sm-cols-d: 1;  --rwo-sm-logo-h-d: 270px; }
.rwo-sm-grid-cols-2  { --rwo-sm-cols-d: 2;  --rwo-sm-logo-h-d: 270px; }
.rwo-sm-grid-cols-3  { --rwo-sm-cols-d: 3;  --rwo-sm-logo-h-d: 180px; }
.rwo-sm-grid-cols-4  { --rwo-sm-cols-d: 4;  --rwo-sm-logo-h-d: 135px; }
.rwo-sm-grid-cols-5  { --rwo-sm-cols-d: 5;  --rwo-sm-logo-h-d: 108px; }
.rwo-sm-grid-cols-6  { --rwo-sm-cols-d: 6;  --rwo-sm-logo-h-d: 90px; }
.rwo-sm-grid-cols-7  { --rwo-sm-cols-d: 7;  --rwo-sm-logo-h-d: 77px; }
.rwo-sm-grid-cols-8  { --rwo-sm-cols-d: 8;  --rwo-sm-logo-h-d: 68px; }
.rwo-sm-grid-cols-9  { --rwo-sm-cols-d: 9;  --rwo-sm-logo-h-d: 60px; }
.rwo-sm-grid-cols-10 { --rwo-sm-cols-d: 10; --rwo-sm-logo-h-d: 54px; }
.rwo-sm-grid-cols-11 { --rwo-sm-cols-d: 11; --rwo-sm-logo-h-d: 54px; }
.rwo-sm-grid-cols-12 { --rwo-sm-cols-d: 12; --rwo-sm-logo-h-d: 54px; }

/* Each cell */
.rwo-sm-item {
	margin: 0;
	padding: 8px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 80px;
}
.rwo-sm-link,
.rwo-sm-link-static {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.rwo-sm-link:hover {
	transform: translateY(-2px);
	opacity: 0.92;
}
/*
 * width:100% lets an undersized source file scale UP to fill its cell, so
 * halving the column count genuinely doubles the logo. object-fit:contain
 * preserves the aspect ratio when the height cap binds.
 */
.rwo-sm-logo {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: var(--rwo-sm-logo-h, 90px);
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* Sponsor name (only when show_names="yes") */
.rwo-sm-name {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	line-height: 1.25;
	color: inherit;
}

/* ------------------------------------------------------------- */
/* Hero / Official tier — single large logo, centered, big       */
/* ------------------------------------------------------------- */
.rwo-sm-tier-hero .rwo-sm-grid {
	/* Hero defaults to one centred logo. Expressed as custom properties, not
	   "!important", so an explicit columns="N" on the shortcode still wins. */
	--rwo-sm-cols-d: 1;
	--rwo-sm-cols-t: 1;
	--rwo-sm-cols-m: 1;
	max-width: 900px;
	margin: 0 auto;
	gap: 24px;
}
.rwo-sm-tier-hero .rwo-sm-item {
	min-height: 260px;
	padding: 16px;
}
/* Mobile (default) */
.rwo-sm-tier-hero .rwo-sm-logo {
	max-height: 280px;
	width: 100%;
	max-width: 88%;
}
/* Tablet */
@media (min-width: 600px) {
	.rwo-sm-tier-hero .rwo-sm-logo {
		max-height: 380px;
	}
}
/* Desktop — let the hero breathe */
@media (min-width: 1024px) {
	.rwo-sm-tier-hero .rwo-sm-grid {
		max-width: 1100px;
	}
	.rwo-sm-tier-hero .rwo-sm-logo {
		max-height: 460px;
	}
}

/* Platinum (col-2 on desktop) — logos a bit larger */
.rwo-sm-tier-platinum .rwo-sm-logo {
	max-height: 160px;
}
.rwo-sm-tier-diamond .rwo-sm-logo {
	max-height: 140px;
}
.rwo-sm-tier-gold .rwo-sm-logo {
	max-height: 120px;
}
.rwo-sm-tier-silver .rwo-sm-logo {
	max-height: 105px;
}
.rwo-sm-tier-conch .rwo-sm-logo,
.rwo-sm-tier-food .rwo-sm-logo {
	max-height: 90px;
}

/* Empty state */
.rwo-sm-empty {
	padding: 24px;
	background: #f7f7f7;
	border: 1px dashed #ccc;
	color: #555;
	text-align: center;
	border-radius: 4px;
}

/* Print: stack to two columns to save toner */
@media print {
	.rwo-sm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.rwo-sm-link:hover {
		transform: none;
	}
}

/* Accessibility — visible focus ring */
.rwo-sm-link:focus-visible {
	outline: 2px solid #0073aa;
	outline-offset: 3px;
	border-radius: 3px;
}