@charset "UTF-8";
/* ==========================================================================
   MarkGps "Your Team" section  (used by index-team.html)
   Self-contained: nothing here changes the original index.html styles.
   Layout mirrors .about-grid-section (2.45fr | 3fr) so the team photos line
   up with Mark's photo in the left column and the text sits in the right.
   ========================================================================== */

:root {
	--team-ink: #3B3B3E;          /* dark gray text, "YOUR TEAM" */
	--team-soft-ink: #6E6E71;     /* titles / contact lines */
	--team-bar: #D7D8DA;          /* light gray bar, matches print packet */
	--team-accent: #F17632;       /* MarkGps orange divider */
	--team-photo-size: 178px;     /* same width as Mark's portrait */
}

.team-section {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* each row = photo column + text column, same proportions as the bio above */
.team-row {
	display: grid;
	grid-template-columns: 2.45fr 3fr;
	column-gap: 3rem;
	align-items: start;
}

/* links like markgps.com#anthony land below the sticky menu bar */
.team-section,
.team-member,
#about_mark {                     /* Mark's entry in the Contact menu lands the same way */
	scroll-margin-top: 90px;
}

/* ---------- light gray "YOUR TEAM" bar (right column only) ---------- */
.team-bar {
	grid-column: 2;
	background: var(--team-bar);
	padding: .75em 1.5em;
	margin-bottom: 2.5rem;
}

.team-bar h2 {
	margin: 0;
	padding: 0;
	color: var(--team-ink);
	font-size: calc(var(--base-font-size) * .9);
	font-weight: 400;
	letter-spacing: .15em;
	text-transform: uppercase;
}

/* ---------- round photo: any rectangular image is cropped to a circle ---------- */
.team-photo {
	grid-column: 1;
	justify-self: end;            /* right-aligned like Mark's photo */
	width: var(--team-photo-size);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #E4E4E5;
	background: #FFF;
}

.team-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;                              /* fill the circle, no distortion */
	object-position: var(--photo-pos, 50% 20%);     /* which part of the photo shows */
	transform: scale(var(--photo-zoom, 1));         /* >1 zooms in on the face */
	transform-origin: var(--photo-pos, 50% 20%);
}

/* logo sits inside the circle area without cropping */
.team-photo.team-logo {
	border: none;
	border-radius: 0;
	background: transparent;
}

.team-photo.team-logo img {
	object-fit: contain;
}

/* per-person framing: adjust these if a new photo is swapped in */
#anthony { --photo-pos: 50% 30%;  --photo-zoom: 1.05; }
#don     { --photo-pos: 50% 18%;  --photo-zoom: 1.1;  }
#john    { --photo-pos: 45% 8%;   --photo-zoom: 1.3;  }

/* ---------- text column ---------- */
.team-info {
	grid-column: 2;
	padding-bottom: 2rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--team-accent);   /* orange divider */
}

.team-info h3 {
	margin: 0;
	padding: 0 0 .2em 0;
	color: var(--team-ink);
	font-size: calc(var(--base-font-size) * 1);
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.25em;
}

.team-title {
	margin: 0 0 .6em 0;
	color: var(--team-soft-ink);
	font-size: calc(var(--base-font-size) * .75);
	letter-spacing: .06em;
}

.team-contact {
	list-style: none;
	margin: 0 0 1.2em 0;
	padding: 0 0 0 1.5em;
	color: var(--team-soft-ink);
	font-size: calc(var(--base-font-size) * .8);
	letter-spacing: .1em;
	line-height: 1.7;
	font-variant: small-caps;
}

.team-contact li {
	margin: 0;
}

.team-contact .team-label {
	display: inline-block;
	width: 1.6em;
	text-align: right;
	padding-right: .4em;
}

.team-contact .team-dre {
	padding-left: 2em;
	font-variant: normal;
}

.team-contact a {
	color: var(--team-soft-ink);
}

.team-contact a:hover {
	color: var(--team-accent);
}

.team-info p {
	margin-bottom: 0;
}

/* ---------- phones / small tablets: stack like the bio above ---------- */
@media (max-width: 768px) {
	.team-row {
		grid-template-columns: 1fr;
		row-gap: 1.25rem;
	}

	.team-bar,
	.team-photo,
	.team-info {
		grid-column: 1;
	}

	.team-bar {
		margin-bottom: 1rem;
	}

	:root {
		--team-photo-size: 150px;
	}
}

/* ---------- "Current Listings" button (team members) ---------- */
.team-button {
	display: inline-block;
	margin-top: 1.5em;
	padding: .7em 1.6em;
	background: #FFF;
	border: 1px solid #B7B7B9;
	border-radius: 0;                 /* square corners */
	color: var(--team-ink);
	font-size: calc(var(--base-font-size) * .75);
	letter-spacing: .1em;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.team-button:hover,
.team-button:focus {
	border-color: var(--team-soft-ink);
	color: var(--team-ink);
	text-decoration: none;
}

/* ---------- Contact menu: darker bar above the team member links ---------- */
.nav .m-menu ul li.team-menu-divider {
	height: 3px;
	padding: 0;
	margin: .3em 0 .8em 0;
	background: #8C8C8F;
}

@media (min-width: 1024px) {
	.nav .m-menu ul li.team-menu-divider {
		margin-left: -10px;               /* run edge to edge across the dropdown */
		margin-right: -10px;
	}
}