/*
 * ll-archive.css
 * Search results, topic archives, category and tag archives.
 *
 * Owner: STYLES. See docs/SEARCH-ARCHIVE-CONTRACT.md.
 * Plain CSS. No build step, no framework, no preprocessor.
 *
 * ---------------------------------------------------------------------------
 * WHY EVERY SELECTOR CARRIES .ll-main
 * ---------------------------------------------------------------------------
 * Two reasons, both measured against the live stylesheets rather than guessed.
 *
 * 1. Containment. The site defines no custom properties today, so the ones
 *    declared here are scoped to .ll-main and cannot leak into Cornerstone,
 *    UberMenu or the shared header and footer.
 *
 * 2. Specificity. The Pro "integrity-light" stack styles form controls with
 *    an attribute selector:
 *        input[type=search] { height:2.65em; border:1px solid #ddd;
 *                             font-size:13px; color:#555; margin-bottom:9px }
 *    That is (0,1,1). A lone .ll-search-form__input is (0,1,0) and LOSES on
 *    the element column. Prefixing with .ll-main makes it (0,2,0), which wins
 *    cleanly without a single !important.
 *    The same applies to the customiser rule `h3 a:hover { color:#f48220 }`
 *    at (0,1,2), which would otherwise own the card title hover colour.
 *
 * .ll-main is present on all five templates (search, category, tag,
 * taxonomy-ll_topic, archive). .ll-archive is not: search.php uses
 * .ll-search. So .ll-main, not .ll-archive, is the real single root class.
 *
 * ---------------------------------------------------------------------------
 * CONSTRAINTS THIS FILE RESPECTS
 * ---------------------------------------------------------------------------
 * - #x-root { overflow: hidden } is global, so position: sticky silently fails
 *   anywhere inside it. The filter bar is therefore NOT sticky. See the note
 *   above the filter bar section for the alternatives that were rejected.
 * - The font request on these routes is Open+Sans:400,400i,700,700i|Roboto:400.
 *   Roboto 700 IS NOT LOADED. Nothing here sets a weight above 400 on Roboto.
 *   Every bold element uses Open Sans 700, which is loaded. Card titles and
 *   the page eyebrow are therefore Open Sans, not Roboto. H1 stays Roboto 400
 *   at a large size, matching the rest of the site.
 * - html font-size is locked to 16px at all five breakpoints, so type is a
 *   fixed rem scale stepped at breakpoints, never a fluid root scale.
 * - Breakpoints are 480 / 767 / 979 / 1200. The grid steps 1 up to 2 up at
 *   767 and 2 up to 3 up at 979, which is what the card template's `sizes`
 *   attribute already assumes ((max-width:767px) 88vw, (max-width:979px) 44vw,
 *   372px). Changing the columns here would silently break image selection.
 * - Global margins are untouched: the templates reuse .x-container.max.width
 *   (88% wide, 1200px cap) and nothing below re-implements a gutter.
 * - !important is used exactly once, over the Smush lazy-load rule, and is
 *   justified in place.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.ll-main {
	/* Palette: verbatim from the contract. */
	--ll-brand: #f48220;
	--ll-brand-2: #1e3c77;
	--ll-navy: #061634;
	--ll-heading: #333;
	--ll-body: #444;
	--ll-muted: #666;
	--ll-border: #ddd;
	--ll-surface: #fff;

	/* Neutrals derived only by lightening the palette, nothing invented. */
	--ll-surface-sunken: #f7f8fa;
	--ll-border-soft: #e8ebef;

	/*
	 * Fallback topic colour. Every consumer (.ll-card, .ll-pill, .ll-chip--topic,
	 * .ll-topic-card, and main on the topic archive) sets --ll-topic inline, so
	 * this only ever fills in for the odd element that inherits.
	 */
	--ll-topic: #1e3c77;

	--ll-font-body: "Open Sans", sans-serif;
	--ll-font-head: "Roboto", sans-serif;

	/* Spacing scale, 16px root. */
	--ll-s1: 0.25rem;
	--ll-s2: 0.5rem;
	--ll-s3: 0.75rem;
	--ll-s4: 1rem;
	--ll-s5: 1.5rem;
	--ll-s6: 2rem;
	--ll-s7: 3rem;
	--ll-s8: 4rem;

	--ll-radius: 10px;
	--ll-radius-sm: 6px;

	--ll-shadow: 0 1px 2px rgba(6, 22, 52, 0.04);
	--ll-shadow-lift: 0 10px 28px -12px rgba(6, 22, 52, 0.28);

	/*
	 * The one focus ring, used by every focusable thing under .ll-main.
	 *
	 * WCAG 2.2 SC 1.4.11 asks a focus indicator for 3:1 against what sits next
	 * to it. Every earlier version of this ring was a low-alpha wash of the
	 * palette, and every one of them failed once composited:
	 *   rgba(30,60,119,0.35) over #fff  -> rgb(176,187,207)  1.93:1
	 *   rgba(244,130,32,0.28) over #fff -> rgb(252,220,193)  1.30:1
	 *   rgba(244,130,32,0.40) over #fff -> rgb(251,205,166)  1.46:1
	 *   rgba(30,60,119,0.45) over #fff  -> rgb(154,167,194)  2.42:1
	 * Alpha cannot be rescued by picking a stronger value either, because the
	 * ring has to work on white cards AND on the #f7f8fa filter bar AND on top
	 * of a photograph, and a translucent colour is a different colour on each.
	 *
	 * So the ring is opaque and two-banded: a white separator, then solid
	 * #1e3c77. Measured:
	 *   #1e3c77 vs #fff     10.67:1   (page, cards, chips at rest)
	 *   #1e3c77 vs #f7f8fa  10.40:1   (filter bar, sunken empty state)
	 *   #1e3c77 vs #ddd      7.05:1   (against a card or chip border)
	 *   #fff    vs #1e3c77  10.67:1   (the separator, when the control itself
	 *                                  goes navy on hover-plus-focus)
	 * Whichever surface the control sits on, one of the two bands clears 3:1 on
	 * both of its edges, so the indicator as a whole is always visible.
	 *
	 * It is a box-shadow, not an outline, because the stack ships
	 * `a:hover, a:active, [tabindex="-1"] { outline: 0 !important }`: an
	 * outline-based ring would vanish the moment a pointer crossed a focused
	 * link. outline is kept transparent so forced-colors mode, which discards
	 * box-shadow entirely, still has something to repaint. See the
	 * forced-colors block at the end of this file.
	 */
	--ll-focus-ring: 0 0 0 2px var(--ll-surface), 0 0 0 4px var(--ll-brand-2);

	--ll-ease: 160ms ease;

	font-family: var(--ll-font-body);
	color: var(--ll-body);
	/*
	 * Cornerstone's layout is suppressed on these routes, so no builder section
	 * supplies vertical rhythm. The template shell has to provide its own.
	 */
	padding-top: var(--ll-s6);
	padding-bottom: var(--ll-s7);
}

