/* Team member contact card: photo and name on a soft blue head, contacts as rows with an icon tile,
   an email button. Sticks under the header while the bio scrolls (desktop). */
.an-mcard {
	overflow: hidden;
	border: 1px solid var(--an-rule);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(16, 24, 40, 0.12);
}

.an-mcard__head {
	padding: 28px 22px 20px;
	background: linear-gradient(180deg, var(--an-primary-soft), #fff);
	text-align: center;
}

/* Every portrait in the same frame, whatever the photo's size: 4:5 with the site's corner radius,
   cropped to fill it (faces sit in the upper part of the photo). */
.an-mcard__frame {
	display: block;
	position: relative;
	width: 146px;
	aspect-ratio: 4 / 5;
	margin: 0 auto 14px;
	overflow: hidden;
	border-radius: var(--an-radius);
	background: var(--an-primary-soft);
	box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(16, 24, 40, 0.15);
}

.an-mcard__frame > .an-mcard__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* The old portraits' own frame (about 8px each side, more under the shadow) falls outside. */
.an-mcard__frame--framed > .an-mcard__photo {
	position: absolute;
	top: -6%;
	left: -9%;
	width: 120%;
	max-width: none;
	height: 120%;
	object-position: 50% 50%;
}

.an-mcard p.an-mcard__name {
	margin: 0;
	color: var(--an-ink);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
}

.an-mcard p.an-mcard__company {
	margin: 2px 0 0;
	color: var(--an-muted);
	font-size: 13px;
}

.an-mcard__list {
	margin: 0;
	padding: 10px;
	list-style: none;
}

.an-mcard__list li {
	margin: 0;
	line-height: 1.4;
}

/* :link/:visited: the team pages' own CSS colours every link (a:link { color: #3366FF }). */
.an-mcard__row,
.an-mcard a.an-mcard__row:is(:link, :visited) {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border-radius: var(--an-radius);
	color: var(--an-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: normal;
	transition: background-color 0.2s, color 0.2s;
}

.an-mcard a.an-mcard__row:hover,
.an-mcard a.an-mcard__row:focus-visible {
	background: var(--an-alt);
	color: var(--an-primary-dark);
	text-decoration: none;
}

/* An email breaks before the @ (render.php); one still too long for a narrow phone breaks where it must. */
.an-mcard__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.an-mcard__text small {
	display: block;
	margin-bottom: 2px;
	color: var(--an-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.an-mcard__icon {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--an-primary-soft);
}

.an-mcard__icon::before,
.an-mcard__go::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: currentColor;
	-webkit-mask: var(--an-icon) center / contain no-repeat;
	mask: var(--an-icon) center / contain no-repeat;
}

.an-mcard__icon::before {
	width: 15px;
	height: 15px;
	color: var(--an-primary-dark);
}

.an-mcard__go {
	--an-icon: url(../../assets/icons/angle-right.svg);
	position: relative;
	flex-shrink: 0;
	width: 8px;
	height: 12px;
	margin-left: auto;
	color: var(--an-muted);
	transition: transform 0.2s;
}

a.an-mcard__row:hover .an-mcard__go {
	color: var(--an-primary);
	transform: translateX(3px);
}

.an-mcard p.an-mcard__cta {
	margin: 0;
	padding: 4px 22px 22px;
}

.an-mcard__button,
.an-mcard a.an-mcard__button:is(:link, :visited) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--an-primary);
	box-shadow: 0 6px 16px rgba(25, 117, 188, 0.35);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.an-mcard__button::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url(../../assets/icons/envelope.svg) center / contain no-repeat;
	mask: url(../../assets/icons/envelope.svg) center / contain no-repeat;
}

