/* ==========================================================================
   Galleria Camere
   Personalizzabile con variabili CSS (anche da Elementor → Stile):
   --amg-accent, --amg-cap-color, --amg-cap-bg, --amg-cap-font, --amg-arrow-bg, --amg-arrow-color
   ========================================================================== */

.amg {
	--cols: var(--amg-cols, 3);
	--gap: var(--amg-gap, 12px);
	--amg-accent: var(--e-global-color-primary, #A23B2A);
	--amg-cap-color: #fff;
	--amg-cap-bg: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .68) 100%);
	--amg-arrow-bg: #fff;
	--amg-arrow-color: #1D1B19;
	position: relative;
	width: 100%;
}
@media (max-width: 1024px) { .amg { --cols: var(--amg-cols-t, 2); } }
@media (max-width: 767px)  { .amg { --cols: var(--amg-cols-m, 1); } }

.amg *, .amg *::before, .amg *::after { box-sizing: border-box; }
.amg__stage { position: relative; }
.amg__viewport { position: relative; } /* riferimento per offsetLeft/offsetTop */
.amg__item { margin: 0; min-width: 0; }
.amg__item.is-hidden { display: none !important; }

/* ---------- media ---------- */
.amg__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--amg-radius, 4px);
	aspect-ratio: var(--amg-ratio, 4/3);
	background: rgba(0, 0, 0, .06);
	color: inherit;
	text-decoration: none;
	cursor: default;
}
a.amg__media { cursor: zoom-in; }
.amg__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
a.amg__media:hover .amg__img, a.amg__media:focus-visible .amg__img { transform: scale(1.045); }
.amg--ratio-auto .amg__media { aspect-ratio: auto; }
.amg--ratio-auto .amg__img { height: auto !important; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* Griglia */
.amg--grid .amg__viewport { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }

/* Masonry: proporzioni originali, colonne CSS */
.amg--masonry .amg__viewport { column-count: var(--cols); column-gap: var(--gap); }
.amg--masonry .amg__item { break-inside: avoid; margin-bottom: var(--gap); display: block; }
.amg--masonry .amg__media { aspect-ratio: auto; }
.amg--masonry .amg__img { height: auto !important; }

/* Scroller orizzontale */
.amg--scroller-h .amg__viewport,
.amg--slider .amg__viewport {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.amg--scroller-h .amg__viewport::-webkit-scrollbar,
.amg--slider .amg__viewport::-webkit-scrollbar { display: none; }
.amg--scroller-h .amg__item { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); scroll-snap-align: start; }
/* scroller orizzontale "a larghezza variabile" (formato Originale): altezza fissa */
.amg--scroller-h.amg--ratio-auto .amg__item { flex: 0 0 auto; }
.amg--scroller-h.amg--ratio-auto .amg__media { height: var(--amg-h, 520px); }
.amg--scroller-h.amg--ratio-auto .amg__img { width: auto !important; height: 100% !important; }
@media (max-width: 767px) { .amg--scroller-h.amg--ratio-auto .amg__media { height: min(var(--amg-h, 520px), 60vh); } }
/* sbirciata della foto successiva su mobile */
@media (max-width: 767px) { .amg--scroller-h:not(.amg--ratio-auto) .amg__item { flex-basis: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 12%); } }
.amg.is-dragging .amg__viewport { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.amg.is-dragging .amg__media { pointer-events: none; }

/* Scroller verticale */
.amg--scroller-v .amg__viewport {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	gap: var(--gap);
	max-height: var(--amg-h, 560px);
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y proximity;
	scroll-behavior: smooth;
	overscroll-behavior-y: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--amg-accent) transparent;
	padding-right: 2px;
}
.amg--scroller-v .amg__item { scroll-snap-align: start; }
.amg--scroller-v .amg__viewport::-webkit-scrollbar { width: 4px; }
.amg--scroller-v .amg__viewport::-webkit-scrollbar-thumb { background: var(--amg-accent); border-radius: 4px; }
/* sfumatura in basso per suggerire lo scroll */
.amg--scroller-v .amg__stage::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none;
	background: linear-gradient(180deg, transparent, var(--amg-fade, rgba(255, 255, 255, .85)));
	opacity: 1; transition: opacity .3s;
}
.amg--scroller-v.is-end .amg__stage::after { opacity: 0; }