@media (min-width: 767px) {
	.ll-main {
		padding-top: var(--ll-s7);
		padding-bottom: var(--ll-s8);
	}
}

/* Utility used by the templates for the visually hidden section headings. */
.ll-u-visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
}

/*
 * Shared focus treatment.
 *
 * This rule DRAWS a default ring rather than only clearing the UA one. An
 * earlier version cleared the outline here and re-drew a ring on each control
 * individually, which meant every control anyone forgot to list shipped with
 * `outline: 2px solid transparent` and nothing else: an invisible focus state
 * and a silent WCAG 2.4.7 failure. `.ll-results__empty-clear` and
 * `.ll-archive__empty a` were both in that hole.
 *
 * There is now exactly ONE ring in this file, --ll-focus-ring, and the reason
 * it is a single opaque token rather than a per-control tint is written out
 * where it is defined. Controls only restate it when they carry a resting
 * box-shadow of their own that would otherwise replace it, and they restate
 * the token rather than re-deriving a colour. The only control that opts out
 * is .ll-card__link, which frames the whole card from its overlay instead.
 *
 * Specificity note: this selector is (0,2,0), the same as `.ll-main .ll-thing`,
 * so a later resting box-shadow at that weight still wins in its own state.
 * That is why the chips, the pagination links, the search input and the submit
 * button all restate the ring and the plain text links do not.
 */
.ll-main :focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--ll-focus-ring);
}

.ll-main a,
.ll-main button,
.ll-main input {
	transition: color var(--ll-ease), background-color var(--ll-ease),
		border-color var(--ll-ease), box-shadow var(--ll-ease);
}

/* ==========================================================================
   2. PAGE HEAD
   ========================================================================== */

.ll-main .ll-page-head {
	margin: 0 0 var(--ll-s5);
	padding: 0 0 var(--ll-s5);
	border-bottom: 1px solid var(--ll-border);
}

.ll-main .ll-page-head__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--ll-s2);
	margin: 0 0 var(--ll-s2);
	font-family: var(--ll-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	/*
	 * Navy, not brand orange. #f48220 on white is 2.605:1, which fails WCAG AA
	 * for 12px text. The brand colour is carried by the rule beside it instead,
	 * where contrast is not a legibility question.
	 */
	color: var(--ll-brand-2);
}

.ll-main .ll-page-head__eyebrow::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 3px;
	border-radius: 2px;
	background-color: var(--ll-brand);
}

.ll-main .ll-page-head--topic .ll-page-head__eyebrow::before {
	background-color: var(--ll-topic);
}

.ll-main .ll-page-head__title {
	margin: 0;
	font-family: var(--ll-font-head);
	/* Roboto 400. The 700 weight is not loaded on these routes. */
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--ll-heading);
	/*
	 * The search H1 interpolates the raw query. A single long unbroken token
	 * would otherwise push the line past the container, and #x-root's
	 * overflow:hidden would clip it rather than scroll it.
	 */
	overflow-wrap: anywhere;
}

@media (min-width: 767px) {
	.ll-main .ll-page-head__title {
		font-size: 2.5rem;
	}
}

@media (min-width: 979px) {
	.ll-main .ll-page-head__title {
		font-size: 3rem;
	}
}

.ll-main .ll-page-head__intro {
	max-width: 68ch;
	margin: var(--ll-s3) 0 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ll-body);
}

.ll-main .ll-page-head__intro > *:last-child {
	margin-bottom: 0;
}

.ll-main .ll-page-head__scope {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ll-s2) var(--ll-s3);
	margin: var(--ll-s3) 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ll-muted);
}

.ll-main .ll-page-head__scope strong {
	font-weight: 700;
	color: var(--ll-heading);
}

