/*
 * Board - Grid.
 *
 * Read from cp-all-designer css/about-us-board.css (.bodgrid, .bodc) — the
 * four committee pages carry the same rules under their own body class —
 * and css/board-photo-lock.css, which the five pages load last and which
 * sets the columns for all of them.
 *
 * What the Style tab sets arrives through the widget's selectors; a size
 * left empty there scales with the window the way the design's does,
 * through the two numbers below (app.css:127-128, 2889-2900).
 */

.custom-board-grid {
	--custom-vwu: 14.4px;
	--custom-vhu: clamp(5.2px, 1svh, 9px);
	--custom-pad: 90px;
	/* about-us-board.css:16-24 */
	--custom-bod-r: clamp(22px, calc(2.4 * var(--custom-vwu)), 34px);
	--custom-bod-sh: 0 10px 26px -18px rgba(22, 65, 140, 0.34);
	--custom-bod-sh-hover: 0 26px 50px -24px rgba(22, 65, 140, 0.34);
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
	/* app.css:385-389 .sec--rhythm, .container --pad */
	padding: min(clamp(52px, calc(8.6 * var(--custom-vwu)), 160px), calc(13.7 * var(--custom-vhu))) var(--custom-pad);
	background-color: #FFFFFF;
	letter-spacing: normal;
}

@media (max-width: 1280px) { .custom-board-grid { --custom-vwu: 12.2px; --custom-vhu: clamp(5.2px, 1svh, 8.5px); } }
@media (max-width: 1200px) { .custom-board-grid { --custom-vwu: 11.2px; --custom-vhu: clamp(5.2px, 1svh, 8.35px); } }
@media (max-width: 1024px) { .custom-board-grid { --custom-vwu: 9.2px; --custom-vhu: clamp(5.2px, 1svh, 8px); --custom-pad: 40px; } }
@media (max-width: 860px)  { .custom-board-grid { --custom-vwu: 7.7px; --custom-vhu: clamp(5.2px, 1svh, 7.8px); } }
@media (max-width: 640px)  { .custom-board-grid { --custom-vwu: 4.2px; --custom-vhu: clamp(5.2px, 1svh, 7.6px); --custom-pad: 24px; } }
@media (max-width: 380px)  { .custom-board-grid { --custom-vwu: 3.6px; --custom-vhu: clamp(5.2px, 1svh, 7.2px); } }

.custom-board-grid *,
.custom-board-grid *::before,
.custom-board-grid *::after {
	box-sizing: border-box;
}

