/**
 * WRC Staff Profiles.
 *
 * Compact card grid for the leadership/profile listing, following the CSIR
 * Board page as the design reference and the WRC brand palette.
 *
 * Replaces the Team Showcase widget's own markup so the layout is ours.
 *
 * Every card is the same width and height at any given breakpoint. That is
 * achieved by reserving fixed space for the name (2 lines), position (2 lines)
 * and email (1 line) and clamping overflow, so differing text lengths cannot
 * change a card's height. The image is a fixed 4:5 box with object-fit: cover.
 *
 * The site's design language is square — sampled elements are overwhelmingly
 * 0px radius, with buttons at 2px — so cards, images and the modal are square
 * and the button matches the theme's 2px.
 *
 * Note on !important: the parent theme styles h3/p/button globally with
 * higher-specificity selectors and paints all button text white. Without
 * forcing these properties the names render at 32px and button labels are
 * invisible. Everything is scoped to .wrc-staff so nothing else is affected.
 */

.wrc-staff {
	--wrc-blue:       #094E9C;
	--wrc-blue-dark:  #073B78;
	--wrc-lightblue:  #00AEEF;
	--wrc-green:      #A9CC4F;
	--wrc-text:       #666666;
	--wrc-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Reserved text heights — these keep every card identical. */
	--wrc-name-size:  17px;
	--wrc-name-lh:    1.3;
	--wrc-role-size:  13.5px;
	--wrc-role-lh:    1.4;
	--wrc-email-size: 12.5px;
	--wrc-email-lh:   1.4;

	display: grid;
	/* Desktop: 5 per row. */
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 22px;
	align-items: stretch;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------- card */

.wrc-staff .wrc-staff__card {
	display: flex;
	flex-direction: column;
	/* Stretch to the tallest card in the row; the reserved text heights below
	   mean that height is the same for every card on the page. */
	height: 100%;
	padding: 10px 10px 0;
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: 0 2px 12px rgba( 9, 78, 156, 0.09 );
	overflow: hidden;
	transition:
		transform 250ms ease,
		box-shadow 250ms ease;
}

.wrc-staff .wrc-staff__card:hover,
.wrc-staff .wrc-staff__card:focus-within {
	transform: translateY( -5px );
	box-shadow: 0 14px 30px rgba( 9, 78, 156, 0.18 );
}

/* ------------------------------------------------------------------ photo */

.wrc-staff .wrc-staff__photo {
	position: relative;
	width: 100%;
	/* Fixed 4:5 box: identical for every card, so no image can appear
	   larger than another. */
	aspect-ratio: 4 / 5;
	flex: 0 0 auto;
	overflow: hidden;
	background: #EDFAFF;
}

.wrc-staff .wrc-staff__photo img {
	width: 100% !important;
	/* !important: the theme and Elementor both set a plain `img { height:auto }`
	   which would otherwise leave the image short of the box. */
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	/* Anchor near the top so heads are never cropped out of portrait shots. */
	object-position: center top;
	display: block;
	transition: transform 250ms ease;
}

.wrc-staff .wrc-staff__card:hover .wrc-staff__photo img {
	transform: scale( 1.045 );
}

/* Initials tile when a photo is missing or fails to load. */
.wrc-staff .wrc-staff__initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 135deg, var( --wrc-blue ), var( --wrc-lightblue ) );
	color: #fff;
	font-family: var( --wrc-font );
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------- body */

.wrc-staff .wrc-staff__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 3px;
	padding: 13px 5px 15px;
	text-align: left;
	/* The reserve that keeps every card the same height is measured at runtime
	   from the tallest card's actual content (equaliseBodies in wrc-staff.js),
	   so no card carries more slack than the tallest one genuinely needs. */
}

.wrc-staff .wrc-staff__name {
	/* Two lines are reserved whether or not the name needs them. */
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var( --wrc-font ) !important;
	font-size: var( --wrc-name-size ) !important;
	line-height: var( --wrc-name-lh ) !important;
	font-weight: 700 !important;
	/* Uppercase is applied visually only — the underlying name data is
	   untouched, so screen readers and mailto/search still see the real name. */
	letter-spacing: 0.01em !important;
	text-transform: uppercase !important;
	color: var( --wrc-blue ) !important;
}

