/* Overlia Sponsors — frontend
 * ---------------------------------------------------------------------------
 * Layout variables are printed inline by PHP:
 *   wrapper  --ovs-section-gap --ovs-title-* --ovs-opacity --ovs-opacity-hover
 *   section  --ovs-cols --ovs-cols-t --ovs-cols-m --ovs-gap --ovs-row-gap --ovs-max
 *   item     --ovs-scale
 * ------------------------------------------------------------------------ */

.ovs {
	--ovs-section-gap: 64px;
	--ovs-title-size: 12px;
	--ovs-title-spacing: 0.18em;
	--ovs-title-gap: 32px;
	--ovs-opacity: 1;
	--ovs-opacity-hover: 1;

	box-sizing: border-box;
	width: 100%;
}

.ovs *,
.ovs *::before,
.ovs *::after {
	box-sizing: border-box;
}

.ovs__inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* --- sections ----------------------------------------------------------- */

.ovs-sections {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ovs-section-gap);
	align-items: flex-start;
	/* A row of 1/3 sections that wraps — three on desktop becoming two plus one
	   on a narrower screen — would leave the last one hugging the left edge.
	   Each width caps its own max-width, so centring cannot stretch them. */
	justify-content: center;
}

.ovs-section {
	flex: 1 1 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
}

.ovs-section[data-width="half"] {
	flex: 1 1 calc(50% - (var(--ovs-section-gap) / 2));
	max-width: calc(50% - (var(--ovs-section-gap) / 2));
}

.ovs-section[data-width="third"] {
	flex: 1 1 calc(33.3333% - (var(--ovs-section-gap) * 2 / 3));
	max-width: calc(33.3333% - (var(--ovs-section-gap) * 2 / 3));
}

.ovs-section[data-width="quarter"] {
	flex: 1 1 calc(25% - (var(--ovs-section-gap) * 3 / 4));
	max-width: calc(25% - (var(--ovs-section-gap) * 3 / 4));
}

.ovs-section__title {
	margin: 0 0 var(--ovs-title-gap);
	padding: 0;
	font-family: var(--ovs-title-font, inherit);
	font-size: var(--ovs-title-size);
	line-height: 1.4;
	font-weight: var(--ovs-title-weight, 500);
	letter-spacing: var(--ovs-title-spacing);
	text-transform: var(--ovs-title-transform, uppercase);
	text-align: center;
	color: var(--ovs-title-auto, currentColor);
	opacity: 0.85;
}

.ovs-section[data-align="left"] .ovs-section__title {
	text-align: left;
}

/* --- grid --------------------------------------------------------------- */

