/**
 * Logos Module
 * Centred H2 heading above a swipeable strip of bordered logo tiles.
 * Desktop: 4 full tiles + peek of the next two (faded via .is-peek).
 */

/* ===========================
   # Section
=========================== */

.logos-module {
	padding:    80px 0;
	background: var(--nec-white, #fff);
}

.logos-module__heading {
	margin:        0 0 48px;
	text-align:    center;
	color:         var(--nec-grey, #384249);
	font-family:   var(--nec-font, 'Neo Sans Std', sans-serif);
	font-weight:   400;
	font-size:     clamp(1.75rem, 3vw, 2.5rem);
}

/* ===========================
   # Viewport (clips overflow)
=========================== */

.logos-module__viewport {
	overflow: hidden;
	position: relative;
}

/* ===========================
   # Track (flex row of tiles, moved by JS translateX)
=========================== */

.logos-module__track {
	display:     flex;
	transition:  transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	cursor:      grab;
	user-select: none; /* avoid text/image selection while dragging */
}

.logos-module__track:active {
	cursor: grabbing;
}

/* ===========================
   # Tiles (width set by JS)
=========================== */

.logos-module__item {
	flex:            0 0 auto;
	/* Width calculated in JS: (viewportWidth - peekOffset) / visibleCards */
	display:         flex;
	align-items:     center;
	justify-content: center;
	aspect-ratio:    1 / 1;
	border:          1px solid var(--nec-grey20, #ebeced);
	padding:         40px;
	margin-right:    24px; /* gap between tiles — must match CARD_GAP in the JS */
	transition:      opacity 0.3s ease;
	text-decoration: none;
}

.logos-module__item:focus-visible {
	outline:        2px solid var(--nec-orange);
	outline-offset: 2px;
}

/* The tiles only partially visible beyond the current view (toggled by JS) */
.logos-module__item.is-peek {
	opacity: 0.2;
}

.logos-module__img {
	display:    block;
	max-width:  100%;
	max-height: 100%;
	width:      auto;
	height:     auto;
	object-fit: contain;
	filter:     grayscale(100%);
	transition: filter 0.3s ease;
}

.logos-module__item:hover .logos-module__img,
.logos-module__item:focus-visible .logos-module__img {
	filter: grayscale(0%);
}

/* ===========================
   # Responsive — 1280px
=========================== */

@media (max-width: 1280px) {
	.logos-module {
		padding: 64px 0;
	}

	.logos-module__item {
		padding: 32px;
	}
}

/* ===========================
   # Responsive — 991px
=========================== */

@media (max-width: 991px) {
	.logos-module {
		padding: 56px 0;
	}

	.logos-module__heading {
		margin-bottom: 32px;
	}

	.logos-module__item {
		padding: 24px;
	}
}

/* ===========================
   # Responsive — 767px
=========================== */

@media (max-width: 767px) {
	.logos-module {
		padding: 40px 0;
	}

	.logos-module__heading {
		margin-bottom: 24px;
	}

	.logos-module__item {
		padding: 20px;
	}
}

/* ===========================
   # Responsive — 480px
=========================== */

@media (max-width: 480px) {
	.logos-module {
		padding: 32px 0;
	}

	.logos-module__item {
		padding: 16px;
	}
}