.defHeader__info .results__header {
	flex-direction: column;
	gap: 0;
}

.results__header > div {
	display: flex;
	
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing1) var(--spacing5);
}

.results__header h2,
.results__header h3, 
.results__header h4 {
	font-size: var(--size__body);
	line-height: var(--lh__body);
}

.resultsList {
	grid-column-start: 1;
}

.resultsList > .ws__content {
	container-type: inline-size;
	container-name: result-event;
}

.resultsList__event {
	padding-bottom: var(--spacing7);
	border-bottom: 1px solid var(--color__silver);
}

.resultsList__event:hover h2 {
	color: var(--color__green);
}

.resultsList__event + .resultsList__event {
	margin-top: var(--spacing7);
}

.resultsList__runs {
	margin-top: var(--spacing3);
	
	display: flex;
	flex-direction: column;
	gap: var(--spacing6) var(--spacing3);
}

.resultsList__genders {
	margin-top: var(--spacing2);
	
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: var(--spacing3);
}

.resultsList__genders {
	flex: 0 0 auto;
}

.resultsList__run:hover h3 {
	color: var(--color__green);
}

.resultsList__winners {
	margin-top: var(--spacing2);
	
	display: flex;
	flex-direction: column;
	gap: var(--spacing1);
	
	font-size: 0.6rem;
}

.resultsList__winnerGender {
	display: inline-block;
	min-width: 1.5em;
	color: var(--color__gray);
}

.resultsList__date {
	font-size: var(--size__body--smallest);
}

/* Detail: filter po kategoriji */
.resultsFilter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing2) var(--spacing3);
	margin-bottom: var(--spacing4);
}

.resultsFilter__select {
	min-width: 10em;
}

.defHeader__info > div {
	display: flex;
	gap: var(--spacing2) var(--spacing6);
	align-items: baseline;
	flex-wrap: wrap;
}

/* Detail: tabela rezultatov */
.resultsTableWrap {
	container-type: inline-size;
	container-name: result-table;
}

@container result-table (max-width: 640px) {
	/* Glava ni potrebna - razvrščanje je izklopljeno */
	.resultsTable thead {
		display: none;
	}
	
	.resultsTable,
	.resultsTable tbody {
		display: block;
		width: 100% !important;
	}
	
	/* Vrstica kot kartica:
	   [mesto] [ime ...................] [čas]
	   [     ] [št.] [kat.] [mesto v kat.]      */
	.resultsTable tbody tr {
		display: grid;
		grid-template-columns: 2.5em auto auto 1fr auto;
		align-items: baseline;
		gap: var(--spacing1) var(--spacing3);
		
		padding: var(--spacing3) 0;
		border-bottom: 1px solid var(--color__silver);
	}
	
	.resultsTable tbody td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
	}
	
	.resultsTable .rCol--place {
		grid-column: 1;
		grid-row: 1 / span 2;
		
		font-size: var(--size__body--large, 1.25em);
		font-weight: 700;
	}
	
	.resultsTable .rCol--name {
		grid-column: 2 / 5;
		grid-row: 1;
	}
	
	.resultsTable .rCol--time {
		grid-column: 5;
		grid-row: 1;
		
		text-align: right !important;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}
	
	.resultsTable .rCol--start,
	.resultsTable .rCol--cat,
	.resultsTable .rCol--catPlace {
		grid-row: 2;
		font-size: var(--size__body--smallest, .8em);
		white-space: nowrap;
	}
	
	.resultsTable .rCol--start {
		grid-column: 2;
	}
	
	.resultsTable .rCol--cat {
		grid-column: 3;
	}
	
	.resultsTable .rCol--catPlace {
		grid-column: 4 / 6;
	}
	
	/* Mali naslovi pred vrednostmi v drugi vrstici */
	.resultsTable .rCol--start::before,
	.resultsTable .rCol--cat::before,
	.resultsTable .rCol--catPlace::before {
		content: attr(data-label) " ";
		color: var(--color__gray);
	}
	
	/* Prazne celice (npr. brez mesta v kat.) ne kažejo naslova */
	.resultsTable td:empty::before {
		content: none;
	}
	
	/* DataTables sporočilo "ni podatkov" čez celo širino */
	.resultsTable td.dt-empty {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@container result-event (min-width: 600px) {
    .resultsList__run {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
		justify-content: space-between;
        gap: var(--spacing5);
    }
	
	.resultsList__genders  {
		margin-top: 0;
	}
}

@container result-event (min-width: 1000px) {
    .resultsList__event {
		display: flex;
		justify-content: space-between;
		gap: var(--spacing10);
	}
	
	.resultsList__runs {
		margin-top: 0;
		flex: 1 0 auto;
	}
	
	.resultsList__genders {
		flex-wrap: nowrap;
	}
	
	.resultsList__header > div {
		position: sticky;
		top: 1em;
	}
}