/* Solvagio Logo Wall 1.4.3. Every logo sits in the same square tile, contained, so logos of
   any shape line up. Logos keep their colours (tone="grey" greys them until hovered); a hovered
   or focused logo lifts, grows a little and casts a soft shadow that follows its shape, and the
   other logos fade back, so the one under the mouse stands out however dark it is. In the grid,
   logos fade up as they appear: when the page draws and whenever a category brings them back. */
/* Tiles and gaps scale with the screen: 140 px on a desktop down to about 77 px on a 320 px phone,
   so the grid keeps at least three logos a row and the strip stays short. */
.slw { --slw-tile: clamp(72px, 24vw, 140px); --slw-gap: clamp(14px, 3vw, 28px); margin: 0 auto; }
.slw ul { list-style: none; margin: 0; padding: 0; }
.slw__item { margin: 0; padding: 0; }
.slw__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.slw__img {
	display: block; width: var(--slw-tile); height: var(--slw-tile); max-width: none;
	object-fit: contain;
	transition: transform .25s ease, filter .3s ease, opacity .3s ease;
}
.slw__item:hover .slw__img, .slw__item:focus-within .slw__img,
.slw--grey .slw__item:hover .slw__img, .slw--grey .slw__item:focus-within .slw__img {
	transform: translateY(-6px) scale(1.08); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .2)); opacity: 1;
}
.slw--grey .slw__img { filter: grayscale(1); opacity: .85; }
/* Spotlight: while a logo is hovered or focused, the rest of its grid or strip fades back. */
.slw__grid:has(.slw__item:hover, .slw__item:focus-within) .slw__img,
.slw__track:has(.slw__item:hover, .slw__item:focus-within) .slw__img { opacity: .45; }
.slw__grid .slw__item:hover .slw__img, .slw__grid .slw__item:focus-within .slw__img,
.slw__track .slw__item:hover .slw__img, .slw__track .slw__item:focus-within .slw__img { opacity: 1; }
.slw__name { font-size: .8125rem; line-height: 1.3; text-align: center; max-width: var(--slw-tile); }

/* Grid */
.slw__grid {
	display: grid; gap: var(--slw-gap);
	grid-template-columns: repeat(auto-fill, minmax(var(--slw-tile), 1fr)); justify-items: center;
}
.slw__item[hidden] { display: none; }
/* A logo that was hidden replays this when it is shown again, so picking a category animates
   the logos it brings in; no script needed. */
@keyframes slw-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.slw__grid .slw__item { animation: slw-in .45s ease both; }
.slw__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0 0 32px; }
/* .slw in front: a theme's own button, button:hover rules must not restyle the filters. */
.slw .slw__filter {
	font: inherit; font-size: .875rem; line-height: 1.2; letter-spacing: normal; text-transform: none;
	cursor: pointer; padding: 8px 14px; min-height: 40px; border-radius: 999px; white-space: nowrap;
	flex: 0 0 auto; border: 1px solid currentColor; background: transparent; color: inherit;
	opacity: .7; box-shadow: none;
}
.slw .slw__filter:hover { background: transparent; color: inherit; opacity: 1; }
.slw .slw__filter[aria-pressed="true"] { opacity: 1; font-weight: 600; }
.slw .slw__filter:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.slw__count { font-size: .75em; opacity: .7; margin-left: 2px; }

/* Strip: each row holds its logos twice and moves by half its width, so the loop has no seam. */
.slw--strip { overflow: hidden; display: flex; flex-direction: column; gap: var(--slw-gap);
	/* Room above and below the row, so a lifted logo and its shadow are not cut off. */
	padding-block: 14px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.slw__track { display: flex; gap: var(--slw-gap); width: max-content; padding-right: var(--slw-gap);
	animation: slw-scroll var(--slw-duration, 340s) linear infinite; }
.slw__row--reverse .slw__track { animation-direction: reverse; }
.slw--strip:hover .slw__track, .slw--strip:focus-within .slw__track { animation-play-state: paused; }
@keyframes slw-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.slw--strip:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.slw__more { text-align: center; margin: 20px 0 0; }

/* Phones: one drop-down instead of six lines of buttons (the phone's own picker opens). */
.slw__picker { display: none; }
@media (max-width: 600px) {
	.slw .slw__filters { display: none; }
	.slw__picker:not([hidden]) { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
	.slw__picker-label { font-size: .875rem; font-weight: 600; flex: 0 0 auto; }
	.slw .slw__select {
		flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 8px 36px 8px 14px;
		font: inherit; font-size: 1rem; color: inherit; background-color: transparent;
		border: 1px solid currentColor; border-radius: 999px; box-shadow: none;
		-webkit-appearance: none; appearance: none;
		background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
		background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
	}
	.slw .slw__select:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
}
/* Motion off: the strip stands still, each logo once, in the same one-row height; the row
   scrolls sideways by hand instead of growing into a tall grid. */
@media (prefers-reduced-motion: reduce) {
	.slw--strip { -webkit-mask-image: none; mask-image: none; }
	.slw__row { overflow-x: auto; }
	.slw__track { animation: none; padding-right: 0; }
	.slw__track > [aria-hidden="true"] { display: none; }
	.slw__img { transition: none; }
	.slw__grid .slw__item { animation: none; }
	.slw__item:hover .slw__img, .slw__item:focus-within .slw__img,
	.slw--grey .slw__item:hover .slw__img, .slw--grey .slw__item:focus-within .slw__img { transform: none; }
}