/**
 * ICpEP-Qatar Members page (formerly "Leadership & Officers") — 4-tier layout.
 *
 * Covers the [icpep_leadership_page] shortcode output rendered by
 * dynamic-feeds.php: Executive Committee (Tier 1, president hero + ExeCom
 * grid), Board of Directors (Tier 2, BoD grid), Advisers (Tier 3, a compact
 * officer-card grid) — each of these three with its own inline "Past …"
 * dropdown rather than one combined archive section — and Official Members
 * (Tier 4, a compact avatar-card directory of literally everyone:
 * current/past Execom, BoD, Advisers, plus Regular/Associate members,
 * filtered by an Active/Inactive tab pair).
 *
 * All selectors are prefixed to avoid collision with Elementor's generated CSS.
 * Color tokens from components.css (navy/cyan/text/mist) are assumed available.
 *
 * Enqueued only on the Members page (slug: members) — see inc/scripts.php.
 */

/* ==================================================================
   Smooth-scroll: active only on this page to avoid affecting other
   pages' scroll behaviour (the html element is global).
   ================================================================== */
html:has( body.page-members ) {
	scroll-behavior: smooth;
}

/* ==================================================================
   Tier shared layout
   ================================================================== */
.icpep-leadership-tier {
	padding-block: clamp( 64px, 8vw, 104px );
}

.icpep-leadership-tier--mist {
	background-color: var( --icpep-mist );
	position: relative;
}

/*
 * Subtle mesh texture on mist bands (same technique as .icpep-section--mist
 * in components.css) so card glass has something to blur against.
 */
.icpep-leadership-tier--mist::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient( circle at 20% 50%, rgba( 0, 163, 224, 0.04 ) 0%, transparent 55% ),
		radial-gradient( circle at 80% 20%, rgba( 11, 19, 43, 0.03 ) 0%, transparent 50% );
	pointer-events: none;
	z-index: 0;
}

.icpep-leadership-tier--mist > * {
	position: relative;
	z-index: 1;
}

.icpep-leadership-tier__inner {
	max-width: var( --icpep-section-max-width, 1280px );
	margin-inline: auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
	display: flex;
	flex-direction: column;
	gap: clamp( 2.5rem, 5vw, 4rem );
}

/* Section anchor offset for fixed header clearance */
.icpep-leadership-tier[id] {
	scroll-margin-top: 88px;
}

/* ==================================================================
   Tier header (eyebrow / title / subtitle)
   ================================================================== */
.icpep-leadership-tier__header {
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.icpep-leadership-tier__eyebrow {
	display: inline-block;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-xs );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --icpep-cyan-deep );
}

.icpep-leadership-tier__title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 800;
	font-size: clamp( 1.75rem, 1.3rem + 2.25vw, 2.75rem );
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var( --e-global-color-primary, #0b132b );
	margin: 0;
}

.icpep-leadership-tier__subtitle {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-base );
	line-height: 1.7;
	color: #64748b;
	margin: 0;
}

/* ==================================================================
   Tier 1 — Founding President hero card
   ================================================================== */
.icpep-president-hero {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp( 2rem, 5vw, 4rem );
	align-items: center;
	background: #ffffff;
	border-radius: 24px;
	padding: clamp( 2rem, 4vw, 3rem );
	box-shadow: var( --icpep-shadow-lg );
	border: 1px solid var( --icpep-card-border );
	position: relative;
	overflow: hidden;
}

