/* =====================================================================
 * bowl-history.css — Bowl history (/history/bowl-history/)
 *
 * Conditionally loaded by goldendome_enqueue_bowl_history_css() on the
 * bowl-history page only. The table itself is the sitewide `.data-table`
 * treatment; this sheet adds just the surface-specific touches:
 *   1. Horizontal scroll wrapper so the table never crushes its columns on
 *      mobile (60% of traffic).
 *   2. The opponent cell's logo + name layout.
 *   3. The bowl-name location sub-line.
 *   4. W/L result coloring.
 *
 * Colors come from tokens (--win, --loss, --text-muted). Layout spacing
 * follows the per-surface sheet convention (raw px for gaps/min-width, as in
 * opponents.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--bowl-history .bowl-history-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.page--bowl-history .bowl-history-table {
	width: 100%;
	/* 4 columns fit the article body-col on desktop; scrolls on mobile. */
	min-width: 560px;
}

/* Keep the date and opponent columns from wrapping awkwardly. */
.page--bowl-history .bowl-history-table__date {
	text-align: left;
	white-space: nowrap;
}

.page--bowl-history .bowl-history-table__team {
	text-align: left;
}

/* 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--bowl-history .bowl-history-table__opp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

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

/* 3. Bowl name location sub-line — quiet, below the bowl name. */
.page--bowl-history .bowl-history-table__loc {
	display: block;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

/* 4. Result coloring — ND win green, ND loss red. */
.page--bowl-history .bowl-history-table__result--w {
	color: var(--win);
	font-weight: 600;
}

.page--bowl-history .bowl-history-table__result--l {
	color: var(--loss);
	font-weight: 600;
}

/* Keep the win/loss color on the linked score too. */
.page--bowl-history .bowl-history-table__result--w a,
.page--bowl-history .bowl-history-table__result--l a {
	color: inherit;
}