/**
 * TAG Strategies: about page (page-about.php only; inc/assets.php): the
 * team list + details panel and the client logos.
 *
 * Lifted from the child Sass: components/_team-list.scss,
 * components/_client-list.scss and wordpress/_page.scss (.article-loop),
 * values as compiled in css-spec/child-used.css. The CTA bands and the
 * More / Less toggle are shell components (components.css).
 *
 * The section grid is the old one: .tgs-article__container (the 12px
 * content gutter) > .row > .col-md-5.col-lg-4 (heading) +
 * .col-md-7.col-lg-8.p-0 (layout.css; md there is dream's 540px). The
 * breakpoints below are the child's: 768, 992, 1024, 1400, 1708, 2300.
 *
 * @package TGS
 */

/* ==========================================================================
   Shared: the two sections and their sticky headings
   ========================================================================== */

.tgs-team,
.tgs-clients {
	position: relative;
	padding: 5.625rem var(--tgs-gutter-sm) var(--tgs-gutter-sm);
	background-color: var(--black);
}

.tgs-team__title,
.tgs-clients__title {
	margin-bottom: 3.125rem;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05rem;
}

.tgs-team__title strong,
.tgs-clients__title strong {
	font-family: var(--tgs-font-accent);
	color: var(--octonary);
}

.tgs-clients__title span {
	display: block;
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

@media (min-width: 768px) {
	.tgs-team,
	.tgs-clients {
		padding-right: 0;
	}
}

@media (min-width: 992px) {
	.tgs-team__title,
	.tgs-clients__title {
		position: sticky;
		top: 3.75rem;
		left: 0;
		margin-bottom: 4.6875rem;
		font-size: 3.75rem;
		line-height: 0.8;
	}
}

@media (min-width: 1024px) {
	.tgs-team,
	.tgs-clients {
		padding-left: var(--tgs-gutter-xl);
	}
}

@media (min-width: 1400px) {
	.tgs-team,
	.tgs-clients {
		padding-left: var(--tgs-gutter-xxl);
	}

	.tgs-team__title,
	.tgs-clients__title {
		margin-bottom: 6.25rem;
		font-size: 5.625rem;
		line-height: 0.7111111111;
	}
}

/* ==========================================================================
   Team grid
   ========================================================================== */

.tgs-team__stage {
	position: relative;
	overflow: hidden;
}

.tgs-team__members {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: flex-start;
	transition: opacity var(--tgs-transition);
}

.tgs-team__member {
	position: relative;
	flex: 0 1 50%;
	border: 0.5625rem solid transparent;
	transition: opacity var(--tgs-transition);
}

/* Gradient wash, half strength on hover. */
.tgs-team__member::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--tgs-z-prefooter);
	display: block;
	content: "";
	background: var(--octonary-primary-diagonal-down);
	opacity: 0;
	transition: opacity var(--tgs-transition);
}

.tgs-team__member:hover::before,
.tgs-team__member:focus-visible::before {
	opacity: 0.5;
}

.tgs-team__member--details {
	cursor: pointer;
}

.tgs-team__member:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: -0.5625rem;
}

.tgs-team__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.tgs-team__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.tgs-team__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Alternate image: stacked on the headshot, swapped in on hover. */
.tgs-team__member--has-alt .tgs-team__img {
	transition: opacity var(--tgs-transition);
}

.tgs-team__member--has-alt .tgs-team__img--alt {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
}

.tgs-team__member--has-alt:hover .tgs-team__img--default,
.tgs-team__member--has-alt:focus-visible .tgs-team__img--default {
	opacity: 0;
}

.tgs-team__member--has-alt:hover .tgs-team__img--alt,
.tgs-team__member--has-alt:focus-visible .tgs-team__img--alt {
	opacity: 1;
}

/* Name and job title, centred over the wash on hover. */
.tgs-team__content {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: var(--tgs-z-site-content);
	display: inline-block;
	width: 80%;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity var(--tgs-transition);
}

.tgs-team__member:hover .tgs-team__content,
.tgs-team__member:focus-visible .tgs-team__content {
	opacity: 1;
}

.tgs-team__name {
	margin: 0;
	font-size: 1.125rem;
}

.tgs-team__role {
	font-size: 0.75rem;
}

@media (min-width: 768px) {
	.tgs-team__members {
		margin-right: -0.5625rem;
	}

	.tgs-team__role {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.tgs-team__member {
		flex-basis: calc(100% / 3);
	}
}

@media (min-width: 1400px) {
	.tgs-team__role {
		font-size: 0.75rem;
	}
}

/* ==========================================================================
   Team details panel (#teamDetails)
   body.is-details-active (app.js initTeamDetails) takes the grid out of the flow and
   puts the panel in it, so the section shrinks to the open item.
   ========================================================================== */

.tgs-team__details {
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tgs-transition);
}

