/**
 * 3001Web Logo Grid — static structural CSS.
 *
 * Two layout modes:
 *   - Grid    → CSS Grid (grid-template-columns), never JS-measured.
 *   - Slider  → Flexbox + CSS scroll-snap, same reason: nothing here ever
 *               reads a pixel width, so it lays out correctly the instant
 *               a closed accordion/tab panel becomes visible, regardless
 *               of when in the page lifecycle that happens. The slider's
 *               optional prev/next buttons and autoplay (js/frontend.js)
 *               read sizes live, at the moment they run, never caching
 *               them — see that file for the full rationale.
 *
 * Settings-driven values are injected per module instance by
 * includes/frontend.css.php as CSS custom properties on the module
 * wrapper (--lg-cols-*, --lg-gap, --lg-logo-height, --lg-item-align,
 * --lg-slider-item-width, --lg-tile-*), consumed below. Column counts are
 * set unconditionally on the wrapper's inline style at all four tiers
 * (see includes/frontend.php), so the @media blocks below just select the
 * correctly-scoped custom property per breakpoint — the same proven
 * pattern used by modules/simple-info-boxes/css/frontend.css.
 */

.w3001-lg {
	width: 100%;
}

.w3001-lg__grid {
	display: grid;
	grid-template-columns: repeat(var(--lg-cols-desktop, 5), minmax(0, 1fr));
	gap: var(--lg-gap, 32px);
	container-type: inline-size;
	container-name: lg-grid;
}

.w3001-lg__item {
	display: flex;
	align-items: center;
	justify-content: var(--lg-item-align, center);
	min-width: 0;
}

.w3001-lg__link,
.w3001-lg__link-static {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: var(--lg-tile-padding, 0);
	background: var(--lg-tile-bg, transparent);
	border-radius: var(--lg-tile-radius, 0);
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.w3001-lg__link:hover,
.w3001-lg__link:focus {
	color: inherit;
	text-decoration: none;
}

.w3001-lg__image {
	display: block;
	height: var(--lg-logo-height, 60px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* ── Layout: Grid ─────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
	.w3001-lg__grid {
		grid-template-columns: repeat(var(--lg-cols-laptop, var(--lg-cols-desktop, 5)), minmax(0, 1fr));
	}
}
@media (max-width: 992px) {
	.w3001-lg__grid {
		grid-template-columns: repeat(var(--lg-cols-tablet, 3), minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.w3001-lg__grid {
		grid-template-columns: repeat(var(--lg-cols-mobile, 2), minmax(0, 1fr));
	}
}

/* ── Layout: Slider (Flexbox + scroll-snap, no JS measuring) ───────────── */
.w3001-lg--slider {
	position: relative;
}
.w3001-lg--slider .w3001-lg__grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px; /* room for the scrollbar so it doesn't clip shadows */
}
.w3001-lg--slider .w3001-lg__item {
	flex: 0 0 var(--lg-slider-item-width, 160px);
	scroll-snap-align: start;
}

.w3001-lg-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}
.w3001-lg-arrow:hover,
.w3001-lg-arrow:focus-visible {
	background: rgba(0, 0, 0, 0.8);
}
.w3001-lg-arrow svg {
	width: 16px;
	height: 16px;
}
.w3001-lg-arrow-prev {
	left: 8px;
}
.w3001-lg-arrow-next {
	right: 8px;
}

/* ── Hover effect: grayscale until hover/focus ───────────────────────── */
.w3001-lg-effect-grayscale .w3001-lg__image {
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.w3001-lg-effect-grayscale .w3001-lg__item:hover .w3001-lg__image,
.w3001-lg-effect-grayscale .w3001-lg__link:focus .w3001-lg__image {
	filter: grayscale(0%);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.w3001-lg__link,
	.w3001-lg__image {
		transition: none !important;
	}
}