/* ==========================================================================
   SUDAIR PHARMA — BOARD OF DIRECTORS
   Portrait cards that reveal a biography on hover, focus or tap, shown in
   labelled tiers: executive leadership, then the wider board.

   The reveal is driven by a real <button> with aria-expanded, and every visual
   state keys off `[aria-expanded="true"]` as well as `:hover`/`:focus-within`.
   Hover alone would leave the biographies unreachable by keyboard and unreliable
   on touch — and for several members this is the only place their credentials
   appear on the site.

   Both tiers share one card, one grid rhythm and one motion curve. The tiers are
   a hierarchy of *people*, not of components; if they read as two different
   designs the split has failed.
   ========================================================================== */

.sud-bd {
	--bd-radius: var(--sud-radius-lg);
	--bd-pad: clamp(1.15rem, 1.8vw, 1.6rem);
	--bd-ease: cubic-bezier(.16, 1, .3, 1);
	--bd-ease-soft: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   TIERS
   Each tier is now its own Elementor section, so the separation between them is
   section padding — content can be dropped between the two without either one
   carrying a margin that assumes what sits next to it.

   Kept for the case where two tiers do share a section: without it they would
   run together at the grid gap and read as one long list.
   -------------------------------------------------------------------------- */

.sud-bd__group + .sud-bd__group {
	margin-block-start: clamp(3.25rem, 6vw, 5.5rem);
}

.sud-bd__grouphead {
	display: grid;
	grid-template-columns: auto minmax(2rem, 1fr);
	align-items: center;
	column-gap: clamp(1rem, 2vw, 1.75rem);
	row-gap: .65rem;
	margin-block-end: clamp(1.6rem, 2.6vw, 2.5rem);
}

/* Doubled `.sud-bd` throughout on the h3s and p's below. Elementor's kit styles
   bare `h3` and `p` at .elementor-kit-5 h3 — specificity (0,1,1) — which beats a
   single class and was repainting the names its grey and the panel name grey on
   deep green. Scoping to the block outranks it without reaching for !important. */
.sud-bd .sud-bd__label {
	font-family: var(--sud-font-display);
	font-size: var(--sud-text-xs) !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sud-green-700);
	margin: 0;
}

/* Hairline that runs out from the label and fades — a rule that stops hard
   would read as a divider between tiers rather than a label for one. */
.sud-bd__rule {
	block-size: 1px;
	background: linear-gradient(90deg, var(--sud-line), transparent);
}

.sud-bd .sud-bd__note {
	grid-column: 1 / -1;
	margin: 0;
	max-inline-size: 64ch;
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm);
	line-height: 1.6;
	color: var(--sud-muted);
}

/* --------------------------------------------------------------------------
   GRID
   Three columns at desktop in both tiers. Deliberately fixed rather than
   auto-fit: auto-fit would give the five-member tier four across and leave one
   card stranded, which reads as an error rather than a composition.
   -------------------------------------------------------------------------- */

.sud-bd__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 2.2vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.sud-bd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.sud-bd__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sud-bd__item {
	display: flex;
	/* The open card lifts over its neighbours. */
	position: relative;
}

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */

.sud-bd__card {
	position: relative;
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	background: var(--sud-surface);
	border: 1px solid var(--sud-line);
	border-radius: var(--bd-radius);
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 1px 2px rgba(11, 31, 23, .03);
	transition:
		transform .6s var(--bd-ease-soft),
		box-shadow .6s var(--bd-ease-soft),
		border-color .5s ease;
}

/* --------------------------------------------------------------------------
   PORTRAIT
   -------------------------------------------------------------------------- */

.sud-bd__media {
	position: relative;
	overflow: hidden;
	background: var(--sud-surface-3);
	aspect-ratio: 4 / 5;
}

.sud-bd__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 12%;   /* faces sit above centre in these crops */
	display: block;
	transition: transform 1.4s var(--bd-ease-soft);
}

/* Dims the portrait as the panel rises. Without it the face competes with the
   biography for attention and neither wins. */
.sud-bd__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 48, 31, .34), rgba(0, 48, 31, .74));
	opacity: 0;
	pointer-events: none;
	transition: opacity .55s var(--bd-ease);
}

/* Monogram, for members with no portrait supplied */
.sud-bd__monogram {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--sud-font-display);
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--sud-green-700);
	background:
		radial-gradient(120% 100% at 30% 20%, rgba(67, 182, 73, .16), transparent 60%),
		var(--sud-surface-3);
}

/* --------------------------------------------------------------------------
   RESTING CONTENT
   -------------------------------------------------------------------------- */

.sud-bd__base {
	padding: var(--bd-pad);
	padding-inline-end: clamp(3.25rem, 4.5vw, 4rem);   /* clear of the toggle */
	flex: 1 1 auto;
}

