/* ==========================================================================
   Logo Bar Block — novafolio/logo-bar
   Grid + CSS-only infinite marquee.
   ========================================================================== */

.nvf-logo-bar {
	--nvf-logo-max-h: 60px;
	--nvf-logo-gap: 40px;
	--nvf-logo-bg: transparent;
	--nvf-marquee-duration: 20s;
	background: var(--nvf-logo-bg);
	overflow: hidden;
	max-width: min(100%, var(--nvf-layout-wide-width, 1440px));
	margin-inline: auto;
	padding-inline: var(--nvf-layout-padding-x, 40px);
	box-sizing: border-box;
}
/* Section already provides horizontal padding */
.nvf-section__inner .nvf-logo-bar {
	padding-inline: 0;
}

/* ── Logo image ───────────────────────────────────────────────────────── */
.nvf-logo-bar__img {
	display: block;
	max-height: var(--nvf-logo-max-h);
	width: auto;
	object-fit: contain;
	flex-shrink: 0;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Grayscale filter */
.nvf-logo-bar--grayscale .nvf-logo-bar__img {
	filter: grayscale(100%);
	opacity: 0.8;
}
.nvf-logo-bar--grayscale .nvf-logo-bar__img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* ── Grid mode ────────────────────────────────────────────────────────── */
.nvf-logo-bar__grid {
	display: grid;
	gap: var(--nvf-logo-gap);
	align-items: center;
	justify-items: center;
}
.nvf-logo-bar--cols-2 .nvf-logo-bar__grid { grid-template-columns: repeat(2, 1fr); }
.nvf-logo-bar--cols-3 .nvf-logo-bar__grid { grid-template-columns: repeat(3, 1fr); }
.nvf-logo-bar--cols-4 .nvf-logo-bar__grid { grid-template-columns: repeat(4, 1fr); }
.nvf-logo-bar--cols-5 .nvf-logo-bar__grid { grid-template-columns: repeat(5, 1fr); }
.nvf-logo-bar--cols-6 .nvf-logo-bar__grid { grid-template-columns: repeat(6, 1fr); }
.nvf-logo-bar--cols-7 .nvf-logo-bar__grid { grid-template-columns: repeat(7, 1fr); }
.nvf-logo-bar--cols-8 .nvf-logo-bar__grid { grid-template-columns: repeat(8, 1fr); }

/* ── Marquee mode ─────────────────────────────────────────────────────── */
.nvf-logo-bar__marquee {
	display: flex;
	width: 100%;
}
.nvf-logo-bar__scroll {
	display: flex;
	gap: var(--nvf-logo-gap);
	align-items: center;
	flex-shrink: 0;
	padding-right: var(--nvf-logo-gap);
}

/* Left direction (default) */
.nvf-logo-bar__scroll--left {
	animation: nvf-marquee-left var(--nvf-marquee-duration) linear infinite;
}

/* Right direction */
.nvf-logo-bar__scroll--right {
	animation: nvf-marquee-right var(--nvf-marquee-duration) linear infinite;
}

@keyframes nvf-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
@keyframes nvf-marquee-right {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

/* Pause on hover */
.nvf-logo-bar--pause-hover:hover .nvf-logo-bar__scroll {
	animation-play-state: paused;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.nvf-logo-bar--cols-7 .nvf-logo-bar__grid,
	.nvf-logo-bar--cols-8 .nvf-logo-bar__grid { grid-template-columns: repeat(4, 1fr); }
	.nvf-logo-bar--cols-5 .nvf-logo-bar__grid,
	.nvf-logo-bar--cols-6 .nvf-logo-bar__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.nvf-logo-bar--grid .nvf-logo-bar__grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px;
	}
	.nvf-logo-bar__img {
		--nvf-logo-max-h: 40px;
	}
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.nvf-logo-bar__scroll {
		animation: none !important;
	}
}

/* ── Spacing utilities (self-contained, no dependency on section.css) ─ */
.nvf-logo-bar.nvf-space-top-none   { margin-top: 0 !important; }
.nvf-logo-bar.nvf-space-top-xs     { margin-top: var(--nvf-space-xs, 8px); }
.nvf-logo-bar.nvf-space-top-s      { margin-top: var(--nvf-space-s, 14px); }
.nvf-logo-bar.nvf-space-top-m      { margin-top: var(--nvf-space-m, 22px); }
.nvf-logo-bar.nvf-space-top-l      { margin-top: var(--nvf-space-xl, 48px); }
.nvf-logo-bar.nvf-space-top-xl     { margin-top: calc(var(--nvf-space-xl, 48px) * 1.5); }

.nvf-logo-bar.nvf-space-bottom-none { margin-bottom: 0 !important; }
.nvf-logo-bar.nvf-space-bottom-xs   { margin-bottom: var(--nvf-space-xs, 8px); }
.nvf-logo-bar.nvf-space-bottom-s    { margin-bottom: var(--nvf-space-s, 14px); }
.nvf-logo-bar.nvf-space-bottom-m    { margin-bottom: var(--nvf-space-m, 22px); }
.nvf-logo-bar.nvf-space-bottom-l    { margin-bottom: var(--nvf-space-xl, 48px); }
.nvf-logo-bar.nvf-space-bottom-xl   { margin-bottom: calc(var(--nvf-space-xl, 48px) * 1.5); }