/* DCE Team Grid
   A responsive grid of team cards. Each card has a photo, name and title, plus
   an optional button that reveals a biography over a darkened photo.
   ------------------------------------------------------------------ */

.dtg {
	--dtg-cols: 3;
	--dtg-gap: 24px;
	--dtg-row-gap: 40px;
	--dtg-ratio: 5 / 4;
	--dtg-radius: 0px;
	--dtg-media-bg: #f2f2f2;
	--dtg-accent: #5bb947;
	--dtg-on-accent: #ffffff;
	--dtg-overlay: rgba(26, 35, 50, 0.82);
	--dtg-overlay-text: #ffffff;
	--dtg-btn: 44px;
	--dtg-btn-inset: 16px;
	--dtg-bio-pad: 28px;
	--dtg-wipe: 0.45s;
	--dtg-ease: cubic-bezier(0.65, 0, 0.35, 1);

	width: 100%;
}

.dtg__grid {
	display: grid;
	grid-template-columns: repeat(var(--dtg-cols), minmax(0, 1fr));
	column-gap: var(--dtg-gap);
	row-gap: var(--dtg-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtg__card {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.dtg__media {
	position: relative;
	aspect-ratio: var(--dtg-ratio);
	overflow: hidden;
	border-radius: var(--dtg-radius);
	background: var(--dtg-media-bg);
	isolation: isolate;
}

.dtg .dtg__img {
	/* Beats Elementor's ".elementor img { height:auto }" so the photo fills its frame. */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
}

/* The overlay: a dark tint that wipes up from the bottom, leaving the photo
   faintly visible behind the biography. */
.dtg__bio {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Top padding clears the button, which stays put above the panel. */
	padding: calc(var(--dtg-btn) + var(--dtg-btn-inset) * 2) var(--dtg-bio-pad) var(--dtg-bio-pad);
	background: var(--dtg-overlay);
	color: var(--dtg-overlay-text);
	overflow-y: auto;
	clip-path: inset(100% 0 0 0);
	visibility: hidden;
	transition: clip-path var(--dtg-wipe) var(--dtg-ease), visibility 0s linear var(--dtg-wipe);
}

.dtg__card.is-open .dtg__bio {
	clip-path: inset(0 0 0 0);
	visibility: visible;
	transition: clip-path var(--dtg-wipe) var(--dtg-ease), visibility 0s;
}

.dtg__bio-text {
	margin: auto 0;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.dtg__bio-text p {
	margin: 0 0 0.8em;
	color: inherit;
}

.dtg__bio-text p:last-child {
	margin-bottom: 0;
}

.dtg__card.is-open .dtg__bio-text {
	opacity: 1;
	transform: none;
	transition: opacity 0.3s ease calc(var(--dtg-wipe) * 0.6), transform 0.4s var(--dtg-ease) calc(var(--dtg-wipe) * 0.6);
}

.dtg__toggle {
	position: absolute;
	top: var(--dtg-btn-inset);
	left: var(--dtg-btn-inset);
	z-index: 2;
	width: var(--dtg-btn);
	height: var(--dtg-btn);
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: var(--dtg-accent);
	color: var(--dtg-on-accent);
	cursor: pointer;
	transition: transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* A theme's button rules would otherwise recolour this on hover/focus/active. */
.dtg__toggle:hover,
.dtg__toggle:focus,
.dtg__toggle:focus-visible,
.dtg__toggle:active {
	background: var(--dtg-accent);
	color: var(--dtg-on-accent);
	border: 0;
	box-shadow: none;
}

.dtg__toggle:hover {
	transform: scale(1.06);
}

.dtg__toggle:focus-visible {
	outline: 2px solid var(--dtg-on-accent);
	outline-offset: 3px;
}

/* Two bars drawn with pseudo-elements. Rotating the plus 45° makes the cross. */
.dtg__plus {
	position: relative;
	width: 42%;
	height: 42%;
	transition: transform var(--dtg-wipe) var(--dtg-ease);
}

.dtg__plus::before,
.dtg__plus::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 1px;
}

.dtg__plus::before {
	left: 0;
	right: 0;
	top: calc(50% - 1px);
	height: 2px;
}

.dtg__plus::after {
	top: 0;
	bottom: 0;
	left: calc(50% - 1px);
	width: 2px;
}

.dtg__card.is-open .dtg__plus {
	transform: rotate(45deg);
}

.dtg__meta {
	padding-top: 20px;
}

.dtg__name,
.dtg__role {
	margin: 0;
	line-height: 1.35;
}

.dtg__name {
	font-size: 26px;
	color: #1a2332;
}

.dtg__role {
	margin-top: 6px;
	font-size: 16px;
	font-weight: 700;
	color: #1a2332;
}

@media (prefers-reduced-motion: reduce) {
	.dtg {
		--dtg-wipe: 0.01s;
	}

	.dtg__bio-text,
	.dtg__card.is-open .dtg__bio-text {
		transition: none;
		transform: none;
	}
}