/* Homepage opening, as a poster: giant words, uncropped lead photo on the right. */

/* --fs (giant word size) is computed once on the stage, in cq units of the stage, and
   inherited as a length: nested size containers must not re-resolve it. */
@property --fs {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

/* Space between the two lines and top of the first one (desktop, see the stage). */
@property --gap-y {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

@property --top-y {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
.ucmm-opening {
	--gap: clamp(12px, 1.4vw, 20px);
	--fd-bg: #fff;
	--fd-fg: var(--ucmm-red, #d2122e);
	--fd-meta-bg: var(--ucmm-red, #d2122e);
	--fd-meta-fg: #fff;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	background: var(--fd-bg);
	color: var(--fd-fg);
}

/* Themes: red with the kinetic texture, white or black lettering. */
.ucmm-opening--red {
	--fd-bg: var(--ucmm-red, #d2122e);
	--fd-fg: #fff;
	--fd-meta-bg: #fff;
	--fd-meta-fg: var(--ucmm-red, #d2122e);
}

.ucmm-opening--red-black {
	--fd-bg: var(--ucmm-red, #d2122e);
	--fd-fg: var(--ucmm-ink, #141414);
	--fd-meta-bg: var(--ucmm-ink, #141414);
	--fd-meta-fg: #fff;
}

.ucmm-opening__texture {
	position: absolute;
	z-index: -1;
	inset: 0;
}

/* texture="kinetic": letter outlines bent by assets/kinetic.js; the static texture
   (background of .ucmm-texture) until the first frame. */
.ucmm-opening__kinetic.is-live {
	background: none;
}

.ucmm-opening__kinetic svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ucmm-opening__kinetic path {
	fill: #a10d22;
}

/* texture="scroll": the same rows, straight, slower; still with reduced motion. */
.ucmm-opening__scroll {
	overflow: hidden;
	pointer-events: none;
}

.ucmm-opening__scroll svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ucmm-opening__scroll text {
	font-family: var(--ucmm-font-display);
	font-size: 430px;
	font-weight: 900;
	text-transform: uppercase;
	fill: #a10d22;
	transform-box: fill-box;
	animation: ucmm-scroll 240s linear infinite;
}

.ucmm-opening__scroll text.is-reverse {
	animation-duration: 280s;
	animation-direction: reverse;
}

@keyframes ucmm-scroll {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ucmm-opening__scroll text {
		animation: none;
	}
}

/* Under a transparent header (red themes): the band starts at the top of the page. */
.ucmm-overlay-header .ucmm-opening {
	box-sizing: border-box;
	padding-top: 72px;
}

/* On red, the league logo sits on white so its own red stays visible. */
:is(.ucmm-opening--red, .ucmm-opening--red-black) .ucmm-opening__league {
	padding: 2px;
	background: #fff;
}

:is(.ucmm-opening--red, .ucmm-opening--red-black) .ucmm-sponsor-strip {
	background: #fff;
}

.ucmm-opening a {
	color: inherit;
	text-decoration: none;
}

.ucmm-opening__stage {
	position: relative;
	display: grid;
	gap: 24px;
	padding: 20px var(--ucmm-gutter, 16px) 28px;
}

/* Giant words. Pressio XC metrics: "MONTECCHIO" is 2.012em wide, "FORZA" 0.928em,
   capitals 0.75em tall. */
.ucmm-opening__type {
	margin: 0;
	font-family: var(--ucmm-font-display);
	font-weight: 900;
	line-height: 0.8;
	text-transform: uppercase;
	pointer-events: none;
}

.ucmm-opening__type span {
	display: block;
	font-size: calc((100vw - 2 * var(--ucmm-gutter, 16px)) / 2.03);
}

/* Lead photo: whole image, solid meta bottom left. */
.ucmm-opening__photo {
	position: relative;
	display: block;
	margin-inline: calc(-1 * var(--ucmm-gutter, 16px));
}

.ucmm-opening__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.ucmm-opening__photo-meta {
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: min(88%, 520px);
	padding: 14px 20px 16px;
	background: var(--fd-meta-bg);
	color: var(--fd-meta-fg);
	transition: background 0.2s, color 0.2s;
}

.ucmm-opening__photo-meta p {
	margin: 0 0 6px;
	font-family: var(--ucmm-font-cond);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ucmm-opening__photo-meta h2 {
	margin: 0;
	font-family: var(--ucmm-font-cond);
	font-size: clamp(1.375rem, 2vw, 2.25rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-wrap: balance;
}

.ucmm-opening__read {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--ucmm-font-cond);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ucmm-opening__photo:hover .ucmm-opening__photo-meta,
.ucmm-opening__photo:focus-visible .ucmm-opening__photo-meta {
	background: var(--ucmm-ink, #141414);
	color: #fff;
}

.ucmm-opening--red-black .ucmm-opening__photo:hover .ucmm-opening__photo-meta,
.ucmm-opening--red-black .ucmm-opening__photo:focus-visible .ucmm-opening__photo-meta {
	background: #fff;
	color: var(--ucmm-ink, #141414);
}

/* Labels and values, as on a poster. */
.ucmm-opening__key,
.ucmm-opening__value {
	margin: 0;
	font-family: var(--ucmm-font-cond);
	font-size: max(0.9375rem, var(--fs) * 0.05);
	font-weight: 700;
	line-height: 1.15;
	color: var(--fd-fg);
}

.ucmm-opening__key {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ucmm-opening__value {
	padding: 0;
	list-style: none;
}

/* Data in the wide regular face, against the condensed bold labels and names. */
.ucmm-opening__fact .ucmm-opening__value,
.ucmm-opening__fixture {
	font-family: var(--ucmm-font-body);
	font-size: max(0.875rem, var(--fs) * 0.042);
	font-weight: 400;
	line-height: 1.25;
}

.ucmm-opening__fact .ucmm-opening__value strong {
	margin: 0 0.25em;
	font-family: var(--ucmm-font-cond);
	font-size: 1.25em;
	font-weight: 700;
}

/* Next match: head on the rule, everything else centred below it. */
.ucmm-opening__next {
	display: flex;
	flex-direction: column;
}

.ucmm-opening__match {
	/* Size container: the crests take what is left between the rules (100cqh) once
	   names (room for two lines), date line, its margin, digits and labels are placed
	   (--fit-rest; the text grows with --fs past its floor), up to --crest. */
	--name-size: max(1rem, var(--fs) * 0.05);
	--fixture-gap: max(14px, var(--fs) * 0.05);
	--fit-rest: calc(var(--digits, 3.5rem) + 4.6rem + 14px + max(0px, var(--fs) * 0.21 - 68px) + 1.1 * var(--name-size) + var(--fixture-gap) - 4px);
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(5px, 0.8cqh, 10px);
	text-align: center;
}

.ucmm-opening__next-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 16px;
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--fd-fg);
}

.ucmm-opening__comp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ucmm-opening__crests {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(10px, 1.2vw, 18px);
	width: 100%;
}

.ucmm-opening__team {
	display: grid;
	justify-items: center;
	flex: 0 1 auto;
	gap: 6px;
	min-width: var(--crest-fit, var(--crest, 64px));
	max-width: 42%;
	margin: 0;
}

/* Crest as it is, contained in a square box (the square mask with ucmm_logo_fit() zoom
   was tried and dropped; the --zoom/--dx/--dy inline values are ignored). */
.ucmm-opening__crest {
	display: block;
	width: var(--crest-fit, var(--crest, 64px));
	height: var(--crest-fit, var(--crest, 64px));
}

.ucmm-opening__crest .ucmm-logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ucmm-opening__crest .ucmm-logo-fallback {
	display: grid !important;
	place-items: center;
	width: 100% !important;
	height: 100% !important;
	color: var(--fd-fg);
	font-family: var(--ucmm-font-display);
	font-size: calc(var(--crest, 64px) * 0.6);
}

/* Full name, on two lines when long. */
.ucmm-opening__team figcaption {
	font-family: var(--ucmm-font-cond);
	font-size: var(--name-size, 1rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}

.ucmm-opening__vs {
	font-family: var(--ucmm-font-display);
	font-size: calc(var(--crest, 64px) * 0.5);
	font-weight: 900;
	line-height: var(--crest, 64px);
	text-transform: uppercase;
}

.ucmm-opening__league {
	width: auto;
	height: 22px;
}

.ucmm-opening__fixture {
	display: grid;
	margin-bottom: var(--fixture-gap, 14px);
}

.ucmm-opening__countdown {
	display: flex;
	justify-content: center;
	gap: clamp(10px, 1.1vw, 18px);
}

/* Label under each number, centred on it. */
.ucmm-opening__countdown div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.ucmm-opening__countdown span {
	font-family: var(--ucmm-font-display);
	font-size: var(--digits, 3.5rem);
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 0.8;
}

.ucmm-opening__countdown small {
	font-family: var(--ucmm-font-cond);
	font-size: max(0.8125rem, var(--fs) * 0.04);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Next match, then a row of small facts: last result, standings, more news. */
.ucmm-opening__side {
	display: grid;
	gap: clamp(8px, 1.4cqh, 18px);
	align-content: start;
}

.ucmm-opening__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px var(--gap);
	padding-top: 6px;
	border-top: 2px solid var(--fd-fg);
}

.ucmm-opening__fact {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 4px;
}

.ucmm-opening__fact--news li {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ucmm-opening__fact--news li + li {
	margin-top: 3px;
}

.ucmm-opening__fact--news a:hover {
	text-decoration: underline;
}

.ucmm-opening__all {
	font-family: var(--ucmm-font-cond);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Signature between the two words. */
.ucmm-opening__sign {
	display: grid;
	margin: 0;
	font-family: var(--ucmm-font-cond);
	font-size: var(--sign-size, 1.25rem);
	font-weight: 700;
	line-height: 1.05;
}

/* Phones: one first screen with the words on one line, the signature, the lead photo
   (as large as fits, never cropped) and the sponsor carousel; then match and facts.
   The stage dissolves (display: contents) so the carousel can sit before the match. */
@media (max-width: 999px) {
	.ucmm-opening {
		--strip-h: 88px;
		--meta-h: 100px;
		--words: calc((100vw - 2 * var(--ucmm-gutter, 16px)) / 3.08);
	}

	@media (min-width: 600px) {
		.ucmm-opening {
			--strip-h: 104px;
		}
	}

	.ucmm-opening__stage {
		display: contents;
	}

	.ucmm-opening__type {
		order: 1;
		display: flex;
		gap: 0.12em;
		padding: 16px var(--ucmm-gutter, 16px) 0;
		font-size: var(--words);
		white-space: nowrap;
	}

	.ucmm-opening__type span {
		font-size: inherit;
	}

	.ucmm-opening__sign {
		order: 2;
		padding: 10px var(--ucmm-gutter, 16px) 0;
		font-size: 1.25rem;
	}

	/* Height left between signature and carousel: 72 header, 16 + 10 + 16 spacing,
	   42 signature, the words' line (0.8em). Never under 66vw: on short screens the
	   carousel moves below the first screen rather than shrinking the news to a stamp. */
	.ucmm-opening__photo {
		--fit-w: calc((100svh - 156px - 0.8 * var(--words) - var(--strip-h) - var(--meta-h)) * var(--r));
		order: 3;
		width: min(100%, max(var(--fit-w), 66vw));
		margin: 16px auto 0;
		background: var(--fd-meta-bg);
	}

	/* Meta under the photo (never over the graphic), counted in the first screen. */
	.ucmm-opening__photo-meta {
		position: static;
		box-sizing: border-box;
		min-height: var(--meta-h);
		max-width: none;
		padding: 10px 14px 12px;
	}

	.ucmm-opening__photo-meta h2 {
		font-size: clamp(1rem, 5vw, 1.375rem);
	}

	.ucmm-opening__read {
		margin-top: 6px;
	}

	.ucmm-opening .ucmm-sponsor-strip {
		order: 4;
		box-sizing: border-box;
		height: var(--strip-h);
		margin-top: 0;
	}

	.ucmm-opening__side {
		--crest: 84px;
		order: 5;
		padding: 28px var(--ucmm-gutter, 16px) 32px;
	}
}

/* Sponsor carousel on one row, under a hairline, with room around it. */
.ucmm-opening .ucmm-sponsor-strip {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: clamp(14px, 2.2vh, 24px) var(--ucmm-gutter, 16px);
	border-top: 2px solid var(--ucmm-red, #d2122e);
	color: var(--ucmm-ink, #141414);
}

.ucmm-opening .ucmm-sponsor-strip__head {
	flex: none;
	width: auto;
	margin: 0;
}

.ucmm-opening .ucmm-sponsor-strip__head .ucmm-kicker {
	display: none;
}

.ucmm-opening .ucmm-sponsor-strip__pause {
	margin: 0;
}

.ucmm-opening .ucmm-sponsor-strip__viewport {
	flex: 1;
	min-width: 0;
	max-width: none;
}

/* Desktop: poster composition on the stage (cq units = stage size).
   --fs: word size, as large as the height allows without reaching the photo. */
@media (min-width: 1000px) {
	.ucmm-opening {
		height: calc(max(100svh, 720px) - 72px);
	}

	.ucmm-overlay-header .ucmm-opening {
		height: max(100svh, 720px);
	}

	.ucmm-opening__stage {
		/* The photo keeps its proportions above the meta block, which runs to the bottom:
		   the graphic is never covered (sponsors sit at its foot). */
		--meta-h: clamp(120px, 17cqh, 180px);
		--pw: min((100cqh - var(--meta-h)) * var(--r), 50cqw);
		/* As large as fits: "MONTECCHIO" ends just before the photo, and the two words
		   (0.75em each) leave room in between for the signature. */
		--left: calc(100cqw - var(--pw) - 2.5cqw);
		flex: 1;
		display: block;
		min-height: 0;
		padding: 0;
		container-type: size;
	}

	/* Declared on the stage's children so the cq units resolve against the stage. */
	.ucmm-opening__stage > * {
		--fs: min((100cqw - var(--pw) - var(--ucmm-gutter, 16px) - 2.5cqw) / 2.012, (94cqh - 11cqh) / 1.5);
		/* The lines sit at the top and the foot of the stage; on tall screens (words limited
		   by the width) the gap is capped and the whole composition stays in the middle. */
		--gap-y: min(94cqh - 1.5 * var(--fs), 1.1 * var(--fs));
		--top-y: calc((100cqh - 1.5 * var(--fs) - var(--gap-y)) / 2);
		/* The signature (about 10em) never runs past "MAGGIORE" (1.595em of --fs). */
		--sign-size: clamp(1.25rem, min(3.2cqh, 0.155 * var(--fs)), 2rem);
	}

	.ucmm-opening__photo {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: var(--pw);
		margin: 0;
		background: var(--fd-meta-bg);
	}

	.ucmm-opening__photo img {
		flex: none;
	}

	.ucmm-opening__photo-meta {
		position: static;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		max-width: none;
		padding-inline: clamp(16px, 1.6vw, 26px);
	}

	/* line-height 0.67: the box starts exactly at the top of the capitals. */
	.ucmm-opening__type span {
		position: absolute;
		left: var(--ucmm-gutter, 16px);
		font-size: var(--fs);
		line-height: 0.67;
		white-space: nowrap;
	}

	.ucmm-opening__w1 {
		top: var(--top-y);
	}

	.ucmm-opening__w2 {
		top: calc(100cqh - var(--top-y) - 0.75 * var(--fs));
	}

	.ucmm-opening__sign {
		position: absolute;
		top: 50%;
		left: var(--ucmm-gutter, 16px);
		transform: translateY(-50%);
	}

	/* Beside "FORZA" and exactly as tall as its capitals (0.75em): the two rules line up
	   with the top and the foot of the letters. Contents scale with the words. */
	.ucmm-opening__side {
		--crest: calc(var(--fs) * 0.185);
		--digits: calc(var(--fs) * 0.125);
		position: absolute;
		top: var(--top-y);
		left: calc(var(--ucmm-gutter, 16px) + 0.928 * var(--fs) + 3cqw);
		width: min(calc(var(--left) - 0.928 * var(--fs) - var(--ucmm-gutter, 16px) - 3cqw), 640px);
		display: flex;
		flex-direction: column;
		gap: 0;
		height: calc(0.75 * var(--fs));
	}

	.ucmm-opening__next {
		flex: 1;
		min-height: 0;
	}

	.ucmm-opening__match {
		min-height: 0;
		container-type: size;
	}

	.ucmm-opening__crests {
		--crest-fit: min(var(--crest), 100cqh - var(--fit-rest));
	}

	/* Date, then venue: one line each, counted in --fit-rest. */
	.ucmm-opening__fixture {
		max-width: 100%;
	}

	.ucmm-opening__fixture > * {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ucmm-opening__facts {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
	}
}

/* Short laptop screens: the words are shorter and there is room only for the match,
   readable; last result and standings are in the match center just below. */
@media (min-width: 1000px) and (max-height: 800px) {
	.ucmm-opening__match {
		gap: 0;
	}

	.ucmm-opening__facts {
		display: none;
	}
}

/* Narrow column (e.g. "MAGGIORE" at 1440×900): the facts would wrap and leave the
   crests no room; they are in the match center just below. */
@media (min-width: 1000px) {
	.ucmm-opening__side {
		container: ucmm-side / inline-size;
	}
}

/* words="forza": the block is only as tall as "FORZA", the facts would leave the crests
   no room (they are in the match center just below). */
@media (min-width: 1000px) {
	.ucmm-opening:not(.ucmm-opening--club) .ucmm-opening__facts {
		display: none;
	}
}

@container ucmm-side (max-width: 360px) {
	.ucmm-opening__facts {
		display: none;
	}
}

/* words="club": "ASD UC MONTECCHIO" (3.166em) fills the first line, "MAGGIORE" (1.595em)
   below. The long first line makes the words smaller and leaves room between the lines:
   the match block, after "MAGGIORE", starts level with the signature (one line, centred)
   and ends at the foot of the capitals. */
@media (min-width: 1000px) {
	.ucmm-opening--club .ucmm-opening__stage > * {
		--fs: min((100cqw - var(--pw) - var(--ucmm-gutter, 16px) - 2.5cqw) / 3.166, (94cqh - 11cqh) / 1.5);
	}

	.ucmm-opening--club .ucmm-opening__side {
		--crest: calc(var(--fs) * 0.28);
		--digits: calc(var(--fs) * 0.127);
		top: calc(50cqh - 0.525 * var(--sign-size));
		height: calc(50cqh - var(--top-y) + 0.525 * var(--sign-size));
		left: calc(var(--ucmm-gutter, 16px) + 1.595 * var(--fs) + 3cqw);
		width: min(calc(var(--left) - 1.595 * var(--fs) - var(--ucmm-gutter, 16px) - 3cqw), 640px);
	}

	.ucmm-opening--club .ucmm-opening__comp-name {
		display: none;
	}

	.ucmm-opening--club .ucmm-opening__facts {
		gap: 10px 12px;
	}

	.ucmm-opening--club .ucmm-opening__match {
		gap: 2px;
	}
}

/* Phones: "ASD UC MONTECCHIO" fills the line, "MAGGIORE" under it. */
@media (max-width: 999px) {
	.ucmm-opening--club {
		--words: calc((100vw - 2 * var(--ucmm-gutter, 16px)) / 3.2);
	}

	.ucmm-opening--club .ucmm-opening__type {
		display: block;
	}

	.ucmm-opening--club .ucmm-opening__type span {
		display: block;
	}

	.ucmm-opening--club .ucmm-opening__photo {
		--fit-w: calc((100svh - 156px - 1.6 * var(--words) - var(--strip-h) - var(--meta-h)) * var(--r));
	}
}

/* panel="card": the match block as a white card with ink text; countdown in the head row
   between the label and the league, in the condensed face; no facts row. */
.ucmm-opening--card .ucmm-opening__side {
	--fd-fg: var(--ucmm-ink, #141414);
	box-sizing: border-box;
	background: #fff;
	color: var(--fd-fg);
}

.ucmm-opening--card .ucmm-opening__facts {
	display: none;
}

.ucmm-opening--card .ucmm-opening__next-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding-bottom: 8px;
}

.ucmm-opening--card .ucmm-opening__comp {
	justify-self: end;
}

.ucmm-opening--card .ucmm-opening__countdown {
	gap: clamp(8px, 1vw, 14px);
}

.ucmm-opening--card .ucmm-opening__countdown div {
	gap: 3px;
}

.ucmm-opening--card .ucmm-opening__countdown span {
	font-family: var(--ucmm-font-cond);
	font-size: max(1.5rem, var(--fs) * 0.085);
	font-weight: 700;
	line-height: 1;
}

.ucmm-opening--card .ucmm-opening__countdown small {
	font-size: 0.625rem;
	color: var(--ucmm-mute, #5b6068);
}

.ucmm-opening--card .ucmm-opening__match {
	/* Crests, names (one line), date and venue: nothing else below the head. */
	--fit-rest: calc(1.1 * var(--name-size) + 2.5 * max(0.875rem, var(--fs) * 0.042) + 20px);
	gap: 8px;
}

.ucmm-opening--card .ucmm-opening__vs {
	font-family: var(--ucmm-font-cond);
	font-size: max(1rem, var(--crest-fit, var(--crest, 64px)) * 0.28);
	font-weight: 700;
	line-height: var(--crest-fit, var(--crest, 64px));
	color: var(--ucmm-mute, #5b6068);
}

.ucmm-opening--card .ucmm-opening__fixture {
	margin-bottom: 0;
}

.ucmm-opening--card .ucmm-opening__fixture span {
	color: var(--ucmm-mute, #5b6068);
}

/* panel="card-clear": same layout, no white card: text in the theme colour. */
.ucmm-opening--card-clear .ucmm-opening__side {
	--fd-fg: inherit;
	background: none;
}

.ucmm-opening--card-clear :is(.ucmm-opening__countdown small, .ucmm-opening__vs, .ucmm-opening__fixture span) {
	color: inherit;
	opacity: 0.75;
}

/* 20px between the head rule and the crests: taken from the bottom padding (no card to
   frame), tighter gaps and leading; crests 10% under the room left. */
.ucmm-opening--card-clear .ucmm-opening__match {
	--fit-rest: calc(1.1 * var(--name-size) + 2.3 * max(0.875rem, var(--fs) * 0.042) + 14px);
	gap: 6px;
	padding-top: 20px;
}

.ucmm-opening--card-clear .ucmm-opening__team {
	gap: 4px;
}

.ucmm-opening--card-clear .ucmm-opening__fixture {
	line-height: 1.15;
}

@media (min-width: 1000px) {
	.ucmm-opening--card.ucmm-opening--card-clear .ucmm-opening__side {
		padding-bottom: 0;
	}

	.ucmm-opening--card-clear .ucmm-opening__crests {
		--crest-fit: calc(0.9 * min(var(--crest), 100cqh - var(--fit-rest)));
	}
}

/* Shadow following the logo's shape, so it stands out from the texture. */
.ucmm-opening--card-clear .ucmm-opening__crest .ucmm-logo {
	filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.3)) drop-shadow(0 8px 18px rgb(0 0 0 / 0.35));
}

/* Desktop: the card is as tall as the capitals of "MAGGIORE" (or "FORZA"), level with
   them; the bottom padding is the smallest, the crests take what is left. */
@media (min-width: 1000px) {
	/* Nothing sits between the lines but the signature: they stay close, in the middle. */
	.ucmm-opening--card .ucmm-opening__stage > * {
		--gap-y: min(94cqh - 1.5 * var(--fs), max(0.3 * var(--fs), 2.5 * var(--sign-size)));
	}

	.ucmm-opening--card .ucmm-opening__side {
		--crest: calc(var(--fs) * 0.36);
		padding: clamp(12px, 1.2vw, 22px) clamp(14px, 1.4vw, 24px) clamp(6px, 0.6vw, 12px);
	}

	.ucmm-opening--card.ucmm-opening--club .ucmm-opening__side {
		top: calc(100cqh - var(--top-y) - 0.75 * var(--fs));
		height: calc(0.75 * var(--fs));
	}
}

@media (max-width: 999px) {
	.ucmm-opening--card .ucmm-opening__side {
		margin: 24px var(--ucmm-gutter, 16px) 32px;
		padding: 20px 18px 24px;
	}

	/* Too narrow for one row: label and round on top, the countdown centred below. */
	.ucmm-opening--card .ucmm-opening__next-head {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "key comp" "count count";
		row-gap: 14px;
	}

	.ucmm-opening--card .ucmm-opening__next-head .ucmm-opening__key {
		grid-area: key;
	}

	.ucmm-opening--card .ucmm-opening__comp {
		grid-area: comp;
	}

	.ucmm-opening--card .ucmm-opening__comp-name {
		display: none;
	}

	.ucmm-opening--card .ucmm-opening__next-head .ucmm-opening__countdown {
		grid-area: count;
		justify-content: center;
	}
}