/* =========================================================
   AMARC — Carosello gallery progetto
   Lo scorrimento è quello nativo del browser (scroll-snap):
   il JS sposta solo la posizione, non simula il movimento.
   ========================================================= */

.amarc-gp {
	--gp-per-view: 3;
	--gp-gap: 16px;
	--gp-ratio: 1.5;
	--gp-fit: cover;
	--gp-cap-lines: 2;

	/* altezza dell'area immagine, scritta dal JS: serve a centrare
	   le frecce sulla foto e non sull'insieme foto + didascalia */
	--gp-media-h: 240px;

	--gp-nav-size: 44px;
	--gp-nav-radius: 50%;
	--gp-nav-color: #fff;
	--gp-nav-bg: #ef3340;
	--gp-nav-color-hover: #fff;
	--gp-nav-bg-hover: #a7242d;

	--gp-dot: #d5d5d5;
	--gp-dot-active: #ef3340;
	--gp-dot-size: 8px;
	--gp-dot-gap: 20px;

	position: relative;
}

/* ---------- Pista ---------- */

.amarc-gp__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* Edge legacy */
	outline-offset: 4px;
}

.amarc-gp__viewport::-webkit-scrollbar {
	display: none;
}

/* Durante il trascinamento col mouse lo smooth va spento,
   altrimenti la pista insegue il cursore in ritardo. */
.amarc-gp.is-dragging .amarc-gp__viewport {
	scroll-behavior: auto;
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.amarc-gp__track {
	display: flex;
	gap: var(--gp-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.amarc-gp__slide {
	flex: 0 0 calc((100% - (var(--gp-per-view) - 1) * var(--gp-gap)) / var(--gp-per-view));
	max-width: calc((100% - (var(--gp-per-view) - 1) * var(--gp-gap)) / var(--gp-per-view));
	margin: 0;
	scroll-snap-align: start;
}

.amarc-gp__figure {
	position: relative;
	margin: 0;
	height: 100%;
}

/* ---------- Immagine ---------- */

.amarc-gp__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--gp-ratio);
	line-height: 0;
}

.amarc-gp__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--gp-fit);
	transition: transform .45s ease;
}

/* Proporzioni originali: l'altezza la decide l'immagine */
.amarc-gp--ratio-auto .amarc-gp__media {
	aspect-ratio: auto;
}

.amarc-gp--ratio-auto .amarc-gp__img {
	height: auto;
	object-fit: initial;
}

/* ---------- Didascalia ---------- */

.amarc-gp__caption {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--gp-cap-lines);
	line-clamp: var(--gp-cap-lines);
	overflow: hidden;
	line-height: 1.4;
}

/* "Righe massime: 0" = testo intero, nessun troncamento */
.amarc-gp--cap-full .amarc-gp__caption {
	display: block;
	overflow: visible;
}

.amarc-gp--overlay .amarc-gp__caption {
	position: absolute;
	inset: auto 0 0 0;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	padding: 28px 16px 14px;
}

/* ---------- Frecce ---------- */

.amarc-gp__nav {
	display: flex;
	gap: 8px;
}

.amarc-gp__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--gp-nav-size);
	height: var(--gp-nav-size);
	padding: 0;
	border: 0;
	border-radius: var(--gp-nav-radius);
	color: var(--gp-nav-color);
	background: var(--gp-nav-bg);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}

.amarc-gp__arrow svg {
	width: 45%;
	height: 45%;
}

.amarc-gp__arrow:hover,
.amarc-gp__arrow:focus-visible {
	color: var(--gp-nav-color-hover);
	background: var(--gp-nav-bg-hover);
}

.amarc-gp__arrow[disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* Frecce sull'immagine (dentro o ai lati): la barra si sovrappone
   al carosello ed è centrata sull'altezza della foto. */
.amarc-gp--nav-dentro .amarc-gp__nav,
.amarc-gp--nav-fuori .amarc-gp__nav {
	position: absolute;
	top: calc(var(--gp-media-h) / 2);
	left: 0;
	right: 0;
	transform: translateY(-50%);
	justify-content: space-between;
	pointer-events: none;
	z-index: 2;
}

.amarc-gp--nav-dentro .amarc-gp__arrow,
.amarc-gp--nav-fuori .amarc-gp__arrow {
	pointer-events: auto;
}

.amarc-gp--nav-dentro .amarc-gp__nav {
	padding: 0 12px;
}

.amarc-gp--nav-fuori .amarc-gp__nav {
	left: calc(-1 * (var(--gp-nav-size) + 12px));
	right: calc(-1 * (var(--gp-nav-size) + 12px));
}

/* Sotto, a destra */
.amarc-gp--nav-sotto .amarc-gp__nav {
	justify-content: flex-end;
	margin-top: 16px;
}

/* ---------- Puntini ---------- */

.amarc-gp__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--gp-dot-size) * .9);
	margin-top: var(--gp-dot-gap);
}

.amarc-gp__dots:empty {
	display: none;
}

.amarc-gp__dot {
	width: var(--gp-dot-size);
	height: var(--gp-dot-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gp-dot);
	cursor: pointer;
	transition: background-color .25s ease, width .25s ease;
}

.amarc-gp__dot.is-active {
	width: calc(var(--gp-dot-size) * 2.5);
	border-radius: var(--gp-dot-size);
	background: var(--gp-dot-active);
}

/* ---------- Tutte le immagini già visibili: niente navigazione ---------- */

.amarc-gp.is-statico .amarc-gp__nav,
.amarc-gp.is-statico .amarc-gp__dots {
	display: none;
}

/* ---------- Editor ---------- */

.amarc-gp__empty {
	padding: 24px;
	border: 1px dashed #c4c4c4;
	border-radius: 4px;
	color: #7a7a7a;
	font-size: 13px;
	text-align: center;
	background: #f7f7f7;
}

/* ---------- Preferenze di sistema ---------- */

@media (prefers-reduced-motion: reduce) {
	.amarc-gp__viewport {
		scroll-behavior: auto;
	}
	.amarc-gp__img {
		transition: none;
	}
}