.wrc-staff .wrc-staff__role {
	/* Flex row so the icon sits beside the text and the label starts at the
	   same x as the email below it. The clamp moves to the inner span. */
	display: flex !important;
	align-items: flex-start;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var( --wrc-font ) !important;
	font-size: var( --wrc-role-size ) !important;
	line-height: var( --wrc-role-lh ) !important;
	font-weight: 500 !important;
	text-transform: none !important;
	color: var( --wrc-text ) !important;
}

.wrc-staff .wrc-staff__role span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-width: 0;
}

.wrc-staff .wrc-staff__role-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	/* Optically centre against the first line rather than the whole block. */
	margin-top: calc( ( var( --wrc-role-size ) * var( --wrc-role-lh ) - 13px ) / 2 );
	color: var( --wrc-lightblue );
}

/* ------------------------------------------------------------------ email */

.wrc-staff .wrc-staff__email {
	display: flex !important;
	align-items: center;
	gap: 6px;
	min-height: calc( var( --wrc-email-size ) * var( --wrc-email-lh ) );
	margin: 0 !important;
	padding: 0 !important;
	font-family: var( --wrc-font ) !important;
	font-size: var( --wrc-email-size ) !important;
	line-height: var( --wrc-email-lh ) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	color: var( --wrc-text ) !important;
	text-decoration: none !important;
	transition: color 250ms ease;
}

/* One line, ellipsised — the full address stays in the href and title. */
.wrc-staff .wrc-staff__email span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.wrc-staff .wrc-staff__email:hover,
.wrc-staff .wrc-staff__email:focus-visible {
	color: var( --wrc-blue ) !important;
	text-decoration: underline !important;
}

.wrc-staff .wrc-staff__email-icon {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: var( --wrc-lightblue );
}

/* ----------------------------------------------------------------- button */

/* margin-top:auto pins the button to the bottom of every card. */
.wrc-staff .wrc-staff__actions {
	margin-top: auto;
	padding-top: 8px;
}

.wrc-staff .wrc-staff__more {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto !important;
	min-width: 0 !important;
	padding: 9px 14px !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: var( --wrc-blue ) !important;
	background-image: none !important;
	color: #fff !important;
	font-family: var( --wrc-font ) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-indent: 0 !important;
	white-space: nowrap;
	box-shadow: none !important;
	cursor: pointer;
	transition:
		background-color 250ms ease,
		transform 250ms ease,
		box-shadow 250ms ease;
}

.wrc-staff .wrc-staff__more:hover,
.wrc-staff .wrc-staff__more:focus-visible {
	background: var( --wrc-blue-dark ) !important;
	transform: translateY( -2px );
	box-shadow: 0 6px 14px rgba( 9, 78, 156, 0.32 );
}

.wrc-staff .wrc-staff__more-arrow {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	transition: transform 250ms ease;
}

.wrc-staff .wrc-staff__more:hover .wrc-staff__more-arrow {
	transform: translateX( 3px );
}

/* ==========================================================================
 * Responsive grid
 * ========================================================================== */

/* Tablet (landscape): 3 per row. */
@media ( max-width: 1199px ) {
	.wrc-staff {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 20px;
	}
}

/* Smaller tablets: 2 per row. */
@media ( max-width: 1023px ) {
	.wrc-staff {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 18px;
	}
}

/* Mobile: 1 per row. */
@media ( max-width: 767px ) {
	.wrc-staff {
		grid-template-columns: minmax( 0, 1fr );
		gap: 18px;
	}

	.wrc-staff .wrc-staff__card {
		/* A full-width single column would blow the portraits up, so cap it. */
		max-width: 330px;
		width: 100%;
		margin-inline: auto;
	}

	.wrc-staff {
		--wrc-name-size:  18px;
		--wrc-role-size:  14px;
		--wrc-email-size: 13px;
	}
}

/* ==========================================================================
 * Small-screen section spacing
 *
 * The Elementor containers holding the staff grids carry large bottom margins
 * set for the desktop layout (220px, and one at 790px). At phone width those
 * leave enormous empty gaps between sections, so they are reined in here.
 *
 * `.wrc-staff-section` is added by tagSections() in wrc-staff.js, so this only
 * ever touches containers that hold a staff grid — no other part of the site.
 * ========================================================================== */

