Template:Infobox tournament/styles.css

.loka-tournament-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	/* Pulled up to overlap the tail of the header photo, into the zone
	   where loka-infobox-header-scrim has already faded to fully
	   transparent -- this gradient starts at that same fully-transparent
	   value (0 alpha) so the two meet exactly with no visible seam, then
	   fades down to rgba(20, 16, 12, .45), matching the normal
	   .loka-infobox panel colour exactly (not darker/browner than that)
	   so it reads as the same clean panel once the photo's gone. Pixel
	   stops, not percentages, so the fade only spans this top strip
	   rather than stretching across the whole (much taller) block. */
	margin-top: -60px;
	background: linear-gradient(to bottom,
		rgba(20, 16, 12, 0) 0,
		rgba(20, 16, 12, .45) 60px,
		rgba(20, 16, 12, .45) 100%);
}

.loka-tournament-details {
	padding: .6em;
	border-right: 1px solid rgba(255, 255, 255, .08);
}

.loka-tournament-col-heading {
	font-size: .7em;
	font-weight: 700;
	color: #f0cf8e;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.loka-tournament-details .loka-tournament-col-heading {
	margin-bottom: .6em;
}

.loka-tournament-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6em .5em;
}

.loka-tournament-detail-label {
	display: block;
	font-size: .68em;
	opacity: .65;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: .15em;
}

.loka-tournament-detail-value {
	display: block;
	font-size: .85em;
	word-break: break-word;
}

.loka-tournament-runners-tile {
	grid-column: 1 / -1;
	margin-top: .6em;
}

.loka-podium-row {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .5em .6em;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.loka-podium-row img {
	image-rendering: pixelated;
}

.loka-tournament-results .loka-podium-row:first-child {
	border-top: none;
}

.loka-podium-label {
	font-size: .7em;
	font-weight: 700;
	color: #f0cf8e;
	text-transform: uppercase;
	letter-spacing: .04em;
}


.loka-podium-info .loka-hlist {
	font-size: .85em;
	opacity: .8;
}

.loka-podium-disclaimer {
	font-size: .7em;
	font-style: italic;
	opacity: .6;
	text-align: center;
	padding: .3em .6em .5em;
}

.loka-chrono-box {
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.loka-chrono-header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	background: #9c6b2e;
	color: #ffffff;
	font-size: .75em;
	padding: .4em .5em;
}

.loka-chrono-header-title {
	font-weight: 700;
	text-align: center;
}

.loka-chrono-header-side {
	font-size: .85em;
	font-weight: normal;
	opacity: .8;
	text-align: center;
}

.loka-chrono-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.loka-chrono-pane {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: .5em .35em;
	text-align: center;
	font-size: .78em;
}

.loka-chrono-title--current {
	font-weight: 700;
}

.loka-chrono-year {
	font-weight: normal;
	opacity: .75;
	font-size: .9em;
	margin-top: .2em;
}

.loka-chrono-tba {
	color: rgba(255, 255, 255, .4);
}

.loka-chrono-empty {
	color: rgba(255, 255, 255, .4);
	font-style: italic;
}

/* Below this width the box itself has already gone full-width and
   unfloated (see Template:Infobox/styles.css), but Details|Results side
   by side would still squeeze each into an unreadably narrow column, so
   they stack instead. */
@media (max-width: 600px) {
	.loka-tournament-columns {
		grid-template-columns: 1fr;
	}

	.loka-tournament-details {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}
}