.ll-main .ll-page-head__clear {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ll-brand-2);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	border-radius: var(--ll-radius-sm);
}

/*
 * Hover keeps the TEXT at #1e3c77 and moves the brand orange onto the
 * underline.
 *
 * The four text links in this file that used to swap to `color:
 * var(--ll-brand)` on hover were all dropping from 10.67:1 to 2.61:1 on #fff
 * (2.45:1 on the sunken surface) at 0.875rem-1rem, i.e. contrast got worse the
 * moment you interacted with the link, and below the 4.5:1 SC 1.4.3 requires.
 * That is the same reason the eyebrow above refuses #f48220 as text. The
 * accent is still on screen, carried by a property where legibility is not the
 * question, and the state change is unmistakable because the rule also
 * thickens. Same pattern on .ll-no-results__destination-list a,
 * .ll-archive__empty a and .ll-results__empty-clear.
 */
.ll-main .ll-page-head__clear:hover,
.ll-main .ll-page-head__clear:focus-visible {
	color: var(--ll-brand-2);
	text-decoration-color: var(--ll-brand);
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   3. SEARCH FORM
   ========================================================================== */

.ll-main .ll-search__form,
.ll-main .ll-no-results__form {
	margin: 0 0 var(--ll-s5);
}

.ll-main .ll-search-form {
	max-width: 40rem;
	margin: 0;
}

.ll-main .ll-search-form__label {
	display: block;
	margin: 0 0 var(--ll-s2);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ll-muted);
}

.ll-main .ll-search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ll-s2);
}

/*
 * Beats input[type=search] (0,1,1) from the stack, which would otherwise force
 * height:2.65em, font-size:13px, color:#555 and margin-bottom:9px.
 */
.ll-main .ll-search-form__input {
	flex: 1 1 14rem;
	min-width: 0;
	height: auto;
	margin: 0;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius-sm);
	padding: 0.75rem 0.9375rem;
	font-family: var(--ll-font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ll-heading);
	background-color: var(--ll-surface);
	box-shadow: none;
	appearance: none;
}

.ll-main .ll-search-form__input::placeholder {
	color: var(--ll-muted);
	opacity: 1;
}

/*
 * Restated because the resting rule above sets `box-shadow: none` at the same
 * (0,2,0) weight further down the file, which would beat the shared ring.
 *
 * :focus is listed alongside :focus-visible on purpose. This is a text field:
 * it takes focus from a click as well as from the keyboard, and a caret sitting
 * in an unringed box next to an identical unringed box is not a focus state.
 *
 * The border moves to #1e3c77, not #f48220. As a focus cue the orange border
 * measured 2.61:1 against the white field, under the 3:1 of SC 1.4.11; navy is
 * 10.67:1 and matches the ring, so the two cues read as one control.
 */
.ll-main .ll-search-form__input:focus,
.ll-main .ll-search-form__input:focus-visible {
	border-color: var(--ll-brand-2);
	box-shadow: var(--ll-focus-ring);
	outline: 2px solid transparent;
	outline-offset: 0;
}

.ll-main .ll-search-form__submit {
	flex: 0 0 auto;
	margin: 0;
	border: 1px solid var(--ll-brand);
	border-radius: var(--ll-radius-sm);
	padding: 0.75rem 1.5rem;
	font-family: var(--ll-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	/*
	 * The label is #061634, not #fff.
	 *
	 * White on #f48220 measures 2.605:1. 16px/700 is NOT large text under WCAG
	 * (that threshold is 18.66px bold or 24px regular), so this control needs
	 * 4.5:1 for SC 1.4.3, and it is the primary call to action on the search
	 * page. An earlier revision of this block recorded the failure and shipped
	 * it anyway on the grounds that every other button on the site does the
	 * same; a known contrast failure on the page's main CTA is not something
	 * this file can inherit its way out of.
	 *
	 * Two ways out, both palette-only (darkening the orange itself was
	 * rejected: the contract says invent nothing, and #f48220 is pinned):
	 *   a. fill #1e3c77, label #fff            10.67:1
	 *   b. fill #f48220, label #061634          6.88:1   <- chosen
	 * (b) is the smaller divergence. The button keeps the brand-primary fill
	 * the contract pins buttons to and still reads as a LabLynx button at a
	 * glance; only the label darkens. (a) would make the one CTA on the search
	 * page the only navy button on the site.
	 *
	 * Hover flips the fill to brand secondary per the contract, and the label
	 * has to flip with it: #061634 on #1e3c77 is 1.68:1. White on #1e3c77 is
	 * 10.67:1, so the hover state is the one place white is correct here.
	 */
	color: var(--ll-navy);
	background-color: var(--ll-brand);
	cursor: pointer;
	appearance: none;
}

.ll-main .ll-search-form__submit:hover,
.ll-main .ll-search-form__submit:active {
	border-color: var(--ll-brand-2);
	background-color: var(--ll-brand-2);
	color: var(--ll-surface);
}

/*
 * Restated rather than left to the shared rule because the stack styles submit
 * buttons through element and attribute selectors this file does not control.
 * The white band is what carries this one on hover-plus-focus: the button fill
 * turns #1e3c77 on hover, so the navy band would sit on navy, and the white
 * separator is then the visible edge at 10.67:1 against the button.
 */
.ll-main .ll-search-form__submit:focus-visible {
	box-shadow: var(--ll-focus-ring);
}

/* ==========================================================================
   4. FILTER BAR
   ==========================================================================
 *
 * Deliberately not sticky. #x-root { overflow: hidden } neutralises
 * position:sticky for every descendant, and the three ways out were all worse
 * than the problem:
 *   - unsetting overflow on #x-root: global blast radius, and the horizontal
 *     overflow guard exists because builder sections rely on it;
 *   - position:fixed: covers content on short viewports, needs JS to measure
 *     the Cornerstone header height, and fights the mobile menu;
 *   - a portal out of #x-root: JS-dependent chrome for a filter that must work
 *     without JS.
 * The bar sits directly above the grid, which on a 10-per-page result set is
 * never more than one screen from the results anyway.
 */

.ll-main .ll-filter-bar {
	display: grid;
	gap: var(--ll-s4);
	margin: 0 0 var(--ll-s5);
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	padding: var(--ll-s4);
	background-color: var(--ll-surface-sunken);
}

@media (min-width: 767px) {
	.ll-main .ll-filter-bar {
		padding: var(--ll-s5);
	}
}

.ll-main .ll-filter-bar__group {
	display: grid;
	gap: var(--ll-s2) var(--ll-s4);
}

.ll-main .ll-filter-bar__group + .ll-filter-bar__group {
	border-top: 1px solid var(--ll-border-soft);
	padding-top: var(--ll-s4);
}

@media (min-width: 979px) {
	.ll-main .ll-filter-bar__group {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		align-items: start;
	}
}

.ll-main .ll-filter-bar__legend {
	margin: 0;
	font-family: var(--ll-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ll-muted);
}

.ll-main .ll-filter-bar__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ll-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ll-main .ll-filter-bar__chip-item {
	display: block;
	margin: 0;
}

.ll-main .ll-filter-bar__note {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ll-muted);
}

