/**
 * Homepage client logos — see inc/clients/clients.php.
 *
 * Remember: html root font-size is 10px on this site, so 1rem = 10px.
 *
 * The logos are stacked in a CSS grid cell rather than absolutely positioned,
 * so the container takes its height from the tallest logo and nothing jumps as
 * they cycle. Same technique as the testimonials.
 *
 * WITHOUT JAVASCRIPT the .is-enhanced class is never added, so every logo
 * simply stacks down the page as a plain list — all twelve visible, nothing
 * hidden. That is the progressive-enhancement floor, and it is also what a
 * crawler that does not execute JS will read.
 */

.mk-clients {
	width: 100%;
}

.mk-clients__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

/* Every logo occupies the same grid cell, so they overlay rather than stack. */
.mk-clients.is-enhanced .mk-clients__item {
	grid-area: 1 / 1;
}

.mk-clients__item {
	margin: 0;
	text-align: center;
}

/* Original slide images are 729x337; the panel is roughly a third of the
   content width, so let them scale and cap the height so a wide logo and a
   tall one occupy the same band. */
.mk-clients__logo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 16rem;
	object-fit: contain;
	margin: 0 auto;
}

/* --------------------------------------------------- rotation (JS only) */

.mk-clients.is-enhanced .mk-clients__item {
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility 0s linear .35s;
}

.mk-clients.is-enhanced .mk-clients__item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {

	.mk-clients.is-enhanced .mk-clients__item,
	.mk-clients.is-enhanced .mk-clients__item.is-active {
		transition: none;
	}

}