/* ============================================================================
   EPN Team — responsive grids, cards, chips and bio modal.
   Mirrors the site's existing card language (white card, 1px #e2e4e7 border,
   8px radius, 24px gap, subtle hover lift) and chip style (.epn-cat-count /
   .epn-cat-tab): small, rounded, light translucent brand colour, weight 400.
   Brand colour uses the theme's --epn-blue with a hard fallback.
   ============================================================================ */

.epn-team-grid-wrap {
	--epn-team-blue: var(--epn-blue, #4470B3);
	margin: 0 0 24px;
}

/* Group heading as a rounded silver ribbon, chiming with the bio-page bands. */
.epn-team-section-title {
	color: var(--epn-team-blue);
	background: #eef0f2;                 /* silver, same as the bio bands */
	border-radius: 10px;
	font-size: 20px;
	line-height: 1.25;
	margin: 30px 0 18px;
	padding: 12px 20px;
}
.epn-team-section-title:first-child {
	margin-top: 0;
}

/* Grid: 4 -> 3 -> 2 -> 1 columns. */
.epn-team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 8px;
}
@media screen and (max-width: 1024px) {
	.epn-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
	.epn-team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media screen and (max-width: 480px) {
	.epn-team-grid { grid-template-columns: 1fr; }
}

/* Card */
.epn-team-card {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.15s;
}
.epn-team-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.epn-team-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.epn-team-card-link:hover,
.epn-team-card-link:focus {
	text-decoration: none;
}
.epn-team-card-link:focus-visible {
	outline: 2px solid var(--epn-team-blue);
	outline-offset: 2px;
}

/* Square 300x300 headshot, cropped to fill. */
.epn-team-card-photo-wrap {
	display: block;
	aspect-ratio: 1 / 1;
	background: #f0f2f4;
	overflow: hidden;
	line-height: 0;
}
.epn-team-card-photo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.epn-team-card-photo--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eef1f4, #e2e6ea);
}

.epn-team-card-text {
	display: block;
	padding: 14px 16px 16px;
}
.epn-team-card-name {
	display: block;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.25;
	color: var(--epn-team-blue);         /* EPN blue */
	transition: color 0.15s;
}
/* Name turns EPN green on card hover/focus. */
.epn-team-card:hover .epn-team-card-name,
.epn-team-card-link:hover .epn-team-card-name,
.epn-team-card-link:focus-visible .epn-team-card-name {
	color: #4e9120;                      /* EPN green */
}
.epn-team-card-role {
	display: block;
	font-size: 14px;
	line-height: 1.35;
	color: #555;
	margin-top: 3px;
}

/* Chips (regions) — light translucent, weight 400, never bold. */
.epn-team-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.epn-team-chip {
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 10px;
	background: #4470B322; /* ~13% EPN blue */
	color: #33507e;
}