/* Diagonal navy accent strip behind the photo */
.icpep-president-hero::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: clamp( 260px, 30vw, 360px );
	background: linear-gradient( 135deg, var( --e-global-color-primary, #0b132b ) 60%, #1c2b4a 100% );
	clip-path: polygon( 0 0, 85% 0, 100% 100%, 0 100% );
	z-index: 0;
}

.icpep-president-hero__photo-wrap {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.icpep-president-hero__photo {
	width: clamp( 200px, 22vw, 280px );
	height: clamp( 200px, 22vw, 280px );
	border-radius: 20px;
	overflow: hidden;
	box-shadow:
		0 0 0 4px rgba( 0, 163, 224, 0.4 ),
		0 0 0 7px rgba( 255, 255, 255, 0.15 ),
		var( --icpep-shadow-lg );
}

.icpep-president-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.icpep-president-hero__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 155deg, #1c2b4a 0%, #2d3f6b 100% );
}

.icpep-president-hero__initials {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 800;
	font-size: 3.5rem;
	color: #4dceff;
}

.icpep-president-hero__badge {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX( -50% );
	background: linear-gradient( 90deg, var( --icpep-cyan-deep ) 0%, #00c8f0 100% );
	color: #ffffff;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-xs );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35em 1.1em;
	border-radius: 100px;
	white-space: nowrap;
	box-shadow: var( --icpep-shadow-sm );
}

.icpep-president-hero__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.icpep-president-hero__name {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 800;
	font-size: clamp( 1.3rem, 1rem + 1.5vw, 1.875rem );
	color: var( --e-global-color-primary, #0b132b );
	line-height: 1.2;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
}

.icpep-president-hero__credentials {
	font-size: var( --icpep-fs-sm );
	font-weight: 500;
	color: var( --icpep-cyan-deep );
}

.icpep-president-hero__position {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-sm );
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
}

.icpep-president-hero__quote {
	margin: 0;
	padding: 1.1rem 1.5rem;
	border-left: 3px solid var( --icpep-cyan-deep );
	background: var( --icpep-mist );
	border-radius: 0 12px 12px 0;
}

.icpep-president-hero__quote p {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-style: italic;
	font-size: var( --icpep-fs-base );
	line-height: 1.75;
	color: #475569;
	margin: 0;
}

.icpep-president-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.icpep-officer-card__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var( --icpep-mist );
	color: var( --icpep-cyan-deep );
	flex-shrink: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.icpep-officer-card__linkedin:hover {
	background: var( --icpep-cyan-deep );
	color: #ffffff;
}

@media ( max-width: 768px ) {
	.icpep-president-hero {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.icpep-president-hero::before {
		inset-inline: 0;
		inset-block-start: 0;
		height: clamp( 180px, 35vw, 260px );
		width: 100%;
		clip-path: polygon( 0 0, 100% 0, 100% 80%, 0 100% );
	}

	.icpep-president-hero__photo-wrap {
		margin-inline: auto;
	}

	.icpep-president-hero__name {
		justify-content: center;
	}

	.icpep-president-hero__badge {
		bottom: -10px;
	}

	.icpep-president-hero__quote {
		text-align: left;
	}
}

/* ==================================================================
   Tier 1/Tier 2 — Effective Term switcher (member-tabs.js's
   initTermSwitcher()). One .icpep-term-panel per term the section has a
   record for; the <select> toggles which single one is visible via
   `hidden`. Both wrapper levels use the same flex-column/gap rhythm as
   .icpep-leadership-tier__inner so hero+grid spacing inside a panel, and
   the switcher's own spacing from the tier header above it, stay
   consistent whether a section has one term (no <select> rendered at
   all — see icpep_leadership_page_shortcode()) or several.
   ================================================================== */
.icpep-term-switcher {
	display: flex;
	flex-direction: column;
	gap: clamp( 2.5rem, 5vw, 4rem );
}

.icpep-term-switcher__control {
	align-items: center;
	align-self: center;
}

.icpep-term-panel {
	display: flex;
	flex-direction: column;
	gap: clamp( 2.5rem, 5vw, 4rem );
}

/* ==================================================================
   Tier 1 — Executive Committee card grid
   ================================================================== */
.icpep-execom-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 1.25rem, 3vw, 2rem );
}

@media ( max-width: 900px ) {
	.icpep-execom-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.icpep-execom-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================
   Officer cards (shared between ExeCom and BoD grids)
   ================================================================== */
.icpep-officer-card {
	background: #ffffff;
	border: 1px solid var( --icpep-card-border );
	border-radius: 20px;
	padding: 2rem 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	box-shadow: var( --icpep-shadow-sm );
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	text-decoration: none;
	color: inherit;
}

/* Cards for linked officers render as <a> — keep them looking like cards,
   not links, until hover/focus signals interactivity. */
a.icpep-officer-card:hover,
a.icpep-officer-card:focus-visible {
	text-decoration: none;
}

.icpep-officer-card:hover {
	transform: translateY( -5px );
	box-shadow: var( --icpep-shadow-lg );
}

.icpep-officer-card__photo {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow:
		0 0 0 4px #ffffff,
		0 0 0 6px var( --icpep-card-border ),
		var( --icpep-shadow-sm );
}

.icpep-officer-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.icpep-officer-card__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 155deg, var( --e-global-color-primary, #0b132b ) 0%, #1c2b4a 100% );
}

.icpep-officer-card__initials {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 1.7rem;
	color: #4dceff;
}

.icpep-officer-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.icpep-officer-card__name {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-base );
	color: var( --e-global-color-primary, #0b132b );
	margin: 0;
	line-height: 1.3;
}

.icpep-officer-card__position {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-sm );
	color: #64748b;
	margin: 0;
	line-height: 1.4;
}

/* BoD's "Board Member" / committee-name split (see
   icpep_render_officer_card()) — each half on its own line rather than
   wrapping wherever the full "Board Member — X" string runs out of width. */
.icpep-officer-card__position-prefix,
.icpep-officer-card__position-detail {
	display: block;
}

.icpep-officer-card__term {
	display: inline-block;
	margin-top: 0.15rem;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-xs );
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #64748b;
	background: var( --icpep-mist );
	padding: 0.2em 0.8em;
	border-radius: 100px;
}

