/* =====================================================================
 * opponents.css — Opponents index (/football/opponents/)
 *
 * Conditionally loaded by goldendome_enqueue_opponents_css() on the
 * opponents-index route only. The table itself is the sitewide `.data-table`
 * treatment; this sheet adds just the surface-specific touches:
 *   1. Horizontal scroll wrapper so the 8-column records table never
 *      crushes its columns on mobile (60% of traffic).
 *   2. The opponent cell's logo + name layout.
 *   3. Current-streak win/loss coloring.
 *
 * Colors come from tokens (--win, --loss). Layout spacing follows the
 * per-surface sheet convention (raw px for gaps/min-width, as in
 * coaching-staff.css / coach.css).
 * ===================================================================== */

/* 1. Mobile horizontal scroll. The table keeps a comfortable minimum width
 *    and scrolls sideways inside this wrapper rather than reflowing into
 *    unreadable narrow columns. */
.page--opponents .opponents-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.page--opponents .opponents-table {
	width: 100%;
	min-width: 760px;
}

/* 2. Opponent cell — small logo beside the linked name. width/height are set
 *    as HTML attributes on the <img> (good for CLS); these rules only handle
 *    alignment and the contain-fit so non-square logos don't distort. */
.page--opponents .opponents-table__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.page--opponents .opponents-table__logo {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* Keep the opponent column left-aligned and from wrapping its name awkwardly. */
.page--opponents .opponents-table__team {
	text-align: left;
	white-space: nowrap;
}

/* 3. Current-streak coloring — ND win streak green, opponent (ND loss) red. */
.page--opponents .opponents-table__streak--w {
	color: var(--win);
	font-weight: 600;
}

.page--opponents .opponents-table__streak--l {
	color: var(--loss);
	font-weight: 600;
}