/**
 * Referral Hero
 *
 * The gradient stops, tile aspect ratio, and the two responsive
 * breakpoints below are all measured from the reference recording (see
 * the docblock in referral-hero.php) rather than chosen freehand.
 */

/**
 * No padding or background here by design — both are set on the Salient
 * section this element sits inside, so the row's own controls stay the
 * single place they're configured rather than being fought over by two
 * layers. overflow:hidden stays, since the filmstrip depends on it to clip
 * the tiles that run off the edge.
 */
.cl-rh {
	--cl-rh-heading: #0e2422;
	--cl-rh-intro: #4b5a58;
	--cl-rh-heading-font: "Iowan Old Style", "Georgia", "Times New Roman", serif;
	--cl-rh-eyebrow-gap: 22px;
	--cl-rh-tile-w: 300px;
	--cl-rh-gap: 14px;
	--cl-rh-radius: 16px;
	--cl-rh-duration: 34s;

	overflow: hidden;
}

.cl-rh *,
.cl-rh *::before,
.cl-rh *::after {
	box-sizing: border-box;
}

.cl-rh__in {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 40px;
}

/**
 * Size, weight, line height and uppercase come from Salient's h6 style:
 * the markup carries Salient's own `nectar-inherit-h6` class, the same
 * mechanism Responsive Text uses for "Our range" on Home. So the label
 * follows Appearance → Salient → Typography like the rest of the site
 * (14 / 13 / 11px at the time of writing). It used to have its own
 * 0.8rem and 0.14em letter-spacing, which no other label on the site had.
 * The Design tab's size and weight fields still override it when set.
 */
.cl-rh__eyebrow {
	/* Falls back to the heading colour, which is what this used before it
	   had a colour of its own — so leaving the setting blank keeps the
	   existing behaviour of the two matching. */
	color: var(--cl-rh-eyebrow-color, var(--cl-rh-heading));
	opacity: var(--cl-rh-eyebrow-opacity, 0.7);
	margin: 0 0 var(--cl-rh-eyebrow-gap);
}

.cl-rh__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
	padding-bottom: var(--cl-rh-top-pad, 44px);
}

/**
 * No font-size here on purpose. Setting one meant the heading ignored the
 * theme's own h1/h2/h3 styling entirely — the size came from this element
 * regardless of which heading tag was chosen. With no rule at all, the tag's
 * own sizing applies, and the "Heading font size" fields on the Design tab
 * emit a scoped override only when they are actually filled in. A blank
 * field must produce no rule rather than an empty value: font-size with no
 * fallback resolves to `unset`, which for an inherited property means
 * "inherit from the parent", not "let the tag's own rule win".
 */
.cl-rh .cl-rh__title {
	font-family: var(--cl-rh-heading-font);
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.03;
	color: var(--cl-rh-heading);
	margin: 0;
	max-width: var(--cl-rh-headline-w, 13ch);
}

.cl-rh .cl-rh__intro {
	margin: 0;
	max-width: var(--cl-rh-intro-w, 34ch);
	/* No font-size: the paragraph takes Salient's body text size (16px),
	   like the intro paragraphs on Home. It was 1.06rem, which followed the
	   fluid root down to 11.7px on phones. */
	line-height: 1.5;
	color: var(--cl-rh-intro);
	padding-bottom: 8px;
}

/**
 * Centred alignment (Design > Hero alignment). The default is the
 * left-aligned split above; this stacks the intro under the headline and
 * centres the lot.
 *
 * Only the text block is affected — the filmstrip is full-bleed either
 * way, so it is deliberately left alone here.
 */
.cl-rh--centre .cl-rh__in {
	text-align: center;
}

.cl-rh--centre .cl-rh__top {
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding-bottom: var(--cl-rh-top-pad, 44px);
}

.cl-rh--centre .cl-rh__title {
	max-width: var(--cl-rh-headline-w, 18ch);
	margin-left: auto;
	margin-right: auto;
}

.cl-rh--centre .cl-rh__intro {
	max-width: var(--cl-rh-intro-w, 56ch);
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0;
}

/**
 * Full-bleed on both edges. This is a direct child of .cl-rh, deliberately
 * outside .cl-rh__in, so the padding that keeps the text readable never
 * constrains the strip — see point 1 in the PHP file's docblock.
 */
.cl-rh__strip-wrap {
	overflow: hidden;
}

.cl-rh__strip {
	display: flex;
	gap: var(--cl-rh-gap);
	width: max-content;
}

.cl-rh--scrolling .cl-rh__strip {
	animation: cl-rh-scroll var(--cl-rh-duration) linear infinite;
}

/**
 * The set wrappers exist so the script can measure and clone whole photo
 * sets (see referral-hero.js).
 *
 * Deliberately a nested flex row rather than display:contents: contents
 * removes the element's box altogether, which would make it invisible to
 * getBoundingClientRect() and silently break the measurement the script
 * depends on. Using the same gap as the parent strip means the spacing
 * between sets is identical to the spacing within one, so the seam is
 * invisible.
 */
.cl-rh__set {
	display: flex;
	flex: 0 0 auto;
	gap: var(--cl-rh-gap);
}

.cl-rh__tile {
	flex: 0 0 auto;
	width: var(--cl-rh-tile-w);
	aspect-ratio: 3 / 4;
	border-radius: var(--cl-rh-radius);
	overflow: hidden;
}

/**
 * The radius is repeated on the image itself, not just the tile wrapper.
 * The wrapper's overflow:hidden should clip it, but the strip is inside an
 * animated transform, and a transformed ancestor is exactly the case where
 * clipping a child can fail to paint the rounded corners — hence the
 * bottom corners looking square. Setting it directly on the image makes it
 * independent of that, and also beats any radius Salient sets on images.
 */
.cl-rh .cl-rh__tile-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--cl-rh-radius) !important;
}

@keyframes cl-rh-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cl-rh__strip {
		animation: none !important;
	}
}

.cl-rh .cl-rh__notice {
	margin: 0 0 40px;
	padding: 12px 16px;
	background: #fcf9e8;
	border-left: 4px solid #dba617;
	border-radius: 4px;
	font-size: 0.9rem;
	color: #3c3c3c;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/**
 * Tablet: the eyebrow/headline/intro stay side by side here — confirmed
 * from the reference, which only stacks them at the mobile breakpoint
 * below. Only the tile size and the inner content padding change.
 */
@media (max-width: 900px) {
	.cl-rh {
		--cl-rh-tile-w: 230px;
	}

	.cl-rh__in {
		padding: 0 28px;
	}
}

/**
 * Mobile: the headline stacks above the intro line here, not at the
 * tablet breakpoint above.
 */
@media (max-width: 560px) {
	.cl-rh__in {
		padding: 0 20px;
	}

	.cl-rh__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding-bottom: var(--cl-rh-top-pad, 32px);
	}

	/* The rule above stacks the hero on phones and pins it left, which is
	   right for the default alignment but would silently undo the centred
	   option — this block comes later in the file, so it wins. Re-assert
	   centring here rather than leaving it to break only on mobile. */
	.cl-rh--centre .cl-rh__top {
		align-items: center;
	}

	.cl-rh .cl-rh__intro {
		padding-bottom: 0;
	}

	.cl-rh {
		--cl-rh-tile-w: 180px;
	}
}