/* ExeCom card: slightly larger photo */
.icpep-officer-card--execom .icpep-officer-card__photo {
	width: 120px;
	height: 120px;
}

/* BoD card: smaller photo, tighter padding */
.icpep-officer-card--bod {
	padding: 1.5rem 1rem;
}

.icpep-officer-card--bod .icpep-officer-card__photo {
	width: 96px;
	height: 96px;
}

.icpep-officer-card--bod .icpep-officer-card__name {
	font-size: var( --icpep-fs-sm );
}

/* ==================================================================
   Tier 2 — Board of Directors grid
   ================================================================== */
.icpep-bod-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 1rem, 2.5vw, 1.75rem );
}

@media ( max-width: 1100px ) {
	.icpep-bod-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 720px ) {
	.icpep-bod-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 420px ) {
	.icpep-bod-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================
   Tier 3 — Adviser cards (reuses .icpep-officer-card — see "Officer cards"
   above — for the same compact, centered avatar-on-top layout as the
   Execom/BoD grids, instead of a bespoke horizontal spotlight card)
   ================================================================== */
/* Fixed 4-column grid — same pattern as .icpep-bod-grid above — so a
   full term's 4 Advisers sit in one row on desktop, matching how the
   BoD grid handles its own headcount. A term with fewer than 4 (e.g.
   the 2025-2026 panel's 2) left-aligns into the first columns rather
   than centering as its own group; accepted here for consistency with
   BoD, which has the same tradeoff whenever its own headcount isn't a
   multiple of its column count. */
.icpep-advisers-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: clamp( 1.25rem, 2.5vw, 2rem );
}

@media ( max-width: 1100px ) {
	.icpep-advisers-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 480px ) {
	.icpep-advisers-grid {
		grid-template-columns: 1fr;
	}
}

.icpep-officer-card--adviser .icpep-officer-card__photo {
	width: 120px;
	height: 120px;
}

/* ==================================================================
   Tier 4 — Official Members roster
   ================================================================== */
.icpep-member-roster {
	display: flex;
	flex-direction: column;
	gap: clamp( 1.5rem, 3vw, 2rem );
}

/* Name / Membership ID search — same pill shape/border as the filter
   pills below it, an inline icon rather than a separate label (a search
   box reads as itself without one). `#content`-prefixed for the same
   reset.css collision reason as the pills — see the comment above them. */
#content .icpep-member-roster__search {
	position: relative;
	width: 100%;
	max-width: 420px;
	align-self: center;
}

#content .icpep-member-roster__search-icon {
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY( -50% );
	color: #94a3b8;
	pointer-events: none;
}

#content .icpep-member-roster__search-input {
	width: 100%;
	min-height: 44px;
	padding: 0.55em 1.1em 0.55em 2.75rem;
	border-radius: 999px;
	border: 1px solid var( --icpep-card-border );
	background-color: #ffffff;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-sm );
	color: var( --e-global-color-primary, #0b132b );
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#content .icpep-member-roster__search-input::placeholder {
	color: #94a3b8;
}

#content .icpep-member-roster__search-input:hover {
	border-color: rgba( 0, 163, 224, 0.4 );
}

#content .icpep-member-roster__search-input:focus-visible {
	outline: none;
	border-color: var( --icpep-cyan-deep );
	box-shadow: 0 0 0 3px rgba( 0, 163, 224, 0.15 );
}

/* ==================================================================
   Tier 4 — Filters. Same design language as the News & Events hub's
   category pills + Grid/Calendar view switch ([icpep_events_hub], see
   css/events.css `.icpep-events-hub__pill` / `__view-switch` /
   `__view-pill`) — deliberately identical values (not just "similar"),
   so a visitor who's used one filter bar on the site recognizes the other
   immediately.
   ================================================================== */

