/* 40th anniversary page — the bits Elementor can't express (multi-stop gradients, image crop). */

:root {
	--rsf-gold-gradient: linear-gradient(90deg, #F3CC4F 0%, #F5E197 25%, #CEA447 60%, #EAD792 85%, #F5E197 100%);
}

/* Hero: Elementor's overlay only takes one gradient, so add the bottom fade here. */
.rsf-hero::before {
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.6) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

.rsf-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 32%;
	aspect-ratio: 615 / 345;
	background: url("../images/gold-shards.svg") no-repeat right bottom / contain;
	pointer-events: none;
}

.rsf-hero > .e-con-inner {
	position: relative;
	z-index: 2;
}

@media (max-width: 767px) {
	.rsf-hero::after {
		width: 55%;
		opacity: 0.6;
	}

	/* On narrow screens the text spans the photo, so the side fade isn't enough. */
	.rsf-hero::before,
	.rsf-archive::before {
		background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) !important;
	}
}

.rsf-gold-wave {
	aspect-ratio: 1920 / 121;
	background: url("../images/gold-wave.svg") no-repeat center / 100% 100%;
}

/* Numbered milestone rows */
.rsf-milestone__image img {
	width: 100%;
	aspect-ratio: 575 / 340;
	object-fit: cover;
}

.rsf-milestone__number .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--rsf-gold-gradient);
}

/* Elementor draws the line as a border, so paint the gradient onto it. */
.rsf-gold-rule .elementor-divider-separator {
	border-image: var(--rsf-gold-gradient) 1;
}

.rsf-milestone .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.rsf-milestone__number .elementor-heading-title {
		width: 40px;
		height: 40px;
	}
}