/**
 * Tim Scott: layout.
 *
 * The Bootstrap 4.6 grid and utilities the templates still print (the old
 * class names are kept so the page structure and every measurement stays
 * as it was), at the old em breakpoints, plus the post-content bits that
 * global-styles does not cover. Only rules that matched on the old site
 * (dream-used.css), values verbatim; a handful of spacing utilities that
 * the feature promo prints in its non-full-width variant are lifted from
 * dream.css so that variant keeps working.
 *
 * Contents: Containers · Grid · Columns and offsets · Utilities · Post
 * content (core blocks).
 *
 * @package TSC
 */

/* ==========================================================================
   Containers
   ========================================================================== */

.container,
.container-fluid {
	width: 100%;
	padding-right: var(--tsc-gutter);
	padding-left: var(--tsc-gutter);
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 23.75em) {
	.container {
		max-width: var(--tsc-container-sm);
	}
}

@media (min-width: 36em) {
	.container {
		max-width: var(--tsc-container-md);
	}
}

@media (min-width: 48em) {
	.container {
		max-width: var(--tsc-container-lg);
	}
}

@media (min-width: 64em) {
	.container {
		max-width: var(--tsc-container-xl);
	}
}

@media (min-width: 90em) {
	.container {
		max-width: var(--tsc-container-xxl);
	}
}

@media (min-width: 111.25em) {
	.container {
		max-width: var(--tsc-container-xxxl);
	}
}

/* ==========================================================================
   Grid
   ========================================================================== */

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(var(--tsc-gutter) * -1);
	margin-left: calc(var(--tsc-gutter) * -1);
}

.col,
.col-12,
.col-md-10,
.col-lg-10,
.col-xl-8,
.col-xl-10,
.col-xxxl-8,
.col-xxxl-10 {
	position: relative;
	width: 100%;
	padding-right: var(--tsc-gutter);
	padding-left: var(--tsc-gutter);
}

.col {
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;
}

.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* ==========================================================================
   Columns and offsets (md 36em · lg 48em · xl 64em · xxxl 111.25em)
   ========================================================================== */

@media (min-width: 36em) {
	.col-md-10 {
		flex: 0 0 83.33333333%;
		max-width: 83.33333333%;
	}

	.offset-md-1 {
		margin-left: 8.33333333%;
	}
}

@media (min-width: 48em) {
	.col-lg-10 {
		flex: 0 0 83.33333333%;
		max-width: 83.33333333%;
	}

	.offset-lg-1 {
		margin-left: 8.33333333%;
	}
}

@media (min-width: 64em) {
	.col-xl-8 {
		flex: 0 0 66.66666667%;
		max-width: 66.66666667%;
	}

	.col-xl-10 {
		flex: 0 0 83.33333333%;
		max-width: 83.33333333%;
	}

	.offset-xl-1 {
		margin-left: 8.33333333%;
	}

	.offset-xl-2 {
		margin-left: 16.66666667%;
	}
}

@media (min-width: 111.25em) {
	.col-xxxl-8 {
		flex: 0 0 66.66666667%;
		max-width: 66.66666667%;
	}

	.col-xxxl-10 {
		flex: 0 0 83.33333333%;
		max-width: 83.33333333%;
	}

	.offset-xxxl-1 {
		margin-left: 8.33333333%;
	}

	.offset-xxxl-2 {
		margin-left: 16.66666667%;
	}
}

/* ==========================================================================
   Utilities (Bootstrap names, !important as Bootstrap prints them)
   ========================================================================== */

.img-fluid {
	max-width: 100%;
	height: auto;
}

/* Flex direction: the nav lists print flex-column + flex-{bp}-row. */
.flex-column {
	flex-direction: column !important;
}

.flex-xs-row {
	flex-direction: row !important;
}

@media (min-width: 48em) {
	.flex-lg-row {
		flex-direction: row !important;
	}
}

@media (min-width: 64em) {
	.flex-xl-row {
		flex-direction: row !important;
	}
}

/* Spacing. The theme's spacer scale, from dream.css. */
.p-0 {
	padding: 0 !important;
}

.pl-0 {
	padding-left: 0 !important;
}

.pr-0 {
	padding-right: 0 !important;
}

.pt-5 {
	padding-top: 1rem !important;
}

.pb-5 {
	padding-bottom: 1rem !important;
}

.pb-6 {
	padding-bottom: 1.667rem !important;
}

.mb-6 {
	margin-bottom: 1.667rem !important;
}

.pt-7 {
	padding-top: 2.5rem !important;
}

.pt-8 {
	padding-top: 3.333rem !important;
}

.pb-8 {
	padding-bottom: 3.333rem !important;
}

@media (min-width: 36em) {
	.p-md-6 {
		padding: 1.667rem !important;
	}
}

@media (min-width: 48em) {
	.pt-lg-10 {
		padding-top: 5rem !important;
	}
}

@media (min-width: 64em) {
	.p-xl-8 {
		padding: 3.333rem !important;
	}
}

/* Colour utilities. bg-{slug} / text-{slug} come from the Page Options and
   Feature Promo selects; only the two that print today had rules. */
.bg-primary {
	background-color: #2e3e72 !important;
}

.bg-white {
	background-color: #fff !important;
}

.text-primary {
	color: #2e3e72 !important;
}

.text-white {
	color: #fff !important;
}

/* ==========================================================================
   Post content (core blocks)
   ==========================================================================
   Layout (is-layout-flex, columns, gallery gaps) comes from global-styles
   and the per-block core CSS, which stay enqueued; these are the theme's
   own wordpress/blocks/_image.scss rules (posts 1309 and 1333). */

/* Centred below 48em only (the old rule was max-width: 47.98em). */
.wp-block-image {
	text-align: center;
}

.wp-block-image img {
	object-fit: cover;
}

.wp-block-image:not(.is-style-rounded) img {
	height: auto;
}

/*
 * Classic image blocks (div.wp-block-image > figure.align*, posts 1375 and
 * 1384): below 48em the figure shrinks to its image and stops floating.
 * From 48em the figure is a block again and core's alignment floats apply.
 */
.wp-block-image figure {
	display: inline-block;
}

.wp-block-image figure.aligncenter,
.wp-block-image figure.alignleft,
.wp-block-image figure.alignright {
	float: none;
	margin-bottom: 1.875rem;
}

@media (min-width: 48em) {
	.wp-block-image {
		text-align: inherit;
	}

	.wp-block-image figure {
		display: block;
	}

	.wp-block-image figure.alignleft {
		float: left;
	}

	.wp-block-image figure.alignright {
		float: right;
	}
}
