/*
 * Responsive behaviour for WynikiAPI Motoresults tables.
 *
 * Kept in its own file (separate from frontend.css) so table responsiveness
 * can be tweaked or swapped out without touching the base styles.
 *
 * Strategy: below the phone breakpoint, the table loses its tabular layout
 * and each row becomes a stacked "card" — every cell becomes its own line,
 * labelled with the column header via the data-label attribute that the JS
 * renderer writes onto each <td> (e.g. data-label="Pos."). This keeps every
 * column visible and readable on a narrow screen instead of forcing
 * horizontal scrolling or shrinking text to the point of being unreadable.
 */

@media ( max-width: 640px ) {

	.mrw-app .mrw-season-filter {
		flex-direction: column;
		align-items: stretch;
		gap: 0.3em;
	}

	.mrw-app .mrw-season-select {
		width: 100%;
		box-sizing: border-box;
	}

	.mrw-app .mrw-results-table,
	.mrw-app .mrw-classification-table,
	.mrw-classification-app .mrw-results-table,
	.mrw-classification-app .mrw-classification-table {
		border: 0;
	}

	/* Hide the header row — column names are shown per-cell instead. */
	.mrw-app .mrw-results-table thead,
	.mrw-app .mrw-classification-table thead,
	.mrw-classification-app .mrw-results-table thead,
	.mrw-classification-app .mrw-classification-table thead {
		border: none;
		clip: rect( 0 0 0 0 );
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.mrw-app .mrw-results-table tr,
	.mrw-app .mrw-classification-table tr,
	.mrw-classification-app .mrw-results-table tr,
	.mrw-classification-app .mrw-classification-table tr {
		display: block;
		margin-bottom: 0.85em;
		border: 1px solid #e2e2e2;
		border-radius: 6px;
		padding: 0.4em 0.7em;
		background: #fff;
	}

	.mrw-app .mrw-results-table td,
	.mrw-app .mrw-classification-table td,
	.mrw-classification-app .mrw-results-table td,
	.mrw-classification-app .mrw-classification-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1em;
		text-align: right;
		padding: 0.4em 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.mrw-app .mrw-results-table td:last-child,
	.mrw-app .mrw-classification-table td:last-child,
	.mrw-classification-app .mrw-results-table td:last-child,
	.mrw-classification-app .mrw-classification-table td:last-child {
		border-bottom: none;
	}

	/* Column label, taken from the data-label attribute written by the JS. */
	.mrw-app .mrw-results-table td::before,
	.mrw-app .mrw-classification-table td::before,
	.mrw-classification-app .mrw-results-table td::before,
	.mrw-classification-app .mrw-classification-table td::before {
		content: attr( data-label );
		font-weight: 600;
		text-align: left;
		color: #555;
		margin-right: 1em;
		white-space: nowrap;
	}

	.mrw-app .mrw-flag,
	.mrw-classification-app .mrw-flag {
		width: 22px;
	}

	/* Event list: drop the grid layout in favour of a simple stacked card. */
	.mrw-app .mrw-event-item {
		grid-template-columns: 1fr;
		gap: 0.2em;
	}

	.mrw-app .mrw-event-city {
		text-align: left;
	}

	.mrw-app .mrw-classification-list,
	.mrw-app .mrw-runs-list {
		gap: 0.4em;
	}

	.mrw-app .mrw-classification-item,
	.mrw-app .mrw-run-item {
		width: 100%;
		box-sizing: border-box;
	}
}

/* Extra-narrow phones: tighten padding a little further. */
@media ( max-width: 380px ) {
	.mrw-app .mrw-results-table td::before,
	.mrw-app .mrw-classification-table td::before,
	.mrw-classification-app .mrw-results-table td::before,
	.mrw-classification-app .mrw-classification-table td::before {
		margin-right: 0.5em;
	}
}