/* ============================================================
   Superliga Stilling: styling="mosaik"
   Indlæses kun, når en shortcode har styling="mosaik", og alle
   regler er bundet til .sl-style-mosaik. Standardudseendet i
   superliga-stilling.css påvirkes derfor ikke.
   ============================================================ */

/* ---------- Næste kamp: vandret bjælke ---------- */
.sl-match.sl-style-mosaik {
	--m-text: var(--primary, #0B2545);
	--m-muted: #4B5563;
	background: transparent;
	color: var(--m-text);
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.sl-match.sl-style-mosaik::before {
	display: none;
}

.sl-match.sl-style-mosaik .sl-match__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 0;
}

.sl-match.sl-style-mosaik .sl-match__center {
	display: contents;
}

.sl-match.sl-style-mosaik .sl-match__eyebrow {
	order: 1;
	padding: 5px 10px;
	background: var(--standout, #C8102E);
	color: #fff;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
}

.sl-match.sl-style-mosaik .sl-match__sep {
	opacity: 1;
}

.sl-match.sl-style-mosaik .sl-match__side {
	flex-direction: row;
	gap: 8px;
}

.sl-match.sl-style-mosaik .sl-match__side--home {
	order: 2;
}

.sl-match.sl-style-mosaik .sl-match__side--away {
	order: 3;
}

.sl-match.sl-style-mosaik .sl-match__side--away::before {
	content: "–";
	margin-right: 6px;
	font-family: "Barlow Condensed", "Arial Narrow", var(--font-family-body), sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	color: var(--m-text);
}

.sl-match.sl-style-mosaik .sl-match__crest {
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	backdrop-filter: none;
}

.sl-match.sl-style-mosaik .sl-match__crest img {
	filter: none;
}

.sl-match.sl-style-mosaik .sl-match__crest:empty {
	display: none;
}

.sl-match.sl-style-mosaik .sl-match__team-name,
.sl-match.sl-style-mosaik .sl-match__time {
	font-family: "Barlow Condensed", "Arial Narrow", var(--font-family-body), sans-serif;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.005em;
	color: var(--m-text);
}

.sl-match.sl-style-mosaik .sl-match__time {
	order: 4;
	margin-left: auto;
	margin-top: 0;
}

.sl-match.sl-style-mosaik .sl-match__venue {
	order: 5;
	font-size: 13px;
	font-weight: 500;
	color: var(--m-muted);
}

.sl-match.sl-style-mosaik.sl-match--empty {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 14px;
	padding: 0;
	text-align: left;
}

.sl-match.sl-style-mosaik.sl-match--empty .sl-match__no {
	font-size: 15px;
	font-weight: 500;
	color: var(--m-muted);
}

@media (max-width: 560px) {
	/* Tre faste linjer: mærkat, hold, tid og sted */
	.sl-match.sl-style-mosaik .sl-match__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"meta meta"
			"home away"
			"time venue";
		align-items: center;
		justify-items: start;
		gap: 8px 8px;
	}
	.sl-match.sl-style-mosaik .sl-match__eyebrow {
		width: fit-content;
		letter-spacing: .08em;
		font-size: 11px;
	}
	.sl-match.sl-style-mosaik .sl-match__side {
		min-width: 0;
		gap: 6px;
	}
	.sl-match.sl-style-mosaik .sl-match__crest {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
	}
	.sl-match.sl-style-mosaik .sl-match__team-name,
	.sl-match.sl-style-mosaik .sl-match__time,
	.sl-match.sl-style-mosaik .sl-match__side--away::before {
		font-size: 22px;
	}
	.sl-match.sl-style-mosaik .sl-match__side--away::before {
		margin-right: 2px;
	}
	.sl-match.sl-style-mosaik .sl-match__time {
		margin-left: 0;
	}
}

/* ---------- Mænd/Kvinder-knapper ---------- */
.sl-wrap.sl-style-mosaik {
	gap: 12px;
}

.sl-wrap--toggle.sl-style-mosaik .sl-toggle {
	padding: 4px;
	background: #fff;
	border: 1px solid var(--border, #E5E7EB);
	border-radius: 6px;
	box-shadow: none;
}

.sl-wrap--toggle.sl-style-mosaik .sl-toggle__btn {
	min-width: 84px;
	min-height: 36px;
	height: 36px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: #4B5563;
	border-radius: 4px;
}

.sl-wrap--toggle.sl-style-mosaik .sl-toggle__pill,
.sl-wrap--toggle.sl-style-mosaik.is-women .sl-toggle__pill {
	top: 4px;
	left: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	background: var(--primary, #0B2545);
	border-radius: 4px;
	box-shadow: none;
}

/* ---------- Kompakt stilling ---------- */
.sl-wrap.sl-style-mosaik .sl-table {
	--sl-primary: var(--primary, #0B2545);
	--sl-accent: var(--primary, #0B2545);
	--sl-muted: #4B5563;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	font-size: 14px;
}

.sl-wrap.sl-style-mosaik .sl-table--error,
.sl-wrap.sl-style-mosaik .sl-table--empty {
	padding: 16px;
	background: #fff;
	color: #4B5563;
}

.sl-wrap.sl-style-mosaik .sl-table__head {
	align-items: center;
	padding: 14px 16px 8px;
	background: transparent;
	color: var(--darktext, #0E1116);
}

.sl-wrap.sl-style-mosaik .sl-table__head::after {
	display: none;
}

.sl-wrap.sl-style-mosaik .sl-table__eyebrow {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #4B5563;
}

.sl-wrap.sl-style-mosaik .sl-table__title {
	display: none;
}

.sl-wrap.sl-style-mosaik .sl-table__updated {
	padding: 0;
	background: transparent;
	font-size: 13px;
	color: #4B5563;
}

.sl-wrap.sl-style-mosaik .sl-hide-sm,
.sl-wrap.sl-style-mosaik .sl-hide-md {
	display: none;
}

.sl-wrap.sl-style-mosaik .sl-table__grid {
	font-size: 14px;
}

.sl-wrap.sl-style-mosaik .sl-table__grid thead th {
	padding: 8px 6px;
	font-size: 11px;
	color: #4B5563;
	border-bottom: 2px solid var(--primary, #0B2545);
}

.sl-wrap.sl-style-mosaik .sl-table__grid tbody td {
	padding: 8px 6px;
	font-size: 14px;
}

.sl-wrap.sl-style-mosaik .sl-c-rank {
	width: 36px;
	padding-left: 14px !important;
}

.sl-wrap.sl-style-mosaik .sl-table__grid thead th.sl-c-rank {
	padding-left: 14px;
}

.sl-wrap.sl-style-mosaik .sl-c-team,
.sl-wrap.sl-style-mosaik .sl-table__grid thead th.sl-c-team {
	min-width: 0;
	padding-left: 6px !important;
}

.sl-wrap.sl-style-mosaik .sl-c-pts {
	width: 44px;
	padding-right: 14px !important;
}

.sl-wrap.sl-style-mosaik .sl-rank {
	min-width: 0;
	height: auto;
	padding: 0;
	background: transparent;
	color: var(--darktext, #0E1116);
	font-size: 14px;
	font-weight: 500;
}

.sl-wrap.sl-style-mosaik .sl-team {
	gap: 8px;
}

.sl-wrap.sl-style-mosaik .sl-team__logo {
	width: 22px;
	height: 22px;
	background: transparent;
	border-radius: 0;
}

.sl-wrap.sl-style-mosaik .sl-team__logo img {
	width: 22px;
	height: 22px;
}

.sl-wrap.sl-style-mosaik .sl-team__name {
	max-width: none;
	font-size: 14px;
	font-weight: 500;
}

.sl-wrap.sl-style-mosaik .sl-c-gd.is-pos,
.sl-wrap.sl-style-mosaik .sl-c-gd.is-neg {
	color: var(--darktext, #0E1116);
	font-weight: 500;
}

.sl-wrap.sl-style-mosaik .sl-pts__num {
	font-size: 14px;
	font-weight: 800;
	color: var(--darktext, #0E1116);
}

.sl-wrap.sl-style-mosaik .sl-pts__bar {
	display: none;
}

/* AGF-rækken */
.sl-wrap.sl-style-mosaik .sl-table__grid tbody tr.is-focus td,
.sl-wrap.sl-style-mosaik .sl-table__grid tbody tr.is-focus:hover td {
	background: var(--primary, #0B2545);
	color: #fff;
	font-weight: 700;
	border-bottom-color: var(--primary, #0B2545);
}

.sl-wrap.sl-style-mosaik .is-focus .sl-rank,
.sl-wrap.sl-style-mosaik .is-focus .sl-team__name,
.sl-wrap.sl-style-mosaik .is-focus .sl-pts__num,
.sl-wrap.sl-style-mosaik .is-focus .sl-c-num,
.sl-wrap.sl-style-mosaik .is-focus .sl-c-gd.is-pos,
.sl-wrap.sl-style-mosaik .is-focus .sl-c-gd.is-neg {
	color: #fff;
	font-weight: 700;
}

.sl-wrap.sl-style-mosaik .is-focus .sl-team__logo {
	background: #fff;
	border-radius: 50%;
}

.sl-wrap.sl-style-mosaik .is-focus .sl-team__logo img {
	width: 18px;
	height: 18px;
}