/**
 * Profile Selector block styles.
 * Two layouts: .profile-selector--story (tabs + facts/quote card + pagination)
 *              .profile-selector--people (name list + portrait/bio).
 * Uses theme tokens (var(--cmcf-*)). Auto-enqueued via functions.php glob.
 */

.profile-selector {
	font-family: var(--cmcf-font-body);
	color: var(--cmcf-black);
}

/* ============================ STORY layout ============================== */

/* Horizontal tab row */
.profile-selector--story .profile-selector--nav {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 3vw, 56px);
	margin-bottom: clamp(28px, 3vw, 44px);
}

.profile-selector--story .profile-selector--tab {
	appearance: none;
	background: none;
	border: 0;
	padding: 0 0 6px;
	cursor: pointer;
	font-family: var(--cmcf-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: var(--cmcf-ls-eyebrow);
	text-transform: uppercase;
	color: #424242;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.profile-selector--story .profile-selector--tab:hover {
	color: var(--cmcf-primary);
}

.profile-selector--story .profile-selector--tab.is-active {
	color: var(--cmcf-primary);
	border-bottom-color: var(--cmcf-secondary);
}

/* Detail card: white with a hairline frame INSET ~28px from the card edge (per design) */
.profile-selector--story .profile-selector--panels {
	background: var(--cmcf-white);
	padding: 28px;
	box-shadow: 0 1px 24px rgba(0, 0, 0, 0.04);
}

.profile-selector--story .profile-selector--panel {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) 1px minmax(0, 1.1fr);
	gap: clamp(32px, 4vw, 64px);
	padding: clamp(32px, 4vw, 56px);
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.profile-selector--story .profile-selector--panel:not(.is-active) { display: none; }

/* Lime vertical divider is the middle grid column */
.profile-selector--story .profile-selector--facts {
	position: relative;
}
.profile-selector--story .profile-selector--panel::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	width: 2px;
	background: var(--cmcf-secondary);
	align-self: stretch;
	justify-self: center;
}

/* Left facts column */
.profile-selector--recipient {
	font-family: var(--cmcf-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cmcf-black);
	margin: 0 0 10px;
}

.profile-selector--story .profile-selector--name {
	font-family: var(--cmcf-font-heading);
	font-weight: 400;
	font-size: var(--cmcf-fs-name);
	line-height: 1.2;
	color: var(--cmcf-primary);
	margin: 0 0 24px;
}

.profile-selector--meta {
	margin: 0;
}
.profile-selector--meta-label {
	font-family: var(--cmcf-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--cmcf-black);
	margin-top: 20px;
}
.profile-selector--meta-label:first-child { margin-top: 0; }
.profile-selector--meta-value {
	font-family: var(--cmcf-font-body);
	font-size: var(--cmcf-fs-body);
	line-height: 1.4;
	color: var(--cmcf-black);
	margin: 2px 0 0;
}

/* Right quote column */
.profile-selector--quote {
	grid-column: 3;
	grid-row: 1;
}
.profile-selector--quote-mark {
	display: block;
	font-family: var(--cmcf-font-heading);
	font-size: clamp(80px, 8vw, 120px);
	line-height: 0.6;
	color: var(--cmcf-secondary);
	height: 0.55em;
	overflow: hidden;
	margin-bottom: 28px;
}
.profile-selector--quote-body {
	font-family: var(--cmcf-font-body);
	font-size: var(--cmcf-fs-body);
	line-height: 1.6;
	color: var(--cmcf-black);
}
.profile-selector--quote-body p { margin: 0 0 1em; }
.profile-selector--quote-body p:last-child { margin-bottom: 0; }

/* Pagination */
.profile-selector--pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: clamp(28px, 3vw, 44px);
}
.profile-selector--page-num {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--cmcf-font-body);
	font-size: var(--cmcf-fs-body);
	line-height: 1;
	color: var(--cmcf-black);
	padding: 4px 2px;
	border-bottom: 2px solid transparent;
	min-width: 24px;
}
.profile-selector--page-num:hover { color: var(--cmcf-primary); }
.profile-selector--page-num.is-active {
	color: var(--cmcf-primary);
	border-bottom-color: var(--cmcf-primary);
	font-weight: 600;
}
.profile-selector--page-arrow {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--cmcf-white);
	border: 1px solid rgba(0, 0, 0, 0.25);
	cursor: pointer;
	color: var(--cmcf-black);
	font-size: 12.8px;
	transition: border-color .15s ease, color .15s ease;
}
.profile-selector--page-arrow:hover {
	border-color: var(--cmcf-primary);
	color: var(--cmcf-primary);
}