@media (min-width: 979px) {
	.ll-main .ll-filter-bar__note {
		grid-column: 2;
	}
}

/* --- Chips ---------------------------------------------------------------
 *
 * Base chip is neutral. It is reused by "All topics", "All types" and the
 * popular-search suggestions in the empty state, none of which own a topic.
 * Only .ll-chip--topic takes colour, which also separates the two filter
 * groups at a glance without another border or heading.
 */

.ll-main .ll-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ll-s2);
	border: 1px solid var(--ll-border);
	border-radius: 999px;
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ll-heading);
	background-color: var(--ll-surface);
	text-decoration: none;
}

.ll-main .ll-chip:hover {
	border-color: var(--ll-brand-2);
	color: var(--ll-brand-2);
}

.ll-main .ll-chip:focus-visible {
	border-color: var(--ll-brand-2);
	box-shadow: var(--ll-focus-ring);
}

.ll-main .ll-chip__label {
	white-space: nowrap;
}

/* Counts stay neutral at every state so the number is always legible. */
.ll-main .ll-chip__count {
	flex: 0 0 auto;
	min-width: 1.5rem;
	border-radius: 999px;
	padding: 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.45rem;
	text-align: center;
	color: var(--ll-muted);
	background-color: var(--ll-surface-sunken);
}

.ll-main .ll-chip:hover .ll-chip__count,
.ll-main .ll-chip.is-active .ll-chip__count {
	color: var(--ll-heading);
	background-color: var(--ll-border-soft);
}

/* Topic chip: a solid dot carries the topic colour. */
.ll-main .ll-chip--topic::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--ll-topic, #1e3c77);
}

