/*
 * Programme staff module.
 *
 * Deliberately borrows almost nothing from the template but its type and its
 * colour: the module is dropped into an existing page (a YOOtheme builder
 * section on this site) and must not fight it. Everything below is built from
 * `currentColor`, so the same card reads correctly in a light section and in a
 * dark hero without a second theme.
 *
 * The one borrowed thing is the product's own "apparatus" voice — the mono
 * stack used for data in the camp app (programme-app.css) — carrying the
 * national code and the weapons, which is what a fencer is actually
 * identified by on a scoreboard.
 */

.mod-few-staff {
	/* rgba fallbacks first; color-mix below refines them where supported. */
	--mod-few-staff-rule: rgba(127, 127, 127, 0.3);
	--mod-few-staff-muted: rgba(127, 127, 127, 1);
	--mod-few-staff-lamp: #1fbe57;
	--mod-few-staff-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}

@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.mod-few-staff {
		--mod-few-staff-rule: color-mix(in srgb, currentColor 16%, transparent);
		--mod-few-staff-muted: color-mix(in srgb, currentColor 62%, transparent);
	}
}

/*
 * Flex rather than grid, for one reason: a short last row should centre under
 * the full ones. Grid cannot do that — its tracks are fixed, so four people
 * following rows of five sit hard left. With equal-width flex items, a full
 * row fills its line exactly (so centring changes nothing) and only the short
 * last row moves, which is the whole effect.
 *
 * The column count comes from the server as --mod-few-staff-cols-wide, since
 * only PHP knows how many people there are; the media queries below cap it for
 * narrow screens without having to know the number.
 */
.mod-few-staff__grid {
	--mod-few-staff-gap: 20px;
	--mod-few-staff-cols: var(--mod-few-staff-cols-wide, 4);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px var(--mod-few-staff-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mod-few-staff__cell {
	display: flex;
	flex: 0 0 calc(
		(100% - (var(--mod-few-staff-cols) - 1) * var(--mod-few-staff-gap)) / var(--mod-few-staff-cols)
	);
	/* Three people should not become three enormous circles. */
	max-width: 200px;
	margin: 0;
}

/*
 * The card is a <button> when it opens an introduction and a <div> when it
 * does not, so every property that a button brings with it is reset here
 * rather than inherited unevenly between the two.
 */
.mod-few-staff__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: center;
	appearance: none;
}

button.mod-few-staff__card {
	cursor: pointer;
}

.mod-few-staff__card:focus-visible {
	outline: 2px solid var(--mod-few-staff-lamp);
	outline-offset: 6px;
	border-radius: 8px;
}

.mod-few-staff__portrait {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin: 0 auto 12px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mod-few-staff-rule);
}

.mod-few-staff__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 200ms ease;
}

button.mod-few-staff__card:hover .mod-few-staff__photo,
button.mod-few-staff__card:focus-visible .mod-few-staff__photo {
	transform: scale(1.04);
}

/*
 * Eleven of nineteen coaches have a photo. The rest get a monogram rather than
 * a broken frame — a deliberate state, not a gap.
 */
.mod-few-staff__monogram {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	background: hsl(var(--mod-few-staff-hue, 210) 32% 34%);
	color: #fff;
	font-family: var(--mod-few-staff-mono);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/*
 * The national code sits ON the portrait, over a scrim. That is what keeps it
 * theme-proof: it never touches the page's own background, whatever colour
 * the section it was dropped into happens to be. Bottom-centre rather than the
 * corner, because the corner of the square is outside the circular mask and
 * the chip was being clipped in half there.
 */
.mod-few-staff__code {
	position: absolute;
	left: 50%;
	bottom: 6%;
	transform: translateX(-50%);
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(8, 14, 20, 0.66);
	color: #fff;
	font-family: var(--mod-few-staff-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.mod-few-staff__name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.mod-few-staff__meta {
	display: block;
	/* auto, not a fixed gap: a name that wraps to two lines must not drag its
	   own meta line out of step with the rest of the row. */
	margin-top: auto;
	padding-top: 3px;
	color: var(--mod-few-staff-muted);
	font-family: var(--mod-few-staff-mono);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- introduction dialog ---------- */

/*
 * An overlay is not part of the section it was opened from, so it commits to
 * its own readable surface instead of inheriting one it cannot predict.
 */
.mod-few-staff__dialog {
	width: min(520px, calc(100vw - 32px));
	max-height: min(80vh, 720px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: #10202b;
	box-shadow: 0 24px 60px rgba(6, 14, 22, 0.28);
}

.mod-few-staff__dialog::backdrop {
	background: rgba(8, 14, 20, 0.62);
}

.mod-few-staff__sheet {
	position: relative;
	padding: 26px;
}

.mod-few-staff__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.14);
	color: inherit;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.mod-few-staff__close:focus-visible {
	outline: 2px solid var(--mod-few-staff-lamp);
	outline-offset: 2px;
}

.mod-few-staff__sheethead {
	display: flex;
	gap: 16px;
	align-items: center;
	margin: 0 34px 18px 0;
}

.mod-few-staff__portrait--sm {
	flex: none;
	width: 76px;
	margin: 0;
}

.mod-few-staff__sheetname {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.25;
}

.mod-few-staff__sheethead .mod-few-staff__meta {
	margin-top: 5px;
	padding-top: 0;
}

.mod-few-staff__intro {
	max-height: 46vh;
	overflow-y: auto;
	line-height: 1.6;
}

.mod-few-staff__intro > :first-child {
	margin-top: 0;
}

.mod-few-staff__intro > :last-child {
	margin-bottom: 0;
}

.mod-few-staff__intro p {
	margin: 0 0 10px;
}

.mod-few-staff__intro ul {
	margin: 0 0 10px;
	padding-left: 20px;
}

.mod-few-staff__intro a {
	color: inherit;
}

@media (prefers-color-scheme: dark) {
	.mod-few-staff__dialog {
		background: #14222c;
		color: #e9f1f6;
	}
}

/*
 * min(), not a flat override: a two-person roster must stay two across at every
 * width rather than being "capped" up to three.
 */
@media (max-width: 900px) {
	.mod-few-staff__grid {
		--mod-few-staff-cols: min(3, var(--mod-few-staff-cols-wide, 4));
	}
}

@media (max-width: 560px) {
	.mod-few-staff__grid {
		--mod-few-staff-cols: min(2, var(--mod-few-staff-cols-wide, 4));
	}
}

@media (max-width: 480px) {
	.mod-few-staff__grid {
		--mod-few-staff-gap: 14px;
		gap: 22px var(--mod-few-staff-gap);
	}

	.mod-few-staff__sheethead {
		gap: 12px;
	}

	.mod-few-staff__portrait--sm {
		width: 60px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mod-few-staff__photo {
		transition: none;
	}

	button.mod-few-staff__card:hover .mod-few-staff__photo,
	button.mod-few-staff__card:focus-visible .mod-few-staff__photo {
		transform: none;
	}
}