/* Membership Type pills (Tier 4) — also reused as-is for Tier 1/Tier 2's
   Status/Effective Term equivalents where noted below. Every button/select
   selector below
   is `#content`-prefixed for the same reason css/events.css's
   `#content .icpep-events-hub__pill` is: Hello Elementor's own
   reset.css styles bare `button`/`[type="button"]` with a 3px radius and
   a rose border, at the same (0,1,0) specificity as a single class
   selector — a tie leftmost-wins-on-source-order, and reset.css happens
   to load after this stylesheet, so without the extra `#content` ID
   selector these pills silently inherit reset.css's look instead of
   this one. */
#content .icpep-member-roster__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

#content .icpep-member-roster__pill {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.55em 1.35em;
	border-radius: 999px;
	border: 1px solid var( --icpep-card-border );
	background-color: #ffffff;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: var( --e-global-color-primary, #0b132b );
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#content .icpep-member-roster__pill:hover {
	border-color: rgba( 0, 163, 224, 0.4 );
	transform: translateY( -1px );
}

#content .icpep-member-roster__pill:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 2px;
}

#content .icpep-member-roster__pill.is-active {
	background-color: var( --e-global-color-primary, #0b132b );
	border-color: var( --e-global-color-primary, #0b132b );
	color: #ffffff;
}

@media ( prefers-reduced-motion: reduce ) {
	#content .icpep-member-roster__pill {
		transition: none;
	}

	#content .icpep-member-roster__pill:hover {
		transform: none;
	}
}

/* Controls bar — Membership Type (left) + Status (right), space-between,
   matching `.icpep-events-hub__controls`'s layout. */
.icpep-member-roster__controls {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.icpep-member-roster__filter-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.icpep-member-roster__filter-label {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-xs );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* #64748b, not the lighter #94a3b8 this replaced — that only cleared
	   2.56:1 against white, well short of WCAG AA's 4.5:1 normal-text
	   minimum. #64748b clears 4.76:1. */
	color: #64748b;
}

/* Effective Term switcher (Tier 1/Tier 2 — see .icpep-term-switcher above;
   Tier 4 has no term control at all, current term only). A native select
   (no "all" option; the newest term is selected by default), styled to
   match the pill's own shape/border/color so it reads as part of the same
   filter language. */
#content .icpep-member-roster__select {
	appearance: none;
	min-height: 44px;
	min-width: 180px;
	padding: 0.55em 2.25em 0.55em 1.1em;
	border-radius: 999px;
	border: 1px solid var( --icpep-card-border );
	background-color: #ffffff;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b132b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 16px;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: var( --e-global-color-primary, #0b132b );
	cursor: pointer;
	transition: border-color 0.18s ease;
}

#content .icpep-member-roster__select:hover {
	border-color: rgba( 0, 163, 224, 0.4 );
}

#content .icpep-member-roster__select:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 2px;
}

/* Status — the segmented "view switch" style, matching
   `.icpep-events-hub__view-switch` / `__view-pill`. */
.icpep-member-roster__view-switch {
	display: inline-flex;
	flex-shrink: 0;
	gap: 0.3rem;
	padding: 0.3rem;
	background-color: var( --icpep-mist );
	border-radius: 999px;
}

#content .icpep-member-roster__view-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0.5em 1.1em;
	border: none;
	border-radius: 999px;
	background-color: transparent;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: #475569;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#content .icpep-member-roster__view-pill:hover {
	color: var( --e-global-color-primary, #0b132b );
}

#content .icpep-member-roster__view-pill:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 2px;
}

#content .icpep-member-roster__view-pill.is-active {
	background-color: #ffffff;
	color: var( --e-global-color-primary, #0b132b );
	box-shadow: var( --icpep-shadow-sm );
}

@media ( prefers-reduced-motion: reduce ) {
	#content .icpep-member-roster__view-pill {
		transition: none;
	}
}

@media ( max-width: 640px ) {
	.icpep-member-roster__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.icpep-member-roster__filter-field--status {
		align-items: flex-start;
	}

	.icpep-member-roster__view-switch {
		align-self: flex-start;
	}
}

/* ==================================================================
   Tier 4 — Member avatar cards
   ================================================================== */
.icpep-member-roster__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1rem;
}

@media ( max-width: 900px ) {
	.icpep-member-roster__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 520px ) {
	.icpep-member-roster__grid {
		grid-template-columns: 1fr;
	}
}