.ll-main .ll-chip--topic:hover {
	border-color: var(--ll-topic, #1e3c77);
	color: var(--ll-heading);
}

/*
 * Active state.
 *
 * A solid topic fill was rejected: white on #f48220 is 2.605:1 and the chip has
 * no slug hook to branch on, only the inline --ll-topic, so a per-topic text
 * colour is not expressible. A tinted plate with a full-strength ring keeps
 * the topic colour dominant and the label at full contrast.
 */
.ll-main .ll-chip.is-active {
	color: var(--ll-navy);
	border-color: var(--ll-brand-2);
	box-shadow: inset 0 0 0 1px var(--ll-brand-2);
}

.ll-main .ll-chip--topic.is-active {
	border-color: var(--ll-topic, #1e3c77);
	box-shadow: inset 0 0 0 1px var(--ll-topic, #1e3c77);
	background-color: var(--ll-surface);
	/* Progressive tint. Browsers without color-mix keep the white plate. */
	background-color: color-mix(in srgb, var(--ll-topic, #1e3c77) 10%, #fff);
}

.ll-main .ll-chip--type.is-active {
	color: var(--ll-surface);
	background-color: var(--ll-brand-2);
	border-color: var(--ll-brand-2);
}

.ll-main .ll-chip--type.is-active .ll-chip__count {
	color: var(--ll-surface);
	background-color: rgba(255, 255, 255, 0.18);
}

/*
 * Focused AND active.
 *
 * `.ll-chip.is-active` is (0,3,0) and is declared after `.ll-chip:focus-visible`
 * at the same weight, so its inset plate ring replaced the focus ring outright:
 * tabbing onto the chip that is already selected produced no visible change at
 * all. Both shadows are restated together here so the focus ring is additive.
 */
.ll-main .ll-chip.is-active:focus-visible {
	box-shadow: inset 0 0 0 1px var(--ll-brand-2), var(--ll-focus-ring);
}

.ll-main .ll-chip--topic.is-active:focus-visible {
	box-shadow: inset 0 0 0 1px var(--ll-topic, #1e3c77), var(--ll-focus-ring);
}

/* Zero results for that topic. Still a real link, so it stays operable. */
.ll-main .ll-chip.is-empty {
	color: var(--ll-muted);
	border-color: var(--ll-border-soft);
}

.ll-main .ll-chip.is-empty::before {
	opacity: 0.45;
}

/* ==========================================================================
   5. RESULT COUNT
   ========================================================================== */

.ll-main .ll-results__count {
	margin: 0 0 var(--ll-s4);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ll-muted);
}

/* ==========================================================================
   6. GRID
   ==========================================================================
 *
 * 1 up, then 2 up at 767, then 3 up at 979. This mirrors the `sizes` attribute
 * the card template ships. Rows stretch, so cards in a row are equal height
 * regardless of title or summary length: the card is a flex column and its
 * topic pills are pushed to the bottom with margin-top:auto.
 */

.ll-main .ll-results {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ll-s5);
	margin: 0 0 var(--ll-s6);
	padding: 0;
	list-style: none;
}

@media (min-width: 767px) {
	.ll-main .ll-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 979px) {
	.ll-main .ll-results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ll-main .ll-results__item {
	display: flex;
	min-width: 0;
	margin: 0;
}

/* The fragment filter sets both [hidden] and inline display:none; honour both. */
.ll-main .ll-results__item[hidden] {
	display: none;
}

/* ==========================================================================
   7. CARD
   ========================================================================== */

.ll-main .ll-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	background-color: var(--ll-surface);
	box-shadow: var(--ll-shadow);
	transition: border-color var(--ll-ease), box-shadow var(--ll-ease),
		transform var(--ll-ease);
}

.ll-main .ll-card:hover {
	border-color: var(--ll-brand-2);
	box-shadow: var(--ll-shadow-lift);
	transform: translateY(-2px);
}

/* --- Media slot ---------------------------------------------------------
 *
 * The template sets `aspect-ratio: 1200 / 630; overflow: hidden` inline on the
 * slot so that no image, lazy-loader or plugin can change the card's height.
 * Nothing here overrides that ratio: an inline style would need !important to
 * beat, and a uniform ratio is what keeps the grid legible when a row mixes a
 * landscape photo, a square book cover and a typographic plate.
 *
 * 1200/630 is the library's ratio, not a taste call. Of the 229 published items
 * with a featured image, 182 of the 195 non-square ones are 1.90-1.92 because
 * the site authors featured art in the 1200x630 OG format. The slot was 16/10
 * (1.600) until 2026-07-29, which centre-cropped 16% off the width of all 182
 * and clipped the burned-in headline on every chart and slide graphic.
 */

.ll-main .ll-card__media {
	position: relative;
	display: block;
	width: 100%;
	border-bottom: 1px solid var(--ll-border-soft);
	background-color: var(--ll-surface-sunken);
}

/* Art within 15% of the frame ratio fills it; the residual crop is invisible. */
.ll-main .ll-card__media--cover .ll-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/*
 * Art the frame would crop by more than 15% is contained, never cropped, and
 * the template wraps it in a .ll-card__media-frame sized to the image's own
 * ratio. That catches the 24 book covers at 1000x1000, the 6 brochure datasheet
 * mockups at 768x512 and the 768x480 video title card - all of which carry text
 * burned into the artwork that object-fit:cover would slice off. The rule is
 * the crop depth, not "is it square", so it holds for future uploads too. The
 * letterbox is dressed as a product shot rather than left as dead space.
 */
.ll-main .ll-card__media--contain {
	background-color: var(--ll-surface);
	background-image: linear-gradient(160deg, #f7f8fa 0%, #eef1f5 100%);
}

.ll-main .ll-card__media--contain .ll-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 0.875rem;
	object-fit: contain;
	object-position: center;
	filter: drop-shadow(0 6px 12px rgba(6, 22, 52, 0.22));
}

/*
 * The one !important in this file.
 *
 * Smush ships `.lazyload, .lazyloading { width: var(--smush-image-width,
 * var(--smush-placeholder-width)) !important; aspect-ratio: ... }` at (0,1,0)
 * with !important, which collapses an unloaded thumbnail to a 100px box and
 * makes it invisible without JS. The card template opts out with
 * `no-lazyload skip-lazy`, but that opt-out depends on plugin configuration
 * that this file does not own, so the geometry is pinned here as well.
 * (0,3,0) important beats (0,1,0) important; both are author origin, so
 * specificity decides.
 */
.ll-main .ll-card__media .ll-card__img {
	width: 100% !important;
	aspect-ratio: auto !important;
	opacity: 1 !important;
}

/* --- No image: a typographic plate, never a grey box --------------------
 *
 * 40% of items have no featured image and they are the money pages
 * (industries, solutions, laboratory-software, services), so this is a
 * first-class state. It reads as a deliberate cover: content type, topic name,
 * topic rule, on a tint of the topic colour.
 */

.ll-main .ll-card__media--typographic {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--ll-s2);
	padding: var(--ll-s5);
	background-color: var(--ll-surface-sunken);
	background-image: linear-gradient(150deg, #ffffff 0%, #eef1f5 100%);
}

/*
 * Two of the three topic colours are near-black navies (#1e3c77, #061634), so
 * a tint of them alone lands somewhere close to grey. This band puts the topic
 * colour on screen at full strength on every no-image card, which is also the
 * cue that the card is a destination page rather than an article with art.
 */
.ll-main .ll-card__media--typographic::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background-color: var(--ll-topic, #1e3c77);
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.ll-main .ll-card__media--typographic {
		background-image: linear-gradient(
				150deg,
				#ffffff 0%,
				color-mix(in srgb, var(--ll-topic, #1e3c77) 20%, #fff) 100%
			),
			repeating-linear-gradient(
				135deg,
				color-mix(in srgb, var(--ll-topic, #1e3c77) 9%, transparent) 0 1px,
				transparent 1px 9px
			);
	}
}

.ll-main .ll-card__plate-type {
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ll-muted);
}

.ll-main .ll-card__plate-topic {
	font-family: var(--ll-font-body);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ll-navy);
	/* Progressive: a darkened topic tone. Falls back to navy. */
	color: color-mix(in srgb, var(--ll-topic, #1e3c77) 72%, #000);
	overflow-wrap: anywhere;
}

.ll-main .ll-card__plate-rule {
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: var(--ll-s1);
	border-radius: 2px;
	background-color: var(--ll-topic, #1e3c77);
}

/* --- Card body ---------------------------------------------------------- */

.ll-main .ll-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--ll-s4) var(--ll-s4) var(--ll-s5);
}

@media (min-width: 979px) {
	.ll-main .ll-card__body {
		padding: var(--ll-s5) var(--ll-s5) var(--ll-s5);
	}
}

.ll-main .ll-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ll-s2);
	margin: 0 0 var(--ll-s2);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ll-main .ll-card__type {
	color: var(--ll-brand-2);
}

.ll-main .ll-card__date {
	display: inline-flex;
	align-items: center;
	gap: var(--ll-s2);
	letter-spacing: 0.06em;
	color: var(--ll-muted);
}

.ll-main .ll-card__date::before {
	content: "";
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--ll-border);
}

/*
 * Card title. Open Sans 700, because Roboto 700 is not loaded on these routes
 * and would render as synthesised faux bold. Beats the stack's
 * h3,.h3 { font-size: 228.5% } and the customiser's h3 a { color:#333 }.
 *
 * The title is never clamped. Titles run to 115 characters in the inventory
 * and the title is the one thing a person scans, so it wraps freely and the
 * summary below absorbs the variation instead.
 */
.ll-main .ll-card__title {
	margin: 0;
	font-family: var(--ll-font-body);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--ll-heading);
	overflow-wrap: anywhere;
}

@media (min-width: 979px) {
	.ll-main .ll-card__title {
		font-size: 1.125rem;
	}
}

.ll-main .ll-card__link {
	color: inherit;
	text-decoration: none;
	border-radius: 2px;
}

/*
 * Stretched link: the whole card is one hit target and one tab stop. The
 * overlay anchors to .ll-card because .ll-card__body is deliberately not
 * positioned.
 */
.ll-main .ll-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ll-radius);
}

.ll-main .ll-card:hover .ll-card__link,
.ll-main .ll-card__link:hover {
	color: var(--ll-brand-2);
}

/*
 * The ring is painted on the overlay so it frames the whole card rather than
 * the few words of the title. It has to be an INSET shadow: .ll-card sets
 * overflow:hidden to clip the media to the border radius, and an outset shadow
 * on a child would be clipped away with it.
 *
 * The bands are the same navy-then-white as --ll-focus-ring, in inset order.
 * This one used to be #f48220 over a white halo, which reads as the brand but
 * measures 2.61:1 against the white card body on both of its edges, i.e. under
 * the 3:1 of SC 1.4.11 exactly like the washes elsewhere in this file. Navy is
 * 10.67:1 against the card body and 7.05:1 against the #ddd card border, and
 * the inner white band keeps it visible when the ring crosses a dark
 * photograph in the media slot. The orange still marks the card, on the
 * typographic plate and the topic pills, where it is not load bearing.
 */
.ll-main .ll-card__link:focus-visible {
	outline: 2px solid transparent;
	/*
	 * Opt out of the shared ring: this element's ring lives on the ::after
	 * overlay below so it frames the whole card. Leaving the default here as
	 * well would draw a second ring around the few words of the title.
	 */
	box-shadow: none;
}

.ll-main .ll-card__link:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--ll-brand-2),
		inset 0 0 0 5px var(--ll-surface);
}

