/* PIM Slider 1.1.0 */
.pim-slider {
	--pim-safe: clamp(16px, 4cqw, 56px);
	--pim-safe-top: 0px;
	position: relative;
	container-type: inline-size;
	overflow: hidden;
}
.pim-track {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	outline: none;
}
.pim-track::-webkit-scrollbar { display: none; }
.pim-track:focus-visible { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8); }

/* La slide è alta come l'immagine; se il testo è più alto, cresce e l'immagine copre tutto. */
.pim-slide {
	--pim-ar: var(--pim-ar-d);
	--pim-av: var(--pim-av-d);
	--pim-ah: var(--pim-ah-d);
	--pim-ta: var(--pim-ta-d);
	--pim-m: var(--pim-m-d);
	--pim-mx: var(--pim-mx-d);
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	display: grid;
	/* Colonna bloccata alla larghezza della slide: il testo va a capo invece di allargarla. */
	grid-template-columns: minmax(0, 1fr);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	container-type: inline-size;
	overflow: hidden;
}
.pim-slide::before {
	content: "";
	grid-area: 1 / 1;
	aspect-ratio: var(--pim-ar);
}
.pim-media,
.pim-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.pim-media img {
	object-fit: cover;
	max-width: none;
}
.pim-overlay {
	position: absolute;
	inset: 0;
	background: var(--pim-ovc, #000);
	opacity: var(--pim-ov, .25);
	pointer-events: none;
}

/* Area di sicurezza: margine fisso dai bordi, in alto anche l'header sticky. */
.pim-safe {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: var(--pim-av);
	justify-content: var(--pim-ah);
	min-width: 0;
	padding: var(--pim-safe);
	padding-top: calc(var(--pim-safe) + var(--pim-safe-top));
	padding-bottom: calc(var(--pim-safe) + var(--pim-dots-space, 0px));
	box-sizing: border-box;
}
.pim-content {
	margin: var(--pim-m);
	width: var(--pim-tw, 50%);
	max-width: calc(100% - var(--pim-mx));
	min-width: min(280px, calc(100% - var(--pim-mx)));
	color: var(--pim-color, #fff);
	text-align: var(--pim-ta);
	overflow-wrap: break-word;
}
.pim-slider .pim-title {
	margin: 0 0 .35em;
	padding: 0;
	color: inherit;
	font-size: clamp(1.5rem, 1rem + 2.6cqw, 3.4rem);
	line-height: 1.12;
}
.pim-slider .pim-sub {
	margin: 0 0 1.1em;
	color: inherit;
	font-size: clamp(1rem, .9rem + .6cqw, 1.35rem);
	line-height: 1.4;
}
.pim-slider .pim-actions { margin: 0; }
.pim-slider .pim-content > :last-child { margin-bottom: 0; }
.pim-btn { max-width: 100%; white-space: normal; }

/* Frecce e pallini */
.pim-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	cursor: pointer;
	transition: background .2s;
}
.pim-arrow:hover,
.pim-arrow:focus-visible { background: rgba(0, 0, 0, .6); }
.pim-arrow span {
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 auto;
	border: solid currentColor;
	border-width: 0 3px 3px 0;
}
.pim-prev { left: 12px; }
.pim-prev span { transform: translateX(2px) rotate(135deg); }
.pim-next { right: 12px; }
.pim-next span { transform: translateX(-2px) rotate(-45deg); }
.pim-slider:has(.pim-dots) { --pim-dots-space: 28px; }
.pim-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.pim-dot {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.pim-dot::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}
.pim-dot[aria-current="true"]::before { background: #fff; }

/* Tablet */
@media (max-width: 1024px) {
	.pim-slide {
		--pim-ar: var(--pim-ar-t);
		--pim-av: var(--pim-av-t);
		--pim-ah: var(--pim-ah-t);
		--pim-ta: var(--pim-ta-t);
		--pim-m: var(--pim-m-t);
		--pim-mx: var(--pim-mx-t);
	}
}

/* Mobile */
@media (max-width: 767px) {
	.pim-slide {
		--pim-ar: var(--pim-ar-m);
		--pim-av: var(--pim-av-m);
		--pim-ah: var(--pim-ah-m);
		--pim-ta: var(--pim-ta-m);
		--pim-m: var(--pim-m-m);
		--pim-mx: var(--pim-mx-m);
	}
	.pim-content { width: 100%; }
	.pim-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pim-track { scroll-behavior: auto; }
}