.custom-board-grid__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* about-us-board.css:46-56 — the mark's leaf, faded away on the side facing the cards */
.custom-board-grid__leaf {
	position: absolute;
	z-index: 0;
	top: -4%;
	right: -6%;
	width: clamp(200px, calc(26 * var(--custom-vwu)), 420px);
	height: auto;
	fill: #00428F;                         /* app.css:48 --leaf-1 */
	opacity: 0.14;
	transform: rotate(158deg);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(58deg, #000 4%, rgba(0, 0, 0, 0.3) 52%, transparent 88%);
	        mask-image: linear-gradient(58deg, #000 4%, rgba(0, 0, 0, 0.3) 52%, transparent 88%);
}

@media (max-width: 860px) {
	.custom-board-grid__leaf {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* The heading — app.css:230-252 (.h-sec), about-us-board.css:59       */
/* ------------------------------------------------------------------ */

.custom-board-grid__head {
	margin: 0 0 min(clamp(32px, calc(4.5 * var(--custom-vwu)), 64px), calc(4.4 * var(--custom-vhu)));
	font-size: 16px;
	line-height: 1.6;
}

.custom-board-grid__title {
	margin: 0;
	padding: 0;
	font-size: min(clamp(28px, calc(3.9 * var(--custom-vwu)), 56px), calc(6.2 * var(--custom-vhu)));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-wrap: wrap;
}

.custom-board-grid__title strong {
	font-weight: 700;
}

.custom-board-grid__title em {
	position: relative;
	display: inline-block;
	font-style: italic;
	font-weight: 700;
}

.custom-board-grid__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.06em;
	height: 0.16em;
	border-radius: 3px;
	background: currentColor;
	opacity: 0.18;
}

.custom-board-grid [data-custom-sweep-ghost] em::after {
	opacity: 0.12;
}

.custom-board-grid__intro {
	margin: min(22px, calc(2.4 * var(--custom-vhu))) 0 0;
	font-size: clamp(16px, calc(1.25 * var(--custom-vwu)), 18px);
	font-weight: 400;
	line-height: 1.7;
}

@media (max-width: 640px) {
	.custom-board-grid__title {
		font-size: clamp(22px, calc(6.2 * var(--custom-vwu)), 56px);
	}

	.custom-board-grid__intro {
		margin-top: 14px;
		font-size: 14px;
		line-height: 1.5;
	}
}

/* ------------------------------------------------------------------ */
/* The grid — board-photo-lock.css                                     */
/* ------------------------------------------------------------------ */

/* Columns a whole number of pixels wide, a multiple of 3 inside the card's
   1px edges, so every 3:4 portrait is a whole number of pixels tall and all
   five pages show them at exactly one size; what is rounded away is shared
   out as equal margins by justify-content. */
.custom-board-grid__list {
	--custom-bod-cols: 5;
	--custom-bod-gap: round(clamp(20px, calc(2.2 * var(--custom-vwu)), 34px), 2px);
	display: grid;
	grid-template-columns: repeat(var(--custom-bod-cols), minmax(0, 1fr));
	grid-template-columns: repeat(var(--custom-bod-cols), calc(round(down, calc((100% - (var(--custom-bod-cols) - 1) * var(--custom-bod-gap)) / var(--custom-bod-cols) - 2px), 3px) + 2px));
	justify-content: center;
	gap: var(--custom-bod-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1280px) { .custom-board-grid__list { --custom-bod-cols: 4; } }
@media (max-width: 1100px) { .custom-board-grid__list { --custom-bod-cols: 3; } }
@media (max-width: 780px)  { .custom-board-grid__list { --custom-bod-cols: 2; } }
@media (max-width: 620px)  { .custom-board-grid__list { --custom-bod-cols: 1; --custom-bod-gap: 14px; } }

/* ------------------------------------------------------------------ */
/* The card — about-us-board.css:84-196                                */
/* ------------------------------------------------------------------ */

.custom-board-grid__card {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* main.js owns the reveal; the script gives each card its place in its row */
.custom-board-grid__card[data-custom-reveal] {
	transition-delay: calc(var(--custom-i, 0) * 60ms);
}

.custom-board-grid__card-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border: 1px solid rgba(22, 65, 140, 0.09);
	border-radius: var(--custom-bod-r) 0 var(--custom-bod-r) 0;
	background: var(--custom-bodc-ground, #FFFFFF);
	box-shadow: var(--custom-bod-sh);
	color: inherit;
	text-decoration: none;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

a.custom-board-grid__card-inner:hover,
a.custom-board-grid__card-inner:focus,
a.custom-board-grid__card-inner:visited {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.custom-board-grid__card-inner:hover {
		transform: translateY(-6px);
		box-shadow: var(--custom-bod-sh-hover);
		border-color: rgba(80, 163, 213, 0.34);
	}
}

/* the portrait, 3:4, kept high so the crop keeps the face */
.custom-board-grid__photo {
	position: relative;
	flex: none;
	width: 100%;
	height: auto;
	min-height: 0;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: linear-gradient(158deg, #E8F4FB 0%, #CCDAF2 100%);
}

.custom-board-grid__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 14%;
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	.custom-board-grid__card-inner:hover .custom-board-grid__photo img {
		transform: scale(1.05);
	}
}

/* no portrait yet: a brand-gradient tile with the person's letter in it */
.custom-board-grid__photo.is-empty {
	background:
		radial-gradient(88% 76% at 26% 14%, rgba(80, 163, 213, 0.34) 0%, rgba(80, 163, 213, 0) 66%),
		linear-gradient(158deg, #F0F9FD 0%, #CCDAF2 100%);
}

.custom-board-grid__photo.is-empty::after {
	content: attr(data-initial);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-bottom: 0.08em;               /* Thai upper vowels sit above the glyph box */
	font-size: clamp(66px, calc(7 * var(--custom-vwu)), 108px);
	font-weight: 300;
	line-height: 1;
	color: var(--custom-bodc-letter, rgba(22, 65, 140, 0.2));
}

.custom-board-grid__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: clamp(18px, calc(1.8 * var(--custom-vwu)), 26px) clamp(16px, calc(1.6 * var(--custom-vwu)), 24px) clamp(20px, calc(2 * var(--custom-vwu)), 28px);
}

.custom-board-grid__name {
	position: relative;
	margin: 0;
	padding: 0 0 12px;
	font-size: clamp(16px, calc(1.18 * var(--custom-vwu)), 18px);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: var(--custom-bodc-name, #16418C);
}

/* a hairline the full width, with a short blue segment on it that runs out on hover */
.custom-board-grid__name::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--custom-bodc-rule, #E2E8F0);
}

.custom-board-grid__name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: var(--custom-bodc-mark, #50A3D5);
	transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	.custom-board-grid__card-inner:hover .custom-board-grid__name::after {
		width: 72px;
	}
}

.custom-board-grid__roles {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-board-grid__roles li {
	position: relative;
	margin: 0;
	padding: 0 0 0 15px;
	font-size: clamp(12px, calc(0.98 * var(--custom-vwu)), 14px);
	font-weight: 500;
	line-height: 1.55;
	color: var(--custom-bodc-role, #475569);
	list-style: none;
}

.custom-board-grid__roles li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.5em + 1px);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--custom-bodc-mark, #50A3D5);
}

/* a phone: one card to a row, on its side, the portrait 38% of it and still 3:4 */
@media (max-width: 620px) {
	.custom-board-grid__card-inner {
		flex-direction: row;
		align-items: flex-start;
	}

	.custom-board-grid__photo {
		flex: 0 0 38%;
		width: 38%;
		flex-basis: round(down, 38%, 3px);
		width: round(down, 38%, 3px);
	}

	.custom-board-grid__photo.is-empty::after {
		font-size: 52px;
	}

	.custom-board-grid__body {
		gap: 10px;
		padding: 16px 16px 18px;
	}

	.custom-board-grid__name {
		padding-bottom: 10px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-board-grid__card-inner,
	.custom-board-grid__photo img,
	.custom-board-grid__name::after {
		transition: none;
	}
}

/* the editor's note when a card has nobody picked */
.custom-board-grid__hint {
	margin: 0 0 12px;
	font-size: 13px;
	color: #64748B;
}