/* ─── AL Page — shared chrome for every template except the homepage ───
   Page hero, breadcrumb, prose body, sticky aside, pagination, plain grids.
   Per-template stylesheets add only what is genuinely new. */

/* ── Page hero ── */
/* padding-block, never the shorthand — see hero.css */
.al-phero { padding-block: 54px 0; position: relative; }
.al-phero::before {
	content: ""; position: absolute; inset: -80px 0 auto 0; height: 460px; z-index: 0;
	background:
		radial-gradient(700px 380px at 84% 0%, rgba(227,73,58,.08), transparent 64%),
		radial-gradient(620px 360px at 4% 26%, rgba(233,178,0,.06), transparent 62%);
	pointer-events: none;
}
.al-phero > * { position: relative; z-index: 1; }
.al-phero__in { padding-bottom: 56px; }
.al-phero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; margin: 16px 0 0; letter-spacing: -.035em; max-width: 15ch; }
.al-phero h1 em { font-style: normal; color: var(--red); }
.al-phero__lead { font-size: 18.5px; color: var(--ink-3); max-width: 620px; margin: 20px 0 0; }
.al-phero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.al-phero--center { text-align: center; }
.al-phero--center h1, .al-phero--center .al-phero__lead { margin-inline: auto; }
.al-phero--center .al-eyebrow { justify-content: center; }
.al-phero--center .al-phero__actions { justify-content: center; }
.al-phero--center .al-crumbs { justify-content: center; }

/* Split page hero — copy left, one image right */
.al-phero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; }
.al-phero__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1); position: relative; }
.al-phero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ── Breadcrumb ── */
.al-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 13.5px; color: var(--ink-3); }
.al-crumbs a { text-decoration: none; color: var(--ink-3); border-bottom: 1px solid transparent; transition: color .16s ease, border-color .16s ease; }
.al-crumbs a:hover { color: var(--red); border-bottom-color: currentColor; }
/* separator trails its own item — as ::before it led the line when the trail wrapped */
.al-crumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--line); }
.al-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ── Two-column body: content + sticky aside ── */
.al-body { display: grid; grid-template-columns: minmax(0,1fr) 366px; gap: 64px; align-items: start; }
.al-body > * { min-width: 0; }

.al-aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 20px; }
.al-panel { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 28px 28px 30px; }
.al-panel h3 { font-size: 20px; margin: 0 0 10px; }
.al-panel p { font-size: 15.5px; color: var(--ink-3); margin: 0 0 20px; }
.al-panel--dark { background: var(--ink); color: #b0b0ba; position: relative; overflow: hidden; }
.al-panel--dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 88% 0%, rgba(227,73,58,.30), transparent 66%); }
.al-panel--dark > * { position: relative; z-index: 1; }
.al-panel--dark h3 { color: #fff; }
.al-panel--dark p { color: #8f8f99; }
.al-panel .al-combo__phone { margin-bottom: 18px; }
/* the phone block is authored for the dark combo — recolour it on a light panel */
.al-panel:not(.al-panel--dark) .al-combo__phone b { color: var(--ink); }
.al-panel:not(.al-panel--dark) .al-combo__phone small { color: var(--ink-3); }

/* Aside link list */
.al-sidelist { list-style: none; margin: 0; padding: 0; }
.al-sidelist li + li { border-top: 1px solid var(--line-2); }
.al-sidelist a { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; padding: 13px 0; font-size: 15.5px; color: var(--ink-2); transition: color .16s ease, padding .16s ease; }
.al-sidelist a svg { width: 15px; height: 15px; stroke: var(--red); flex: none; opacity: 0; transform: translateX(-6px); transition: opacity .16s ease, transform .16s ease; }
.al-sidelist a:hover { color: var(--red); }
.al-sidelist a:hover svg { opacity: 1; transform: none; }
.al-sidelist [aria-current] { color: var(--red); font-weight: 700; }
.al-sidelist [aria-current] svg { opacity: 1; transform: none; }

/* ── Prose ── */
.al-prose { font-size: 17.5px; color: var(--ink-2); }
.al-prose > * + * { margin-top: 24px; }
.al-prose h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 48px; letter-spacing: -.03em; }
.al-prose h3 { font-size: 21px; margin-top: 36px; }
.al-prose p { margin: 0; }
/* `.al-prose > * + *` above sets 24px between children, but `.al-prose p` (0,1,1) outranks it
   (0,1,0) and zeroes it — so consecutive paragraphs rendered with NO gap at all, which is what
   made the town pages read as a wall of text. These restate the spacing above that weight. */
.al-prose > p + p { margin-top: 24px; }
.al-prose > p + ul, .al-prose > p + ol { margin-top: 24px; }
.al-prose a { color: var(--red); text-underline-offset: 3px; }
.al-prose ul, .al-prose ol { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 12px; }
.al-prose ul li { display: flex; gap: 12px; align-items: flex-start; }
.al-prose ul li svg { width: 19px; height: 19px; stroke: var(--green); stroke-width: 2.4; flex: none; margin-top: 3px; }
.al-prose ol { counter-reset: al-o; }
.al-prose ol li { display: flex; gap: 14px; align-items: flex-start; counter-increment: al-o; }
.al-prose ol li::before {
	content: counter(al-o); flex: none; width: 27px; height: 27px; border-radius: 50%;
	background: var(--bone); border: 1px solid var(--line); display: grid; place-items: center;
	font-family: var(--font-display); font-size: 13.5px; font-weight: 800; color: var(--ink);
}
.al-prose blockquote { margin: 0; padding: 24px 28px; background: var(--bone); border-radius: var(--r-lg); font-size: 19px; color: var(--ink); }
.al-prose img { border-radius: var(--r-lg); }
.al-prose figure { margin: 0; }
.al-prose figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-3); }

