/*
 * Sporting Bloemendaal: styles for the sb-club plugin blocks.
 *
 * The plugin outputs structure only, plus a small structural stylesheet
 * (layout, list resets, grayscale logos, .sb-visually-hidden). See
 * wp-content/plugins/sb-club/README.md, "Markup", for the exact HTML. This
 * file adds the club look using theme.json presets only. Loaded on pages
 * that render an sb-club block (functions.php), and always in the editor.
 *
 * Classes styled here (all from the plugin README):
 *
 * Wrappers:   .sb-next-match, .sb-last-result, .sb-fixtures, .sb-sponsor-grid,
 *             .sb-squad (each with --empty where the block has an empty state)
 * Empty:      .sb-empty
 * Match card: .sb-match-card [--next|--result] [--home|--away] [--win|--draw|--loss]
 *             __header __label __competition __scoreboard
 *             __team [--home|--away] [--us] __score __versus
 *             __score-home __score-separator __score-away __badge
 *             __meta __kickoff __location __countdown __more __link
 * Match page: .sb-match-details [--scheduled|--played|--cancelled|--postponed]
 *             [--home|--away] [--win|--draw|--loss] __scoreboard __team
 *             [--home|--away] [--us] __score __score-home __score-separator
 *             __score-away __versus __badge __meta __kickoff __status
 * Badge:      .sb-badge [--win|--draw|--loss]  (letters W/G/V)
 * Fixtures:   .sb-fixtures [--upcoming|--past|--all] __group __month __list
 *             .sb-fixture [--scheduled|--played|--cancelled|--postponed]
 *                         [--home|--away] [--win|--draw|--loss]
 *             __date __teams __team [--home|--away] [--us] __separator
 *             __result __status __location __competition
 * Sponsors:   .sb-sponsor-grid [--grid|--strip] [--tier-*] __list
 *             __item [--main|--partner|--supporter] __link [--no-url] __logo __name
 * Squad:      .sb-squad __list
 *             .sb-player-card.sb-hero-card [--keeper|--verdediger|--middenvelder|--aanvaller|--veldspeler]
 *             [--cutout|--photo|--initials] __crest __photo __image __initials __number __position __name __link __label
 *             .sb-player-hero (single player page)
 *             __number __name __link __nickname __position __fun-fact
 */

/* ---------------------------------------------------------------------------
 * Empty states
 * ------------------------------------------------------------------------ */
.sb-empty {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 2px dashed color-mix(in srgb, currentColor 35%, transparent);
	border-radius: var(--wp--custom--radius);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Match card: the scoreboard tile (next-match, last-result)
 * Dark green tile with white type and a hoops band at the bottom.
 * Contrast: base on primary-dark 11.4:1, surface 10.2:1, accent 4.75:1.
 * ------------------------------------------------------------------------ */
.sb-match-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--40) + 12px);
	border-radius: var(--wp--custom--radius);
	background:
		var(--wp--preset--gradient--hoops-band) bottom / 100% 12px no-repeat,
		var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--preset--shadow--card);
	color: var(--wp--preset--color--base);
	--sbt-focus: var(--wp--preset--color--base);
}

:is(.sb-next-match, .sb-last-result) {
	height: 100%;
	container-type: inline-size;
}

/* Narrow cards (phones, two-column strip on tablets): stack home, score, away
 * so team names get the full width and never break mid-word. */
@container (max-width: 30rem) {
	.sb-match-card__scoreboard {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: var(--wp--preset--spacing--10);
	}

	.sb-match-card__team--home,
	.sb-match-card__team--away {
		text-align: center;
	}
}

.sb-match-card__header {
	align-items: baseline;
}

