/*
 * Sponsor Levels page (/sponsor-levels/). Loaded on that page only.
 *
 * Builds on hoh.css: tokens (:root --hoh-*), .hoh-eyebrow, .hoh-display, .hoh-sc,
 * .hoh-section-title, the italic "of" style and .hoh-btn. White page, royal / navy / sky.
 * Selectors start with `body .hoh.hoh-sponsors` so they beat Salient's heading,
 * paragraph and list rules.
 */

/* ---------- Page shell ---------- */

body.hoh-sponsors-view .container-wrap {
	padding-top: 0;
	padding-bottom: 0;
	background: #fff;
}

/*
 * The "Get in touch" band (global section) is a 392px-wide row on a 390px phone, which
 * leaves body.scrollWidth 1px wide. Clip it sideways only; the badge still overlaps upward.
 */
body.hoh-sponsors-view .nectar-global-section.before-footer {
	overflow-x: clip;
}

body .hoh.hoh-sponsors {
	--sp-gap: clamp(20px, 2.4vw, 32px);
	--sp-pad: clamp(28px, 3.6vw, 48px);
	--sp-diag: clamp(14px, 2.8vw, 36px);
	/* The band below pulls its round badge 130px up into this page. */
	--sp-badge: 130px;
	--sp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.3 14.1L6.9 12.3l1.4-1.4 2.4 2.4 5-5 1.4 1.4z'/%3E%3C/svg%3E");

	/*
	 * Same width and gutter as the other templates (.hoh-wrap), measured from the screen edge.
	 * Salient's container adds its own side padding, so centre on it with a margin instead.
	 */
	--sp-width: min(100vw - 2 * var(--hoh-gutter), var(--hoh-wrap));
	width: var(--sp-width);
	margin-left: calc(50% - var(--sp-width) / 2);
	margin-right: 0;
	background: #fff;
	color: var(--hoh-text);
}

/* ---------- Page header ---------- */

body .hoh.hoh-sponsors .hoh-sponsors__head {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
	text-align: center;
}

body .hoh.hoh-sponsors .hoh-sponsors__head .hoh-eyebrow {
	margin-bottom: 16px;
}

body .hoh.hoh-sponsors h1.hoh-display {
	text-wrap: balance;
}

body .hoh.hoh-sponsors .hoh-sponsors__lead {
	max-width: 34em;
	margin: 22px auto 0;
	padding: 0;
	font: 400 clamp(1.1rem, 1rem + 0.5vw, 1.3rem)/1.6 var(--hoh-sans);
	color: var(--hoh-text);
	text-wrap: balance;
}

body .hoh.hoh-sponsors .hoh-sponsors__lead::after {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: 28px auto 0;
	background: var(--hoh-sky);
}

/* ---------- Tier grid ---------- */

body .hoh.hoh-sponsors .hoh-tiers {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-gap);
}

@media (min-width: 720px) {
	body .hoh.hoh-sponsors .hoh-tiers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body .hoh.hoh-sponsors .hoh-tier--featured {
		grid-column: 1 / -1;
	}
}

/* ---------- Tier card ---------- */

body .hoh.hoh-sponsors .hoh-tier {
	--tier-accent: var(--hoh-sky);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: var(--sp-pad);
	background: #fff;
	border: 1px solid var(--hoh-line);
	border-top: 4px solid var(--tier-accent);
}

/* The accent steps down the blues with the price. */
body .hoh.hoh-sponsors .hoh-tier--platinum {
	--tier-accent: var(--hoh-navy-900);
}

body .hoh.hoh-sponsors .hoh-tier--gold {
	--tier-accent: var(--hoh-royal);
}

body .hoh.hoh-sponsors .hoh-tier--silver {
	--tier-accent: var(--hoh-blue-500);
}

body .hoh.hoh-sponsors .hoh-tier--bronze {
	--tier-accent: var(--hoh-sky);
}

body .hoh.hoh-sponsors .hoh-tier__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 clamp(20px, 2.4vw, 28px);
	padding: 0;
}

body .hoh.hoh-sponsors h2.hoh-tier__name {
	margin: 0;
	padding: 0;
	font: 700 0.85rem/1.3 var(--hoh-sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hoh-blue-500);
}

body .hoh.hoh-sponsors .hoh-tier__price {
	margin: 0;
	padding: 0;
	font: 400 clamp(2.8rem, 2.2rem + 2.2vw, 3.6rem)/1 var(--hoh-serif);
	letter-spacing: 0;
	color: var(--hoh-royal);
	font-variant-numeric: lining-nums;
}

/* Benefit checklist */