/* ── Generic tile grids ── */
.al-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.al-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.al-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.al-grid-2 > *, .al-grid-3 > *, .al-grid-4 > * { min-width: 0; }

.al-tilecard {
	display: flex; flex-direction: column;
	background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1);
	padding: 28px 26px 30px; text-decoration: none;
	transition: transform .22s ease, box-shadow .22s ease;
}
a.al-tilecard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.al-tilecard i {
	width: 46px; height: 46px; border-radius: var(--r); background: var(--red);
	display: grid; place-items: center; margin-bottom: 18px;
	box-shadow: 0 8px 20px rgba(227,73,58,.28);
}
.al-tilecard i svg { width: 22px; height: 22px; stroke: #fff; }
.al-tilecard h3 { font-size: 19px; margin: 0 0 9px; }
.al-tilecard p { font-size: 15.5px; color: var(--ink-3); margin: 0; }
.al-tilecard__more { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; padding-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--red); }
.al-tilecard__more svg { width: 15px; height: 15px; stroke: currentColor; transition: transform .18s ease; }
a.al-tilecard:hover .al-tilecard__more svg { transform: translateX(4px); }

/* ── Pagination ── */
.al-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; list-style: none; padding: 0; }
.al-pager a, .al-pager span {
	min-width: 46px; height: 46px; padding: 0 14px; border-radius: var(--r-pill);
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-display); font-weight: 700; font-size: 15px;
	text-decoration: none; color: var(--ink); border: 1.5px solid var(--line);
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.al-pager a:hover { border-color: var(--ink); }
.al-pager [aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.al-pager svg { width: 15px; height: 15px; stroke: currentColor; }

/* ── Focus ring, every clickable card ── */
a.al-tilecard:focus-visible, .al-crumbs a:focus-visible, .al-sidelist a:focus-visible,
.al-pager a:focus-visible {
	outline: 3px solid var(--red); outline-offset: 3px; border-radius: var(--r);
}

/* ── Responsive ── */
@media (max-width: 1080px) {
	.al-body { grid-template-columns: 1fr; gap: 48px; }
	.al-aside { position: static; grid-template-columns: repeat(2, 1fr); }
	.al-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.al-phero__grid { grid-template-columns: 1fr; gap: 36px; }
	.al-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.al-phero { padding-top: 34px; }
	.al-phero__in { padding-bottom: 38px; }
	.al-phero h1 { max-width: none; }
	.al-aside { grid-template-columns: 1fr; }
	.al-grid-2, .al-grid-3, .al-grid-4 { grid-template-columns: 1fr; }
	.al-prose { font-size: 16.5px; }
	.al-panel { padding: 24px 22px 26px; }
}

/* Advice callout in prose — was an unlabelled <blockquote>, which read as a stray grey slab */
.al-prose .al-tip {
	display: flex; gap: 18px; align-items: flex-start;
	background: var(--bone); border-radius: var(--r-lg); padding: 24px 28px 26px;
}
.al-prose .al-tip i {
	width: 40px; height: 40px; flex: none; border-radius: var(--r); background: var(--red);
	display: grid; place-items: center;
}
.al-prose .al-tip i svg { width: 22px; height: 12px; fill: #fff; stroke: none; }
.al-prose .al-tip i.al-tip__ico--stroke svg { width: 20px; height: 20px; fill: none; stroke: #fff; }
.al-prose .al-tip b {
	display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 13px;
	font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.al-prose .al-tip p { font-size: 17px; color: var(--ink); }

@media (max-width: 560px) {
	/* icon beside the text left it a 225px column in a 339px box */
	.al-prose .al-tip { flex-direction: column; gap: 14px; padding: 22px 22px 24px; }
	.al-prose .al-tip p { font-size: 16px; }
}