.sud-bd .sud-bd__name {
	font-family: var(--sud-font-display);
	font-size: clamp(1.2rem, 1.55vw, 1.45rem) !important;
	font-weight: 700;
	line-height: 1.22;
	color: var(--sud-ink);
	margin: 0 0 .5rem;
	letter-spacing: -0.015em;
	text-transform: none;   /* never uppercase — these are people's names */
	text-wrap: balance;
}

.sud-bd .sud-bd__role {
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sud-green-600);
	margin: 0;
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   REVEAL PANEL
   Rises from the foot of the card over a deep brand-green ground.
   -------------------------------------------------------------------------- */

.sud-bd__reveal {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	max-block-size: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--bd-pad);
	padding-block-end: clamp(3.6rem, 4.6vw, 4.2rem);
	background: linear-gradient(180deg, var(--sud-green-800), var(--sud-green-900));
	z-index: 2;

	/* Resting: parked below the card. `hidden` is removed by JS on expand, so
	   with no script the panel simply never opens — the name and role remain,
	   and nothing is lost from the page. */
	transform: translateY(101%);
	transition: transform .6s var(--bd-ease);
}

/* `hidden` must not beat the animation once JS takes over */
.sud-bd__reveal[hidden] { display: block; }

.sud-bd__card:hover .sud-bd__reveal,
.sud-bd__card:focus-within .sud-bd__reveal,
.sud-bd__toggle[aria-expanded="true"] ~ .sud-bd__reveal,
.sud-bd__card.is-open .sud-bd__reveal {
	transform: translateY(0);
}

/* Hover reveal is a pointer affordance only. Touch devices report hover:none,
   where the panel would otherwise latch open after a tap. */
@media (hover: none) {
	.sud-bd__card:hover .sud-bd__reveal { transform: translateY(101%); }
	.sud-bd__card.is-open .sud-bd__reveal { transform: translateY(0); }
}

.sud-bd .sud-bd__name--rev {
	color: #fff;
	margin-block-end: .4rem;
}

/* ~7:1 on the green ground */
.sud-bd .sud-bd__role--rev { color: #7EE07F; }

.sud-bd__bio {
	margin-block-start: .9rem;
	padding-block-start: .9rem;
	border-block-start: 1px solid rgba(255, 255, 255, .18);
}

.sud-bd .sud-bd__bio p {
	font-size: 0.8125rem;
	line-height: 1.72;
	color: rgba(255, 255, 255, .93);
	margin: 0;
}

/* Slim scrollbar for the longer biographies */
.sud-bd__reveal::-webkit-scrollbar { inline-size: 4px; }
.sud-bd__reveal::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 100px; }
.sud-bd__reveal { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }

/* Hairline above the close control. Drawn on the card, not inside the panel,
   so it stays put while a long biography scrolls underneath it. */
.sud-bd__card::after {
	content: '';
	position: absolute;
	z-index: 3;
	inset-inline: var(--bd-pad);
	inset-block-end: clamp(3.3rem, 4.3vw, 3.9rem);
	block-size: 1px;
	background: rgba(255, 255, 255, .22);
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s var(--bd-ease);
}

.sud-bd__card:hover::after,
.sud-bd__card:focus-within::after,
.sud-bd__card.is-open::after { opacity: 1; }

@media (hover: none) {
	.sud-bd__card:hover::after { opacity: 0; }
	.sud-bd__card.is-open::after { opacity: 1; }
}

/* --------------------------------------------------------------------------
   TOGGLE
   -------------------------------------------------------------------------- */

.sud-bd__toggle {
	position: absolute;
	inset-block-end: clamp(.7rem, 1.1vw, .95rem);
	inset-inline-end: clamp(.7rem, 1.1vw, .95rem);
	z-index: 4;
	inline-size: 44px;         /* full 44px target, per touch guidance */
	block-size: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sud-green-600);
	cursor: pointer;
	transition:
		background .4s ease,
		color .4s ease,
		transform .5s var(--bd-ease-soft);
}

/* The sign is drawn in CSS: a plus that becomes a cross. No icon font needed,
   and it can animate between the two states. */
.sud-bd__sign,
.sud-bd__sign::before {
	content: '';
	display: block;
	inline-size: 15px;
	block-size: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .5s var(--bd-ease);
}

.sud-bd__sign { position: relative; }
.sud-bd__sign::before { position: absolute; inset: 0; transform: rotate(90deg); }

.sud-bd__card:hover .sud-bd__toggle,
.sud-bd__card:focus-within .sud-bd__toggle,
.sud-bd__toggle[aria-expanded="true"] {
	color: #fff;
	background: rgba(255, 255, 255, .14);
}

