/*
 * Homepage furniture: the hero, the right rail, the filter bar and pagination.
 */

/* ── Hero ───────────────────────────────────────────────────────────────────── */

.slf-hero {
	/*
	 * The gradient is the base layer, not a placeholder. With no banner chosen it is the
	 * whole hero — instant, weightless, and a perfectly good LCP element. With one, it is
	 * what shows in the moment before the photograph arrives, and what the scrim blends
	 * into afterwards, so the box never flashes from one look to another.
	 */
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--slf-accent) 55%, transparent) 0%, transparent 60%),
		linear-gradient(160deg, var(--slf-surface-3), var(--slf-surface));
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius-lg);
	margin-bottom: var(--slf-space-5);
	overflow: hidden;
}

/*
 * ── The banner, and the scrim over it ───────────────────────────────────────────
 * The photograph is a real `<img>` (the preload scanner cannot see a background-image, and
 * this is the LCP element — see slf_hero_media). It is taken out of flow so the text sets
 * the hero's height exactly as it does without a picture: no photograph, however tall,
 * pushes the search box down the page.
 *
 * The scrim is the part that has to be right. An administrator can choose *any*
 * photograph, and the two that break naive overlays are both plausible here — a snowfield
 * under white text, a night shot under dark text. So it is built from the theme's own
 * surface colour, opaque where the text sits and clearing toward the far edge: whichever
 * theme is active, the text keeps the background it was contrast-checked against, and the
 * picture keeps the side of the box the mockup shows it on.
 */
.slf-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.slf-hero__img {
	display: block;
	width: 100%;
	height: 100%;

	/*
	 * `cover` on a box whose height comes from the text: the same photograph has to work
	 * behind a two-line homepage title and a one-line category name, and letting it
	 * letterbox would put bars in the middle of the design.
	 */
	object-fit: cover;

	/*
	 * Skewed off-centre because these are landscapes and skylines — the subject is in the
	 * upper half, and centring the crop reliably cuts the top off a mountain.
	 */
	object-position: 50% 35%;
}

.slf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;

	/*
	 * Vertical by default: on a phone the text spans the full width, so there is no "other
	 * side" for the photograph to occupy, and a horizontal fade would put the title over
	 * bare image. This keeps the picture visible at the bottom of the box instead.
	 */
	background:
		linear-gradient(
			to bottom,
			var(--slf-surface) 0%,
			color-mix(in srgb, var(--slf-surface) 82%, transparent) 55%,
			color-mix(in srgb, var(--slf-surface) 35%, transparent) 100%
		);
}

.slf-hero__inner {
	padding: var(--slf-space-5) var(--slf-space-4);
}

/*
 * The category banner: the same component, shorter, and with a minimum height because a
 * one-word category name would otherwise leave a strip of photograph 40px tall.
 */
.slf-hero--term.slf-hero--image .slf-hero__inner {
	min-height: 9rem;
}

/*
 * With no photograph the wash takes the category's own colour — the same one the sidebar
 * and the topic rows already use for it. Fourteen categories then read as fourteen places
 * rather than fourteen identical grey bands, without anyone having to find fourteen
 * photographs first.
 */
.slf-hero--term:not(.slf-hero--image) {
	background:
		radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--slf-cat, var(--slf-accent)) 45%, transparent) 0%, transparent 62%),
		linear-gradient(160deg, var(--slf-surface-3), var(--slf-surface));
}

.slf-hero--term .slf-hero__title {
	max-width: none;
}

.slf-hero__title {
	max-width: 20ch;
	margin-bottom: var(--slf-space-3);
	font-size: var(--slf-text-2xl);
	line-height: 1.15;
}

.slf-hero__lead {
	max-width: 46ch;
	color: var(--slf-text-2);
}

.slf-hero__search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slf-space-2);
	max-width: 34rem;
	margin-bottom: var(--slf-space-4);
}

.slf-hero__search .slf-input {
	flex: 1 1 12rem;
	background: var(--slf-surface);
}

.slf-hero__search .slf-btn {
	flex: 0 0 auto;
}

.slf-hero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-2);
	font-size: var(--slf-text-sm);
}

.slf-hero__chips-label {
	color: var(--slf-text-muted);
}

/* ── Right rail ─────────────────────────────────────────────────────────────── */

.slf-rail {
	display: flex;
	flex-direction: column;
	gap: var(--slf-space-5);
	min-width: 0;
}

.slf-cta__head {
	display: flex;
	align-items: center;
	gap: var(--slf-space-3);
	margin-bottom: var(--slf-space-2);
}

.slf-cta__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	background: var(--slf-accent-soft);
	color: var(--slf-accent-text);
}

.slf-cta__head .slf-card__title {
	font-size: var(--slf-text-base);
}

.slf-rail-list,
.slf-activity {
	margin: 0;
	padding: var(--slf-space-2);
	list-style: none;
}

.slf-rail-list__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--slf-space-3);
	padding: var(--slf-space-3);
	border-radius: var(--slf-radius);
	font-size: var(--slf-text-sm);
}

