/**
 * UK Social Care Directory — Layout primitives
 * ----------------------------------------------------------------------------
 * Mobile-first. Every one of these starts as a single column and opts into
 * more at a breakpoint — that is what replaces the 25 hardcoded
 * `grid-template-columns: 1fr 1fr` declarations that never collapsed on a
 * phone.
 *
 * TWO RULES THAT MATTER MORE THAN THEY LOOK:
 *
 *   1. `minmax(0, 1fr)` — never a bare `1fr`. A bare `1fr` means
 *      `minmax(auto, 1fr)`, so its floor is the widest unbreakable word in
 *      the cell. This data set is full of URNs, CRNs, postcodes and long
 *      URLs, so bare `1fr` is the direct cause of horizontal scroll today.
 *
 *   2. `min(100%, X)` inside `minmax()` for auto-fit grids. Without it, a
 *      320px or 360px floor overflows a 375px viewport once the gutter is
 *      applied. With it, the track is allowed to shrink below its floor when
 *      the container is genuinely narrower.
 *
 * Breakpoints (literals — custom properties do not work in @media):
 *   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1600
 */

/* --- Container -------------------------------------------------------- */

.scd-container {
	width: 100%;
	max-width: var(--scd-container);
	margin-inline: auto;
	padding-inline: var(--scd-gutter);
}

.scd-container--narrow { max-width: var(--scd-container-narrow); }
.scd-container--full { max-width: none; }

/* --- Stack: vertical rhythm ------------------------------------------
 * The owl selector applies margin only *between* children, so the first and
 * last never contribute stray outer space. */

.scd-stack > * + * { margin-top: var(--scd-stack-gap, var(--scd-space-4)); }

.scd-stack--xs { --scd-stack-gap: var(--scd-space-1); }
.scd-stack--sm { --scd-stack-gap: var(--scd-space-2); }
.scd-stack--md { --scd-stack-gap: var(--scd-space-4); }
.scd-stack--lg { --scd-stack-gap: var(--scd-space-6); }
.scd-stack--xl { --scd-stack-gap: var(--scd-space-10); }

/* --- Cluster: horizontal group that wraps -----------------------------
 * The workhorse for badge rows, button groups, meta lines. Replaces the
 * ~90 `display:flex; align-items:center; gap:Npx` inline attributes. */

.scd-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--scd-cluster-gap, var(--scd-space-3));
}

.scd-cluster--xs { --scd-cluster-gap: var(--scd-space-1); }
.scd-cluster--sm { --scd-cluster-gap: var(--scd-space-2); }
.scd-cluster--lg { --scd-cluster-gap: var(--scd-space-5); }
.scd-cluster--between { justify-content: space-between; }
.scd-cluster--center { justify-content: center; }
.scd-cluster--end { justify-content: flex-end; }
.scd-cluster--top { align-items: flex-start; }
.scd-cluster--baseline { align-items: baseline; }
.scd-cluster--nowrap { flex-wrap: nowrap; }

/* --- Grid: explicit column count, mobile-first ------------------------
 * Single column until `md`, then `--scd-grid-cols` columns. Set the count
 * with a modifier, not a bespoke media query. */

.scd-grid {
	display: grid;
	gap: var(--scd-grid-gap, var(--scd-space-5));
	grid-template-columns: minmax(0, 1fr);
}

.scd-grid--gap-sm { --scd-grid-gap: var(--scd-space-3); }
.scd-grid--gap-lg { --scd-grid-gap: var(--scd-space-8); }

@media (min-width: 768px) {
	.scd-grid {
		grid-template-columns: repeat(var(--scd-grid-cols, 2), minmax(0, 1fr));
	}
	.scd-grid--2 { --scd-grid-cols: 2; }
	.scd-grid--3 { --scd-grid-cols: 3; }
	.scd-grid--4 { --scd-grid-cols: 4; }
}

/* Four-column grids are too tight at tablet width; step them 1 -> 2 -> 4. */
@media (min-width: 768px) and (max-width: 1023px) {
	.scd-grid--4 { --scd-grid-cols: 2; }
}

/* --- Grid: content + sidebar ------------------------------------------
 * Stacks on mobile, splits at `lg`. This is the layout used by all three
 * single-* entity templates (currently three copies of a 900px query). */

.scd-grid--sidebar {
	display: grid;
	gap: var(--scd-space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.scd-grid--sidebar {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: start;
	}
	.scd-grid--sidebar-narrow {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}
	/* Sidebar first in the DOM (so it reads first on mobile) but shown
	 * second on desktop. Only safe because the sidebar is complementary
	 * content — never use this to reorder the primary reading order. */
	.scd-grid--sidebar-start { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* --- Autogrid: responsive without breakpoints -------------------------
 * Replaces all 28 `repeat(auto-fit, minmax(Npx, 1fr))` declarations and
 * collapses their nine different floors down to three named sizes. */

.scd-autogrid {
	display: grid;
	gap: var(--scd-grid-gap, var(--scd-space-5));
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, var(--scd-autogrid-min, 260px)), 1fr)
	);
}

.scd-autogrid--dense { --scd-autogrid-min: 180px; }
.scd-autogrid--wide { --scd-autogrid-min: 340px; }

/* --- Sheet: scrollable overflow container -----------------------------
 * Wide content (tables, wide charts) must scroll inside its own box rather
 * than making the page scroll horizontally. */

.scd-sheet {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

/* --- Scroll strip: the mobile tab / nav pattern ------------------------
 * A horizontally scrollable, snapping row with the scrollbar hidden and
 * fade masks at the edges to signal there is more. Used by the 8-tab
 * provision nav and the main site nav, both of which currently either wrap
 * into several rows or stack vertically and push content off-screen. */

.scd-scroll-strip {
	display: flex;
	gap: var(--scd-space-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* Room for focus rings, which would otherwise be clipped by overflow. */
	padding-block: var(--scd-space-1);
}

.scd-scroll-strip::-webkit-scrollbar { display: none; }
.scd-scroll-strip > * { scroll-snap-align: start; flex: 0 0 auto; }

@media (min-width: 768px) {
	/* Above md there is room to wrap, which is easier to scan than a strip. */
	.scd-scroll-strip {
		flex-wrap: wrap;
		overflow-x: visible;
		mask-image: none;
	}
}

/* --- Aspect-ratio media box -------------------------------------------
 * Replaces the fixed inline `height:380px` on every Leaflet map. */

.scd-ratio {
	width: 100%;
	aspect-ratio: var(--scd-ratio, 4 / 3);
	min-height: 240px;
	max-height: 520px;
}

@media (min-width: 768px) {
	.scd-ratio { --scd-ratio: 16 / 9; }
}

/* --- Centre / spacer helpers ------------------------------------------ */

.scd-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.scd-spacer { flex: 1 1 auto; }

/* --- Sticky ------------------------------------------------------------
 * `position:sticky` silently does nothing if any ancestor has
 * `overflow:hidden` — a very common trap inside Divi rows. */

.scd-sticky {
	position: sticky;
	top: var(--scd-sticky-top, var(--scd-space-5));
	z-index: var(--scd-z-sticky);
}