/*
 * Componente: banda vantaggi con immagine.
 *
 * Da 1024px: titolo e voci a sinistra, allineati al contenitore; la foto a
 * destra arriva al bordo della finestra e sfuma nel fondo. Sotto i 1024px la
 * foto diventa una fascia in cima che sfuma verso il basso, e il titolo ci
 * sale sopra: nascosta, la banda perdeva l'unico elemento che la distingue
 * da una barra di icone qualsiasi.
 */

.sh-feature-band {
	--fb-gutter: var(--sh-gutter-mobile);
	--fb-cols: 4;
	/* Più visibile di --sh-line: i fili passano anche sopra la parte sfumata della foto. */
	--fb-divider: color-mix(in srgb, var(--sh-ink) 18%, transparent);
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Le misure della foto si calcolano sulla larghezza della banda, come nella banda CTA. */
	container-type: inline-size;
	background-color: var(--sh-bg);
	color: var(--sh-ink);
}

/*
 * Larghezza esplicita sul contenitore del widget Elementor. Con
 * container-type la banda non ha una larghezza intrinseca, e dentro il flex a
 * colonna di Elementor Chrome la misurava stretta: su mobile il contenitore
 * risultava alto quasi il doppio della banda, con ~480px di vuoto sotto.
 * Misurato sul sito a 390px: 983px contro 504px; con questa regola 504/504.
 */
.elementor-widget-sh-feature-band {
	width: 100%;
}

.sh-feature-band--cols-3 { --fb-cols: 3; }
.sh-feature-band--cols-5 { --fb-cols: 5; }

@media (min-width: 768px) {
	.sh-feature-band {
		--fb-gutter: var(--sh-gutter);
	}
}

.sh-feature-band__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--sh-space-xl);
}

.sh-feature-band__title {
	margin-block: 0 var(--sh-space-lg);
}

.sh-feature-band__title .sh-title__line {
	display: block;
}

/* ==== Voci ==== */

.sh-feature-band__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Telefono: una voce per riga, icona a fianco, filo sottile fra le voci. */
.sh-feature-band__item {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-content: start;
	column-gap: var(--sh-space-sm);
	min-width: 0;
	padding-block: var(--sh-space-sm);
}

.sh-feature-band__item + .sh-feature-band__item {
	border-block-start: 1px solid var(--fb-divider);
}

/* flex/grid restringono l'SVG sotto la misura dichiarata: si fissa la cella. */
.sh-feature-band__icon {
	grid-row: 1 / span 2;
	color: var(--sh-ink);
}

.sh-feature-band__item-title {
	margin: 0;
	font-family: var(--sh-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: uppercase;
}

.sh-feature-band__item-text {
	margin: var(--sh-space-3xs) 0 0;
	color: var(--sh-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (min-width: 480px) {
	.sh-feature-band__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sh-space-lg) var(--sh-space-md);
	}

	.sh-feature-band__item {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 0;
	}

	.sh-feature-band__item + .sh-feature-band__item {
		border-block-start: 0;
	}

	.sh-feature-band__icon {
		grid-row: auto;
		margin-block-end: var(--sh-space-sm);
	}

	.sh-feature-band__item-text {
		margin-block-start: var(--sh-space-2xs);
	}
}

/* Tre voci su due colonne ne lascerebbero una da sola: da tablet stanno in fila. */
@media (min-width: 768px) {
	.sh-feature-band--cols-3 .sh-feature-band__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Desktop: una fila con i fili verticali del mockup. Il filo e il rientro
 * mancano sulla prima voce di ogni fila, così il testo parte dal filo del
 * titolo anche quando le voci vanno su due righe.
 */
@media (min-width: 1024px) {
	.sh-feature-band__items {
		grid-template-columns: repeat(var(--fb-cols), minmax(0, 1fr));
		gap: var(--sh-space-lg) 0;
	}

	.sh-feature-band__item {
		padding-inline: var(--sh-space-md);
		border-inline-start: 1px solid var(--fb-divider);
	}

	.sh-feature-band--cols-3 .sh-feature-band__item:nth-child(3n+1),
	.sh-feature-band--cols-4 .sh-feature-band__item:nth-child(4n+1),
	.sh-feature-band--cols-5 .sh-feature-band__item:nth-child(5n+1) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

/* ==== Foto ==== */

.sh-feature-band__media {
	position: relative;
	/* Sotto i 1024px la foto sta in cima anche se nel DOM viene dopo il contenuto. */
	order: -1;
	/* Una fascia, non una seconda copertina: su tablet a 22rem spingeva le voci sotto la piega. */
	height: clamp(11rem, 42cqi, 18rem);
	-webkit-mask-image: linear-gradient(180deg, var(--sh-c-black) 45%, transparent);
	mask-image: linear-gradient(180deg, var(--sh-c-black) 45%, transparent);
}

.sh-feature-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Il titolo sale sulla parte sfumata: foto e contenuto si leggono come un blocco solo. */
.sh-feature-band--has-image .sh-feature-band__inner {
	margin-block-start: calc(-1 * var(--sh-space-2xl));
	padding-block-start: 0;
}

.sh-feature-band__caption {
	position: absolute;
	inset-block-start: var(--sh-space-md);
	inset-inline-end: var(--fb-gutter);
	z-index: 1;
	max-width: 16rem;
	margin: 0;
	color: var(--sh-c-white);
	font-family: var(--sh-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15;
	/* Sta sulla foto a prescindere dallo schema: bianco con ombra, come il claim dell'hero. */
	text-shadow: 0 1px 10px rgb(0 0 0 / 0.7);
	text-transform: uppercase;
}

.sh-feature-band__caption::after {
	display: block;
	width: 2rem;
	height: 2px;
	margin-block-start: var(--sh-space-xs);
	background-color: var(--sh-red);
	content: "";
}

@media (min-width: 1024px) {
	/*
	 * --fb-left è dove inizia il contenuto del .sh-container, --fb-inner la sua
	 * larghezza utile: servono a far partire la foto sotto l'ultima colonna di
	 * voci a qualunque larghezza, e a mettere la didascalia sul filo destro
	 * del contenitore anche se la foto arriva al bordo della finestra.
	 */
	.sh-feature-band--has-image {
		--fb-left: max(var(--fb-gutter), calc((100cqi - var(--sh-container)) / 2 + var(--fb-gutter)));
		--fb-inner: calc(min(100cqi, var(--sh-container)) - 2 * var(--fb-gutter));
		--fb-share: 0.72;
		justify-content: center;
		min-height: 20rem;
	}

	.sh-feature-band--has-image .sh-feature-band__inner {
		margin-block-start: 0;
		padding-block-start: var(--sh-space-xl);
	}

	.sh-feature-band--has-image .sh-feature-band__content {
		max-width: calc(var(--fb-share) * 100%);
	}

	/* La foto parte un po' prima della fine delle voci: lì è ancora trasparente. */
	.sh-feature-band--has-image .sh-feature-band__media {
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(var(--fb-left) + var(--fb-inner) * (var(--fb-share) - 0.12));
		inset-inline-end: 0;
		height: auto;
		-webkit-mask-image: linear-gradient(90deg, transparent, var(--sh-c-black) 40%);
		mask-image: linear-gradient(90deg, transparent, var(--sh-c-black) 40%);
	}

	.sh-feature-band__caption {
		inset-block: auto var(--sh-space-xl);
		inset-inline-end: var(--fb-left);
	}
}

/* Da 1280px il contenitore è largo abbastanza da lasciare più spazio alla foto. */
@media (min-width: 1280px) {
	.sh-feature-band--has-image {
		--fb-share: 0.64;
	}
}