.ll-main .ll-card__summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: var(--ll-s2) 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ll-body);
}

/* --- Topic pills -------------------------------------------------------- */

.ll-main .ll-card__topics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ll-s1) var(--ll-s2);
	/* Pins the pills to the bottom so mixed content lengths still align. */
	margin: auto 0 0;
	padding: var(--ll-s4) 0 0;
	list-style: none;
}

.ll-main .ll-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	border: 1px solid var(--ll-border-soft);
	border-radius: 999px;
	padding: 0.1875rem 0.5rem 0.1875rem 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--ll-heading);
	background-color: var(--ll-surface);
}

.ll-main .ll-pill::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--ll-topic, #1e3c77);
}

@supports (background: color-mix(in srgb, red 10%, white)) {
	.ll-main .ll-pill {
		border-color: color-mix(in srgb, var(--ll-topic, #1e3c77) 24%, #fff);
		background-color: color-mix(in srgb, var(--ll-topic, #1e3c77) 7%, #fff);
		color: color-mix(in srgb, var(--ll-topic, #1e3c77) 72%, #000);
	}
}

/* ==========================================================================
   8. PAGINATION
   ========================================================================== */

.ll-main .ll-pagination {
	margin: 0 0 var(--ll-s6);
	padding-top: var(--ll-s5);
	border-top: 1px solid var(--ll-border);
}

.ll-main .ll-pagination .screen-reader-text {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
}

.ll-main .ll-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--ll-s2);
}

.ll-main .ll-pagination .page-numbers {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius-sm);
	padding: 0 0.625rem;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ll-body);
	background-color: var(--ll-surface);
	text-decoration: none;
}

.ll-main .ll-pagination a.page-numbers:hover {
	border-color: var(--ll-brand-2);
	color: var(--ll-brand-2);
}

.ll-main .ll-pagination a.page-numbers:focus-visible {
	border-color: var(--ll-brand-2);
	box-shadow: var(--ll-focus-ring);
}

/*
 * Current page. Brand primary marks the active state, as the contract asks,
 * but as an underscore rather than a fill: white on #f48220 is 2.605:1 and a
 * page number has to stay readable.
 *
 * The border is #061634, not #f48220. "Current" is a component state, so SC
 * 1.4.11 wants the visual that identifies it to clear 3:1 against what is
 * adjacent, and #f48220 on #fff is 2.605:1, so the orange alone could not
 * carry the state. Navy is 17.9:1 against the chip and clearly distinct from the
 * #ddd resting border on every neighbouring number, so the border is now what
 * identifies the state and the orange underscore is brand reinforcement on top
 * of it rather than the sole signal. (aria-current="page" from
 * paginate_links() already covers the non-visual half.)
 */
.ll-main .ll-pagination .page-numbers.current {
	border-color: var(--ll-navy);
	color: var(--ll-heading);
	background-color: var(--ll-surface);
	box-shadow: inset 0 -3px 0 0 var(--ll-brand);
}

.ll-main .ll-pagination .page-numbers.dots {
	min-width: 1.5rem;
	border-color: transparent;
	padding: 0;
	color: var(--ll-muted);
	background-color: transparent;
}

.ll-main .ll-pagination .page-numbers.prev,
.ll-main .ll-pagination .page-numbers.next {
	padding: 0 1rem;
}

/*
 * Below 480 the numbers plus both labels no longer fit on one line and wrap
 * into a ragged block. Giving Previous and Next their own full-width rows
 * (they are the first and last children, so the order already works out) keeps
 * the number row intact and makes both controls comfortable thumb targets.
 */
@media (max-width: 479px) {
	.ll-main .ll-pagination .nav-links {
		row-gap: var(--ll-s2);
	}

	.ll-main .ll-pagination .page-numbers.prev,
	.ll-main .ll-pagination .page-numbers.next {
		flex: 1 0 100%;
		padding: 0 0.75rem;
	}
}

/* ==========================================================================
   9. EMPTY STATES
   ========================================================================== */

.ll-main .ll-no-results {
	margin: 0;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	padding: var(--ll-s5);
	background-color: var(--ll-surface);
}

@media (min-width: 767px) {
	.ll-main .ll-no-results {
		padding: var(--ll-s6);
	}
}

.ll-main .ll-no-results__heading {
	margin: 0;
	font-family: var(--ll-font-head);
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--ll-heading);
	overflow-wrap: anywhere;
}

@media (min-width: 767px) {
	.ll-main .ll-no-results__heading {
		font-size: 2rem;
	}
}

.ll-main .ll-no-results__intro {
	max-width: 60ch;
	margin: var(--ll-s2) 0 var(--ll-s5);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ll-body);
}