@media ( max-width: 767px ) {
	/* Padding, not margin: a margin lets the page background show through as a
	   white band between the pale-blue sections. Padding keeps the gap inside
	   the section so the background stays continuous. */
	.wrc-staff-section {
		margin-bottom: 0 !important;
		padding-bottom: 34px !important;
	}

	/* The right-column "Meet the ..." labels collapse onto the real section
	   heading at this width, doubling the underline. Hidden on phones only —
	   they still show on tablet and desktop. */
	.wrc-decorative-heading {
		display: none !important;
	}

	/* These inner containers carry very large bottom padding from the desktop
	   layout (measured up to 1310px at phone width), which is what produced
	   the huge empty gaps between sections. The margin above provides the
	   separation instead. */
	.wrc-staff-section > .e-con-inner {
		padding-bottom: 0 !important;
	}


	/* The card already spans its column; centring it would pull it out of
	   line with the section headings. */
	.wrc-staff .wrc-staff__card {
		max-width: none;
		margin-inline: 0;
	}
}

/* ==========================================================================
 * Tablet gutter
 *
 * Between 768px and 1024px the Elementor containers have no side padding, so
 * the grid (and therefore the headings, which align to it) sits hard against
 * the screen edge. alignGrids() leaves the inline padding alone when the
 * offset is zero, so this CSS gutter takes effect and the headings follow.
 * ========================================================================== */

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.wrc-staff-mount {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ==========================================================================
 * Profile modal
 * ========================================================================== */

.wrc-staff-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba( 8, 26, 48, 0.66 );
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
}

.wrc-staff-modal[hidden] {
	display: none;
}

.wrc-staff-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min( 720px, 100% );
	max-height: min( 86vh, 760px );
	background: #fff;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.3 );
	overflow: hidden;
}

.wrc-staff-modal__header {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 24px 60px 24px 26px;
	background: #EDFAFF;
	border-bottom: 1px solid #D9E9F5;
}

.wrc-staff-modal__photo {
	flex: 0 0 auto;
	width: 76px;
	height: 95px;              /* 4:5, consistent with the cards */
	object-fit: cover;
	object-position: center top;
}

.wrc-staff-modal .wrc-staff-modal__name {
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 22px !important;
	line-height: 1.28 !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase !important;
	color: #094E9C !important;
}

.wrc-staff-modal .wrc-staff-modal__role {
	margin: 0 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	color: #666666 !important;
}

.wrc-staff-modal .wrc-staff-modal__email {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
	font-family: "Montserrat", sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #666666 !important;
	text-decoration: none !important;
	overflow-wrap: anywhere;
}

.wrc-staff-modal .wrc-staff-modal__email:hover {
	color: #094E9C !important;
	text-decoration: underline !important;
}

.wrc-staff-modal__email-icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: #00AEEF;
}

.wrc-staff-modal__body {
	padding: 24px 26px 28px;
	overflow-y: auto;
}

.wrc-staff-modal .wrc-staff-modal__body p {
	margin: 0 0 0.9em !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: #3D4752 !important;
}

.wrc-staff-modal .wrc-staff-modal__body p:last-child {
	margin-bottom: 0 !important;
}

.wrc-staff-modal .wrc-staff-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid #CFE0EE !important;
	background: #fff !important;
	background-image: none !important;
	color: #094E9C !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-indent: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background-color 250ms ease, color 250ms ease;
}

.wrc-staff-modal .wrc-staff-modal__close:hover,
.wrc-staff-modal .wrc-staff-modal__close:focus-visible {
	background: #EDFAFF !important;
	color: #00AEEF !important;
}

body.wrc-modal-open {
	overflow: hidden;
}

@media ( max-width: 767px ) {
	.wrc-staff-modal {
		padding: 0;
	}

	.wrc-staff-modal__dialog {
		width: 100%;
		height: 100%;
		max-height: 100%;
	}

	.wrc-staff-modal__header {
		padding: 20px 56px 20px 18px;
		gap: 14px;
	}

	.wrc-staff-modal__photo {
		width: 60px;
		height: 75px;
	}

	.wrc-staff-modal__body {
		padding: 20px 18px 26px;
	}
}