body .hoh.hoh-sponsors ul.hoh-tier__perks {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .hoh.hoh-sponsors .hoh-tier__perks li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 34px;
	list-style: none;
	border-top: 1px solid var(--hoh-line);
	font: 400 1rem/1.5 var(--hoh-sans);
	color: var(--hoh-text);
}

body .hoh.hoh-sponsors .hoh-tier__perks li:first-child {
	font-weight: 700;
	color: var(--hoh-ink);
}

body .hoh.hoh-sponsors .hoh-tier__perks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 20px;
	height: 20px;
	background-color: var(--hoh-royal);
	-webkit-mask: var(--sp-check) center / contain no-repeat;
	mask: var(--sp-check) center / contain no-repeat;
}

/* ---------- Featured (Title) card ---------- */

body .hoh.hoh-sponsors .hoh-tier--featured {
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(32px, 5vw, 64px);
	padding-bottom: calc(clamp(32px, 5vw, 64px) + var(--sp-diag));
	border: 0;
	background:
		radial-gradient(120% 90% at 85% 0%, rgba(121, 182, 230, 0.2), transparent 60%),
		var(--hoh-royal);
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sp-diag)), 0 100%);
}

/* Sky stripe along the slanted edge, as on the program's banding. */
body .hoh.hoh-sponsors .hoh-tier--featured::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--sp-diag) + 6px);
	background: var(--hoh-sky);
	clip-path: polygon(0 calc(100% - 6px), 100% 0, 100% 6px, 0 100%);
	z-index: -1;
}

/* Price on the left, checklist on the right once there is room for both. */
@media (min-width: 960px) {
	body .hoh.hoh-sponsors .hoh-tier--featured {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

body .hoh.hoh-sponsors .hoh-tier--featured .hoh-tier__head {
	margin: 0;
}

body .hoh.hoh-sponsors .hoh-tier--featured h2.hoh-tier__name {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--hoh-sky);
}

body .hoh.hoh-sponsors .hoh-tier--featured h2.hoh-tier__name::before {
	content: "";
	flex: 0 0 36px;
	height: 2px;
	background: var(--hoh-sky);
}

body .hoh.hoh-sponsors .hoh-tier--featured .hoh-tier__price {
	font-size: clamp(3.6rem, 2.6rem + 4.4vw, 6rem);
	color: #fff;
}

body .hoh.hoh-sponsors .hoh-tier--featured .hoh-tier__perks li {
	border-top-color: rgba(255, 255, 255, 0.2);
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.94);
}

body .hoh.hoh-sponsors .hoh-tier--featured .hoh-tier__perks li:first-child {
	color: #fff;
}

body .hoh.hoh-sponsors .hoh-tier--featured .hoh-tier__perks li::before {
	background-color: var(--hoh-sky);
}

/* ---------- Closing call to action ---------- */

body .hoh.hoh-sponsors .hoh-sponsors__cta {
	max-width: 820px;
	margin: clamp(64px, 8vw, 112px) auto 0;
	/* Bottom padding keeps the button clear of the band's badge. */
	padding: clamp(40px, 5vw, 64px) 0 calc(var(--sp-badge) + clamp(48px, 6vw, 80px));
	border-top: 1px solid var(--hoh-line);
	text-align: center;
}

body .hoh.hoh-sponsors .hoh-sponsors__cta h2.hoh-section-title {
	margin: 0 0 18px;
	text-wrap: balance;
}

body .hoh.hoh-sponsors .hoh-sponsors__cta-text {
	margin: 0;
	padding: 0;
	font: 400 1.1rem/1.6 var(--hoh-sans);
	color: var(--hoh-text);
}

body .hoh.hoh-sponsors .hoh-sponsors__cta-action {
	margin: 28px 0 0;
	padding: 0;
}

/*
 * Jump target for the button. The "Get in touch" band begins right below the page content;
 * the target sits 70px above it because Salient parks an anchor flush under the fixed header,
 * which would hide the badge and push the form lower.
 */
body .hoh.hoh-sponsors .hoh-sponsors__anchor {
	position: relative;
	top: -70px;
	display: block;
	height: 0;
}

/* ---------- Print and forced colours ---------- */

/* Keep the royal card and the check icons (both backgrounds) when printing. */
body .hoh.hoh-sponsors,
body .hoh.hoh-sponsors * {
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

@media print {
	body .hoh.hoh-sponsors .hoh-tier {
		break-inside: avoid;
	}

	body .hoh.hoh-sponsors .hoh-sponsors__cta-action {
		display: none;
	}
}

@media (forced-colors: active) {
	body .hoh.hoh-sponsors .hoh-tier__perks li::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	body .hoh.hoh-sponsors .hoh-tier--featured {
		border: 2px solid CanvasText;
	}
}