/* Spartans Match Cards & Albums */

/* ---------------------------------------------------- The fixture row link */

.spartans-season__table--results tr.has-smc-card .smc-open,
.smc-open {
	float: right;
	margin: 0 0 0 14px;
	padding: 2px 11px 3px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: none;
	color: #eb0000;
	font: inherit;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.smc-open:hover,
.smc-open:focus-visible {
	background: #eb0000;
	color: #ffffff;
}

.smc-open:focus-visible {
	outline: 2px solid #eb0000;
	outline-offset: 2px;
}

/* --------------------------------------------------------------- The pop-up */

/* Sits below Elementor's lightbox so a photograph opened from inside the
   pop-up still comes out on top of it. */
.smc {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 16px;
}

.smc[hidden] {
	display: none;
}

.smc__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 16, 0.72);
	backdrop-filter: blur(2px);
}

.smc__panel {
	position: relative;
	width: min(720px, 100%);
	max-height: 92vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	color: #1a1d21;
	border-radius: 6px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.smc__panel:focus {
	outline: none;
}

.smc__close {
	position: sticky;
	top: 0;
	float: right;
	z-index: 2;
	margin: 8px 8px 0 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: #1a1d21;
	font-size: 22px;
	line-height: 36px;
	cursor: pointer;
}

.smc__close:hover,
.smc__close:focus-visible {
	background: rgba(0, 0, 0, 0.14);
}

.smc__inner {
	padding: 26px 30px 32px;
}

.smc__eyebrow {
	margin: 0 0 6px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
}

.smc__title {
	margin: 0 0 4px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.smc__meta {
	margin: 0 0 16px;
	font-size: 0.92rem;
	opacity: 0.7;
}

.smc__score {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 20px;
	padding: 12px 14px;
	background: #f4f5f7;
	border-radius: 4px;
	font-size: 1rem;
}

.smc__club {
	flex: 1 1 34%;
	font-weight: 600;
}

.smc__score .smc__club:last-child {
	text-align: right;
}

.smc__figures {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.smc__body p {
	margin: 0 0 1em;
	line-height: 1.65;
}

.smc__h3 {
	margin: 22px 0 8px;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.65;
}

.smc__motm {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.smc__lineup {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 24px;
}

.smc__lineup li {
	margin: 0 0 4px;
	break-inside: avoid;
}

.smc__photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.smc__photos figure {
	margin: 0;
}

.smc__photos img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.smc__photos figcaption {
	margin-top: 4px;
	font-size: 0.78rem;
	opacity: 0.7;
}

.smc__frame {
	position: relative;
	padding-top: 56.25%;
}

.smc__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.smc__videos video {
	width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.smc {
		padding: 0;
	}

	.smc__panel {
		max-height: 100vh;
		border-radius: 0;
	}

	.smc__inner {
		padding: 20px 18px 28px;
	}

	.smc__lineup {
		columns: 1;
	}

	.smc__photos {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------- The albums
 *
 * An album is a section of the season page in its own right, headed by its own
 * name in the page's section style: uppercase, with the red rule under it, the
 * same treatment as PHOTOGRAPHS and VIDEO. There is no "Albums" heading above
 * them any more. The wrapper heading is kept for the document outline and for
 * screen readers, and taken out of the visual flow.
 */

.smc-alb__wrap {
	margin-top: 0;
}

.smc-alb__h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.smc-alb__item {
	margin: 60px 0 0;
}

.smc-alb__title {
	margin: 0 0 4px;
	font-size: 30px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sp-ink, #111111);
	text-align: left;
}

.smc-alb__title::after {
	content: "";
	display: block;
	width: 42px;
	height: 4px;
	margin-top: 10px;
	background: var(--sp-a, #eb0000);
}

.smc-alb__meta {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sp-mut, #7a7a7a);
	text-align: left;
}

.smc-alb__intro {
	margin: 8px 0 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sp-mut, #7a7a7a);
	text-align: left;
}

.smc-alb__gallery {
	position: relative;
	margin-top: 24px;
}

.smc-alb__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Six across, small padding, each photograph keeping its own shape. */
.smc-alb__mosaic {
	column-count: 6;
	column-gap: 4px;
}

.smc-alb__figure {
	margin: 0 0 4px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.smc-alb__figure.is-extra {
	display: none;
}

.smc-alb__toggle:checked ~ .smc-alb__mosaic .smc-alb__figure.is-extra {
	display: block;
}

.smc-alb__figure a {
	display: block;
	line-height: 0;
}

.smc-alb__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	transition: opacity 0.15s ease;
}

.smc-alb__figure a:hover .smc-alb__img,
.smc-alb__figure a:focus-visible .smc-alb__img {
	opacity: 0.82;
}

/* The same control as the season photographs, so the two galleries behave and
   read alike. */
.smc-alb__more {
	display: inline-block;
	margin-top: 22px;
	padding: 12px 24px;
	border: 1px solid var(--sp-tint-line, #f0cdc9);
	border-radius: 3px;
	background: var(--sp-tint, #fdf3f2);
	color: var(--sp-a, #eb0000);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.smc-alb__more:hover {
	background: var(--sp-a, #eb0000);
	border-color: var(--sp-a, #eb0000);
	color: #ffffff;
}

.smc-alb__toggle:focus-visible ~ .smc-alb__more {
	outline: 2px solid var(--sp-a, #eb0000);
	outline-offset: 3px;
}

.smc-alb__more-shut {
	display: none;
}

.smc-alb__toggle:checked ~ .smc-alb__more .smc-alb__more-open {
	display: none;
}

.smc-alb__toggle:checked ~ .smc-alb__more .smc-alb__more-shut {
	display: inline;
}

@media (prefers-reduced-motion: reduce) {
	.smc-alb__more {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.smc-alb__mosaic {
		column-count: 4;
	}
}

@media (max-width: 782px) {
	.smc-alb__mosaic {
		column-count: 3;
	}
}

@media (max-width: 640px) {
	.smc-alb__title {
		font-size: 24px;
	}

	.smc-alb__item {
		margin-top: 44px;
	}
}

@media (max-width: 520px) {
	.smc-alb__mosaic {
		column-count: 2;
	}
}

body.smc-locked {
	overflow: hidden;
}

/* ------------------------------------------- The competition report link
 *
 * A report about a whole competition reads as a hyperlink under the
 * competition's summary line, not as a pill in a table row, so it takes the
 * link styling rather than the fixture row's button.
 */

.smc-report {
	margin: -8px 0 22px;
	font-size: 15px;
	line-height: 1.6;
}

.smc-open--link {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: var(--sp-a, #eb0000);
	font: inherit;
	font-weight: 700;
	letter-spacing: 0;
	white-space: normal;
	text-decoration: none;
}

.smc-open--link:hover,
.smc-open--link:focus-visible {
	background: none;
	color: var(--sp-a-dark, #b80000);
	border-bottom-color: currentColor;
}