.icpep-member-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.65rem;
	background: #ffffff;
	border: 1px solid var( --icpep-card-border );
	border-radius: 16px;
	padding: 1.5rem 1.1rem;
	box-shadow: var( --icpep-shadow-sm );
	text-decoration: none;
	color: inherit;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

a.icpep-member-card:hover,
a.icpep-member-card:focus-visible {
	text-decoration: none;
	transform: translateY( -4px );
	box-shadow: var( --icpep-shadow-lg );
}

/* `.icpep-member-card` sets its own `display`, which otherwise wins the
   cascade over the `[hidden]` attribute's UA-stylesheet `display: none`
   (equal specificity, author styles load later) — member-tabs.js relies on
   toggling `hidden` per card for the two-layer filter, so this is required,
   not decorative. */
.icpep-member-card[hidden] {
	display: none;
}

.icpep-member-card__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 155deg, var( --e-global-color-primary, #0b132b ) 0%, #1c2b4a 100% );
	box-shadow:
		0 0 0 3px #ffffff,
		0 0 0 4px var( --icpep-card-border );
}

.icpep-member-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.icpep-member-card__initials {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: #4dceff;
}

.icpep-member-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	min-width: 0;
}

.icpep-member-card__name {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-sm );
	color: var( --e-global-color-primary, #0b132b );
	line-height: 1.3;
}

.icpep-member-card__title {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-xs );
	color: #64748b;
	line-height: 1.4;
}

.icpep-member-card__role-group {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-xs );
	color: #64748b;
	line-height: 1.4;
}

.icpep-member-card__role {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-xs );
	font-weight: 600;
	color: var( --icpep-cyan-deep );
	line-height: 1.4;
}

.icpep-member-card__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.25rem;
}

.icpep-member-card__type {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.15em 0.6em;
	border-radius: 100px;
}

.icpep-member-card__type--regular {
	background: rgba( 0, 163, 224, 0.12 );
	color: var( --icpep-cyan-deep );
}

.icpep-member-card__type--associate {
	background: rgba( 219, 39, 119, 0.1 );
	color: #db2777;
}

/* Status badge — a second, separate pill from the Membership Type badge
   above, so a card visibly carries both dimensions regardless of which
   filter is currently applied. */
.icpep-member-card__status {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.15em 0.6em;
	border-radius: 100px;
}

.icpep-member-card__status--active {
	background: rgba( 217, 119, 6, 0.12 );
	color: #d97706;
}

.icpep-member-card__status--inactive {
	background: rgba( 100, 116, 139, 0.12 );
	color: #64748b;
}

.icpep-member-roster__empty {
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: var( --icpep-fs-sm );
	/* #64748b, not the lighter #94a3b8 this replaced — that only cleared
	   2.56:1 against white, well short of WCAG AA's 4.5:1 normal-text
	   minimum. #64748b clears 4.76:1. */
	color: #64748b;
	grid-column: 1 / -1;
	text-align: center;
	padding: 1.5rem 0;
}

/* ==================================================================
   Per-tier "Past …" dropdown (Execom / BoD / Advisers each get their own,
   right inside their own section, instead of one combined archive block)
   ================================================================== */
.icpep-tier-past {
	margin-top: clamp( 1.5rem, 3vw, 2.5rem );
}

.icpep-tier-past__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	list-style: none;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: var( --icpep-cyan-deep );
	padding: 0.5rem 0;
}

.icpep-tier-past__toggle::-webkit-details-marker {
	display: none;
}

.icpep-tier-past__chevron {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.icpep-tier-past[open] .icpep-tier-past__chevron {
	transform: rotate( 180deg );
}

.icpep-tier-past__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1.25rem;
	padding-top: 1.25rem;
}

@media ( max-width: 1100px ) {
	.icpep-tier-past__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 720px ) {
	.icpep-tier-past__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 420px ) {
	.icpep-tier-past__grid {
		grid-template-columns: 1fr;
	}
}

.icpep-officer-card--past {
	opacity: 0.88;
}

/* ==================================================================
   Reduced motion safety net
   ================================================================== */
@media ( prefers-reduced-motion: reduce ) {
	html:has( body.page-members ) {
		scroll-behavior: auto;
	}

	.icpep-officer-card {
		transition: none;
	}

	.icpep-officer-card:hover {
		transform: none;
	}

	.icpep-tier-past__chevron {
		transition: none;
	}
}