/* ==========================================================================
   Charlton Live - Fixtures, results, league table and the next-match strip
   Data comes from the app API; these are the shapes it renders into.
   ========================================================================== */

/* ---------- Result pills ---------- */
.cl-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 46px;
	justify-content: center;
	padding: 4px 9px;
	border-radius: var(--cl-radius-sm);
	font-family: var(--cl-font-cond);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
.cl-pill--w { background: var(--cl-win);  color: var(--cl-win-fg); }
.cl-pill--d { background: var(--cl-draw); color: var(--cl-draw-fg); }
.cl-pill--l { background: var(--cl-loss); color: var(--cl-loss-fg); }
.cl-pill--live { background: var(--cl-red); color: var(--cl-white); }

/* Pulsing dot, used on anything happening right now. */
.cl-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: cl-pulse 1.6s ease-in-out infinite;
}
@keyframes cl-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
	.cl-live-dot { animation: none; }
}

/* ==========================================================================
   Next match strip
   ========================================================================== */

.cl-next {
	background: var(--cl-ink);
	color: var(--cl-dark-body);
	padding-block: 30px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

/* The facts sit alongside the headline rather than pushed to the far edge,
   so the strip reads as one group. The gap here is wider than the gap
   between the facts themselves, which is what separates the two clusters. */
.cl-next__inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 54px;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-next .cl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.cl-next__teams {
	margin-top: 8px;
	font-family: var(--cl-font-display);
	font-size: var(--cl-h3);
	letter-spacing: var(--cl-track-display);
	line-height: 1.1;
	color: var(--cl-white);
	text-transform: uppercase;
}

.cl-next__v {
	margin-inline: 6px;
	color: var(--cl-dark-meta);
}

.cl-next__score {
	margin-top: 6px;
	font-family: var(--cl-font-display);
	font-size: 30px;
	color: var(--cl-white);
	font-variant-numeric: tabular-nums;
}

/* Takes the remaining width so the last-result block can be pushed to the
   far edge, away from the three facts about the game still to come. */
.cl-next__facts {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 auto;
	gap: 28px;
	margin: 0;
}

.cl-next__last { margin-left: auto; }

.cl-next__facts dt {
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-eyebrow);
	letter-spacing: var(--cl-track-eyebrow);
	text-transform: uppercase;
	color: var(--cl-dark-meta);
}

.cl-next__facts dd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 5px 0 0;
	font-family: var(--cl-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--cl-white);
}

/* ==========================================================================
   Fixture list
   ========================================================================== */

.cl-results {
	background: var(--cl-white);
	padding-block: 44px;
}

.cl-results__inner,
.cl-table-wrap__inner {
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-fixtures {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-fixtures__month {
	margin-top: var(--cl-space-lg);
	padding-bottom: 8px;
	border-bottom: var(--cl-border);
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-eyebrow);
	letter-spacing: var(--cl-track-eyebrow);
	text-transform: uppercase;
	color: var(--cl-mut);
}
.cl-fixtures__month:first-child { margin-top: 0; }

/* Date, venue, opponent, competition, outcome. The opponent takes the slack. */
.cl-fixture {
	display: grid;
	grid-template-columns: 72px 26px minmax(0, 1fr) minmax(0, 150px) auto;
	align-items: center;
	gap: 14px;
	padding: 12px 4px;
	border-bottom: var(--cl-border);
}
.cl-fixture.is-live { background: rgba(228, 18, 43, .05); }

.cl-fixture__date {
	font-family: var(--cl-font-cond);
	font-weight: 600;
	font-size: var(--cl-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cl-mut);
	font-variant-numeric: tabular-nums;
}

.cl-fixture__venue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: var(--cl-off);
	border: var(--cl-border);
	font-family: var(--cl-font-cond);
	font-weight: 800;
	font-size: 11px;
	color: var(--cl-mut);
}

.cl-fixture__opponent {
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--cl-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cl-fixture__comp {
	font-size: var(--cl-meta);
	color: var(--cl-mut);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cl-fixture__outcome { justify-self: end; }

.cl-fixture__ko {
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-meta);
	color: var(--cl-mut);
	font-variant-numeric: tabular-nums;
}

/* Lighter than a real time, so a confirmed kickoff still reads first. */
.cl-fixture__ko--tbc {
	font-weight: 600;
	letter-spacing: var(--cl-track-tag);
	opacity: .75;
}

.cl-next__tbc {
	font-family: var(--cl-font-cond);
	font-weight: 600;
	font-size: var(--cl-tag);
	letter-spacing: var(--cl-track-tag);
	text-transform: uppercase;
	color: var(--cl-dark-meta);
}

/* ==========================================================================
   League table
   ========================================================================== */

.cl-table-wrap {
	background: var(--cl-off);
	padding-block: 44px;
}

/* The table is wider than a phone; it scrolls in its own box rather than
   forcing the page sideways. */
.cl-table-scroll { overflow-x: auto; }

.cl-table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	background: var(--cl-white);
	border: var(--cl-border);
	border-radius: var(--cl-radius);
	overflow: hidden;
	font-size: var(--cl-meta);
	font-variant-numeric: tabular-nums;
}

