/**
 * 2Funky Team
 *
 * ONE set of markup for desktop and mobile. The card is a CSS grid of four
 * items -- bar, photo, email, bio -- rather than a text column with the photo
 * beside it. That is the whole trick: a two-column wrapper cannot put the
 * photo BETWEEN the name bar and the email on a phone, which is why the old
 * build needed a second, separately-maintained mobile section. As grid areas,
 * the same four boxes rearrange at any breakpoint with no duplicated markup.
 */

.tft-people {
	/* Set here, overridden by the Elementor controls and by the breakpoints
	   below. Values match what the theme was already using. */
	--tft-photo-width: 38%;
	--tft-photo-min-height: 430px;
	--tft-pad-outer: 35px; /* text column's edge against the card */
	--tft-pad-inner: 20px; /* text column's edge against the photo */
	--tft-pad-top: 34px;
	--tft-pad-bottom: 40px;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

.tft-person {
	width: 100%;
	max-width: 1170px;
	display: grid;
	align-content: start;
	background-color: #EAEAEA;
	border-radius: 7px;
	overflow: hidden;
	box-shadow: 0 10px 21px rgba(34, 34, 34, 0.2);
}

.tft-person--photo-right {
	grid-template-columns: 1fr var(--tft-photo-width);
	grid-template-areas:
		"bar     photo"
		"contact photo"
		"bio     photo";
}

.tft-person--photo-left {
	grid-template-columns: var(--tft-photo-width) 1fr;
	grid-template-areas:
		"photo bar"
		"photo contact"
		"photo bio";
}

/* Somebody with no photo yet gets the full width rather than a blank column. */
.tft-person--no-photo {
	grid-template-columns: 1fr;
	grid-template-areas:
		"bar"
		"contact"
		"bio";
}

/* The text column's outer edge is whichever side the photo is NOT on, so the
   two paddings swap with the layout. Resolved once here and read below. */
.tft-person--photo-right > * {
	--l: var(--tft-pad-outer);
	--r: var(--tft-pad-inner);
}

.tft-person--photo-left > * {
	--l: var(--tft-pad-inner);
	--r: var(--tft-pad-outer);
}

.tft-person--no-photo > * {
	--l: var(--tft-pad-outer);
	--r: var(--tft-pad-outer);
}

/* ---- the black name bar ---- */

.tft-person__bar {
	grid-area: bar;
	background-color: #000000;
	padding: 21px 50px;
	margin: var(--tft-pad-top) var(--r) 0 var(--l);
	border-radius: 0 7px 7px 0;
}

/* Mirrored, so the rounded end is always the one pointing into the card
   rather than at the photo. */
.tft-person--photo-left .tft-person__bar {
	border-radius: 7px 0 0 7px;
}

.tft-person__name {
	margin: 0;
	color: #FFFFFF;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.tft-person__role {
	color: #C8C8C8;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

/* ---- photo ---- */

.tft-person__photo {
	grid-area: photo;
	min-height: var(--tft-photo-min-height);
	/* The image is positioned OUT of flow rather than given height:100%.
	   This box is tall because the grid stretched it, not because anything
	   set a height -- so a percentage height on the image has nothing to
	   resolve against and it falls back to its intrinsic size, leaving bare
	   card below it. Insetting to the edges sidesteps that entirely, and
	   min-height keeps the box from collapsing when the bio is short. */
	position: relative;
	overflow: hidden;
}

/* Two classes, not one, and that is load-bearing. Elementor ships
   `.elementor img { height: auto; max-width: 100% }` at specificity 0,1,1,
   which beats a single class -- so `height: 100%` here silently lost and the
   photo rendered at its intrinsic aspect with bare card below it. Qualifying
   by the parent takes this to 0,2,0 and wins without !important. */
.tft-person__photo .tft-person__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 0;
}

/* ---- email ---- */

.tft-person__contact {
	grid-area: contact;
	position: relative;
	margin: 22px var(--r) 0 var(--l);
	padding-left: 30px;
	color: #222222;
	font-size: 16px;
	line-height: 24px;
}

.tft-person__contact a {
	color: inherit;
	text-decoration: none;
}

.tft-person__contact a:hover,
.tft-person__contact a:focus-visible {
	text-decoration: underline;
}

.tft-person__contact .fac {
	position: absolute;
	top: 4px;
	left: 0;
}

/* ---- bio ---- */

.tft-person__bio {
	grid-area: bio;
	margin: 14px var(--r) var(--tft-pad-bottom) var(--l);
	color: #444444;
	font-size: 16px;
	line-height: 30px;
}

.tft-person__bio > *:first-child {
	margin-top: 0;
}

.tft-person__bio > *:last-child {
	margin-bottom: 0;
}

.tft-empty {
	padding: 20px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	color: #646970;
	text-align: center;
}

/* ---- breakpoints ---- */

@media (max-width: 1024px) {
	/* Insets come from the widget's responsive controls, not from here. */
	.tft-person__bar {
		padding: 18px 30px;
	}
}

/* The stack. Order is fixed here and is the whole point of the request:
   name bar, then photo, then email, then bio -- the photo sitting BETWEEN
   the bar and the email, which is what a two-column layout cannot do. */
@media (max-width: 767px) {
	/* Insets and photo height on a phone both come from the widget's
	   responsive controls -- see the notes on those controls. */

	.tft-person,
	.tft-person--photo-left,
	.tft-person--photo-right,
	.tft-person--no-photo {
		grid-template-columns: 1fr;
		grid-template-areas:
			"bar"
			"photo"
			"contact"
			"bio";
	}

	.tft-person__photo {
		margin-top: 22px;
	}

	.tft-person__bar,
	.tft-person--photo-left .tft-person__bar {
		border-radius: 7px;
	}
}