.an-mcard a.an-mcard__button:hover,
.an-mcard a.an-mcard__button:focus-visible {
	background: var(--an-primary-dark);
	box-shadow: 0 10px 22px rgba(25, 117, 188, 0.4);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

/* Beside the bio on a screen under 800px high (most laptops): a smaller portrait and tighter rows, so the
   whole card fits under the header and follows the scroll (the sticky rule is in main.css). */
@media (min-width: 992px) and (max-height: 799.98px) {
	.an-mcard:not(.an-mcard--card, .an-mcard--strip) .an-mcard__head {
		padding: 18px 22px 12px;
	}

	.an-mcard:not(.an-mcard--card, .an-mcard--strip) .an-mcard__frame {
		width: 104px;
		margin-bottom: 10px;
	}

	.an-mcard:not(.an-mcard--card, .an-mcard--strip) .an-mcard__list {
		padding: 6px 10px;
	}

	.an-mcard:not(.an-mcard--card, .an-mcard--strip) a.an-mcard__row:is(:link, :visited),
	.an-mcard:not(.an-mcard--card, .an-mcard--strip) .an-mcard__row {
		padding: 8px 12px;
	}

	.an-mcard:not(.an-mcard--card, .an-mcard--strip) p.an-mcard__cta {
		padding: 2px 22px 18px;
	}

	.an-mcard:not(.an-mcard--card, .an-mcard--strip) a.an-mcard__button:is(:link, :visited) {
		padding: 10px 24px;
	}
}

/* ---- "card" and "strip" formats (render-feature.php): the portrait round, name and role, contacts, a
   button to the member's page. ---- */
.an-mcard--card,
.an-mcard--strip {
	border-radius: var(--an-radius);
	box-shadow: var(--an-shadow-sm);
}

.an-mcard--card .an-mcard__photo,
.an-mcard--strip .an-mcard__photo {
	display: block;
	flex-shrink: 0;
	width: 116px;
	height: 116px;
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(16, 24, 40, 0.15);
	object-fit: cover;
	object-position: 50% 18%;
}

.an-mcard--card .an-mcard__head,
.an-mcard--strip .an-mcard__who {
	text-align: center;
}

.an-mcard--card p.an-mcard__company,
.an-mcard--strip p.an-mcard__company {
	margin: 0 0 4px;
	color: var(--an-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.an-mcard--card .an-mcard__head .an-mcard__company {
	margin-top: 16px;
}

.an-mcard--card p.an-mcard__name,
.an-mcard--strip p.an-mcard__name {
	margin: 0;
	color: var(--an-ink);
	font-weight: 800;
	line-height: 1.3;
}

.an-mcard--card p.an-mcard__name {
	font-size: 20px;
}

.an-mcard--strip p.an-mcard__name {
	font-size: 24px;
	line-height: 1.25;
}

.an-mcard--card p.an-mcard__role,
.an-mcard--strip p.an-mcard__role {
	margin: 2px 0 0;
	color: var(--an-text);
	font-size: 14px;
}

.an-mcard--card {
	display: flex;
	flex-direction: column;
}

.an-mcard--card .an-mcard__head {
	padding: 24px 24px 16px;
}

.an-mcard--card .an-mcard__facts {
	margin: 0;
	padding: 0 24px;
	font-size: 14.5px;
	line-height: 1.5;
	text-align: center;
}

.an-mcard--card .an-mcard__facts dt {
	color: var(--an-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.an-mcard--card .an-mcard__facts dd {
	margin: 0 0 10px;
}

.an-mcard--card .an-mcard__phone a:is(:link, :visited),
.an-mcard--strip .an-mcard__phone a:is(:link, :visited) {
	color: var(--an-ink);
	font-weight: 700;
}

.an-mcard--card .an-mcard__phone a {
	font-size: 18px;
}

.an-mcard--card p.an-mcard__cta {
	margin: auto 0 0;
	padding: 6px 24px 24px;
}

.an-mcard .an-mcard__more,
.an-mcard a.an-mcard__more:is(:link, :visited) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--an-primary);
	box-shadow: 0 6px 16px rgba(25, 117, 188, 0.3);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.2s;
}

.an-mcard a.an-mcard__more:hover,
.an-mcard a.an-mcard__more:focus-visible {
	background: var(--an-primary-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

/* Strip: portrait · name, role and button · contacts, one line on wide screens. */
.an-mcard--strip {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 940px;
	margin: 0 auto 36px;
	padding: 22px 28px;
}

.an-mcard--strip .an-mcard__photo {
	width: 112px;
	height: 112px;
	margin: 0;
	box-shadow: 0 0 0 4px var(--an-primary-soft);
}

.an-mcard--strip .an-mcard__who {
	flex: 1 1 auto;
	text-align: left;
}

.an-mcard--strip p.an-mcard__role {
	margin-bottom: 14px;
	font-size: 15px;
}

.an-mcard--strip .an-mcard__more,
.an-mcard--strip a.an-mcard__more:is(:link, :visited) {
	display: inline-flex;
}

.an-mcard--strip .an-mcard__contact {
	flex: 0 0 auto;
	padding-left: 28px;
	border-left: 1px solid var(--an-rule);
	font-size: 14.5px;
	line-height: 1.6;
}

.an-mcard--strip .an-mcard__contact p {
	margin: 0;
}

.an-mcard--strip .an-mcard__phone a {
	font-size: 20px;
}

.an-mcard--strip p.an-mcard__address {
	color: var(--an-muted);
	font-size: 13px;
}

@media (max-width: 767px) {
	.an-mcard--strip {
		flex-direction: column;
		gap: 14px;
		padding: 24px 20px;
		text-align: center;
	}

	.an-mcard--strip .an-mcard__who {
		text-align: center;
	}

	.an-mcard--strip .an-mcard__contact {
		width: 100%;
		padding: 14px 0 0;
		border-top: 1px solid var(--an-rule);
		border-left: 0;
	}
}