/* Slider con miniature */
.amg--slider .amg__item { flex: 0 0 100%; scroll-snap-align: center; }
.amg--slider .amg__media { aspect-ratio: var(--amg-ratio, 16/9); }
.amg--slider.amg--ratio-auto .amg__media { aspect-ratio: auto; height: var(--amg-h, 560px); background: #111; }
.amg--slider.amg--ratio-auto .amg__img { object-fit: contain; height: 100% !important; }
.amg__thumbs {
	display: flex; gap: 8px; margin-top: 10px;
	overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.amg__thumbs::-webkit-scrollbar { display: none; }
.amg__thumb {
	flex: 0 0 auto; width: 96px; aspect-ratio: 4/3; padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: calc(var(--amg-radius, 4px) * .6); overflow: hidden; opacity: .5;
	outline: 2px solid transparent; outline-offset: -2px; transition: opacity .25s, outline-color .25s;
}
.amg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amg__thumb:hover { opacity: .85; }
.amg__thumb.is-active { opacity: 1; outline-color: var(--amg-accent); }
.amg__thumb.is-hidden { display: none; }
@media (max-width: 767px) { .amg__thumb { width: 68px; } }
.amg__counter {
	position: absolute; right: 14px; top: 14px; z-index: 3;
	background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; letter-spacing: .08em;
	padding: 4px 10px; border-radius: 30px; pointer-events: none;
}

/* ==========================================================================
   DIDASCALIE
   ========================================================================== */
.amg__cap { margin: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.amg__cap-group { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.amg__cap-title { font-family: var(--amg-cap-font, inherit); font-size: 18px; font-weight: 500; }
.amg__cap-desc { font-size: 14px; opacity: .85; }

/* sulla foto */
.amg--cap-overlay .amg__cap,
.amg--cap-hover .amg__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 48px 18px 16px;
	background: var(--amg-cap-bg);
	color: var(--amg-cap-color);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
/* al passaggio del mouse (sempre visibile su touch) */
@media (hover: hover) {
	.amg--cap-hover .amg__cap { opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
	.amg--cap-hover .amg__media:hover .amg__cap,
	.amg--cap-hover .amg__media:focus-visible .amg__cap { opacity: 1; transform: none; }
}
/* al centro */
.amg--cap-center .amg__cap {
	position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; text-align: center;
	padding: 20px; color: var(--amg-cap-color); background: rgba(0, 0, 0, .28); transition: background .35s;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.amg--cap-center .amg__cap-title { font-size: 24px; }
.amg--cap-center .amg__media:hover .amg__cap { background: rgba(0, 0, 0, .45); }
/* sotto la foto */
.amg--cap-below .amg__media { aspect-ratio: auto; overflow: visible; background: none; }
.amg--cap-below .amg__img { aspect-ratio: var(--amg-ratio, 4/3); height: auto !important; border-radius: var(--amg-radius, 4px); }
.amg--cap-below.amg--ratio-auto .amg__img,
.amg--cap-below.amg--masonry .amg__img { aspect-ratio: auto; }
.amg--cap-below a.amg__media:hover .amg__img { transform: none; opacity: .9; }
.amg--cap-below .amg__cap { padding: 10px 2px 4px; color: inherit; }
.amg--cap-below .amg__cap-group { color: var(--amg-accent); opacity: 1; }
.amg--cap-below.amg--scroller-h.amg--ratio-auto .amg__media { height: auto; }
.amg--cap-below.amg--scroller-h.amg--ratio-auto .amg__img { height: var(--amg-h, 520px) !important; width: auto !important; }
.amg--slider .amg__cap-title { font-size: 22px; }

/* ==========================================================================
   FRECCE
   ========================================================================== */
.amg__arrow {
	position: absolute; top: 50%; z-index: 4;
	width: 46px; height: 46px; margin-top: -23px; padding: 0;
	display: grid; place-items: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: var(--amg-arrow-bg); color: var(--amg-arrow-color);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35);
	transition: opacity .25s, transform .25s, background .25s, color .25s;
}
.amg__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.amg__arrow:hover { background: var(--amg-accent); color: #fff; }
.amg__arrow--prev { left: 14px; }
.amg__arrow--next { right: 14px; }
.amg__arrow[disabled] { opacity: 0; pointer-events: none; }
.amg--cap-below .amg__arrow { top: calc(50% - 22px); }
/* scroller verticale: frecce in alto e in basso */
.amg--scroller-v .amg__arrow { left: 50%; right: auto; margin: 0 0 0 -23px; top: auto; }
.amg--scroller-v .amg__arrow--prev { top: 12px; transform: rotate(90deg); }
.amg--scroller-v .amg__arrow--next { bottom: 12px; transform: rotate(90deg); }
@media (max-width: 767px) {
	.amg__arrow { width: 38px; height: 38px; margin-top: -19px; }
	.amg--scroller-h .amg__arrow { display: none; }
}

/* ==========================================================================
   FILTRI
   ========================================================================== */
.amg__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; justify-content: var(--amg-filter-align, flex-start); }
.amg__filter {
	appearance: none; cursor: pointer;
	font: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
	padding: 10px 16px; border-radius: 40px;
	background: transparent; color: inherit;
	border: 1px solid currentColor; opacity: .7;
	transition: all .25s;
}
.amg__filter:hover { opacity: 1; }
@media (max-width: 767px) {
	.amg__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
	.amg__filters::-webkit-scrollbar { display: none; }
	.amg__filter { flex: 0 0 auto; }
}
.amg__filter.is-active { background: var(--amg-accent); border-color: var(--amg-accent); color: #fff; opacity: 1; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.amg-lb {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(12, 11, 10, .97);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
	-webkit-user-select: none; user-select: none;
	touch-action: pan-y;
}
.amg-lb.is-open { opacity: 1; visibility: visible; }
.amg-lb__figure { margin: 0; max-width: 92vw; display: flex; flex-direction: column; align-items: center; }
.amg-lb__img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; display: block; border-radius: 3px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8); transition: opacity .25s; }
.amg-lb__img.is-loading { opacity: .2; }
.amg-lb__cap { color: rgba(255, 255, 255, .92); text-align: center; margin-top: 16px; font-size: 16px; line-height: 1.4; max-width: 720px; padding: 0 16px; }
.amg-lb__cap small { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .65; margin-bottom: 4px; }
.amg-lb__count { position: absolute; top: 18px; left: 22px; color: rgba(255, 255, 255, .7); font-size: 14px; letter-spacing: .08em; }
.amg-lb button {
	position: absolute; border: 0; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
	width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; transition: background .2s;
}
.amg-lb button:hover { background: rgba(255, 255, 255, .2); }
.amg-lb button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.amg-lb__close { top: 12px; right: 12px; }
.amg-lb__prev { left: 16px; top: 50%; margin-top: -26px; }
.amg-lb__next { right: 16px; top: 50%; margin-top: -26px; }
@media (max-width: 767px) {
	.amg-lb__prev, .amg-lb__next { top: auto; bottom: 16px; margin: 0; }
	.amg-lb__img { max-height: 70vh; }
}
html.amg-lb-open { overflow: hidden; }

.amg-empty { padding: 20px; border: 1px dashed #ccc; text-align: center; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
	.amg *, .amg-lb, .amg-lb * { transition: none !important; scroll-behavior: auto !important; }
}