.ovs-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: var(--ovs-gap, 32px);
	row-gap: var(--ovs-row-gap, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ovs-section[data-align="left"] .ovs-grid {
	justify-content: flex-start;
}

/* Column width comes from the "logos per row" setting; a short last row stays
   centred, which is what a sponsor wall wants. */
.ovs-item {
	flex: 0 0 calc((100% - ((var(--ovs-cols, 6) - 1) * var(--ovs-gap, 32px))) / var(--ovs-cols, 6));
	min-width: 0;
	display: flex;
	justify-content: center;
}

.ovs-item__box {
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--ovs-max, 160px);
	/* 100 = square. Lower values give a shorter box, which tightens the rows
	   for wide wordmarks without shrinking them horizontally. */
	aspect-ratio: 100 / var(--ovs-ratio, 100);
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

@supports not (aspect-ratio: 1 / 1) {
	.ovs-item__box::before {
		content: "";
		display: block;
		padding-top: calc(1% * var(--ovs-ratio, 100));
	}
}

a.ovs-item__box:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

/* --- the logo itself ---------------------------------------------------- */

/* Taken out of flow on purpose: an oversized logo must never stretch its own
   square. Position is solved arithmetically rather than with auto margins —
   CSS refuses to make horizontal auto margins negative, so `margin:auto` would
   left-align anything scaled past 100%. `50% - 50% * scale` is exact in both
   axes at any scale, and needs no transform, so logos stay pixel-crisp. */
.ovs-logo {
	position: absolute;
	left: calc(50% - 50% * var(--ovs-scale, 1));
	top: calc(50% - 50% * var(--ovs-scale, 1));
	width: calc(100% * var(--ovs-scale, 1));
	height: calc(100% * var(--ovs-scale, 1));
	max-width: none;
	object-fit: contain;
	object-position: center;
	opacity: var(--ovs-opacity, 1);
	transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Optional per-logo nudge. Only logos that actually carry an offset get a
   transform, so the rest stay on the plain paint path. */
.ovs-item--offset .ovs-logo {
	transform: translate(var(--ovs-x, 0px), var(--ovs-y, 0px));
}

a.ovs-item__box:hover .ovs-logo,
a.ovs-item__box:focus-visible .ovs-logo {
	opacity: var(--ovs-opacity-hover, 1);
}

.ovs--grayscale .ovs-logo:not(.ovs-mono--black):not(.ovs-mono--white) {
	filter: grayscale(1);
}

/* --- what light and dark actually mean ---------------------------------- *
 * One block per mode, deciding the wall's own background and the fallback
 * heading colour together. Both default to "nothing set": a transparent
 * background, and a heading that simply contrasts with the mode.
 *
 * --ovs-title-light / --ovs-title-dark come from PHP: the colour chosen for
 * that mode, or one derived from the layout's own background. When neither is
 * set the fallback in each block below simply contrasts with the mode.
 *
 * Rules using [data-resolved] carry two attribute selectors, so the value
 * ovs-appearance.js works out always beats the plain "auto" defaults.
 * ----------------------------------------------------------------------- */

.ovs[data-appearance="light"],
.ovs[data-appearance="auto"] {
	background-color: var(--ovs-bg-light, transparent);
	--ovs-title-auto: var(--ovs-title-light, #111111);
}

.ovs[data-appearance="dark"] {
	background-color: var(--ovs-bg-dark, transparent);
	--ovs-title-auto: var(--ovs-title-dark, #ffffff);
}

@media (prefers-color-scheme: dark) {
	.ovs[data-appearance="auto"] {
		background-color: var(--ovs-bg-dark, transparent);
		--ovs-title-auto: var(--ovs-title-dark, #ffffff);
	}
}

.ovs[data-appearance="auto"][data-resolved="light"] {
	background-color: var(--ovs-bg-light, transparent);
	--ovs-title-auto: var(--ovs-title-light, #111111);
}

.ovs[data-appearance="auto"][data-resolved="dark"] {
	background-color: var(--ovs-bg-dark, transparent);
	--ovs-title-auto: var(--ovs-title-dark, #ffffff);
}

/* --- mono logos: flip with the colour scheme ---------------------------- *
 * black artwork  -> inverted (white) on dark backgrounds
 * white artwork  -> inverted (black) on light backgrounds
 * ----------------------------------------------------------------------- */

.ovs[data-appearance="light"] .ovs-mono--white,
.ovs[data-appearance="dark"] .ovs-mono--black {
	filter: invert(1);
}

/* "auto", fallback without JavaScript: assume light first, so browsers with no
   colour-scheme preference still get a readable logo, then flip in dark mode. */
.ovs[data-appearance="auto"] .ovs-mono--white {
	filter: invert(1);
}

@media (prefers-color-scheme: dark) {
	.ovs[data-appearance="auto"] .ovs-mono--white {
		filter: none;
	}
	.ovs[data-appearance="auto"] .ovs-mono--black {
		filter: invert(1);
	}
}

/* "auto", resolved by ovs-appearance.js from the background actually painted
   behind the wall. Two attribute selectors, so this beats the media query above
   in either direction — a theme with a fixed background gets the right answer
   even when the visitor's browser says otherwise. */
.ovs[data-appearance="auto"][data-resolved="dark"] .ovs-mono--black,
.ovs[data-appearance="auto"][data-resolved="light"] .ovs-mono--white {
	filter: invert(1);
}

.ovs[data-appearance="auto"][data-resolved="dark"] .ovs-mono--white,
.ovs[data-appearance="auto"][data-resolved="light"] .ovs-mono--black {
	filter: none;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
	.ovs-section[data-width="third"],
	.ovs-section[data-width="quarter"] {
		flex: 1 1 calc(50% - (var(--ovs-section-gap) / 2));
		max-width: calc(50% - (var(--ovs-section-gap) / 2));
	}
	.ovs-item {
		flex-basis: calc((100% - ((var(--ovs-cols-t, 3) - 1) * var(--ovs-gap, 32px))) / var(--ovs-cols-t, 3));
	}
}

@media (max-width: 640px) {
	.ovs-section[data-width="half"],
	.ovs-section[data-width="third"],
	.ovs-section[data-width="quarter"] {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.ovs-item {
		flex-basis: calc((100% - ((var(--ovs-cols-m, 2) - 1) * var(--ovs-gap, 32px))) / var(--ovs-cols-m, 2));
	}
}

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