/* ==================================================================
   Carrusel de projectes — shortcode [blanch_projectes]
   ================================================================== */
.sb-llistat{
	/* Els tres números que donen forma a la tira. Tocar-los aquí. */
	--sb-tira-alt: 62vh;
	--sb-item-ample: 42vw;
	--sb-item-estret: 11vw;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

/* Els marges laterals es calculen sobre l'amplada ESTRETA, que és la que tenen
   el primer i l'últim quan encara no són actius. Amb l'ampla, la coixinera es
   quedava curta, cap dels dos podia arribar al centre i per tant no
   s'activaven mai. */
.sb-llistat__tira{
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-inline: calc(50vw - var(--sb-item-estret) / 2);
	scrollbar-width: none;
}
.sb-llistat__tira::-webkit-scrollbar{ display: none; }

.sb-projecte{
	flex: 0 0 auto;
	width: var(--sb-item-estret);
	height: var(--sb-tira-alt);
	overflow: hidden;
	cursor: pointer;
	transition: width .55s cubic-bezier(.22, .61, .36, 1);
}

.sb-projecte.is-actiu{ width: var(--sb-item-ample); }

/* Un instant, per mesurar les amplades finals sense que s'animin. */
.sb-llistat__tira.is-mesurant .sb-projecte{ transition: none; }

/* L'encaix només en tàctil. Amb ratolí, en ampliar-se l'element de sota el
   cursor la tira es reajustaria, el contingut lliscaria i el punter acabaria
   sobre el veí: s'activaria l'altre tot sol. */
@media (hover: none){
	.sb-llistat__tira{ scroll-snap-type: x mandatory; }
	.sb-projecte{ scroll-snap-align: center; }
}

.sb-projecte__media,
.sb-projecte__media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sb-llistat__peu{
	margin: 0;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
}

/* La localització es distingeix pel to, no pel gruix ni per la mida. */
.sb-llistat__lloc{ opacity: .55; margin-inline-start: .4em; }

/* Sense JS no hi ha element actiu: totes amb la mateixa amplada, llegible. */
.no-js .sb-projecte,
.sb-llistat__tira:not(:has(.is-actiu)) .sb-projecte{ width: var(--sb-item-ample); }

@media (min-width: 768px) and (max-width: 1024px){
	.sb-llistat{
		--sb-tira-alt: 56vh;
		--sb-item-ample: 58vw;
		--sb-item-estret: 17vw;
	}
}

@media (max-width: 767px){
	.sb-llistat{
		--sb-tira-alt: 50vh;
		--sb-item-ample: 76vw;
		--sb-item-estret: 18vw;
	}
}

@media (prefers-reduced-motion: reduce){
	.sb-projecte{ transition: none; }
}