/**
 * Pattern: Logotypy partnerów (partners-logos)
 * Siatka 4 kolumny × 2 wiersze, grayscale z efektem hover, tło neutral-border.
 * Sekcja pełna szerokość (jak hero), kontener sectionWidth bez paddingu bocznego.
 *
 * @package nbs-theme
 */

/* Sekcja pełna szerokość – jak hero */
section.wp-block-group.nbs-partners-logos {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
	background-color: var(--wp--preset--color--neutral-border);
	padding: var(--wp--custom--section-top-and-bottom-margin, 2rem) 0;
	display: flex;
	justify-content: center;
}

/* Kontener sectionWidth – bez paddingu po lewej i prawej, zielona ramka */
.nbs-partners-logos__container {
	/* width: 100%; */
	width: var(--wp--custom--section-width, 1140px);
	max-width: 100vw;
	margin-left: var(--wp--custom--horizontal-section-margin, 24px);
	margin-right: var(--wp--custom--horizontal-section-margin, 24px);
	box-sizing: border-box;
}

.nbs-partners-logos__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	align-items: center;
	justify-items: center;
}

.nbs-partners-logos__item {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100vw;
	height: 110px;
	box-sizing: border-box;
	overflow: hidden;
}

.nbs-partners-logos__item img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: saturate(0);
	transition: filter 0.25s ease;
}

.nbs-partners-logos__item:hover img,
.nbs-partners-logos__item:focus-within img {
	filter: saturate(1);
}

/* Responsywność – mniejsze ekrany */
@media (max-width: 900px) {
	.nbs-partners-logos__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.nbs-partners-logos__grid {
		grid-template-columns: 1fr;
	}
}