/*
 * Layout: page container, the 16-column grid the templates already use
 * (".eleven.columns.alpha"), and the page regions.
 *
 * The grid is fluid: a column takes n/16 of its row instead of a fixed pixel
 * width, so every width between 320 and 960 works. Below 768px columns stack.
 * Columns nested in a column divide that column (".four" inside ".eleven"
 * is 4/11 of it), like the old fixed widths did.
 */

.container {
	position: relative;
	max-width: calc(var(--container) + 2 * var(--page-pad));
	margin: 0 auto;
	padding: 0 var(--page-pad);
}

.container::after {
	content: "";
	display: table;
	clear: both;
}

/* A container inside a container (news teaser, list item) is just a row */
.container .container {
	max-width: none;
	padding: 0;
}

.columns, .column { --n: 16; }
.one.columns, .one.column { --n: 1; }
.two.columns { --n: 2; }
.three.columns { --n: 3; }
.four.columns { --n: 4; }
.five.columns { --n: 5; }
.six.columns { --n: 6; }
.seven.columns { --n: 7; }
.eight.columns { --n: 8; }
.nine.columns { --n: 9; }
.ten.columns { --n: 10; }
.eleven.columns { --n: 11; }
.twelve.columns { --n: 12; }
.thirteen.columns { --n: 13; }
.fourteen.columns { --n: 14; }
.fifteen.columns { --n: 15; }
.sixteen.columns { --n: 16; }

@media (min-width: 768px) {
	.columns,
	.column {
		--outer: var(--n);
		float: left;
		width: calc(var(--n) / 16 * (100% + var(--gutter)) - var(--gutter));
		margin-right: var(--gutter);
	}

	.columns .columns,
	.column .column {
		--outer: inherit;
		width: calc(var(--n) / var(--outer) * (100% + var(--gutter)) - var(--gutter));
	}

	.columns.omega,
	.column.omega {
		margin-right: 0;
	}
}

/* Page regions -------------------------------------------------------- */

.holder {
	min-height: 60vh;
}

/* Background image behind the page title. Desktop: under the header,
   behind the content. Small screens: a strip above the title. */
.bgImg {
	position: relative;
	z-index: -1;
	height: 190px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Small screens: the strip fades into the page and the title reaches into it */
@media (max-width: 767px) {
	.bgImg::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 60%;
		background: linear-gradient(var(--color-page-fade), var(--color-page-top));
	}

	.bgImg + .holder > :first-child {
		margin-top: calc(-1 * var(--hero-overlap));
	}
}

@media (min-width: 768px) {
	.bgImg {
		position: absolute;
		top: var(--header-h);
		left: 0;
		right: 0;
		height: var(--hero-h);
		background-size: auto;
	}
}

/* Page title above the white card */
.basic > h1,
.news > h1,
.gallery > h1 {
	margin: var(--space-3) 0 0;
	overflow-wrap: break-word;
}

@media (min-width: 768px) {
	.basic > h1,
	.news > h1,
	.gallery > h1 {
		margin-top: var(--space-5);
	}
}

/* The white card holding the page content */
.wrapper {
	margin-top: var(--space-3);
	padding: var(--card-pad);
	background: var(--color-surface);
}

.sidebar {
	margin-top: var(--space-3);
}

.boxShadow {
	box-shadow: var(--shadow);
	border-radius: var(--radius);
}

.error404 {
	min-height: 400px;
}