/* ==========================================================================
   Pulse Team — pulse-team.css
   Matches pulsetms.com: DM Sans, yellow cards (#ffe600), circular photos
   that overlap the card top, 3-column grid, pill "Read More" button.
   ========================================================================== */

/* ---------- Design tokens ---------- */
.pt-team-section {
	--pt-yellow:      #ffe600;
	--pt-tan:         #fffef0;
	--pt-white:       #ffffff;
	--pt-green:       #3B4C3A;
	--pt-body:        #464851;
	--pt-border:      #e8e8e8;
	--pt-font:        "DM Sans", Helvetica, Arial, sans-serif;
	--pt-photo-size:  200px;
	--pt-photo-lift:  60px;   /* how far the photo overlaps above the card */
	--pt-radius:      0px 0px 25px 25px;
	--pt-maxw:        1180px;
}

/* ---------- Section shell ---------- */
.pt-team-section {
	padding: 80px 0 60px;
	background: var(--pt-white);
	color: var(--pt-body);
	font-family: var(--pt-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.pt-team-section *,
.pt-team-section *::before,
.pt-team-section *::after {
	box-sizing: inherit;
}

.pt-team-wrap {
	max-width: var(--pt-maxw);
	margin: 0 auto;
	padding: 0 32px;
}

/* ---------- Group headings (optional) ---------- */
.pt-team-group {
	margin-bottom: 60px;
}

.pt-group-head {
	margin-bottom: 20px;
	text-align: center;
}

.pt-group-name {
	font-family: var(--pt-font);
	font-weight: 700;
	font-size: 22px;
	color: var(--pt-green);
	margin: 0 0 6px;
}

.pt-group-blurb {
	color: var(--pt-body);
	font-size: 15px;
	margin: 0;
}

/* ---------- Grid ---------- */
.pt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 24px;
	/* extra top padding so the overflowing photos aren't clipped */
	padding-top: calc(var(--pt-photo-lift) + 10px);
}

/* Column overrides via data attribute */
.pt-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.pt-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* ---------- Card ---------- */
.pt-card {
	background: var(--pt-yellow);
	border: 3px solid var(--pt-tan);
	border-radius: var(--pt-radius);
	text-align: center;
	padding: 0 20px 24px;
	position: relative;
	/* card starts below the photo lift so the photo appears above */
	margin-top: var(--pt-photo-lift);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ---------- Photo — circular, overlapping the card top ----------
   Any headshot size/shape is standardized: object-fit:cover in a
   fixed circle. Faces are kept centered via object-position.
------------------------------------------------------------------ */
.pt-photo-wrap {
	position: absolute;
	top: calc(-1 * var(--pt-photo-lift));
	left: 50%;
	transform: translateX(-50%);
	width: var(--pt-photo-size);
	height: var(--pt-photo-size);
	border-radius: 50%;
	overflow: hidden;
	border: 5px solid var(--pt-tan);
	background: var(--pt-tan);
	flex: none;
}

.pt-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.pt-initials-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--pt-font);
	font-size: 52px;
	font-weight: 600;
	color: var(--pt-green);
	background: var(--pt-tan);
}

/* ---------- Card body ---------- */
.pt-card-body {
	/* push content below where the photo sits */
	padding-top: calc(var(--pt-photo-size) - var(--pt-photo-lift) + 12px);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.pt-name {
	font-family: var(--pt-font);
	font-weight: 600;
	font-size: 14px;
	color: var(--pt-green);
	line-height: 1.3;
	margin: 0 0 4px;
}

.pt-role {
	font-size: 11px;
	font-style: italic;
	color: var(--pt-body);
	line-height: 1.5;
	margin: 0 0 14px;
}

/* ---------- Read More button ---------- */
.pt-card-btn {
	display: inline-block;
	padding: 12px 26px;
	border: 2px solid #000;
	border-radius: 25px;
	background: transparent;
	color: var(--pt-body) !important;
	font-family: var(--pt-font);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s, color .15s;
	margin-top: auto;
	text-decoration: none;
}

.pt-card-btn:hover {
	background: var(--pt-green) !important;
	color: var(--pt-yellow) !important;
	border-color: var(--pt-green) !important;
}

/* ---------- Hidden modal data store ---------- */
.pt-modal-data {
	display: none !important;
}

/* ---------- Bio Modal ---------- */
.pt-scrim {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(20, 30, 26, .5);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.pt-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.pt-modal {
	background: #fff !important;
	border-radius: 18px !important;
	max-width: 680px;
	width: 100%;
	max-height: 88vh;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0,0,0,.20), 0 8px 24px rgba(0,0,0,.10) !important;
	display: flex !important;
	flex-direction: column;
	position: relative;
	transform: translateY(16px) scale(.985);
	transition: transform .32s cubic-bezier(.2,.8,.2,1);
}

.pt-scrim.is-open .pt-modal {
	transform: none;
}

.pt-modal-head {
	display: flex !important;
	gap: 20px;
	padding: 24px 26px 20px !important;
	border-bottom: 1px solid var(--pt-border) !important;
	align-items: center;
	background: var(--pt-yellow) !important;
}

/* Modal photo — standardized circle */
.pt-mph {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	overflow: hidden;
	flex: none;
	background: var(--pt-tan) !important;
	border: 3px solid var(--pt-tan) !important;
	position: relative;
}

.pt-mph img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center top !important;
	display: block !important;
}

.pt-mph .pt-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 22px;
	font-weight: 600;
	color: var(--pt-green);
}

.pt-modal-name {
	font-family: var(--pt-font) !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	color: var(--pt-green) !important;
	margin: 0 0 4px !important;
	line-height: 1.2 !important;
}

.pt-modal-role {
	font-size: 12px !important;
	font-style: italic;
	color: var(--pt-body) !important;
}

.pt-modal-body {
	padding: 24px 26px 28px !important;
	overflow: auto;
	background: #fff !important;
}

.pt-modal-body p {
	color: #333 !important;
	margin: 0 0 14px !important;
	font-size: 15px !important;
	line-height: 1.7 !important;
	font-family: var(--pt-font) !important;
	background: transparent !important;
}

.pt-modal-body p:last-child {
	margin-bottom: 0 !important;
}

.pt-modal-x {
	position: absolute !important;
	top: 16px !important;
	right: 16px !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 2px solid #000 !important;
	color: var(--pt-body) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	display: grid !important;
	place-items: center;
	cursor: pointer !important;
	z-index: 1;
	font-family: sans-serif;
	padding: 0 !important;
	min-height: unset !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: background .15s, color .15s;
}

.pt-modal-x:hover {
	background: var(--pt-green) !important;
	color: #fff !important;
	border-color: var(--pt-green) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.pt-grid,
	.pt-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.pt-team-wrap { padding: 0 16px; }
	.pt-grid,
	.pt-grid[data-cols="3"],
	.pt-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
	.pt-modal-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
	.pt-grid { grid-template-columns: 1fr; }
}