/* =============================================================
   minimum logo matrix — frontend

   A uniform logo wall. Sizing is optical (a target cap-height per
   logo), tone/hover unify mixed logos, and an optional Pro scroller
   turns the grid into a marquee. All colors/spacing come from CSS
   variables set inline by the renderer.
   ============================================================= */

.mlm-wall {
	--mlm-cols: 6;
	--mlm-size: 48px;
	--mlm-gap: 32px;
	--mlm-box: 125px;
	--mlm-tone-color: #111111;
	--mlm-speed: 40s;
	width: 100%;
}

/* ---- Grid (default, no motion) ------------------------------ */
.mlm-track {
	display: grid;
	grid-template-columns: repeat(var(--mlm-cols), minmax(0, 1fr));
	column-gap: var(--mlm-gap);
	row-gap: var(--mlm-row-gap, var(--mlm-gap));
	align-items: center;
	justify-items: center;
}
.mlm-wall[data-align="start"] .mlm-track { justify-items: start; }
.mlm-wall[data-align="end"]   .mlm-track { justify-items: end; }

.mlm-item {
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mlm-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---- Optical sizing ----------------------------------------- */
.mlm-img {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(var(--mlm-size) * var(--mlm-item-scale, 1));
	max-width: 100%;
	object-fit: contain;
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}
/* Equal-box mode also caps the width so wide wordmarks don't dominate. */
.mlm-wall[data-fit="box"] .mlm-img {
	max-width: calc(var(--mlm-box) * var(--mlm-item-scale, 1));
}

/* ---- Tone --------------------------------------------------- */
.mlm-wall[data-tone="grayscale"] .mlm-img { filter: grayscale(1); }

/* Single solid color: the logo is used as a CSS mask over a flat fill. */
.mlm-mark {
	display: block;
	width: calc(var(--mlm-mask-w, var(--mlm-box)) * var(--mlm-item-scale, 1));
	height: calc(var(--mlm-size) * var(--mlm-item-scale, 1));
	max-width: 100%;
	background: var(--mlm-tone-color);
	-webkit-mask: var(--mlm-mask) center / contain no-repeat;
	        mask: var(--mlm-mask) center / contain no-repeat;
	transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

/* ---- Hover effects (combinable) ----------------------------- */
/* Effects are toggled independently via the space-separated data-hv list:
   fade · zoom · color · shadow. They compose. Cursor is a separate toggle. */

.mlm-wall[data-cursor="pointer"] .mlm-item { cursor: pointer; }

/* fade (free): dim at rest, full on hover */
.mlm-wall[data-hv~="fade"] .mlm-item { opacity: 0.6; }
.mlm-wall[data-hv~="fade"] .mlm-item:hover { opacity: 1; }

/* zoom (Pro): scale the mark up on hover */
.mlm-wall[data-hv~="zoom"] .mlm-item:hover .mlm-img,
.mlm-wall[data-hv~="zoom"] .mlm-item:hover .mlm-mark {
	transform: scale(var(--mlm-hover-zoom, 1.1));
}

/* color (Pro): grayscale at rest, colour on hover */
.mlm-wall[data-hv~="color"] .mlm-img { filter: grayscale(1); opacity: 0.85; }
.mlm-wall[data-hv~="color"] .mlm-item:hover .mlm-img { filter: none; opacity: 1; }

/* shadow (Pro): drop-shadow follows the logo's shape — works for transparent
   PNG/SVG (silhouette) and solid logos (box) alike, incl. the masked solid tone. */
.mlm-wall[data-hv~="shadow"] .mlm-item:hover .mlm-img,
.mlm-wall[data-hv~="shadow"] .mlm-item:hover .mlm-mark {
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}
/* color + shadow together: compose both filters on hover so neither is lost */
.mlm-wall[data-hv~="color"][data-hv~="shadow"] .mlm-item:hover .mlm-img {
	filter: grayscale(0) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}

/* ---- Dock-style magnify (Pro, JS-driven) -------------------- */
/* Items must stack (z-index) and the scale must follow the mouse instantly, so
   the per-frame transform is NOT transitioned here. */
.mlm-wall[data-magnify="1"] .mlm-item { position: relative; }
.mlm-wall[data-magnify="1"] .mlm-img,
.mlm-wall[data-magnify="1"] .mlm-mark {
	/* scale + colour are JS-driven per frame and must move in lockstep, so no
	   transition on transform/filter here (only opacity keeps a soft fade). */
	transition: opacity 0.25s ease;
	will-change: transform, filter;
}

/* ---- Scroller / marquee (Pro) ------------------------------- */
.mlm-wall[data-motion="scroll"] { overflow: hidden; }
.mlm-wall[data-motion="scroll"] .mlm-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	gap: 0;
	animation: mlm-scroll var(--mlm-speed) linear infinite;
}
.mlm-wall[data-motion="scroll"] .mlm-item {
	flex: 0 0 auto;
	width: auto;
	padding: 0 calc(var(--mlm-gap) / 2);
}
.mlm-wall[data-motion="scroll"]:hover .mlm-track { animation-play-state: paused; }
@keyframes mlm-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- Responsive column reduction ---------------------------- */
@media (max-width: 1024px) {
	.mlm-wall:not([data-motion="scroll"]) .mlm-track {
		grid-template-columns: repeat(min(var(--mlm-cols), 4), minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.mlm-wall:not([data-motion="scroll"]) .mlm-track {
		grid-template-columns: repeat(min(var(--mlm-cols), 3), minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.mlm-wall:not([data-motion="scroll"]) .mlm-track {
		grid-template-columns: repeat(min(var(--mlm-cols), 2), minmax(0, 1fr));
	}
}

/* ---- Accessibility ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.mlm-wall[data-motion="scroll"] .mlm-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
}

/* ---- Admin-only hint (never shown to visitors) -------------- */
.mlm-admin-note {
	margin: 12px 0 0;
	padding: 8px 12px;
	border: 1px dashed currentColor;
	opacity: 0.55;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

/* ---- Editor-only empty state -------------------------------- */
.mlm-wall.mlm-empty p {
	margin: 0;
	padding: 16px;
	border: 1px dashed currentColor;
	opacity: 0.6;
	font-size: 13px;
	text-align: center;
}