/* ---------- Standalone bio page + modal shared body ---------- */
.epn-team-bio {
	display: block;
}
.epn-team-bio-main {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}
.epn-team-bio-photo-wrap {
	flex: 0 0 220px;
	max-width: 220px;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: #f0f2f4;
	line-height: 0;
}
.epn-team-bio-photo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.epn-team-bio-body {
	flex: 1 1 auto;
	min-width: 0;
}
.epn-team-bio-name {
	margin: 0;
	font-size: 26px;
	line-height: 1.15;
	color: #1d2327;
}
.epn-team-bio-role {
	margin: 4px 0 0;
	font-size: 16px;
	color: #555;
}
.epn-team-bio-contact {
	margin: 12px 0 6px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.epn-team-contact-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.epn-team-contact-label {
	font-weight: 700;
	color: #1d2327;
	min-width: 52px;
	flex: 0 0 auto;
}
.epn-team-contact-email {
	color: var(--epn-blue, #4470B3);
	word-break: break-word;
}

/* "EPN Board Member" badge at the top of a Board member's bio. */
.epn-team-badge {
	display: inline-block;
	background: #4470B314;
	color: var(--epn-blue, #4470B3);
	border: 1px solid #4470B333;
	border-radius: 999px;
	padding: 4px 14px;
	margin: 0 0 12px;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
}
/* Collapse the contact wrapper when there's no email/button (e.g. Board). */
.epn-team-bio-contact:empty {
	margin: 0 !important;
}

/* Email affordance: a click-to-copy chip + an envelope button that opens the
   visitor's mail app. Both in the EPN chip/tooltip language. */
.epn-team-email {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;                   /* keep the envelope beside the chip */
	max-width: 100%;
}
.epn-team-email-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 30px !important;             /* same height as the envelope button (beats theme button padding) */
	width: auto !important;              /* hug the address (beats theme button width) */
	max-width: 100%;
	min-width: 0;
	flex: 0 1 auto;
	background: #4470B314 !important;    /* identical fill to the envelope icon (beats theme button bg) */
	color: var(--epn-blue, #4470B3) !important;
	border: 1px solid #4470B333 !important;  /* identical border; kills theme/UA black outline */
	border-radius: 8px;
	padding: 0 10px !important;          /* tight so the chip hugs the address */
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;                 /* keep the address on one line so the chip hugs it */
	text-align: left;
}
.epn-team-email-label {
	color: inherit !important;
}
.epn-team-email-chip:hover:not(.is-copied),
.epn-team-email-chip:focus-visible:not(.is-copied) {
	background: #85c066 !important;      /* light EPN green */
	border-color: #85c066 !important;
	color: #fff !important;
	outline: none;
}
.epn-team-email-chip.is-copied,
.epn-team-email-chip.is-copied .epn-team-email-label {
	color: var(--epn-blue, #4470B3) !important;
}
.epn-team-email-chip.is-copied {
	background: #e9ebee !important;
	border-color: #d7dbe0 !important;
	cursor: default;
}
.epn-team-email-chip:hover:not(.is-copied) .epn-team-tooltip,
.epn-team-email-chip:focus-visible:not(.is-copied) .epn-team-tooltip {
	opacity: 1;
	visibility: visible;
}

/* Envelope button (opens mail app). */
.epn-team-email-mail {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	background: #4470B314;
	color: var(--epn-blue, #4470B3) !important;
	border: 1px solid #4470B333;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.epn-team-email-mail:hover,
.epn-team-email-mail:focus-visible {
	background: #85c066;                 /* light EPN green */
	color: #fff !important;
	border-color: #85c066;
	outline: none;
	text-decoration: none;
}
.epn-team-email-mail svg {
	display: block;
}
.epn-team-email-mail:hover .epn-team-tooltip,
.epn-team-email-mail:focus-visible .epn-team-tooltip {
	opacity: 1;
	visibility: visible;
}
/* TA "Contact [name]" button: matches the email chip (blue -> light green on hover), compact. */
.epn-team-contact-button {
	display: inline-flex;
	align-items: center;
	height: 30px;
	background: #4470B314 !important;
	color: var(--epn-blue, #4470B3) !important;
	border: 1px solid #4470B333;
	padding: 0 14px;
	border-radius: 8px;
	text-decoration: none;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px !important;
	font-weight: 500;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.epn-team-single .epn-team-contact-button {
	font-size: 14px !important;
}
.epn-team-contact-button:hover,
.epn-team-contact-button:focus {
	background: #85c066 !important;      /* light EPN green */
	border-color: #85c066;
	color: #fff !important;
	text-decoration: none;
}
.epn-team-phone {
	color: #555;
	font-size: 14px;
}
.epn-team-bio-text {
	margin-top: 0;                       /* gap is provided by the preceding element's margin */
	line-height: 1.6;
}
.epn-team-bio-text p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 600px) {
	.epn-team-bio-main { flex-direction: column; gap: 18px; }
	.epn-team-bio-photo-wrap { flex-basis: auto; max-width: 200px; }
}

/* Back button on the standalone page. */
.epn-team-single-back {
	margin-top: 26px;
}
.epn-team-back-button {
	display: inline-block;
	background: var(--epn-blue, #4470B3);
	color: #fff !important;
	padding: 10px 20px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 15px;
}
.epn-team-back-button:hover,
.epn-team-back-button:focus {
	background: #85c066;                 /* light EPN green, matching the other buttons */
	text-decoration: none;
}

/* ---------- Standalone bio page: full-width silver bands + centred content ---------- */
.epn-team-single {
	padding: 0 !important;
	margin: 16px 0 40px !important;      /* match the header-to-hero gap on other pages */
}
/* Shared inner padding so the header/content/footer left-align. */
.epn-team-single-inner {
	padding-left: 30px;
	padding-right: 30px;
}
/* Rounded silver bands (borrowing the Volunteers hero's rounded corners). */
.epn-team-single-banner {
	background: #eef0f2;                 /* silver */
	border-radius: 10px;
}
.epn-team-single-banner--top {
	padding: 11px 0 12px;
}
.epn-team-single-banner--bottom {
	padding: 14px 0;
	margin-top: 10px;
}
/* Scoped under .epn-team-single to beat the theme's .site-content h1 rules,
   otherwise the h1's line-height/margins inflate the band and the name/title gap. */
.epn-team-single .epn-team-single-name {
	color: var(--epn-blue, #4470B3);
	font-size: 26px;
	line-height: 1.15;
	margin: 0 !important;
	padding: 0 !important;
}
.epn-team-single .epn-team-single-role {
	color: #1d2327;
	font-family: "Libre Baskerville", Georgia, serif;   /* match other pages' excerpt text */
	font-style: italic;
	font-size: 15px;
	line-height: 1.25;
	margin: 3px 0 0 !important;          /* same tight name/title gap as the modal */
	padding: 0 !important;
}

/* Content: photo left-aligned with a soft shadow, text column that wraps. */
.epn-team-single-content {
	display: flex;
	gap: 36px;
	align-items: flex-start;
	padding-top: 17px;                   /* ~40% less space under the header band */
	padding-bottom: 30px;
}
.epn-team-single-photo {
	flex: 0 0 240px;
	max-width: 240px;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: #f0f2f4;
	line-height: 0;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.20);
}
.epn-team-single-photo-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.epn-team-single-body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 720px;                    /* keep line length comfortable */
}
.epn-team-single-body > :first-child {
	margin-top: 0 !important;
}
.epn-team-single .epn-team-bio-contact {
	margin: 0 0 13px;
	font-family: "Open Sans", Arial, sans-serif;
}
.epn-team-single .epn-team-badge {
	margin-bottom: 13px;                 /* match the page paragraph spacing (~0.85em of 15px) */
}
.epn-team-single .epn-team-contact-label {
	min-width: 0;
	margin: 0;
	font-size: 14px;
}
.epn-team-single .epn-team-contact-email {
	font-size: 14px;
}
.epn-team-single .epn-team-bio-text {
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.6;
}
/* Tighten spacing between paragraphs (~40% less). */
.epn-team-single .epn-team-bio-text p {
	margin: 0 0 0.85em;
}
/* Force the chip font-size per context so the theme's button font-size can't
   inflate it (which was wrapping the address + dropping the icon in the modal). */
.epn-team-single .epn-team-email-chip {
	font-size: 14px !important;
}
.epn-team-modal .epn-team-email-chip {
	font-size: 13px !important;
}

/* Footer band actions: right-aligned so the button edge lines up with the text
   wrap point. Width matches the content column (photo 240 + gap 36 + text 720). */
.epn-team-single-actions {
	max-width: 996px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

@media screen and (max-width: 700px) {
	.epn-team-single-content { flex-direction: column; gap: 20px; }
	.epn-team-single-photo { flex-basis: auto; max-width: 220px; }
	.epn-team-single-name { font-size: 25px; }
}

/* ---------- Modal ---------- */
.epn-team-modal[hidden] {
	display: none;
}
.epn-team-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}
.epn-team-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 25, 35, 0.55);
}
.epn-team-modal-dialog {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 12px;
	width: 100%;
	max-width: 680px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
	overflow: hidden; /* clip rounded corners; inner content scrolls */
}
/* Content scrolls internally; no padding so the header band is full-bleed.
   Slim scrollbar keeps the top-right corner clean so the close icon reads as
   balanced against the edge. */
.epn-team-modal-content {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;                  /* never scroll sideways */
	-webkit-overflow-scrolling: touch;
	padding: 0;
	scrollbar-width: thin;
	scrollbar-color: #c7ccd1 transparent;
}
.epn-team-modal-content::-webkit-scrollbar {
	width: 8px;
}
.epn-team-modal-content::-webkit-scrollbar-thumb {
	background: #c7ccd1;
	border-radius: 4px;
}

/* Tinted EPN-blue header band carrying the name + title. Sticky so the bio
   content scrolls up behind it. Opaque tint (8% EPN blue flattened onto white)
   so text doesn't show through while scrolling. */
.epn-team-modal .epn-team-bio-header {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #eff3f9;                  /* opaque equivalent of ~8% EPN blue */
	border-bottom: 1px solid #4470B322;
	padding: 16px 56px 14px 30px;        /* right padding clears the close icon */
	margin: 0;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.epn-team-modal .epn-team-bio-name {
	font-size: 24px;
	line-height: 1.15;
	color: var(--epn-blue, #4470B3);     /* name = EPN blue */
}
.epn-team-modal .epn-team-bio-role {
	font-size: 15px;
	color: #1d2327;                      /* title = black */
	margin-top: 3px;
}

/* Breathing space below the header; photo on the left with a soft drop shadow. */
.epn-team-modal .epn-team-bio-main {
	gap: 26px;
	padding: 22px 30px 26px;
}
.epn-team-modal .epn-team-bio-photo-wrap {
	flex-basis: 180px;
	max-width: 180px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.20);
}
/* Align the Email/body top edge with the top of the photo. */
.epn-team-modal .epn-team-bio-body > :first-child {
	margin-top: 0 !important;
}
.epn-team-modal .epn-team-bio-contact {
	margin-top: 0;
}

/* Contact: Open Sans, smaller for EPN's long domain; bold label matches address size. */
.epn-team-modal .epn-team-bio-contact {
	font-family: "Open Sans", Arial, sans-serif;
}
.epn-team-modal .epn-team-contact-row {
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}
.epn-team-modal .epn-team-contact-label {
	min-width: 0;
	margin: 0;
	font-size: 13px;
}
.epn-team-modal .epn-team-contact-email {
	font-size: 13px;
}

/* Description: smaller and tight line spacing. */
.epn-team-modal .epn-team-bio-text {
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 0;
}
/* Badge / contact bottom margins match the paragraph spacing in the modal (~0.7em of 13px). */
.epn-team-modal .epn-team-badge {
	margin-bottom: 9px;
}
.epn-team-modal .epn-team-bio-contact {
	margin: 0 0 9px;
}
.epn-team-modal .epn-team-bio-text p {
	margin: 0 0 0.7em;                   /* zero the top margin so it doesn't stack under the badge */
}

/* Elegant close icon, nudged toward the top-right corner and balanced. */
.epn-team-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	color: var(--epn-blue, #4470B3) !important;
	line-height: 0;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.epn-team-modal-close:hover,
.epn-team-modal-close:focus-visible {
	background: var(--epn-blue, #4470B3) !important;
	color: #fff !important;
	outline: none;
}
.epn-team-modal-close svg {
	display: block;
}

/* Sticky footer: Share Bio + Close, grouped at the right. */
.epn-team-modal-footer {
	flex: 0 0 auto;
	background: #fff;
	border-top: 1px solid #e2e4e7;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	border-radius: 0 0 12px 12px;
}

/* Share Bio button: white / EPN green -> light green on hover -> gray/light blue after copy. */
.epn-team-share {
	position: relative;
	background: #fff !important;
	color: #4e9120 !important;
	border: 1px solid #62B22F !important;
	border-radius: 6px !important;
	padding: 9px 22px !important;
	font-size: 15px !important;
	font-family: "Open Sans", Arial, sans-serif;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.epn-team-share:hover:not(.is-copied),
.epn-team-share:focus-visible:not(.is-copied) {
	background: #eaf5e0 !important; /* light green */
	color: #3f7a1a !important;
	outline: none;
}
.epn-team-share.is-copied {
	background: #4470B314 !important; /* light blue */
	color: #8a8f96 !important;       /* gray */
	border-color: #4470B355 !important;
	cursor: default;
}

/* EPN-blue tooltip above the Share button. */
.epn-team-tooltip {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--epn-blue, #4470B3);
	color: #fff;
	font-size: 12px;
	font-family: "Open Sans", Arial, sans-serif;
	line-height: 1.3;
	padding: 6px 10px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s;
	pointer-events: none;
	z-index: 5;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.epn-team-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--epn-blue, #4470B3);
}
.epn-team-share:hover:not(.is-copied) .epn-team-tooltip,
.epn-team-share:focus-visible:not(.is-copied) .epn-team-tooltip {
	opacity: 1;
	visibility: visible;
}
.epn-team-footer-close {
	background: #fff !important;
	color: var(--epn-blue, #4470B3) !important;
	border: 1px solid var(--epn-blue, #4470B3) !important;
	border-radius: 6px !important;
	padding: 9px 24px !important;
	font-size: 15px !important;
	font-family: "Open Sans", Arial, sans-serif;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.epn-team-footer-close:hover,
.epn-team-footer-close:focus-visible {
	background: var(--epn-blue, #4470B3) !important;
	color: #fff !important;
	outline: none;
}

@media screen and (max-width: 600px) {
	.epn-team-modal { padding: 12px; }
	.epn-team-modal .epn-team-bio-header { padding: 20px 48px 16px 20px; }
	.epn-team-modal .epn-team-bio-main { flex-direction: column; gap: 16px; padding: 18px 20px 22px; }
	.epn-team-modal-dialog { max-height: 92vh; }
}

/* Prevent background scroll when modal is open. */
body.epn-team-modal-open {
	overflow: hidden;
}