/* ============================ PEOPLE layout ============================= */

.profile-selector--people {
	display: grid;
	grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
	/* row 1 = section heading only; the spanning panel column must NOT
	   distribute its height into row 1 (pushes the names list down) */
	grid-template-rows: auto 1fr;
	gap: 0 clamp(40px, 7vw, 110px);
	align-items: start;
}

/* Vertical name list (left) */
.profile-selector--people .profile-selector--nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.profile-selector--people .profile-selector--tab {
	appearance: none;
	background: none;
	border: 0;
	padding: 0 0 4px;
	cursor: pointer;
	text-align: left;
	font-family: var(--cmcf-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: var(--cmcf-ls-eyebrow);
	text-transform: uppercase;
	color: #424242;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.profile-selector--people .profile-selector--tab:hover { color: var(--cmcf-primary); }
.profile-selector--people .profile-selector--tab.is-active {
	color: var(--cmcf-primary);
	border-bottom-color: var(--cmcf-secondary);
}

/* Detail (right): portrait + bio */
.profile-selector--people .profile-selector--panels { min-width: 0; }
.profile-selector--people .profile-selector--panel {
	/* Design stacks the portrait ABOVE the bio in one ~746px column
	   (names list is the left grid column of the section) */
	display: block;
	max-width: 746px;
}
.profile-selector--people .profile-selector--panel .profile-selector--portrait-frame {
	margin-bottom: 36px;
}
.profile-selector--people .profile-selector--panel:not(.is-active) { display: none; }

/* Portrait: 346x346 photo inset in a 2px light-green 376x376 frame */
.profile-selector--portrait-frame {
	width: 376px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border: 2px solid var(--cmcf-secondary);
	padding: 14px;
	box-sizing: border-box;
	background: var(--cmcf-white);
}
.profile-selector--portrait-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-selector--people .profile-selector--eyebrow {
	margin: 0 0 6px;
}
.profile-selector--people .profile-selector--name {
	font-family: var(--cmcf-font-heading);
	font-weight: 400;
	font-size: var(--cmcf-fs-name);
	line-height: 1.3;
	color: var(--cmcf-primary);
	margin: 0 0 20px;
}
.profile-selector--bio {
	font-family: var(--cmcf-font-body);
	font-size: var(--cmcf-fs-body);
	line-height: 1.6;
	color: var(--cmcf-black);
}
.profile-selector--bio p { margin: 0 0 1.2em; }
.profile-selector--bio p:last-child { margin-bottom: 0; }
.profile-selector--bio p { margin: 0 0 1em; }
.profile-selector--bio p:last-child { margin-bottom: 0; }
.profile-selector--bio a { color: var(--cmcf-primary); text-decoration: underline; }

/* ============================ MOBILE ================================== */

@media (max-width: 860px) {
	/* Story: tabs scroll horizontally; card + quote stack */
	.profile-selector--story .profile-selector--nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 24px;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.profile-selector--story .profile-selector--tab { white-space: nowrap; }

	.profile-selector--story .profile-selector--panel {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 28px 22px;
	}
	.profile-selector--story .profile-selector--panel::before {
		display: none;
	}
	.profile-selector--story .profile-selector--quote,
	.profile-selector--story .profile-selector--facts {
		grid-column: 1;
	}
	.profile-selector--story .profile-selector--facts {
		padding-bottom: 28px;
		border-bottom: 2px solid var(--cmcf-secondary);
	}

	/* People: name list above the detail; portrait full width */
	.profile-selector--people {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.profile-selector--people .profile-selector--nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 14px 24px;
	}
	.profile-selector--people .profile-selector--panel {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.profile-selector--portrait-frame { width: 100%; max-width: 376px; }
}

   (design: 613x410 cards, per-card CTA, no tabs/pagination) ---- */
@media (max-width: 860px) {
}
/* (legacy single-card rules below are superseded where they conflict) */
.profile-selector--section-head { text-align: center; margin-bottom: 32px; }
.profile-selector--section-heading { font-size: var(--cmcf-fs-h1); margin: 0; }

/* ---- Variant: .cmcf-stories-grey (interior pages) — grey band ---- */
.cmcf-stories-grey.profile-selector {
	background: var(--cmcf-grey-panel);
	padding: var(--cmcf-section-pad) var(--cmcf-page-padding);
}
.cmcf-stories-grey .profile-selector--nav,
.cmcf-stories-grey .profile-selector--panels {
	max-width: var(--cmcf-container);
	margin-inline: auto;
}

/* Design rhythm: heading → 40px → full-width green hairline → 75px → tabs → 26px → card,
   card → 76px → pagination */
.cmcf-stories-grey .profile-selector--section-head { margin-bottom: 40px; }
.cmcf-stories-grey .profile-selector--nav {
	border-top: 1px solid var(--cmcf-primary);
	padding-top: 75px;
	margin-top: 0;
	margin-bottom: 26px;
}
.cmcf-stories-grey .profile-selector--pagination { margin-top: 76px; }

/* ---- People layout: content-box container + left-aligned section heading ---- */
.profile-selector--people {
	max-width: calc(var(--cmcf-container) + 2 * var(--cmcf-page-padding));
	margin-inline: auto;
	padding: var(--cmcf-section-pad) var(--cmcf-page-padding);
}
.profile-selector--people .profile-selector--section-head { text-align: left; margin-bottom: 36px; }
@media (min-width: 981px) {
	/* Design: heading tops the NAMES column only; the portrait/bio column runs
	   parallel from the section top (portrait top ~= heading top) */
	.profile-selector--people .profile-selector--section-head { grid-column: 1; grid-row: 1; }
	.profile-selector--people .profile-selector--nav { grid-column: 1; grid-row: 2; }
	.profile-selector--people .profile-selector--panels { grid-column: 2; grid-row: 1 / span 2; }
}
.profile-selector--people .profile-selector--section-heading { color: var(--cmcf-primary); }

/* ==== Variant: .cmcf-stories-lime (home) — TWO static dark-green cards ====
   Design: 613x410 cards side by side, per-card on-green CTA, no tabs/pagination. */
.profile-selector--story.cmcf-stories-lime { background: var(--cmcf-secondary); padding: 76px var(--cmcf-page-padding); }
.profile-selector--story.cmcf-stories-lime .profile-selector--nav,
.profile-selector--story.cmcf-stories-lime .profile-selector--pagination { display: none; }
.profile-selector--story.cmcf-stories-lime .profile-selector--panels {
	padding: 0;           /* the grey-band inset frame does not apply to the lime cards */
	box-shadow: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	background: transparent;
	max-width: var(--cmcf-container);
	margin-inline: auto;
}
.profile-selector--cards.cmcf-stories-lime .profile-selector--panel {
	border: none;
	display: block;
	background: var(--cmcf-primary);
	color: var(--cmcf-white);
	min-height: 410px;
	padding: 54px 54px 48px;
}
.profile-selector--story.cmcf-stories-lime .profile-selector--panel::before { display: none; }
.profile-selector--story.cmcf-stories-lime .profile-selector--facts { display: flex; flex-direction: column; padding: 0; border: none; }
.profile-selector--story.cmcf-stories-lime .profile-selector--name { color: var(--cmcf-accent); order: 1; margin: 0 0 8px; }
.profile-selector--story.cmcf-stories-lime .profile-selector--recipient {
	order: 2;
	color: var(--cmcf-white);
	border-bottom: 1px solid var(--cmcf-accent);
	padding-bottom: 16px;
	margin-bottom: 16px;
}
.profile-selector--story.cmcf-stories-lime .profile-selector--quote-mark { display: none; }
.profile-selector--story.cmcf-stories-lime .profile-selector--quote { padding: 0; border: none; }
.profile-selector--story.cmcf-stories-lime .profile-selector--quote-body,
.profile-selector--story.cmcf-stories-lime .profile-selector--quote-body p { color: var(--cmcf-white); }
.profile-selector--story.cmcf-stories-lime .profile-selector--card-cta { margin-top: 24px; }
.profile-selector--story.cmcf-stories-lime .profile-selector--section-head .cmcf-eyebrow { color: var(--cmcf-black); }
.profile-selector--story.cmcf-stories-lime .profile-selector--section-heading { color: var(--cmcf-primary); }
@media (max-width: 860px) {
	.profile-selector--story.cmcf-stories-lime .profile-selector--panels { grid-template-columns: 1fr; }
}

/* Divider between Trustees and Staff sections (design: 2px lime rule) */
.profile-selector--people.cmcf-staff { border-top: 2px solid var(--cmcf-secondary); }