/**
 * Partnership level bands
 *
 * Full-bleed photo on one side, a white card overlapping it on the other.
 * Alternate sides by adding `rc-level-rev` to every second band.
 *
 * Ported from the mockup's `.lvl` component.
 */

.rc-level {
	align-items: center;
	background-color: #f6f6f4;
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

.rc-level + .rc-level {
	border-top: 1px solid #e5e5e5;
}

.rc-level-pic {
	background-color: #000;
	min-height: 560px;
	overflow: hidden;
	position: relative;
}

.rc-level-pic img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	transition: transform .8s cubic-bezier(.2, .7, .3, 1);
	width: 100%;
}

.rc-level:hover .rc-level-pic img {
	transform: scale(1.04);
}

/* Darkens the photo where the card overlaps it. */
.rc-level-pic::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 55%);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/*
 * The negative margin is what pulls the card over the photo. Flip its sign in
 * the reversed variant so the overlap always points at the image.
 */
.rc-level-card {
	background-color: #fff;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .15);
	margin: 64px 56px 64px -110px;
	padding: 52px 50px;
	position: relative;
	z-index: 2;
}

.rc-level-rev .rc-level-pic {
	order: 2;
}

.rc-level-rev .rc-level-card {
	margin: 64px -110px 64px 56px;
	order: 1;
}

/* Rank indicator — fades down the tiers. */
.rc-level-ramp {
	background-color: #fc0;
	display: block;
	height: 9px;
	margin-bottom: 22px;
	width: 54px;
}

.rc-level-ramp-3 { opacity: .72; }
.rc-level-ramp-2 { opacity: .48; }
.rc-level-ramp-1 { opacity: .26; }

.rc-level-name {
	color: #101010;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.06;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.rc-level-pos {
	color: #7e6200;
	font-size: .875rem;
	font-weight: 500;
	margin-bottom: 20px;
}

.rc-level-amount {
	border-bottom: 1px solid #e5e5e5;
	color: #101010;
	font-size: clamp(2.5rem, 5vw, 3.625rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: .94;
	margin-bottom: 26px;
	padding-bottom: 24px;
}

.rc-level-cols {
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr 1fr;
}

.rc-level-cols h4 {
	color: #6e6e6e;
	font-size: .65625rem;
	font-weight: 700;
	letter-spacing: .17em;
	margin-bottom: 14px;
	text-transform: uppercase;
}

/* Checklist with a gold tick drawn from two borders. */
.rc-level-check {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rc-level-check li {
	font-size: .8875rem;
	padding: 0 0 9px 26px;
	position: relative;
}

.rc-level-check li::before {
	border-bottom: 2.5px solid #fc0;
	border-left: 2.5px solid #fc0;
	content: "";
	height: 7px;
	left: 0;
	position: absolute;
	top: 8px;
	transform: rotate(-45deg);
	width: 12px;
}

.rc-level-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rc-level-chip {
	background-color: #f6f6f4;
	border: 1px solid #e5e5e5;
	color: #101010;
	font-size: .775rem;
	padding: 7px 11px;
}

.rc-level-cta {
	margin-top: 26px;
}

/* Keep anchored bands clear of the sticky section menu. */
.rc-level[id] {
	scroll-margin-top: 5rem;
}

@media (max-width: 1100px) {
	.rc-level-card {
		margin: 48px 32px 48px -70px;
		padding: 42px 38px;
	}

	.rc-level-rev .rc-level-card {
		margin: 48px -70px 48px 32px;
	}

	.rc-level-pic {
		min-height: 520px;
	}
}

/*
 * Stacked: photo on top, card pulled up over its bottom edge. The overlap is
 * kept, just rotated from horizontal to vertical.
 */
@media (max-width: 900px) {
	.rc-level,
	.rc-level-rev {
		grid-template-columns: 1fr;
	}

	.rc-level .rc-level-pic,
	.rc-level-rev .rc-level-pic {
		min-height: 300px;
		order: 1;
	}

	.rc-level .rc-level-card,
	.rc-level-rev .rc-level-card {
		margin: -56px 22px 40px;
		order: 2;
		padding: 34px 28px;
	}

	.rc-level-cols {
		gap: 24px;
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rc-level-pic img {
		transition: none;
	}

	.rc-level:hover .rc-level-pic img {
		transform: none;
	}
}