/**
 * Structural defaults only.
 *
 * Deliberately unopinionated: no brand colours, no fonts, no borders beyond what
 * a table needs to be readable. Everything here is low-specificity (single
 * class, no !important) so that ANY style set in Oxygen overrides it without a
 * fight. The point is that the journalist designs the table, not this file.
 */

.nxl-standings__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums; /* stat columns line up */
}

.nxl-standings__head-cell {
	text-align: center;
	white-space: nowrap;
	padding: 10px 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 2px solid rgba(128, 128, 128, 0.35);
}

.nxl-standings__head-cell--club {
	text-align: left;
}

.nxl-standings__cell {
	text-align: center;
	padding: 10px 8px;
	vertical-align: middle;
	border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.nxl-standings__cell--club {
	text-align: left;
}

/* The one stat that decides a league — give it visual weight by default. */
.nxl-standings__cell--points {
	font-weight: 700;
}

/* Keep the club column greedy so the stat columns stay tight and legible. */
.nxl-standings__cell--club,
.nxl-standings__head-cell--club {
	width: 99%;
}

.nxl-standings__pos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
}

.nxl-standings__club {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nxl-standings__crest {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* Shown on narrow screens in place of the full club name. */
.nxl-standings__club-abbr {
	display: none;
}

.nxl-standings__form {
	display: inline-flex;
	gap: 3px;
}

.nxl-standings__form-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 10px;
	line-height: 1;
	color: #fff;
}

/* Neutral greys, not brand colours — override these in Oxygen. */
.nxl-standings__form-dot--w { background: #2e7d32; }
.nxl-standings__form-dot--d { background: #9e9e9e; }
.nxl-standings__form-dot--l { background: #c62828; }

.nxl-standings__season-note {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.85;
}

.nxl-standings__updated {
	margin-top: 8px;
	font-size: 12px;
	opacity: 0.7;
}

.nxl-standings__empty {
	padding: 16px;
	text-align: center;
	opacity: 0.7;
}

/* ============================================================
 * Fixtures / Results / Live
 * ========================================================== */

.nxl-fixtures__date {
	padding: 8px 0;
	font-size: 13px;
	font-weight: 700;
}

/*
 * home | score | away, with the centre column fixed so scores line up in a
 * clean vertical rail down the list however long the club names are.
 */
.nxl-fixtures__match {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.nxl-fixtures__team {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* Home reads right-to-left into the score; away reads away from it. */
.nxl-fixtures__team--home {
	justify-content: flex-end;
	text-align: right;
}

.nxl-fixtures__team--away {
	justify-content: flex-start;
	text-align: left;
}

.nxl-fixtures__team-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nxl-fixtures__team-abbr {
	display: none; /* phones only — see media query */
}

.nxl-fixtures__crest {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.nxl-fixtures__centre {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 64px;
}

.nxl-fixtures__score {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.nxl-fixtures__score-sep {
	margin: 0 4px;
	opacity: 0.5;
}

.nxl-fixtures__kickoff {
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

.nxl-fixtures__live {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #c62828;
}

.nxl-fixtures__status,
.nxl-fixtures__venue,
.nxl-fixtures__league {
	font-size: 11px;
	opacity: 0.65;
}

/* Venue and league sit under the whole row, spanning all three columns. */
.nxl-fixtures__venue,
.nxl-fixtures__league {
	grid-column: 1 / -1;
	text-align: center;
}

.nxl-fixtures__empty {
	padding: 16px;
	text-align: center;
	opacity: 0.7;
}

/* ============================================================
 * News Wire
 * ========================================================== */

.nxl-wire__grid .nxl-wire__list {
	display: grid;
	/* Column count comes from the element setting, via an inline custom property. */
	grid-template-columns: repeat(var(--nxl-wire-columns, 3), minmax(0, 1fr));
	gap: 20px;
}

.nxl-wire__item {
	min-width: 0;
}

.nxl-wire__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.nxl-wire__image-wrap {
	position: relative;
	overflow: hidden;
}

.nxl-wire__image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

/* Image credit is a legal requirement, not decoration — always visible. */
.nxl-wire__credit {
	position: absolute;
	right: 4px;
	bottom: 4px;
	padding: 2px 5px;
	font-size: 10px;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
}

.nxl-wire__headline {
	margin: 10px 0 6px;
	font-size: 16px;
	line-height: 1.35;
}

.nxl-wire__summary {
	margin: 0 0 8px;
	font-size: 14px;
	opacity: 0.8;
}

.nxl-wire__meta {
	display: flex;
	gap: 8px;
	font-size: 12px;
	opacity: 0.65;
}

.nxl-wire__clubs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

.nxl-wire__club {
	padding: 2px 8px;
	font-size: 11px;
	border-radius: 999px;
	background: rgba(128, 128, 128, 0.18);
}

.nxl-wire__empty {
	padding: 16px;
	text-align: center;
	opacity: 0.7;
}

/* ============================================================
 * Social feed
 * ========================================================== */

.nxl-social__grid .nxl-social__list {
	display: grid;
	grid-template-columns: repeat(var(--nxl-social-columns, 3), minmax(0, 1fr));
	gap: 20px;
}

.nxl-social__item {
	min-width: 0;
}

.nxl-social__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.nxl-social__thumb-wrap {
	position: relative;
	overflow: hidden;
}

.nxl-social__thumb {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.nxl-social__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 34px;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

/* A live broadcast has to be impossible to miss — that is the entire point. */
.nxl-social__live {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff;
	background: #c62828;
	border-radius: 3px;
}

.nxl-social__network {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 7px;
	font-size: 10px;
	color: #fff;
	background: rgba(0, 0, 0, 0.65);
	border-radius: 3px;
}

.nxl-social__title {
	margin: 10px 0 4px;
	font-size: 15px;
	line-height: 1.35;
}

.nxl-social__excerpt {
	margin: 0 0 6px;
	font-size: 13px;
	opacity: 0.8;
}

.nxl-social__date {
	font-size: 12px;
	opacity: 0.6;
}

/* TikTok's official embed sets its own width; keep it from bursting the grid. */
.nxl-social__embed iframe,
.nxl-social__embed blockquote {
	max-width: 100% !important;
	min-width: 0 !important;
}

.nxl-social__empty {
	padding: 16px;
	text-align: center;
	opacity: 0.7;
}

/* ============================================================
 * Contextual merch
 * ========================================================== */

.nxl-merch__heading {
	margin: 0 0 12px;
	font-size: 18px;
}

.nxl-merch__grid .nxl-merch__list {
	display: grid;
	grid-template-columns: repeat(var(--nxl-merch-columns, 4), minmax(0, 1fr));
	gap: 16px;
}

.nxl-merch__item {
	min-width: 0;
}

.nxl-merch__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.nxl-merch__image-wrap {
	position: relative;
	overflow: hidden;
}

.nxl-merch__image {
	display: block;
	width: 100%;
	height: auto;
}

.nxl-merch__image--placeholder {
	height: 160px;
	background: rgba(128, 128, 128, 0.12);
}

.nxl-merch__sale {
	position: absolute;
	top: 6px;
	left: 6px;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: #c62828;
	border-radius: 3px;
}

.nxl-merch__title {
	margin: 8px 0 4px;
	font-size: 14px;
	line-height: 1.3;
}

.nxl-merch__price {
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.nxl-merch__button {
	display: inline-block;
	margin-top: 8px;
	padding: 7px 14px;
	font-size: 13px;
	text-decoration: none;
	color: #fff;
	background: #1a1a1a;
	border-radius: 3px;
}

/* ============================================================
 * Live ticker
 * ========================================================== */

.nxl-ticker__track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 8px 0;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

/* ---- Mode: SCROLL (continuous marquee) ----------------------------
 *
 * The JS clones the whole run of matches once, so the track holds two identical
 * halves. Translating by exactly -50% therefore lands on a pixel-identical
 * frame, and the loop restart is invisible. Any other percentage produces the
 * visible "jump" that makes cheap marquees look broken.
 */
.nxl-ticker--scroll .nxl-ticker__track {
	overflow: hidden;
	flex-wrap: nowrap;
	width: max-content;
	animation: nxl-ticker-scroll var(--nxl-ticker-speed, 40s) linear infinite;
}

.nxl-ticker--scroll {
	overflow: hidden;
}

@keyframes nxl-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Hovering to read a score should not mean chasing it across the screen. */
.nxl-ticker--scroll.nxl-ticker--pausable:hover .nxl-ticker__track {
	animation-play-state: paused;
}

/* ---- Modes: FLIP and FADE (one match at a time) --------------------
 *
 * Items are stacked and only the active one is shown. The track needs a fixed
 * height because every child is absolutely positioned — without it the bar
 * collapses to nothing.
 */
.nxl-ticker--flip .nxl-ticker__track,
.nxl-ticker--fade .nxl-ticker__track {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 40px;
	perspective: 600px;
}

.nxl-ticker--flip .nxl-ticker__item,
.nxl-ticker--fade .nxl-ticker__item {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.nxl-ticker--flip .nxl-ticker__item.is-active,
.nxl-ticker--fade .nxl-ticker__item.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.nxl-ticker--fade .nxl-ticker__item {
	transition: opacity 0.5s ease;
}

.nxl-ticker--flip .nxl-ticker__item.is-active {
	animation: nxl-ticker-flip 0.55s ease;
}

@keyframes nxl-ticker-flip {
	from {
		opacity: 0;
		transform: translateY(-50%) rotateX(-90deg);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) rotateX(0);
	}
}

/*
 * Motion is a preference, not a decision we get to make for the reader. Anyone
 * who has asked their OS to reduce motion gets the plain scrollable strip.
 */
@media ( prefers-reduced-motion: reduce ) {

	.nxl-ticker--scroll .nxl-ticker__track {
		animation: none;
		width: auto;
		overflow-x: auto;
	}

	.nxl-ticker--flip .nxl-ticker__item.is-active {
		animation: none;
	}

	.nxl-ticker--fade .nxl-ticker__item {
		transition: none;
	}
}

.nxl-ticker__item {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 6px 12px;
	font-size: 13px;
	white-space: nowrap;
	background: rgba(128, 128, 128, 0.1);
	border-radius: 4px;
}

.nxl-ticker__league {
	font-size: 11px;
	opacity: 0.6;
}

.nxl-ticker__score,
.nxl-ticker__team {
	font-weight: 600;
}

.nxl-ticker__vs {
	opacity: 0.5;
}

.nxl-ticker__time,
.nxl-ticker__date {
	font-size: 11px;
	opacity: 0.65;
	white-space: nowrap;
}

.nxl-ticker__live {
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	background: #c62828;
	border-radius: 3px;
	animation: nxl-pulse 1.6s ease-in-out infinite;
}

@keyframes nxl-pulse {
	50% { opacity: 0.45; }
}

/* ============================================================
 * Predictor + leaderboard
 * ========================================================== */

.nxl-predictor__rank {
	padding: 10px 14px;
	margin-bottom: 14px;
	background: rgba(128, 128, 128, 0.1);
	border-radius: 4px;
}

.nxl-predictor__match {
	padding: 12px;
	margin-bottom: 10px;
	background: rgba(128, 128, 128, 0.06);
	border-radius: 4px;
}

.nxl-predictor__match--closed {
	opacity: 0.55;
}

.nxl-predictor__teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
}

.nxl-predictor__team--home {
	text-align: right;
}

.nxl-predictor__inputs {
	display: flex;
	align-items: center;
	gap: 6px;
}

.nxl-predictor__score {
	width: 46px;
	padding: 6px;
	font-size: 16px;
	text-align: center;
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 4px;
}

/* Chrome/Safari put spinners in number inputs; on a 46px box they are unusable. */
.nxl-predictor__score::-webkit-outer-spin-button,
.nxl-predictor__score::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.nxl-predictor__score {
	-moz-appearance: textfield;
	appearance: textfield;
}

.nxl-predictor__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	margin-top: 10px;
	font-size: 12px;
}

.nxl-predictor__save {
	padding: 6px 16px;
	font-size: 13px;
	color: #fff;
	cursor: pointer;
	background: #0b7a3b;
	border: 0;
	border-radius: 4px;
}

.nxl-predictor__save:disabled {
	opacity: 0.6;
	cursor: default;
}

.nxl-predictor__msg.is-ok {
	color: #1a7f37;
}

.nxl-predictor__msg.is-error {
	color: #c62828;
}

.nxl-predictor__login {
	padding: 20px;
	text-align: center;
	background: rgba(128, 128, 128, 0.08);
	border-radius: 4px;
}

.nxl-predictor__login-btn {
	display: inline-block;
	padding: 8px 18px;
	color: #fff;
	text-decoration: none;
	background: #0b7a3b;
	border-radius: 4px;
}

.nxl-leaderboard__table {
	width: 100%;
	border-collapse: collapse;
}

.nxl-leaderboard__table th,
.nxl-leaderboard__table td {
	padding: 8px 10px;
	text-align: left;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.nxl-leaderboard__row--me {
	background: rgba(11, 122, 59, 0.12);
	font-weight: 600;
}

.nxl-leaderboard__player {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nxl-leaderboard__avatar {
	border-radius: 50%;
}

.nxl-leaderboard__pts {
	font-weight: 700;
}

/* ============================================================
 * Poll
 * ========================================================== */

.nxl-poll__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nxl-poll__option {
	padding: 10px 14px;
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 4px;
}

.nxl-poll__option:hover {
	background: rgba(128, 128, 128, 0.12);
}

.nxl-poll__result {
	margin-bottom: 10px;
}

.nxl-poll__result-head {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 4px;
}

.nxl-poll__bar {
	height: 8px;
	overflow: hidden;
	background: rgba(128, 128, 128, 0.2);
	border-radius: 4px;
}

.nxl-poll__bar-fill {
	height: 100%;
	background: #0b7a3b;
	border-radius: 4px;
	transition: width 0.4s ease;
}

.nxl-poll__total {
	font-size: 12px;
	opacity: 0.7;
}

/* ============================================================
 * Live blog
 * ========================================================== */

.nxl-liveblog__status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-weight: 700;
	color: #c62828;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
}

.nxl-liveblog__dot {
	width: 8px;
	height: 8px;
	background: #c62828;
	border-radius: 50%;
	animation: nxl-pulse 1.4s ease-in-out infinite;
}

.nxl-liveblog__entry {
	padding: 12px 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.nxl-liveblog__entry--key {
	padding: 12px;
	background: rgba(198, 40, 40, 0.08);
	border-left: 3px solid #c62828;
	border-bottom: 0;
}

/* New entries fade in so a reader watching the page notices them arrive. */
.nxl-liveblog__entry--new {
	animation: nxl-fade-in 0.5s ease;
}

@keyframes nxl-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.nxl-liveblog__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.nxl-liveblog__minute {
	padding: 1px 7px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #1a1a1a;
	border-radius: 3px;
}

.nxl-liveblog__time {
	font-size: 11px;
	opacity: 0.55;
}

.nxl-liveblog__body p {
	margin: 0;
}

/* ============================================================
 * Transfers
 * ========================================================== */

.nxl-transfers__grid .nxl-transfers__list {
	display: grid;
	grid-template-columns: repeat(var(--nxl-transfers-columns, 2), minmax(0, 1fr));
	gap: 14px;
}

.nxl-transfers__item {
	padding: 14px;
	background: rgba(128, 128, 128, 0.06);
	border-left: 3px solid rgba(128, 128, 128, 0.4);
	border-radius: 4px;
}

/* The status is the story: a confirmed deal should not look like idle gossip. */
.nxl-transfers__item--confirmed { border-left-color: #1a7f37; }
.nxl-transfers__item--agreed,
.nxl-transfers__item--medical   { border-left-color: #0b7a3b; }
.nxl-transfers__item--talks     { border-left-color: #b58900; }
.nxl-transfers__item--rumour    { border-left-color: #8a8a8a; }
.nxl-transfers__item--collapsed { border-left-color: #c62828; opacity: 0.7; }

.nxl-transfers__link {
	color: inherit;
	text-decoration: none;
}

.nxl-transfers__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.nxl-transfers__player {
	margin: 0;
	font-size: 16px;
}

.nxl-transfers__status {
	padding: 2px 8px;
	font-size: 11px;
	background: rgba(128, 128, 128, 0.2);
	border-radius: 3px;
	white-space: nowrap;
}

.nxl-transfers__move {
	margin: 6px 0;
	font-size: 13px;
	opacity: 0.85;
}

.nxl-transfers__arrow {
	margin: 0 6px;
	opacity: 0.5;
}

.nxl-transfers__footer {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
}

.nxl-transfers__reliability {
	color: #b58900;
	letter-spacing: 1px;
}

.nxl-transfers__source {
	opacity: 0.6;
}

/* ============================================================
 * Share + app bar
 * ========================================================== */

.nxl-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nxl-share__btn {
	padding: 9px 16px;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	background: #555;
	border: 0;
	border-radius: 4px;
}

/* WhatsApp leads. In South Africa it is not one option among many — it is THE
   share channel, so it gets the brand colour and the most weight. */
.nxl-share__btn--whatsapp {
	background: #25d366;
	font-weight: 600;
}

.nxl-share__btn--facebook { background: #1877f2; }
.nxl-share__btn--x        { background: #000; }
.nxl-share__btn--copy     { background: transparent; color: inherit; border: 1px solid rgba(128, 128, 128, 0.5); }

.nxl-appbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nxl-appbar button {
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.5);
	border-radius: 4px;
	color: inherit;
}

.nxl-appbar button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ============================================================
 * Lite Mode — data saver
 *
 * Data is expensive in South Africa. Lite mode drops every image, avatar and
 * embed the plugin renders, leaving scores, tables and words. It is switched on
 * automatically when the browser reports data-saver, so readers on a capped
 * bundle get it without ever finding the toggle.
 * ========================================================== */

.nxl-lite .nxl-wire__thumb,
.nxl-lite .nxl-social__thumb-wrap,
.nxl-lite .nxl-social__embed,
.nxl-lite .nxl-merch__image-wrap,
.nxl-lite .nxl-leaderboard__avatar,
.nxl-lite .nxl-standings__crest {
	display: none !important;
}

.nxl-lite .nxl-social__grid .nxl-social__list,
.nxl-lite .nxl-wire__grid .nxl-wire__list {
	grid-template-columns: 1fr;
}

/* ============================================================
 * Dark mode — follows the reader's OS setting.
 * ========================================================== */

@media ( prefers-color-scheme: dark ) {

	.nxl-ticker__item,
	.nxl-predictor__match,
	.nxl-predictor__rank,
	.nxl-transfers__item {
		background: rgba(255, 255, 255, 0.06);
	}

	.nxl-liveblog__minute {
		background: #e6e6e6;
		color: #111;
	}
}

/* ============================================================
 * Mobile
 *
 * A 20-column league table cannot fit a phone, and South African readers are
 * overwhelmingly on phones. Swap full club names for abbreviations rather than
 * letting the layout overflow or shrink to unreadable.
 * ========================================================== */

@media (max-width: 600px) {
	.nxl-standings__club-name,
	.nxl-fixtures__team-name {
		display: none;
	}
	.nxl-standings__club-abbr,
	.nxl-fixtures__team-abbr {
		display: inline;
	}

	/* A 3-column card grid is unreadable on a phone regardless of the setting. */
	.nxl-wire__grid .nxl-wire__list,
	.nxl-social__grid .nxl-social__list {
		grid-template-columns: 1fr;
	}

	/* Merch stays 2-up: product cards are small, and a single column
	   makes the reader scroll past the whole store to reach the article. */
	.nxl-merch__grid .nxl-merch__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nxl-transfers__grid .nxl-transfers__list {
		grid-template-columns: 1fr;
	}

	/* Stack the predictor: three columns squeezes club names to nothing. */
	.nxl-predictor__teams {
		grid-template-columns: 1fr;
		gap: 6px;
		text-align: center;
	}

	.nxl-predictor__team--home {
		text-align: center;
	}

	.nxl-predictor__inputs {
		justify-content: center;
	}

	.nxl-share__btn {
		flex: 1 1 auto;
		text-align: center;
	}
}