/**
 * Sponsors.
 *
 * Two pieces: the logo band and the tiers cards. Both size themselves from the
 * level's prominence rather than from a fixed class list, because levels are
 * per-site config and a PTA can add a fourth one without touching CSS.
 *
 * No Tailwind here, and no theme-only tokens assumed: this has to render under
 * a foreign theme where no utilities are loaded, as Cox was under Divi until 2026-08-08. It uses
 * the --rt-* custom properties, which the plugin prints on every front-end
 * page, with literal fallbacks for anything that might be missing.
 */

/* ---- The logo band ---------------------------------------------------- */

.rt-sp-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem 3rem;
}

.rt-sp-item {
	/* --rt-sp-w is set inline, from the level's prominence step. */
	flex: 0 1 var(--rt-sp-w, 220px);
	max-width: var(--rt-sp-w, 220px);
	text-align: center;
}

.rt-sp-link {
	display: block;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

a.rt-sp-link:hover,
a.rt-sp-link:focus-visible {
	transform: translateY(-3px);
	opacity: 0.9;
}

.rt-sp-logo {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * Cap the height as well as the width. Sponsor artwork arrives in whatever
	 * shape the business has: a tall stacked logo next to a wide wordmark at
	 * the same width makes the tall one tower over a level it did not pay for.
	 */
	max-height: calc(var(--rt-sp-w, 220px) * 0.55);
	object-fit: contain;
	margin: 0 auto;
}

/* Name shown when a sponsor has no logo yet. */
.rt-sp-name {
	display: block;
	font-family: var(--rt-font-heading, inherit);
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

.rt-sp-item--large .rt-sp-name {
	font-size: 1.5rem;
}

.rt-sp-item--medium .rt-sp-name {
	font-size: 1.25rem;
}

.rt-sp-item--small .rt-sp-name {
	font-size: 1.05rem;
}

@media (max-width: 640px) {
	.rt-sp-band {
		gap: 1.75rem 2rem;
	}

	/*
	 * On a phone the prominence steps stop being readable as sizes: a 320px
	 * and a 220px logo both just fill the column. Levels still order the band,
	 * which is what a sponsor is actually buying at that width.
	 */
	.rt-sp-item {
		flex-basis: min(var(--rt-sp-w, 220px), 42vw);
		max-width: min(var(--rt-sp-w, 220px), 42vw);
	}
}

/* ---- The tiers cards --------------------------------------------------- */

/*
 * The store card's shape: crest band with one big glyph, name, price, the
 * benefits, and a button. Self-contained on purpose (no theme classes) so it
 * renders the same under a foreign theme. The band's gradient comes off the
 * site's own chrome and primary, which is how the meals and ticket cards get
 * their colour without anybody sourcing artwork per tier.
 */
.rt-sp-levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	align-items: stretch;
	justify-content: center;
	gap: 24px;
	margin: 28px 0;
	padding: 0;
	list-style: none;
}
/* Fewer cards than lanes: the tracks size to a card and the set centers
   (RallyTrain rule: a short row never parks left). Count classes come
   from the renderer, so this stays deterministic instead of relying on
   auto-fit, which counts lanes by the MAX and comes up short. */
@media (min-width: 760px) {
  .rt-sp-levels.rt-sp-levels--n1 { grid-template-columns: repeat(1, minmax(0, 360px)); justify-content: center; }
  .rt-sp-levels.rt-sp-levels--n2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
}
@media (min-width: 1100px) {
  .rt-sp-levels.rt-sp-levels--n3 { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; }
}


.rt-sp-level {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rt-line, rgba(0, 0, 0, 0.1));
	border-radius: var(--rt-radius, 10px);
	overflow: hidden;
	background: var(--rt-white, #fff);
	box-shadow: var(--rt-shadow, 0 6px 24px rgba(0, 0, 0, 0.12));
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rt-sp-level:hover,
.rt-sp-level:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
	.rt-sp-level { transition: none; }
	.rt-sp-level:hover,
	.rt-sp-level:focus-within { transform: none; }
}

/* The band is the same slim brand strip the signup and store cards wear
   (site logo at the right on the dark chrome), underlined in the tier's
   colour when the level has one, the primary otherwise. */
.rt-sp-level-art {
	flex: none;
	height: 72px;
	background-image: var(--rt-banner-logo, none);
	background-size: auto 54px;
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-color: var(--rt-black, #141414);
	box-shadow: inset 0 -4px 0 var(--tier, var(--rt-primary, #b3141c));
}

/* A tinted level wears its own colour on the amount and benefit markers,
   so a Ranger/Silver/Red sponsor tier matches the membership tier of the
   same name. */
.rt-sp-level--tinted .rt-sp-level-amount,
.rt-sp-level--tinted .rt-sp-level-benefits li::before { color: var(--tier); }

.rt-sp-level-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding: 18px 18px 20px;
	text-align: center;
}

.rt-sp-level-label {
	margin: 0;
	font-family: var(--rt-font-display, var(--rt-font-heading, inherit));
	font-weight: var(--rt-font-display-weight, 700);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 1.2rem;
	line-height: 1.15;
	color: var(--rt-ink, #1a1a1a);
}

.rt-sp-level--large .rt-sp-level-label {
	font-size: 1.4rem;
}

.rt-sp-level-amount {
	margin: 0 0 6px;
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--rt-primary, #091e3d);
}

/* Benefits read left-aligned with the site's brand marker per line (the same glyph
   as the nav indicator and the Brand marker list style), so sponsor tiers match the members roll. */
.rt-sp-level-benefits {
	margin: 4px 0 16px;
	padding: 0;
	list-style: none;
	text-align: left;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--rt-muted, #5d5850);
}

.rt-sp-level-benefits li {
	position: relative;
	padding-left: 1.5rem;
}

.rt-sp-level-benefits li + li {
	margin-top: 0.45rem;
}

.rt-sp-level-benefits li::before {
	content: var(--rt-nav-icon, "\f005");
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: "Font Awesome 7 Free", "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 0.85em;
	color: var(--rt-primary, #b3141c);
}

.rt-sp-level-cta {
	display: inline-block;
	align-self: center;
	margin-top: auto;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--rt-primary, #f4b41c);
	color: var(--rt-on-primary, #141414);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.rt-sp-level-cta:hover,
.rt-sp-level-cta:focus-visible {
	filter: brightness(1.06);
	color: var(--rt-on-primary, #141414);
}

/* ---- Standalone (foreign theme) --------------------------------------- */

/*
 * Under a theme that gives the shortcode no content width, the module
 * constrains itself. Same pattern as the other modules.
 */
.rt-sp-standalone {
	max-width: var(--rt-maxw, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}