/**
 * Front end styles of the results widget — [hcfr_results].
 *
 * Loaded only on pages where the shortcode really renders a row.
 *
 * The widget is full width and sizes itself against its container, not against
 * the viewport: it works the same in a hero, in a sidebar and in a two column
 * layout.
 *
 * The two type faces of the design (Poppins, Vina Sans) are expected from the
 * theme — the plugin never loads a font from a foreign server. Without them the
 * widget falls back to the system stack and keeps its layout.
 *
 * Every colour and every size is a custom property on .hcfr-results, so a theme
 * can restyle the whole widget with a handful of overrides.
 */

.hcfr-results {
	--hcfr-accent: #e8a33d;
	--hcfr-text: #fff;
	--hcfr-dim: 0.6;
	--hcfr-win: #80fbb4;
	--hcfr-draw: #e8a33d;
	--hcfr-loss: #fb8080;
	--hcfr-surface: rgba(255, 255, 255, 0.04);
	--hcfr-line: rgba(255, 255, 255, 0.08);
	--hcfr-hover: rgba(255, 255, 255, 0.03);
	--hcfr-radius: clamp(24px, 3.5vw, 50px);
	--hcfr-gap: clamp(0.75rem, 2vw, 1.5rem);
	--hcfr-pad-x: clamp(1rem, 3vw, 2rem);
	--hcfr-pad-y: clamp(0.75rem, 1.5vw, 1.5rem);
	--hcfr-logo: 24px;
	--hcfr-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--hcfr-font-display: "Vina Sans", var(--hcfr-font);

	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--hcfr-radius);
	background: var(--hcfr-surface);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--hcfr-text);
	font-family: var(--hcfr-font);
	line-height: 1.5;
}

.hcfr-results *,
.hcfr-results *::before,
.hcfr-results *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------------------
 * Rows
 * ------------------------------------------------------------------------ */

.hcfr-results__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hcfr-results__row {
	display: grid;
	grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr) max-content max-content;
	align-items: center;
	column-gap: var(--hcfr-gap);
	margin: 0;
	padding: var(--hcfr-pad-y) var(--hcfr-pad-x);
	list-style: none;
	transition: background-color 0.2s ease;
}

.hcfr-results__row + .hcfr-results__row {
	border-top: 1px solid var(--hcfr-line);
}

@media (hover: hover) {
	.hcfr-results__row:hover {
		background-color: var(--hcfr-hover);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hcfr-results__row {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Day
 * ------------------------------------------------------------------------ */

.hcfr-results__date {
	font-size: 0.875rem;
	white-space: nowrap;
	opacity: var(--hcfr-dim);
}

/* ---------------------------------------------------------------------------
 * Clubs
 * ------------------------------------------------------------------------ */

.hcfr-results__teams {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.hcfr-results__team {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	min-height: var(--hcfr-logo);
}

.hcfr-results__logo {
	flex: none;
	width: var(--hcfr-logo);
	height: var(--hcfr-logo);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.08);
	object-fit: cover;
}

.hcfr-results__logo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Long club names are cut off rather than wrapped: wrapping would break the
   line up alignment with the two goal counts next to it. */
.hcfr-results__name {
	overflow: hidden;
	font-size: 0.875rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Size and line height are derived from --hcfr-logo, so the two club lines and
   the two goal counts next to them keep sitting on the same baselines even
   when a theme scales the crest. */
.hcfr-results__team--own .hcfr-results__name {
	color: var(--hcfr-accent);
	font-family: var(--hcfr-font-display);
	font-size: calc(var(--hcfr-logo) * 0.8333);
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: capitalize;
}

/* ---------------------------------------------------------------------------
 * Result
 * ------------------------------------------------------------------------ */

.hcfr-results__score {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 1.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.hcfr-results__goals {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hcfr-logo);
	opacity: var(--hcfr-dim);
}

.hcfr-results__goals--highlight {
	color: var(--hcfr-accent);
}

/* ---------------------------------------------------------------------------
 * Outcome
 * ------------------------------------------------------------------------ */

.hcfr-results__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.25rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 50px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.42;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hcfr-results__badge--win {
	color: var(--hcfr-win);
	box-shadow: 0 0.25rem 2.5rem -0.75rem var(--hcfr-win);
}

.hcfr-results__badge--draw {
	color: var(--hcfr-draw);
	box-shadow: 0 0.25rem 2.5rem -0.75rem var(--hcfr-draw);
}

.hcfr-results__badge--loss {
	color: var(--hcfr-loss);
	box-shadow: 0 0.25rem 2.5rem -0.75rem var(--hcfr-loss);
}

/* ---------------------------------------------------------------------------
 * Narrow container: the day moves above the row and gets its full width.
 * ------------------------------------------------------------------------ */

@container (max-width: 34rem) {
	.hcfr-results__row {
		grid-template-columns: minmax(0, 1fr) max-content max-content;
		row-gap: 0.25rem;
	}

	.hcfr-results__date {
		grid-column: 1 / -1;
	}

	.hcfr-results__badge {
		min-width: 0;
		padding: 0.375rem 0.625rem;
	}
}

/* Browsers without container queries fall back to the viewport. */
@supports not (container-type: inline-size) {
	@media (max-width: 40rem) {
		.hcfr-results__row {
			grid-template-columns: minmax(0, 1fr) max-content max-content;
			row-gap: 0.25rem;
		}

		.hcfr-results__date {
			grid-column: 1 / -1;
		}

		.hcfr-results__badge {
			min-width: 0;
			padding: 0.375rem 0.625rem;
		}
	}
}