.ll-main .ll-no-results__subheading {
	margin: 0 0 var(--ll-s3);
	font-family: var(--ll-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ll-muted);
}

.ll-main .ll-no-results__cols {
	display: grid;
	gap: var(--ll-s5);
	padding-top: var(--ll-s5);
	border-top: 1px solid var(--ll-border-soft);
}

@media (min-width: 767px) {
	.ll-main .ll-no-results__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ll-s6);
	}
}

.ll-main .ll-no-results__tips {
	margin: 0;
	padding: 0 0 0 1.125rem;
	list-style: disc;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--ll-body);
}

.ll-main .ll-no-results__tips li {
	margin: 0 0 var(--ll-s2);
}

.ll-main .ll-no-results__tips li::marker {
	color: var(--ll-brand);
}

.ll-main .ll-no-results__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ll-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ll-main .ll-no-results__suggestions li {
	margin: 0;
}

.ll-main .ll-no-results__topics,
.ll-main .ll-no-results__destinations {
	margin-top: var(--ll-s5);
	padding-top: var(--ll-s5);
	border-top: 1px solid var(--ll-border-soft);
}

.ll-main .ll-no-results__topic-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ll-s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 767px) {
	.ll-main .ll-no-results__topic-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ll-main .ll-topic-card {
	margin: 0;
	border: 1px solid var(--ll-border);
	border-left: 3px solid var(--ll-topic, #1e3c77);
	border-radius: var(--ll-radius-sm);
	padding: var(--ll-s4);
	background-color: var(--ll-surface);
	transition: border-color var(--ll-ease), box-shadow var(--ll-ease);
}

.ll-main .ll-topic-card:hover {
	box-shadow: var(--ll-shadow-lift);
}

.ll-main .ll-topic-card__title {
	margin: 0;
	font-family: var(--ll-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--ll-heading);
}

.ll-main .ll-topic-card__title a {
	color: inherit;
	text-decoration: none;
	border-radius: 2px;
}

.ll-main .ll-topic-card__title a:hover {
	color: var(--ll-brand-2);
}

/*
 * No :focus-visible rule here on purpose. The link carries no resting
 * box-shadow, so the shared --ll-focus-ring reaches it untouched. The override
 * that used to sit here only restated a weaker colour.
 */

.ll-main .ll-topic-card__desc {
	margin: var(--ll-s2) 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ll-muted);
}

.ll-main .ll-no-results__destination-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ll-border-soft);
}