.sud-bd__toggle[aria-expanded="true"] .sud-bd__sign { transform: rotate(135deg); }
.sud-bd__toggle[aria-expanded="true"] .sud-bd__sign::before { transform: rotate(90deg); }

.sud-bd__toggle:focus-visible {
	outline: 3px solid var(--sud-green-500);
	outline-offset: 2px;
}

/* On pointer devices the sign turns to a cross on hover too, matching the panel */
@media (hover: hover) {
	.sud-bd__card:hover .sud-bd__sign { transform: rotate(135deg); }
	.sud-bd__card:hover .sud-bd__sign::before { transform: rotate(90deg); }
}

/* --------------------------------------------------------------------------
   ELEVATION + ZOOM
   The open card lifts and grows very slightly. Scale is kept at 1.02: enough to
   register as "this one", small enough not to soften the portrait.
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.sud-bd__card:hover {
		transform: translateY(-10px) scale(1.02);
		box-shadow: var(--sud-shadow-lg);
		border-color: transparent;
		z-index: 2;
	}

	.sud-bd__card:hover .sud-bd__media img { transform: scale(1.08); }
	.sud-bd__card:hover .sud-bd__scrim { opacity: 1; }
}

.sud-bd__card:focus-within {
	box-shadow: var(--sud-shadow-lg);
	border-color: transparent;
	z-index: 2;
}

.sud-bd__card:focus-within .sud-bd__scrim,
.sud-bd__card.is-open .sud-bd__scrim { opacity: 1; }

.sud-bd__card.is-open {
	transform: translateY(-10px) scale(1.02);
	box-shadow: var(--sud-shadow-lg);
	border-color: transparent;
	z-index: 2;
}

.sud-bd__card.is-open .sud-bd__media img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   REVEAL ON SCROLL
   Handled by the shared `.sud-stagger` mechanism in motion.css, which
   motion.js observes. A bespoke rule here would need its own observer entry —
   and when it did not get one the cards stayed at opacity 0 for good.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
	.sud-bd__media { aspect-ratio: 3 / 2; }
	.sud-bd__media img { object-position: center 18%; }

	/* No lift on a phone: a card that grows past the viewport edge on tap
	   reads as a glitch, not as elevation. */
	.sud-bd__card.is-open { transform: none; }

	.sud-bd__grouphead { grid-template-columns: 1fr; }
	.sud-bd__rule { display: none; }

	/*
	 * On a phone the panel joins the flow instead of covering the card, so the
	 * card genuinely expands. As an overlay it was a ~290px window with ~350px
	 * of biography in it: a scroll region inside a scrolling page, which on
	 * touch means the reader fights the page to finish a sentence.
	 *
	 * max-block-size is animated rather than height because the content height
	 * is unknown; the bound is generous enough for the longest biography here.
	 */
	.sud-bd__reveal {
		position: static;
		transform: none;
		max-block-size: 0;
		overflow: hidden;
		padding-block: 0;
		transition:
			max-block-size .5s var(--bd-ease),
			padding-block .5s var(--bd-ease);
	}

	.sud-bd__card.is-open .sud-bd__reveal {
		max-block-size: 40rem;
		padding-block: var(--bd-pad) clamp(3.6rem, 4.6vw, 4.2rem);
	}

	/* The resting name and role stay on screen once the card expands, so the
	   panel's copies would be an immediate duplicate. */
	.sud-bd__name--rev,
	.sud-bd__role--rev { display: none; }

	.sud-bd__bio {
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: 0;
	}

	/* Nothing is covering the portrait now, so nothing should dim it. */
	.sud-bd__scrim { display: none; }
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */

.sud-rtl .sud-bd__rule {
	background: linear-gradient(270deg, var(--sud-line), transparent);
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-bd__card,
	.sud-bd__card::after,
	.sud-bd__media img,
	.sud-bd__scrim,
	.sud-bd__reveal,
	.sud-bd__sign,
	.sud-bd__sign::before { transition: none !important; }

	.sud-bd__card:hover,
	.sud-bd__card.is-open { transform: none; }

	.sud-bd__card:hover .sud-bd__media img,
	.sud-bd__card.is-open .sud-bd__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   PRINT — biographies must not be lost to a closed panel
   -------------------------------------------------------------------------- */

@media print {
	.sud-bd__card { break-inside: avoid; box-shadow: none; }
	.sud-bd__card::after { display: none; }
	.sud-bd__scrim { display: none; }
	.sud-bd__reveal {
		position: static;
		transform: none;
		background: none;
		padding-inline: 0;
	}
	.sud-bd .sud-bd__name--rev { color: #000; }
	.sud-bd .sud-bd__role--rev { color: #333; }
	.sud-bd .sud-bd__bio p { color: #000; }
	.sud-bd__toggle { display: none; }
}