/* ==========================================================================
   Galleria fotografica Dolomiti Studio — griglia miniature + visore PhotoSwipe
   ========================================================================== */

.ds-gallery{margin:6px 0 4px}

.ds-gallery__title{
	text-align:center;
	font-family:var(--ff-head);
	font-weight:700;
	color:var(--green);
	text-transform:uppercase;
	letter-spacing:.04em;
	margin:0 0 18px;
}

.ds-gallery__grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:14px;
}
.ds-gallery[data-cols="2"] .ds-gallery__grid{grid-template-columns:repeat(2,1fr)}
.ds-gallery[data-cols="4"] .ds-gallery__grid{grid-template-columns:repeat(4,1fr)}

/* Il tablet in verticale (iPad: 768-834px) deve tenere le 3 colonne del PC
   (richiesta utente 21/07). La riduzione a 2 colonne quindi parte solo SOTTO
   i 768 (telefoni in orizzontale e tablet piccoli); il telefono in verticale
   resta a 1 colonna come prima. Sopra i 768 vale la regola base (3 colonne). */
@media (max-width:767px){.ds-gallery__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ds-gallery__grid{grid-template-columns:1fr}}

.ds-gallery__item{margin:0}

.ds-gallery__link{
	position:relative;
	display:block;
	overflow:hidden;
	border-radius:10px;
	aspect-ratio:4 / 3;
	background:var(--green-wash);
	border:1px solid var(--line);
	box-shadow:0 2px 10px rgba(0,0,0,.10);
	cursor:zoom-in;
}
.ds-gallery__link img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .45s ease;
}
.ds-gallery__link:hover img,
.ds-gallery__link:focus-visible img{transform:scale(1.06)}

/* Pastiglia "lente +" in basso a destra sulla miniatura */
.ds-gallery__zoom{
	position:absolute;
	right:10px;
	bottom:10px;
	width:34px;
	height:34px;
	border-radius:50%;
	background:rgba(0,101,51,.88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	opacity:0;
	transform:translateY(6px);
	transition:opacity .25s ease, transform .25s ease;
	pointer-events:none;
}
.ds-gallery__link:hover .ds-gallery__zoom,
.ds-gallery__link:focus-visible .ds-gallery__zoom{opacity:1;transform:translateY(0)}

.ds-gallery__caption{
	margin:8px 2px 0;
	font-size:.9rem;
	color:var(--muted);
	text-align:center;
}

/* Didascalia dentro il visore (PhotoSwipe) */
.pswp__ds-caption{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
	text-align:center;
	font-family:var(--ff-body);
	font-size:.98rem;
	line-height:1.4;
	color:#fff;
	background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));
	pointer-events:none;
}

/* Accento di brand sul visore */
.pswp{--pswp-icon-color:#fff;--pswp-icon-color-secondary:transparent}
.pswp__bg{background:#0b1a0f}

/* ==========================================================================
   Layout carousel (Splide)
   ========================================================================== */
.ds-gallery--carousel{padding-bottom:30px}

/* Anti-FOUC: nasconde la lista finché Splide non è montato */
.ds-splide:not(.is-initialized):not(.is-rendered){visibility:hidden}

/* La figura riempie la slide */
.ds-splide .splide__slide{height:auto}
.ds-splide .ds-gallery__item{height:100%}

/* Frecce in verde brand */
.ds-splide .splide__arrow{
	background:var(--green);
	opacity:.92;
	width:2.5em;
	height:2.5em;
}
.ds-splide .splide__arrow:hover:not(:disabled){background:var(--green-d);opacity:1}
.ds-splide .splide__arrow svg{fill:#fff;width:1.1em;height:1.1em}
.ds-splide .splide__arrow:disabled{opacity:.28}

/* Puntini di paginazione */
.ds-splide .splide__pagination{bottom:-1.7em}
.ds-splide .splide__pagination__page{
	background:var(--line);
	margin:3px;
	transition:transform .2s ease, background .2s ease;
}
.ds-splide .splide__pagination__page.is-active{background:var(--green);transform:scale(1.35)}

/* Focus visibile (accessibilità) */
.ds-splide .splide__arrow:focus-visible,
.ds-splide .splide__pagination__page:focus-visible{outline:2px solid var(--green);outline-offset:2px}