/* Modulo Hero — slider di apertura a tutto schermo. */
.ns-hero {
	position: relative;
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	min-height: 520px;
	background: #e9e6e1;
	overflow: hidden;
}
.ns-hero .swiper,
.ns-hero .swiper-wrapper,
.ns-hero .swiper-slide { height: 100%; }
.ns-hero .swiper-slide { position: relative; overflow: hidden; }

/* La foto riempie la slide; il taglio segue il punto di fuoco della slide. */
.ns-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--ns-fx, 50%) var(--ns-fy, 50%);
}
.ns-hero .swiper-slide[data-focus-x="0"] { --ns-fx: 0%; }
.ns-hero .swiper-slide[data-focus-x="5"] { --ns-fx: 5%; }
.ns-hero .swiper-slide[data-focus-x="10"] { --ns-fx: 10%; }
.ns-hero .swiper-slide[data-focus-x="15"] { --ns-fx: 15%; }
.ns-hero .swiper-slide[data-focus-x="20"] { --ns-fx: 20%; }
.ns-hero .swiper-slide[data-focus-x="25"] { --ns-fx: 25%; }
.ns-hero .swiper-slide[data-focus-x="30"] { --ns-fx: 30%; }
.ns-hero .swiper-slide[data-focus-x="35"] { --ns-fx: 35%; }
.ns-hero .swiper-slide[data-focus-x="40"] { --ns-fx: 40%; }
.ns-hero .swiper-slide[data-focus-x="45"] { --ns-fx: 45%; }
.ns-hero .swiper-slide[data-focus-x="55"] { --ns-fx: 55%; }
.ns-hero .swiper-slide[data-focus-x="60"] { --ns-fx: 60%; }
.ns-hero .swiper-slide[data-focus-x="65"] { --ns-fx: 65%; }
.ns-hero .swiper-slide[data-focus-x="70"] { --ns-fx: 70%; }
.ns-hero .swiper-slide[data-focus-x="75"] { --ns-fx: 75%; }
.ns-hero .swiper-slide[data-focus-x="80"] { --ns-fx: 80%; }
.ns-hero .swiper-slide[data-focus-x="85"] { --ns-fx: 85%; }
.ns-hero .swiper-slide[data-focus-x="90"] { --ns-fx: 90%; }
.ns-hero .swiper-slide[data-focus-x="95"] { --ns-fx: 95%; }
.ns-hero .swiper-slide[data-focus-x="100"] { --ns-fx: 100%; }
.ns-hero .swiper-slide[data-focus-y="0"] { --ns-fy: 0%; }
.ns-hero .swiper-slide[data-focus-y="5"] { --ns-fy: 5%; }
.ns-hero .swiper-slide[data-focus-y="10"] { --ns-fy: 10%; }
.ns-hero .swiper-slide[data-focus-y="15"] { --ns-fy: 15%; }
.ns-hero .swiper-slide[data-focus-y="20"] { --ns-fy: 20%; }
.ns-hero .swiper-slide[data-focus-y="25"] { --ns-fy: 25%; }
.ns-hero .swiper-slide[data-focus-y="30"] { --ns-fy: 30%; }
.ns-hero .swiper-slide[data-focus-y="35"] { --ns-fy: 35%; }
.ns-hero .swiper-slide[data-focus-y="40"] { --ns-fy: 40%; }
.ns-hero .swiper-slide[data-focus-y="45"] { --ns-fy: 45%; }
.ns-hero .swiper-slide[data-focus-y="55"] { --ns-fy: 55%; }
.ns-hero .swiper-slide[data-focus-y="60"] { --ns-fy: 60%; }
.ns-hero .swiper-slide[data-focus-y="65"] { --ns-fy: 65%; }
.ns-hero .swiper-slide[data-focus-y="70"] { --ns-fy: 70%; }
.ns-hero .swiper-slide[data-focus-y="75"] { --ns-fy: 75%; }
.ns-hero .swiper-slide[data-focus-y="80"] { --ns-fy: 80%; }
.ns-hero .swiper-slide[data-focus-y="85"] { --ns-fy: 85%; }
.ns-hero .swiper-slide[data-focus-y="90"] { --ns-fy: 90%; }
.ns-hero .swiper-slide[data-focus-y="95"] { --ns-fy: 95%; }
.ns-hero .swiper-slide[data-focus-y="100"] { --ns-fy: 100%; }

/* Contenuti sopra la foto: centrati in verticale su desktop, in basso su telefono. */
.ns-hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding-bottom: 4.5rem;
}
.ns-hero-content > .container { position: relative; }
@media (min-width: 768px) {
	.ns-hero-content { align-items: center; padding-bottom: 0; }
}

/* Titolo: tra display-1 di Bootstrap e un titolo da copertina. */
.ns-hero-title {
	font-size: clamp(3.25rem, 9vw, 8rem);
	line-height: 1;
	letter-spacing: .06em;
}

/* Pallini a lineetta, in basso a destra. Tre classi: swiper.css (caricato dopo) ne usa due. */
.ns-hero .swiper > .swiper-pagination {
	left: auto;
	right: 1.5rem;
	bottom: 1rem;
	width: auto;
	z-index: 3;
	display: flex;
	gap: .5rem;
}
.ns-hero .swiper-pagination-bullet {
	width: 1.75rem;
	height: 2px;
	box-sizing: content-box;
	padding: .75rem 0; /* area cliccabile; si vede solo la riga */
	margin: 0 !important;
	border-radius: 0;
	background: currentColor content-box;
	opacity: .3;
}
.ns-hero .swiper-pagination-bullet-active { opacity: 1; }

/* Peso: con la dissolvenza tutte le slide stanno sovrapposte dentro lo schermo, quindi anche
   `loading="lazy"` le scaricherebbe subito. A slider avviato si tengono visibili solo la foto
   attiva e le vicine: le altre sono display:none, e il browser non le scarica finché non
   diventano la prossima (con 6s di anticipo sulla loro comparsa). */
.ns-hero .swiper-initialized .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) .ns-hero-img {
	display: none;
}