.cl-table th,
.cl-table td {
	padding: 10px 8px;
	text-align: right;
	border-bottom: var(--cl-border);
}

.cl-table thead th {
	background: var(--cl-ink);
	color: var(--cl-white);
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-tag);
	letter-spacing: var(--cl-track-tag);
	text-transform: uppercase;
}
.cl-table thead th abbr {
	text-decoration: none;
	border: 0;
}

.cl-table__pos {
	width: 44px;
	text-align: center;
	color: var(--cl-mut);
	font-weight: 700;
}

/* Needs the element in the selector to outrank ".cl-table td", which sets
   text-align: right for the numeric columns. Without it the team names were
   pushed to the far side of the cell, away from their crests. */
.cl-table td.cl-table__team,
.cl-table th.cl-table__team {
	text-align: left;
	white-space: nowrap;
}

/* base.css sets img { display: block } for layout sanity everywhere else,
   which dropped each crest onto its own line above the team name. */
.cl-table__crest {
	display: inline-block;
	width: 20px;
	height: 20px;
	object-fit: contain;
	vertical-align: middle;
	margin-right: 9px;
}

/* ---------- Column widths ----------
   Set on the colgroup so the six numeric columns stop sharing the full width
   between them and leaving a gulf in the middle of every row. */
.cl-col-pos  { width: 48px; }
.cl-col-num  { width: 46px; }
.cl-col-form { width: 132px; }

/* ---------- Form guide ---------- */
.cl-table th.cl-table__form,
.cl-table td.cl-table__form {
	text-align: right;
	padding-right: 12px;
}

.cl-form {
	display: inline-flex;
	gap: 4px;
}

.cl-form__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	font-family: var(--cl-font-cond);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0;
}
.cl-form__mark--w { background: var(--cl-win);  color: var(--cl-win-fg); }
.cl-form__mark--d { background: var(--cl-draw); color: var(--cl-draw-fg); }
.cl-form__mark--l { background: var(--cl-loss); color: var(--cl-loss-fg); }

.cl-table__pts {
	font-weight: 800;
	color: var(--cl-ink);
}

.cl-table tbody tr:last-child th,
.cl-table tbody tr:last-child td { border-bottom: 0; }

/* Promotion and relegation zones, marked on the position cell. */
.cl-table__row[data-zone="promotion"] .cl-table__pos { box-shadow: inset 3px 0 0 var(--cl-win); }
.cl-table__row[data-zone="playoff"]   .cl-table__pos { box-shadow: inset 3px 0 0 #6aa84f; }
.cl-table__row[data-zone="relegation"] .cl-table__pos { box-shadow: inset 3px 0 0 var(--cl-loss); }

/* Charlton's row. Listed after the zone rules so its bar wins, and the tint
   plus the weight mean the highlight does not rest on colour alone. */
.cl-table__row.is-us {
	background: rgba(228, 18, 43, .07);
	font-weight: 700;
}
.cl-table__row.is-us .cl-table__pos {
	box-shadow: inset 3px 0 0 var(--cl-red);
	color: var(--cl-ink);
}

.cl-table__note {
	margin-top: var(--cl-space-sm);
	font-size: var(--cl-meta);
	color: var(--cl-mut);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
	.cl-next__inner { gap: 24px; }
	.cl-next__facts { gap: 22px; }

	/* Once the facts wrap there is no far edge to push to, and the auto
	   margin would just strand it mid-row. */
	.cl-next__last { margin-left: 0; }
}

@media (max-width: 720px) {
	/* Competition drops out first: the opponent and the result matter more. */
	.cl-fixture {
		grid-template-columns: 62px 22px minmax(0, 1fr) auto;
		gap: 10px;
	}
	.cl-fixture__comp { display: none; }
}

@media (max-width: 480px) {
	.cl-next__facts { gap: 16px 22px; }
	.cl-fixture__date { font-size: 12px; }
}