.ll-main .ll-no-results__destination-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ll-s1) var(--ll-s3);
	margin: 0;
	padding: var(--ll-s3) 0;
	border-bottom: 1px solid var(--ll-border-soft);
}

.ll-main .ll-no-results__destination-list a {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ll-brand-2);
	text-decoration: none;
	border-radius: 2px;
}

.ll-main .ll-no-results__destination-list a::after {
	content: " \2192";
	/* Right arrow, decorative; the link text already carries the meaning. */
}

/*
 * The underline is the state change; the orange rides on it instead of on the
 * text. These five links are the only way out of a no-results page, so they
 * hold 10.67:1 in every state rather than dropping to 2.61:1 under the pointer.
 */
.ll-main .ll-no-results__destination-list a:hover {
	color: var(--ll-brand-2);
	text-decoration: underline;
	text-decoration-color: var(--ll-brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.ll-main .ll-no-results__destination-note {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ll-muted);
}

/* Archive with nothing in it. Same shell, shorter copy. */
.ll-main .ll-archive__empty {
	margin: 0;
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	padding: var(--ll-s6) var(--ll-s5);
	background-color: var(--ll-surface-sunken);
}

.ll-main .ll-archive__empty h2 {
	margin: 0 0 var(--ll-s4);
	font-family: var(--ll-font-head);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--ll-heading);
}

.ll-main .ll-archive__empty p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
}

.ll-main .ll-archive__empty a {
	font-weight: 700;
	color: var(--ll-brand-2);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ll-main .ll-archive__empty a:hover {
	color: var(--ll-brand-2);
	text-decoration-color: var(--ll-brand);
	text-decoration-thickness: 2px;
}

/*
 * Type-filter empty state.
 *
 * #ll-type-empty is rendered by the filter bar and moved below the grid by its
 * script. It appears when a bookmarked or shared fragment (/?s=lims&paged=5
 * #type=book) selects a type that nothing on this page of results carries, so
 * "Show all types" is the ONLY recovery affordance on that screen.
 *
 * It has to announce itself as a link on its own. The stack ships a bare
 * `a { text-decoration: none }` and declares no link colour anywhere, so an
 * unstyled anchor here inherits #444 from .ll-main and renders as body text
 * immediately beside the #444 hint that follows it. Same treatment as
 * .ll-page-head__clear and .ll-no-results__destination-list a: bold, brand
 * secondary, underlined, with brand primary on the underline on hover.
 */
.ll-main .ll-results__empty-clear {
	font-weight: 700;
	color: var(--ll-brand-2);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	border-radius: var(--ll-radius-sm);
}

.ll-main .ll-results__empty-clear:hover {
	color: var(--ll-brand-2);
	text-decoration-color: var(--ll-brand);
	text-decoration-thickness: 2px;
}

/* No :focus-visible rule: nothing here beats the shared --ll-focus-ring. */

/*
 * The hint is supporting copy, so it drops back off the link's weight. The
 * margin is not decoration: the focus ring is drawn 4px outside the link box
 * and the single collapsed space in the source is narrower than that, so
 * without it the ring sits hard against the first word of the hint.
 */
.ll-main .ll-results__empty-hint {
	margin-left: var(--ll-s2);
	color: var(--ll-muted);
}

/* ==========================================================================
   10. PREFERENCES AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ll-main a,
	.ll-main button,
	.ll-main input,
	.ll-main .ll-card,
	.ll-main .ll-topic-card {
		transition: none;
	}

	.ll-main .ll-card:hover {
		transform: none;
	}
}

/*
 * Forced colours (Windows High Contrast and friends) discard box-shadow
 * outright, so every ring above disappears there. The transparent outline each
 * focus rule keeps is what gets repainted; this block gives it a real width and
 * a system colour so the focus state survives with the author palette gone.
 * .ll-card__link is listed by name because it sets `box-shadow: none` and
 * paints its ring on the ::after overlay, which is also a box-shadow.
 */
@media (forced-colors: active) {
	.ll-main :focus-visible,
	.ll-main .ll-card__link:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
}

@media print {
	.ll-main .ll-filter-bar,
	.ll-main .ll-pagination,
	.ll-main .ll-search-form__submit {
		display: none;
	}

	.ll-main .ll-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ll-s4);
	}

	.ll-main .ll-card {
		break-inside: avoid;
		box-shadow: none;
	}
}