/**
 * TAG Strategies: layout.
 *
 * 1. The site shell (side-header grid), main wrapper and article wrapper.
 * 2. Containers: the legacy .container / .container-fluid
 *    that acf/section and acf/row print.
 * 3. The content layer: exactly the Bootstrap grid and utility classes that
 *    stored content, the footer widget and the old section templates use
 *    (class dump of published post_content + widget_block + block output,
 *    plus the grid classes the css-spec walk matched on home / about /
 *    tv-media), with dream.css values. Mobile-first. The grid keeps
 *    dream.css's breakpoints: sm 390, md 540 (33.75em, NOT 768), lg 992,
 *    xl 1024, xxl 1400, xxxl 1708, xxxxl 2300.
 * 4. The six ACF blocks' structural rules (block-section, video).
 *
 * @package TGS
 */

/* ==========================================================================
   1. Site shell
   ========================================================================== */

/*
 * header.php opens .tgs-site around header + main + footer, so plugin
 * output in wp_footer() never lands in the grid. Old: html.side-header body
 * grid (child _elements.scss:39-80). The header is position:fixed, so below
 * 992 its row is empty; from 992 it sits over the 10rem first column.
 */
.tgs-site {
	display: grid;
	/* 1fr, not minmax(0, 1fr): as before, over-wide content (the 172px
	   "404." on a phone) widens the track instead of overflowing it. */
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}

.tgs-site__main {
	grid-row: 2;
	grid-column: 1;
}

.tgs-site > .tgs-site-footer {
	grid-row: 3;
	grid-column: 1;
}

/* Phones: push the page below the fixed top bar (old mobile-padding.part.js
   did this below 540 on load; 540-767 is included so the bar never covers
   the page header). */
@media (max-width: 767.98px) {
	.tgs-site--side {
		padding-top: var(--tgs-header-h);
	}
}

@media (min-width: 992px) {
	.tgs-site--side {
		grid-template-columns: var(--tgs-side-w) 1fr;
		grid-template-rows: 1fr auto;
	}

	.tgs-site--side .tgs-site__main {
		grid-row: 1;
		grid-column: 2;
	}

	.tgs-site--side > .tgs-site-footer {
		grid-row: 2;
		grid-column: 2;
	}
}

/*
 * Article wrapper (page.php, single.php, the page templates; slices reuse
 * it). Old markup: section.article-content > .article-content--container >
 * --row > --column > .article-body. With has-content-gutters the container
 * padded 12px, the row pulled back 12px and the column padded 12px again,
 * so one 12px padding on a single element gives the identical box.
 */
.tgs-article {
	position: relative;
}

.tgs-article__content {
	position: relative;
}

/* Team singles had a static, transparent .article-content, so it painted
   under the fixed page header: on wide screens, where the header image runs
   past the 85vh header box, it covers the first lines of copy, as before. */
.post-type-team_members > .tgs-article__content {
	position: static;
}

/* Only pages had the gutters (dream: .include-content-containers
   .post-type-page .article-content--container); singles stay flush. */
.has-content-gutters .post-type-page .tgs-article__container {
	width: 100%;
	max-width: var(--tgs-container-xxxxl);
	padding-right: calc(var(--tgs-gutter-x) * 0.5);
	padding-left: calc(var(--tgs-gutter-x) * 0.5);
	margin-right: auto;
	margin-left: auto;
}

/* Pages and video singles: the black, ruled content panel that scrolls up
   over the fixed page header (child wordpress/_page.scss:39, _videos.scss:27). */
.tgs-article__content--panel {
	padding: 5.625rem var(--tgs-gutter-sm) var(--tgs-gutter-sm);
	background-color: var(--black);
	border-top: var(--tgs-rule);
}

@media (min-width: 1024px) {
	.tgs-article__content--panel {
		padding-right: var(--tgs-gutter-xl);
		padding-left: var(--tgs-gutter-xl);
	}
}

@media (min-width: 1400px) {
	.tgs-article__content--panel {
		padding-right: var(--tgs-gutter-xxl);
		padding-left: var(--tgs-gutter-xxl);
	}
}

.tgs-article__footer {
	position: relative;
	background-color: var(--black);
}

/* ==========================================================================
   2. Containers
   ========================================================================== */

.container,
.container-fluid {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-right: auto;
	margin-left: auto;
}

/* body.max-width-fluid-containers (always on): fluid containers cap at 150rem. */
.max-width-fluid-containers .container-fluid {
	max-width: var(--tgs-container-xxxxl);
}

@media (min-width: 390px) {
	.container {
		max-width: var(--tgs-container-sm);
	}
}

@media (min-width: 540px) {
	.container {
		max-width: var(--tgs-container-md);
	}
}

@media (min-width: 992px) {
	.container {
		max-width: var(--tgs-container-lg);
	}
}

@media (min-width: 1024px) {
	.container {
		max-width: var(--tgs-container-xl);
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: var(--tgs-container-xxl);
	}
}

@media (min-width: 1708px) {
	.container {
		max-width: var(--tgs-container-xxxl);
	}
}

@media (min-width: 2300px) {
	.container {
		max-width: var(--tgs-container-xxxxl);
	}
}