.sb-match-card__label,
.sb-match-card__competition {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sb-match-card__label {
	color: var(--wp--preset--color--accent);
}

.sb-match-card__competition {
	color: var(--wp--preset--color--surface);
}

.sb-match-card__team {
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	/* Break between words, and inside a word only when it can't fit at all. */
	overflow-wrap: break-word;
	hyphens: manual;
}

.sb-match-card__team--us {
	color: var(--wp--preset--color--base);
	font-weight: 800;
}

.sb-match-card__score {
	justify-content: center;
	min-width: 3.2em;
	padding: 0.1em 0.4em;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1.1;
}

/* No score yet: an outlined "vs" instead of the white score box. */
.sb-match-card--next .sb-match-card__score {
	min-width: 0;
	padding: 0.15em 0.5em;
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
}

.sb-match-card__versus {
	text-transform: uppercase;
}

.sb-match-card__badge {
	text-align: center;
}

.sb-match-card__meta {
	justify-content: center;
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.sb-match-card__kickoff {
	font-weight: 600;
	color: var(--wp--preset--color--base);
}

.sb-match-card__countdown {
	align-self: center;
	padding: 0.25em 0.9em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sb-match-card__more {
	margin-top: auto;
	text-align: center;
}

.sb-match-card__link {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-underline-offset: 0.2em;
}

.sb-match-card__link:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * W/G/V badge
 * win: base on primary 5.4:1, draw: contrast on accent 7.1:1,
 * loss: base on contrast 17.2:1. The letter carries the meaning, not colour.
 * ------------------------------------------------------------------------ */
.sb-badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.9em;
	height: 1.9em;
	padding-inline: 0.4em;
	box-sizing: border-box;
	border-radius: 4px;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	line-height: 1;
	vertical-align: middle;
}

.sb-badge--win {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.sb-badge--draw {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.sb-badge--loss {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* On the dark card, give green and black badges a white edge. */
.sb-match-card :is(.sb-badge--win, .sb-badge--loss) {
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
 * Match details: scoreboard on the single match page (inside the green hero)
 * Contrast: base on primary-dark 11.4:1, accent on primary-dark 4.75:1.
 * ------------------------------------------------------------------------ */
.sb-match-details {
	margin-block: var(--wp--preset--spacing--30);
}

.sb-match-details__team {
	font-family: var(--wp--preset--font-family--heading);
	/* Shrinks on narrow screens so a name like "Bloemendaal" never breaks mid-word. */
	font-size: clamp(1rem, 5vw, var(--wp--preset--font-size--large));
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.sb-match-details__team--us {
	font-weight: 800;
}

.sb-match-details__score {
	justify-content: center;
	min-width: 3.2em;
	padding: 0.1em 0.4em;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1.1;
}

/* No score yet: an outlined "vs" instead of the white score box. */
.sb-match-details:not(.sb-match-details--win, .sb-match-details--draw, .sb-match-details--loss) .sb-match-details__score {
	min-width: 0;
	padding: 0.15em 0.5em;
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: var(--wp--preset--font-size--large);
}

.sb-match-details__versus {
	text-transform: uppercase;
}

.sb-match-details :is(.sb-badge--win, .sb-badge--loss) {
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

.sb-match-details__kickoff {
	font-weight: 600;
}

.sb-match-details__status {
	padding: 0.1em 0.7em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sb-match-details__status--cancelled,
.sb-match-details__status--postponed {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
 * Fixtures: one row per match, grouped per month
 * ------------------------------------------------------------------------ */
.sb-fixtures__group + .sb-fixtures__group {
	margin-top: var(--wp--preset--spacing--40);
}

.sb-fixtures__month {
	margin: 0 0 0.25em;
	padding-bottom: 0.3em;
	border-bottom: 4px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	text-transform: uppercase;
}

.sb-fixture {
	padding: 0.7em 0.75em;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 30%, transparent);
}

.sb-fixture:nth-child(even) {
	background: var(--wp--preset--color--surface);
}

.sb-fixture__date {
	min-width: 8.5em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sb-fixture__teams {
	color: inherit;
	text-decoration: none;
}

.sb-fixture__teams:hover .sb-fixture__team {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.sb-fixture__team--us {
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

.sb-fixture__result {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	white-space: nowrap;
}

.sb-fixture__status {
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sb-fixture__location,
.sb-fixture__competition {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sb-fixture--cancelled .sb-fixture__teams {
	text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
 * Sponsors: logo cards (grid) or a row of logos (strip)
 * ------------------------------------------------------------------------ */
.sb-sponsor-grid--grid .sb-sponsor-grid__item {
	align-items: center;
	aspect-ratio: 3 / 2;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}

@media (min-width: 600px) {
	.sb-sponsor-grid--grid .sb-sponsor-grid__item--main {
		grid-column: span 2;
		aspect-ratio: auto;
	}
}

.sb-sponsor-grid--grid .sb-sponsor-grid__link {
	width: 100%;
	height: 100%;
}

.sb-sponsor-grid__link {
	color: inherit;
	text-decoration: none;
}

.sb-sponsor-grid__logo {
	opacity: 0.85;
}

.sb-sponsor-grid__link:is(:hover, :focus-visible) .sb-sponsor-grid__logo {
	opacity: 1;
}

.sb-sponsor-grid__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
}

/* The strip on a dark section (footer): logos on white chips. */
:where(.is-style-dark-green, .is-style-hoops, .has-primary-dark-background-color, .has-contrast-background-color) .sb-sponsor-grid--strip .sb-sponsor-grid__item {
	padding: 0.6rem 1rem;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	/* The ring sits inside the white chip, on its padding. */
	--sbt-focus: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * Squad: the "Heroes" card (story 14). One original foil design for every
 * player: club green with a gold foil frame, the hoops of the crest as a faint
 * band, the cut-out in front, shirt number and position top left, the crest
 * top right and the name on a plate. No ratings, no stats, no tiers.
 *
 * Everything inside the card is sized in container units (cqi), so the same
 * card works at 130px (two per row on a phone) and at 360px (a player's page).
 * ------------------------------------------------------------------------ */
.sb-hero-card {
	--hc-gold: var(--wp--preset--color--accent);
	--hc-gold-hi: color-mix(in srgb, var(--hc-gold) 50%, #fff);
	--hc-gold-lo: color-mix(in srgb, var(--hc-gold) 68%, #000);
	--hc-ink: var(--wp--preset--color--contrast);
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border: 4px solid transparent;
	border-radius: 1.1rem;
	color: var(--wp--preset--color--base);
	/* Padding box: the green card art. Border box: the gold foil frame. */
	background:
		radial-gradient(ellipse 70% 45% at 50% 40%, rgb(255 255 255 / 22%), transparent 70%) padding-box,
		linear-gradient(170deg, var(--wp--preset--color--primary-dark) 0%, var(--wp--preset--color--primary-dark) 38%, color-mix(in srgb, var(--wp--preset--color--primary) 85%, var(--wp--preset--color--primary-dark)) 100%) padding-box,
		linear-gradient(135deg, var(--hc-gold-lo), var(--hc-gold-hi) 22%, var(--hc-gold) 40%, var(--hc-gold-hi) 58%, var(--hc-gold-lo) 80%, var(--hc-gold-hi)) border-box;
	box-shadow: inset 0 0 0 2px rgb(0 0 0 / 28%), 0 1px 2px rgb(11 31 23 / 25%), 0 10px 24px -6px rgb(11 31 23 / 45%);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sb-hero-card--large {
	border-width: 6px;
	border-radius: 1.5rem;
	max-width: 22rem;
	margin-inline: auto;
}

/* The squad is a wide block even inside the narrow reading column of a page. */
.is-layout-constrained > .wp-block-sb-club-squad {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

/* The hoops of the crest, as a faint tilted band behind the player. */
.sb-hero-card::before {
	content: "";
	position: absolute;
	inset: -20% -30% 20% -30%;
	z-index: 0;
	background: repeating-linear-gradient(180deg, rgb(255 255 255 / 9%) 0 8cqi, transparent 8cqi 16cqi);
	transform: rotate(-16deg);
	-webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 40%, #000 62%, transparent 92%);
	mask-image: linear-gradient(180deg, transparent 8%, #000 40%, #000 62%, transparent 92%);
	pointer-events: none;
}

/* The foil shine. Always a little visible, it sweeps across on hover and focus. */
.sb-hero-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(115deg, transparent 34%, rgb(255 255 255 / 30%) 45%, rgb(255 233 160 / 26%) 52%, transparent 63%) 80% 0 / 320% 100% no-repeat;
	transition: background-position 0.9s ease;
	pointer-events: none;
}

.sb-hero-card:is(:hover, :focus-within) {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgb(11 31 23 / 25%), 0 16px 30px -6px rgb(11 31 23 / 55%);
}

.sb-hero-card:is(:hover, :focus-within)::after {
	background-position: 15% 0;
}

.sb-hero-card--large:is(:hover, :focus-within) {
	transform: none;
}

.sb-hero-card__crest {
	position: absolute;
	z-index: 3;
	top: 6cqi;
	right: 6cqi;
	width: 18cqi;
	aspect-ratio: 1198 / 1336;
	background: url("../img/crest.svg") center / contain no-repeat;
	filter: drop-shadow(0 0 0.5cqi #fff) drop-shadow(0 0 1.5cqi rgb(255 255 255 / 70%));
}

/* Number and position hang in a dark tab at the top left, so the text stays readable
   whatever the cut-out (a white shirt) looks like behind it. */
.sb-hero-card__number,
.sb-hero-card__position {
	position: absolute;
	z-index: 3;
	left: 0;
	box-sizing: border-box;
	width: 47cqi;
	margin: 0;
	background: rgb(11 31 23 / 84%);
}

.sb-hero-card__number {
	top: 0;
	padding: 3cqi 0 0 7cqi;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24cqi;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 0.06em 0 var(--hc-gold-lo);
}

.sb-hero-card__position {
	top: 27cqi;
	width: max-content;
	min-width: 47cqi;
	max-width: 90cqi;
	padding: 2.4cqi 5cqi 3cqi 7cqi;
	border-bottom-right-radius: 3cqi;
	font-family: var(--wp--preset--font-family--heading);
	font-size: max(0.72rem, 6.4cqi);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.sb-hero-card__position::before {
	content: "";
	position: absolute;
	top: 0;
	left: 7cqi;
	width: 10cqi;
	height: 0.8cqi;
	background: var(--hc-gold-hi);
}

.sb-hero-card--no-number .sb-hero-card__position {
	top: 0;
	border-top-right-radius: 0;
}

/* The player: the cut-out stands on the name plate. */
.sb-hero-card__photo {
	position: absolute;
	z-index: 1;
	inset: 20cqi 0 26cqi;
	margin: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.sb-hero-card__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: 50% 100%;
	filter: drop-shadow(0 4px 10px rgb(0 0 0 / 35%));
}

/* A normal photo (no transparency): shown in an arched, framed window. */
.sb-hero-card--photo .sb-hero-card__photo {
	inset: 43cqi 14cqi 30cqi;
	overflow: hidden;
	border: 0.8cqi solid var(--hc-gold-hi);
	border-radius: 36cqi 36cqi 2cqi 2cqi;
	background: var(--wp--preset--color--primary-dark);
}

.sb-hero-card--photo .sb-hero-card__image {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 15%;
	filter: none;
}

/* No photo at all: a silhouette with initials. */
.sb-hero-card--initials .sb-hero-card__photo {
	align-items: center;
}

.sb-hero-card--initials .sb-hero-card__photo::before,
.sb-hero-card--initials .sb-hero-card__photo::after {
	content: "";
	position: absolute;
	left: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
	transform: translateX(-50%);
}

.sb-hero-card--initials .sb-hero-card__photo::before {
	top: 20cqi;
	width: 32cqi;
	aspect-ratio: 1;
	border-radius: 50%;
}

.sb-hero-card--initials .sb-hero-card__photo::after {
	bottom: 0;
	width: 72cqi;
	height: 40cqi;
	border-radius: 50% 50% 0 0;
}

.sb-hero-card__initials {
	position: relative;
	z-index: 1;
	margin-top: -20cqi;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17cqi;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 8px rgb(0 0 0 / 40%);
}

/* The name plate and the HEROES label. */
.sb-hero-card__name {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 9cqi;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 17cqi;
	margin: 0;
	padding: 2cqi 4cqi;
	border-top: 0.8cqi solid var(--hc-gold-hi);
	background: linear-gradient(180deg, color-mix(in srgb, var(--hc-ink) 80%, var(--wp--preset--color--primary-dark)), var(--hc-ink));
	font-family: var(--wp--preset--font-family--heading);
	font-size: 11cqi;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: anywhere;
	min-width: 0;
	/* A very long name never grows out of the card: two lines at most. */
	max-height: 28cqi;
	overflow: hidden;
}

.sb-hero-card__link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	max-width: 100%;
}

.sb-hero-card__label {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5cqi;
	height: 9cqi;
	margin: 0;
	background: var(--hc-ink);
	color: var(--hc-gold-hi);
	font-family: var(--wp--preset--font-family--heading);
	font-size: max(0.7rem, 5.6cqi);
	font-weight: 800;
	letter-spacing: 0.32em;
	line-height: 1;
	text-indent: 0.32em;
	text-transform: uppercase;
}

/* A tiny Belgian flag, decoration only. */
.sb-hero-card__label::before {
	content: "";
	flex: none;
	width: 6cqi;
	height: 4cqi;
	background: linear-gradient(90deg, #000 0 33.3%, #fdda24 33.3% 66.6%, #ef3340 66.6%);
	border-radius: 0.5cqi;
}

.sb-hero-card__link {
	color: inherit;
	text-decoration: none;
}

.sb-hero-card__link:hover {
	color: inherit;
	text-decoration: none;
}

/* The whole card is clickable through the name; the focus ring sits inside the foil frame. */
.sb-hero-card__link::after {
	content: "";
	position: absolute;
	z-index: 4;
	inset: -150cqi 0 -9cqi;
}

.sb-hero-card__link:focus-visible {
	outline: none;
}

.sb-hero-card:has(.sb-hero-card__link:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--contrast);
	outline-offset: var(--wp--custom--focus--offset);
	box-shadow: 0 0 0 calc(var(--wp--custom--focus--offset) + var(--wp--custom--focus--width)) var(--wp--preset--color--base), 0 16px 30px -6px rgb(11 31 23 / 55%);
}

@media (prefers-reduced-motion: reduce) {

	.sb-hero-card,
	.sb-hero-card::after {
		transition: none;
	}

	.sb-hero-card:is(:hover, :focus-within) {
		transform: none;
	}

	/* The shine stays where it is. */
	.sb-hero-card:is(:hover, :focus-within)::after {
		background-position: 80% 0;
	}
}

/* High contrast mode: system colours, no gradients, a visible border. */
@media (forced-colors: active) {

	.sb-hero-card {
		border-color: CanvasText;
		background: Canvas;
		color: CanvasText;
	}

	.sb-hero-card::before,
	.sb-hero-card::after {
		display: none;
	}

	.sb-hero-card__name,
	.sb-hero-card__label {
		background: Canvas;
		color: CanvasText;
		border-color: CanvasText;
	}

	.sb-hero-card__number,
	.sb-hero-card__position,
	.sb-hero-card__initials {
		text-shadow: none;
	}

	.sb-hero-card:has(.sb-hero-card__link:focus-visible) {
		outline-color: Highlight;
	}
}

@media print {

	.sb-hero-card {
		break-inside: avoid;
		box-shadow: none;
		transform: none;
	}

	.sb-hero-card::after {
		display: none;
	}
}

/* A player's own page: the large card sits in the dark hero. */
.sb-player-hero .sb-hero-card {
	box-shadow: 0 18px 40px -10px rgb(0 0 0 / 60%);
}

/* The download button under the large card. */
.sb-player-hero__download {
	margin: var(--wp--preset--spacing--30) 0 0;
	text-align: center;
}

.sb-player-hero__download-link {
	display: inline-block;
	padding: 0.6em 1.25em;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.sb-player-hero__download-link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}