.slf-rail-list__item:hover {
	background: var(--slf-surface-2);
}

.slf-rail-list__item a {
	color: var(--slf-text);
	text-decoration: none;
}

.slf-rail-list__item a:hover {
	color: var(--slf-accent-text);
	text-decoration: underline;
}

.slf-rail-list__item .slf-topic__stat {
	flex: 0 0 auto;
	color: var(--slf-text-muted);
}

.slf-activity__item {
	display: flex;
	align-items: flex-start;
	gap: var(--slf-space-3);
	padding: var(--slf-space-3);
	font-size: var(--slf-text-sm);
}

.slf-activity__text {
	margin: 0;
	color: var(--slf-text-2);
}

.slf-activity__text a {
	color: var(--slf-accent-text);
	text-decoration: none;
}

.slf-activity__text a:hover {
	text-decoration: underline;
}

.slf-activity__time {
	margin: 2px 0 0;
	font-size: var(--slf-text-xs);
	color: var(--slf-text-muted);
}

/* ── Filters ────────────────────────────────────────────────────────────────── */

.slf-card__header--stack {
	flex-wrap: wrap;
	align-items: flex-start;
}

.slf-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-3);
	margin-left: auto;
}

.slf-tabs {
	display: flex;
	gap: var(--slf-space-1);
}

.slf-tab {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 var(--slf-space-3);
	border-radius: var(--slf-radius);
	color: var(--slf-text-muted);
	font-size: var(--slf-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.slf-tab:hover {
	background: var(--slf-surface-2);
	color: var(--slf-text);
}

/*
 * The active tab is marked by weight and an underline as well as colour — colour alone
 * would be the WCAG 1.4.1 failure of using it as the only means of conveying information.
 */
.slf-tab.is-active {
	color: var(--slf-text);
	box-shadow: inset 0 -2px 0 var(--slf-accent);
}

.slf-filters__more > summary {
	min-height: 38px;
	display: flex;
	align-items: center;
}

.slf-filters__panel {
	display: grid;
	gap: var(--slf-space-4);
	padding: var(--slf-space-4);
	border-top: 1px solid var(--slf-border);
}

.slf-filters__group .slf-field__label {
	margin-bottom: var(--slf-space-2);
}

.slf-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slf-space-2);
}

.slf-chip.is-active {
	background: var(--slf-accent-soft);
	border-color: var(--slf-accent);
	color: var(--slf-text);
	font-weight: 600;
}

.slf-filters__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slf-space-2);
}

.slf-filters__form .slf-input {
	flex: 1 1 12rem;
}

.slf-filters__clear {
	margin: 0;
}

/* The Apply button only exists for browsers that will not auto-submit the select. */
.slf-js .slf-filters__go {
	display: none;
}

/* ── Search fragments and pagination ────────────────────────────────────────── */

.slf-topic__fragment {
	margin: 0 0 var(--slf-space-2);
	color: var(--slf-text-muted);
	font-size: var(--slf-text-sm);
}

.slf-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--slf-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.slf-pagination a,
.slf-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--slf-space-2);
	border-radius: var(--slf-radius);
	color: var(--slf-text-2);
	text-decoration: none;
	font-size: var(--slf-text-sm);
}

.slf-pagination a:hover {
	background: var(--slf-surface-2);
	color: var(--slf-text);
}

.slf-pagination .current {
	background: var(--slf-accent);
	color: var(--slf-on-accent);
	font-weight: 700;
}

.slf-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--slf-space-3);
	margin-top: var(--slf-space-4);
}

.slf-feed {
	min-width: 0;
}

@media (min-width: 48em) {
	.slf-hero__inner {
		padding: var(--slf-space-6) var(--slf-space-5);
	}

	.slf-hero__title {
		font-size: var(--slf-text-3xl);
	}

	/*
	 * Wide enough for the two-column reading of the mockup: text on the left, photograph
	 * emerging on the right. The fade is not symmetrical with the text column — it clears
	 * at 90% rather than at the text's edge, so the last few characters of a long title
	 * still land on a scrimmed background rather than on the picture.
	 */
	.slf-hero--image .slf-hero__media::after {
		background:
			linear-gradient(
				to right,
				var(--slf-surface) 0%,
				color-mix(in srgb, var(--slf-surface) 88%, transparent) 42%,
				color-mix(in srgb, var(--slf-surface) 30%, transparent) 78%,
				transparent 90%
			),
			linear-gradient(
				to top,
				color-mix(in srgb, var(--slf-surface) 45%, transparent) 0%,
				transparent 60%
			);
	}

	.slf-hero--image .slf-hero__inner {
		/*
		 * Room for the photograph to be a photograph. Below this the hero is as tall as its
		 * text and the picture is a texture behind it; here it is the picture the mockup
		 * shows, with the text laid over the left of it.
		 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 19rem;
		max-width: 62%;
	}

	.slf-hero--term.slf-hero--image .slf-hero__inner {
		min-height: 10rem;
		max-width: 66%;
	}

	.slf-hero--image .slf-hero__img {
		object-position: 65% 35%;
	}
}