/**
 * WAR Theme - Layout primitives
 *
 * Two containers exist because the mockup uses two left edges:
 *   .war-container      -> lower sections, page gutter 70px
 *   .war-container-wide -> header + rail band, page gutter 33px
 */

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

.war-container-wide {
	width: 100%;
	max-width: var(--war-container-wide);
	margin-inline: auto;
	padding-inline: var(--war-s5);
}

/* ---- Rail band -------------------------------------------------- */
/* Holds the sidebar plus the sections that are inset behind it.     */

.war-band {
	display: grid;
	grid-template-columns: var(--war-rail-w) minmax(0, 1fr);
	column-gap: var(--war-rail-gap);
	align-items: start;
}

.war-band__main {
	min-width: 0;
	max-width: var(--war-band-main);
}

/* Sitewide rail: the band wraps the whole document.
   Scoped rail (default, matches mockup): the band ends after
   Recently Added and later sections return to .war-container. */
.war-layout--scoped .war-band {
	/* rail sticks while its own band scrolls, then releases */
}

.war-layout--sitewide .war-band {
	min-height: 100vh;
}

.war-layout--sitewide .war-band__main {
	max-width: none;
}

/* ---- Section rhythm --------------------------------------------- */

/* Each section is introduced by a hairline rule across the content
   measure, as drawn. The statistics band is the exception - it carries
   its own gradient border, so a rule above it would double up. */
.war-section {
	margin-block-start: var(--war-section);
	padding-block-start: var(--war-section-pad);
	border-block-start: 1px solid var(--war-line);
}

.war-section:first-child,
.war-section--bare {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.war-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--war-s5);
	margin-block-end: var(--war-s6);
}

.war-section__title-group {
	display: flex;
	align-items: baseline;
	gap: var(--war-s3);
}

.war-rule {
	height: 1px;
	background: var(--war-line);
	border: 0;
	margin: 0;
}