/* ==========================================================================
   BasicGrid - layout engine
   100% CSS Grid. No flexbox, no framework, no build step.
   Sticky footer is achieved with a 3-row grid: auto / 1fr / auto.
   ========================================================================== */

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

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
   Outer page grid: header row (auto), content row (1fr = grows to fill
   remaining viewport height), footer row (auto). This is what pins the
   footer to the bottom of the viewport on short pages, while letting it
   flow naturally below content on long pages.
   ------------------------------------------------------------------------- */
.site-wrap {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100vh;
}

/* -------------------------------------------------------------------------
   site-top wraps header + hero + breadcrumbs as a single grid child of
   site-wrap. This keeps site-wrap's three-track "auto 1fr auto" row
   template correct (header-block / growing content / footer) no matter
   whether the hero is published, so the sticky footer math never breaks.
   ------------------------------------------------------------------------- */
.site-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* -------------------------------------------------------------------------
   Header: its own small grid (branding/banner stacked over nav/breadcrumbs)
   ------------------------------------------------------------------------- */
.site-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 1.5rem;
	max-width: var(--bg-max-width, 1200px);
	width: 100%;
	margin-inline: auto;
	padding: 1rem 1.25rem;
}

.is-fluid .site-header__inner,
.is-fluid .site-main-grid,
.is-fluid .site-footer__inner {
	max-width: none;
}

.site-nav {
	display: grid;
	max-width: var(--bg-max-width, 1200px);
	width: 100%;
	margin-inline: auto;
	padding: 0 1.25rem;
}

.site-breadcrumbs {
	display: grid;
	max-width: var(--bg-max-width, 1200px);
	width: 100%;
	margin-inline: auto;
	padding: 0.5rem 1.25rem;
}

/* -------------------------------------------------------------------------
   Hero / masthead: full-bleed band. Its inner content is centered and
   capped to the same max-width as the rest of the page, and is itself a
   grid so multi-part hero content (heading + subtext + CTA, or text +
   image) can be arranged without flexbox.
   ------------------------------------------------------------------------- */
.site-hero {
	display: grid;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.site-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	justify-items: start;
	gap: 0.75rem;
	max-width: var(--bg-max-width, 1200px);
	width: 100%;
	margin-inline: auto;
	padding: 2.5rem 1.25rem;
}

/* Optional two-column hero: a "hero" module + a second module both
   published to the hero position will sit side by side on wide screens. */
.site-hero__inner:has(> :nth-child(2)) {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: center;
}

@media (max-width: 900px) {
	.site-hero__inner:has(> :nth-child(2)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-hero__inner {
		padding: 2rem 1.25rem;
	}
}

@media (max-width: 600px) {
	.site-hero__inner {
		padding: 1.5rem 1rem;
	}
}

/* -------------------------------------------------------------------------
   Main content grid: sidebars + main column, all placed with CSS Grid.
   Default (no sidebars): a single centered column.
   ------------------------------------------------------------------------- */
.site-main-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	max-width: var(--bg-max-width, 1200px);
	width: 100%;
	margin-inline: auto;
	padding: 1.5rem 1.25rem;
}

.no-sidebars .site-main-grid {
	grid-template-columns: minmax(0, 1fr);
}

.has-sidebar-left .site-main-grid {
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	grid-template-areas: "sidebar-left main";
}

.has-sidebar-right .site-main-grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
	grid-template-areas: "main sidebar-right";
}

.has-both-sidebars .site-main-grid {
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 220px);
	grid-template-areas: "sidebar-left main sidebar-right";
}

.sidebar--left {
	grid-area: sidebar-left;
}

.sidebar--right {
	grid-area: sidebar-right;
}

.main-content {
	grid-area: main;
	min-width: 0; /* prevents grid blowout from wide content e.g. tables/images */
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
	display: grid;
}

.site-footer__inner {
	max-width: var(--bg-max-width, 1200px);
	width: 100%;
	margin-inline: auto;
	padding: 1.5rem 1.25rem;
}

/* -------------------------------------------------------------------------
   Sidebar module stacking (each sidebar is itself a small grid of cards)
   ------------------------------------------------------------------------- */
.sidebar {
	display: grid;
	gap: 1.25rem;
	align-content: start;
}

/* -------------------------------------------------------------------------
   Responsive behaviour
   Below 900px: sidebars drop beneath main content, single column.
   Grid-only reflow - no source-order tricks needed beyond `order`.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.has-sidebar-left .site-main-grid,
	.has-sidebar-right .site-main-grid,
	.has-both-sidebars .site-main-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"main"
			"sidebar-left"
			"sidebar-right";
	}

	.site-header__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.75rem;
	}
}

@media (max-width: 600px) {
	.site-main-grid {
		padding: 1rem;
		gap: 1.25rem;
	}

	.site-header__inner,
	.site-nav,
	.site-breadcrumbs,
	.site-footer__inner {
		padding-inline: 1rem;
	}
}

/* -------------------------------------------------------------------------
   Utility: skip link (kept in the grid file since it needs precise placement)
   ------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1rem;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}