.is-details-active .tgs-team__members {
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	opacity: 0;
	pointer-events: none;
}

.is-details-active .tgs-team__details {
	position: static;
	opacity: 1;
	pointer-events: auto;
}

.tgs-team__close {
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	display: inline-block;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.4;
	cursor: pointer;
	background: transparent;
	border: 1px solid transparent;
}

.tgs-team__close::before {
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	content: "";
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 21.6 21.6' xml:space='preserve' width='21.6' height='21.6' x='89' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m12.2 10.8 9.4 9.4-1.4 1.4-9.4-9.4-9.4 9.4L0 20.2l9.4-9.4L0 1.4 1.4 0l9.4 9.4L20.2 0l1.4 1.4-9.4 9.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.tgs-team__close:hover::before,
.tgs-team__close:focus-visible::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 21.6 21.6' xml:space='preserve' width='21.6' height='21.6' x='89' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23002fdc' d='m12.2 10.8 9.4 9.4-1.4 1.4-9.4-9.4-9.4 9.4L0 20.2l9.4-9.4L0 1.4 1.4 0l9.4 9.4L20.2 0l1.4 1.4-9.4 9.4z'/%3E%3C/svg%3E");
}

/* No rule under the item: the old Sass gave it a 2px bottom border, but
   .active set display:initial (inline), so the border never painted. */
.tgs-team__detail:focus {
	outline: 0;
}

.tgs-team__detail-image {
	max-width: 100%;
	height: auto;
}

.tgs-team__detail-info {
	margin: 3.125rem 0;
	font-size: 1.75rem;
	font-weight: 600;
}

.tgs-team__detail-excerpt {
	margin-bottom: 1rem;
	font-size: 1rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.tgs-team__details {
		width: 66.667%;
	}

	.tgs-team__close {
		right: calc(33.333% + 40px);
	}
}

@media (min-width: 1400px) {
	.tgs-team__detail-excerpt {
		font-size: 1.125rem;
		line-height: 1.5555555556;
	}
}

/* ==========================================================================
   Client logos: two ruled columns, four from 1024px
   ========================================================================== */

.tgs-clients__grid {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	margin: 0;
	list-style: none;
}

.tgs-clients__client {
	display: flex;
	flex: 0 1 50%;
	flex-flow: column nowrap;
	justify-content: center;
	height: 11.25rem;
	padding: 1.875rem 1.25rem;
	text-align: center;
	border: 0.0625rem solid var(--white);
	border-top: none;
	border-left: none;
}

.tgs-clients__client:nth-of-type(2n) {
	border-right: none;
}

.tgs-clients__client:last-child,
.tgs-clients__client:nth-of-type(2n+1):nth-last-of-type(2) {
	border-bottom: none;
}

.tgs-clients__img {
	max-width: 100%;
	height: auto;
}

.tgs-clients__name {
	font-size: var(--tgs-h4);
}

@media (min-width: 1024px) {
	.tgs-clients__client {
		flex-basis: 25%;
		height: 10.3125rem;
	}

	/* Undo the two-column rules, then rule the four-column grid. */
	.tgs-clients__client:nth-of-type(2n) {
		border-right: 0.0625rem solid var(--white);
	}

	.tgs-clients__client:nth-of-type(2n+1):nth-last-of-type(2) {
		border-bottom: 0.0625rem solid var(--white);
	}

	.tgs-clients__client:nth-of-type(4n) {
		border-right: none;
	}

	.tgs-clients__client:last-child,
	.tgs-clients__client:nth-of-type(4n+1):nth-last-of-type(2),
	.tgs-clients__client:nth-of-type(4n+2):nth-last-of-type(2),
	.tgs-clients__client:nth-of-type(4n+3):nth-last-of-type(2),
	.tgs-clients__client:nth-of-type(4n+1):nth-last-of-type(3),
	.tgs-clients__client:nth-of-type(4n+2):nth-last-of-type(3),
	.tgs-clients__client:nth-of-type(4n+1):nth-last-of-type(4) {
		border-bottom: none;
	}
}

@media (min-width: 1708px) {
	.tgs-clients__client {
		height: 13.75rem;
	}
}

@media (min-width: 2300px) {
	.tgs-clients__client {
		height: 18.75rem;
	}
}