/* ==========================================================================
   3. Content layer: grid
   (editor.css mirrors the col / offset classes for the block editor, where
   each column sits in its own wrapper; add a new class in both places.)
   ========================================================================== */

.row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(var(--bs-gutter-y) * -1);
	margin-right: calc(var(--bs-gutter-x) * -0.5);
	margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
}

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.offset-1 { margin-left: 8.33333333%; }

@media (min-width: 540px) {
	.col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-md-6 { flex: 0 0 auto; width: 50%; }
	.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-md-12 { flex: 0 0 auto; width: 100%; }
	.offset-md-2 { margin-left: 16.66666667%; }
	.offset-md-4 { margin-left: 33.33333333%; }
}

@media (min-width: 992px) {
	.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-lg-12 { flex: 0 0 auto; width: 100%; }
	.offset-lg-0 { margin-left: 0; }
	.offset-lg-2 { margin-left: 16.66666667%; }
}

@media (min-width: 1024px) {
	.col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-xl-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1400px) {
	.col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
	.offset-xxl-1 { margin-left: 8.33333333%; }
}

@media (min-width: 1708px) {
	.col-xxxl-6 { flex: 0 0 auto; width: 50%; }
	.offset-xxxl-3 { margin-left: 25%; }
}

/* ==========================================================================
   3b. Content layer: utilities (all !important, as Bootstrap)
   ========================================================================== */

.d-none { display: none !important; }
.d-block { display: block !important; }
.overflow-hidden { overflow: hidden !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-70 { top: 70% !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.end-0 { right: 0 !important; }
.translate-middle { transform: translate(-50%, -50%) !important; }
.border-top-0 { border-top: 0 !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.flex-column { flex-direction: column !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.me-5 { margin-right: 3rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-8 { padding-bottom: 6rem !important; }
.pb-9 { padding-bottom: 10rem !important; }

/*
 * Palette text / background classes: one per editor-color-palette slug.
 * acf/section, acf/column, acf/button, the page header and <body> print
 * text-{slug} / bg-{slug} for whatever swatch an editor picks in the ACF
 * palette fields; stored content uses bg-black, bg-octonary and bg-white.
 * Values are the swatches the editor shows (var(--slug)).
 */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-tertiary { color: var(--tertiary) !important; }
.text-quaternary { color: var(--quaternary) !important; }
.text-quinary { color: var(--quinary) !important; }
.text-senary { color: var(--senary) !important; }
.text-septenary { color: var(--septenary) !important; }
.text-octonary { color: var(--octonary) !important; }
.text-nonary { color: var(--nonary) !important; }
.text-denary { color: var(--denary) !important; }
.text-light { color: var(--light) !important; }
.text-dark { color: var(--dark) !important; }
.text-white { color: var(--white) !important; }
.text-black { color: var(--black) !important; }
.text-transparent { color: transparent !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-tertiary { background-color: var(--tertiary) !important; }
.bg-quaternary { background-color: var(--quaternary) !important; }
.bg-quinary { background-color: var(--quinary) !important; }
.bg-senary { background-color: var(--senary) !important; }
.bg-septenary { background-color: var(--septenary) !important; }
.bg-octonary { background-color: var(--octonary) !important; }
.bg-nonary { background-color: var(--nonary) !important; }
.bg-denary { background-color: var(--denary) !important; }
.bg-light { background-color: var(--light) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-black { background-color: var(--black) !important; }
.bg-transparent { background-color: transparent !important; }

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

@media (min-width: 540px) {
	.d-md-none { display: none !important; }
}

@media (min-width: 992px) {
	.d-lg-block { display: block !important; }
	.d-lg-none { display: none !important; }
}

@media (min-width: 1024px) {
	.d-xl-block { display: block !important; }
}

@media (min-width: 1400px) {
	.d-xxl-block { display: block !important; }
	.d-xxl-none { display: none !important; }
}

@media (min-width: 1708px) {
	.pb-xxxl-8 { padding-bottom: 6rem !important; }
}

@media (min-width: 2300px) {
	.pb-xxxxl-12 { padding-bottom: 20rem !important; }
}

/* Theme-specific content classes. */

/* .heading-col: a blue Acumin full stop after column headings (contact, join;
   child _elements.scss:183). */
.heading-col h2::after,
.heading-col h3::after,
.heading-col h5::after {
	font-family: var(--tgs-font-accent);
	content: ".";
	color: var(--octonary);
}

/* hr.case (a-closing-message-counts; Additional CSS post 4511). */
hr.case {
	margin: 3em 0;
}

/* ==========================================================================
   4. ACF blocks: section / row / column / video / button
   ========================================================================== */

.block-section {
	position: relative;
	z-index: var(--tgs-z-site-content);
}

.block-section--wrapper > .container,
.block-section--wrapper > .container-fluid {
	overflow: hidden;
	height: 100%;
}

.block-section--wrapper :last-child {
	margin-bottom: 0;
}

/* acf/video: .video > .video-responsive > video. 4:3 by default, 16:9 with
   .wide (dream 01-atoms/video). */
.video-responsive {
	position: relative;
	height: 0;
	padding-bottom: 75%;
}

.video.wide .video-responsive {
	padding-bottom: 56.25%;
}

.video-responsive video,
.video-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: none;
	object-fit: contain;
}

.video video {
	object-fit: contain;
	object-position: center center;
}