/*
 * Componente: loghi dei partner, in griglia o in carosello.
 */

/* ==== Griglia ==== */

.sh-partner-grid--griglia .sh-partner-grid__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--sh-line);
	border: 1px solid var(--sh-line);
}

@media (min-width: 768px) {
	.sh-partner-grid--griglia .sh-partner-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.sh-partner-grid--griglia.sh-partner-grid--cols-4 .sh-partner-grid__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sh-partner-grid--griglia.sh-partner-grid--cols-5 .sh-partner-grid__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sh-partner-grid--griglia.sh-partner-grid--cols-6 .sh-partner-grid__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.sh-partner-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	padding: var(--sh-space-sm);
}

.sh-partner-grid--griglia .sh-partner-grid__item {
	background-color: var(--sh-card);
}

.sh-partner-grid__item img {
	max-height: 46px;
	width: auto;
	object-fit: contain;
}

/* Nome al posto del logo mancante: stesso ingombro visivo di un logo. */
.sh-partner-grid__name {
	color: var(--sh-muted);
	font-family: var(--sh-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

.sh-partner-grid--grayscale .sh-partner-grid__item img {
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter var(--sh-motion-base) var(--sh-motion-ease),
		opacity var(--sh-motion-base) var(--sh-motion-ease);
}

.sh-partner-grid--grayscale .sh-partner-grid__item:hover img,
.sh-partner-grid--grayscale .sh-partner-grid__link:focus-visible img {
	filter: grayscale(0);
	opacity: 1;
}

.sh-partner-grid__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.sh-partner-grid__link:hover .sh-partner-grid__name {
	color: var(--sh-ink);
}

/* ==== Carosello ==== */

.sh-partner-grid--carosello {
	--partner-visible: 2;
}

@media (min-width: 640px) {
	.sh-partner-grid--carosello { --partner-visible: 3; }
}

@media (min-width: 1024px) {
	.sh-partner-grid--carosello.sh-partner-grid--cols-4 { --partner-visible: 4; }
	.sh-partner-grid--carosello.sh-partner-grid--cols-5 { --partner-visible: 5; }
	.sh-partner-grid--carosello.sh-partner-grid--cols-6 { --partner-visible: 6; }
}

.sh-partner-grid__carousel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sh-space-2xs);
}

.sh-partner-grid__viewport {
	grid-column: 2;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

/* La barra si toglie solo quando ci sono le frecce: senza script serve a capire che si scorre. */
.sh-partner-grid.is-enhanced .sh-partner-grid__viewport {
	scrollbar-width: none;
}

.sh-partner-grid.is-enhanced .sh-partner-grid__viewport::-webkit-scrollbar {
	display: none;
}

.sh-partner-grid--carosello .sh-partner-grid__list {
	display: flex;
	/* Pochi loghi: centrati. «safe» evita di tagliare l'inizio quando traboccano. */
	justify-content: flex-start;
	justify-content: safe center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh-partner-grid--carosello .sh-partner-grid__item {
	flex: 0 0 calc(100% / var(--partner-visible));
	min-height: 96px;
	scroll-snap-align: start;
}

.sh-partner-grid__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Area di tocco di almeno 44px anche se l'icona è più sottile. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sh-red);
	cursor: pointer;
	transition: color var(--sh-motion-fast) var(--sh-motion-ease),
		opacity var(--sh-motion-fast) var(--sh-motion-ease);
}

.sh-partner-grid__nav[hidden] {
	display: none;
}

.sh-partner-grid__nav:hover {
	color: var(--sh-red-hover);
}

.sh-partner-grid__nav--prev { grid-column: 1; grid-row: 1; }
.sh-partner-grid__nav--next { grid-column: 3; grid-row: 1; }

/* aria-disabled e non disabled: il bottone resta focalizzabile e il focus non si perde. */
.sh-partner-grid__nav[aria-disabled="true"] {
	opacity: 0.3;
	cursor: default;
}

.sh-partner-grid__viewport:focus-visible {
	outline-offset: 2px;
}