/* ============================================================
   EBikePark – Gallery : frontend
   Brand: #00464D  #00A9AB  #95216D   |  angoli netti, animato
   ============================================================ */

.ebp-gallery{
	--ebp-cols:4;
	--ebp-gap:10px;
	--ebp-accent:#00A9AB;
	--ebp-dark:#00464D;
	--ebp-overlay:rgba(0,70,77,.55);
	margin:0 0 2rem;
}
.ebp-gallery *{ box-sizing:border-box; }
.ebp-gallery__title{ margin:0 0 .35rem; line-height:1.12; }
.ebp-gallery__desc{ margin:0 0 1rem; opacity:.9; }
.ebp-gallery__data{ display:none; }

.ebp-galleries .ebp-gallery{ margin-bottom:2.6rem; }
.ebp-galleries .ebp-gallery:last-child{ margin-bottom:0; }

/* ---- Comparsa in dissolvenza allo scroll (solo se JS attivo) ---- */
.ebp-js .ebp-gallery{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.ebp-js .ebp-gallery.is-in{ opacity:1; transform:none; }

/* ============================================================
   STILE 1 · Slideshow + miniature
   ============================================================ */
.ebp-slideshow{ display:block; }

.ebp-stage{
	position:relative;
	overflow:hidden;
	aspect-ratio:16 / 10;
	max-height:70vh;
	background:var(--ebp-dark);
	cursor:zoom-in;
	min-height:220px;
}
.ebp-slide{
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity .9s ease;
	will-change:opacity;
}
.ebp-slide.is-active{ opacity:1; z-index:1; }
.ebp-slide__img{
	position:absolute;
	inset:0;
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	display:block;
	transform:scale(1);
}
/* Ken Burns: lento zoom + pan sulla slide attiva */
.ebp-slide.is-active .ebp-slide__img{ animation:ebp-kenburns 8s ease-out both; }
@keyframes ebp-kenburns{
	from{ transform:scale(1) translate(0,0); }
	to{ transform:scale(1.1) translate(-1.5%,-1%); }
}

.ebp-stage__cap{
	position:absolute;
	left:0; right:0; bottom:0;
	z-index:3;
	padding:2.4rem 1.2rem 1rem;
	color:#fff;
	font:500 .95rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	background:linear-gradient(transparent, rgba(0,30,32,.82));
	text-shadow:0 1px 3px rgba(0,0,0,.5);
	pointer-events:none;
}
.ebp-stage__count{
	position:absolute;
	top:12px; right:14px;
	z-index:3;
	color:#fff;
	background:rgba(0,70,77,.6);
	padding:3px 11px;
	font:600 .78rem/1 system-ui,sans-serif;
	letter-spacing:.4px;
	pointer-events:none;
}
.ebp-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:4;
	width:48px; height:48px;
	border:0;
	background:rgba(0,30,32,.4);
	color:#fff;
	font-size:20px;
	line-height:1;
	cursor:pointer;
	opacity:0;
	transition:opacity .3s ease, background .25s ease;
}
.ebp-stage:hover .ebp-arrow,
.ebp-stage:focus-within .ebp-arrow{ opacity:1; }
.ebp-arrow:hover{ background:var(--ebp-accent); }
.ebp-arrow--prev{ left:0; }
.ebp-arrow--next{ right:0; }

.ebp-progress{
	position:absolute;
	left:0; bottom:0;
	z-index:5;
	width:100%; height:4px;
	background:rgba(255,255,255,.2);
}
.ebp-progress span{
	display:block;
	height:100%;
	width:0;
	background:var(--ebp-accent);
}

/* Striscia miniature sotto la foto grande */
.ebp-thumbs{
	display:flex;
	flex-direction:row;
	gap:var(--ebp-gap);
	margin-top:var(--ebp-gap);
	overflow-x:auto;
	overflow-y:hidden;
	padding-bottom:2px;
	scrollbar-width:thin;
}
.ebp-thumb{
	position:relative;
	flex:0 0 auto;
	width:120px;
	height:76px;
	padding:0;
	border:0;
	overflow:hidden;
	cursor:pointer;
	background:var(--ebp-dark);
	opacity:.6;
	outline:2px solid transparent;
	outline-offset:-2px;
	transition:opacity .3s ease, outline-color .3s ease;
}
.ebp-thumb img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	display:block;
}
.ebp-thumb:hover{ opacity:1; }
.ebp-thumb.is-active{ opacity:1; outline-color:var(--ebp-accent); }
.ebp-slideshow button:focus{ outline:none; }
.ebp-slideshow button:focus-visible{ outline:2px solid var(--ebp-accent); outline-offset:2px; }

/* ============================================================
   STILE 2 · Mosaico in evidenza (angoli netti)
   ============================================================ */
.ebp-featured{
	display:grid !important;
	gap:var(--ebp-gap);
	margin-bottom:var(--ebp-gap);
}

/* Dinamico: 4/5/6 colonne anche in alto (grande + verticale + riempimento) */
.ebp-featured--dyn{
	grid-template-columns:repeat(var(--ebp-cols),1fr);
	grid-template-rows:repeat(2,1fr);
	grid-auto-flow:row dense;
	aspect-ratio:calc(var(--ebp-cols) / 2);
}
.ebp-featured--dyn .ebp-tile{ grid-column:span 1; grid-row:span 1; }
.ebp-featured--dyn .ebp-tile:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.ebp-featured--dyn .ebp-tile:nth-child(2){ grid-column:span 1; grid-row:span 2; }

/* Fisso a 4 (fallback con poche foto) */
.ebp-featured--n4{ grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); aspect-ratio:2 / 1; }
.ebp-featured--n4 .ebp-tile:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3; }
.ebp-featured--n4 .ebp-tile:nth-child(2){ grid-column:3 / 4; grid-row:1 / 3; }
.ebp-featured--n4 .ebp-tile:nth-child(3){ grid-column:4 / 5; grid-row:1 / 2; }
.ebp-featured--n4 .ebp-tile:nth-child(4){ grid-column:4 / 5; grid-row:2 / 3; }

.ebp-featured--n1{ grid-template-columns:1fr; grid-template-rows:1fr; aspect-ratio:16 / 9; }

.ebp-featured--n2{ grid-template-columns:2fr 1fr; grid-template-rows:1fr; aspect-ratio:5 / 2; }
.ebp-featured--n2 .ebp-tile:nth-child(1){ grid-column:1 / 2; grid-row:1 / 2; }
.ebp-featured--n2 .ebp-tile:nth-child(2){ grid-column:2 / 3; grid-row:1 / 2; }

.ebp-featured--n3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:2 / 1; }
.ebp-featured--n3 .ebp-tile:nth-child(1){ grid-column:1 / 2; grid-row:1 / 3; }
.ebp-featured--n3 .ebp-tile:nth-child(2){ grid-column:2 / 3; grid-row:1 / 2; }
.ebp-featured--n3 .ebp-tile:nth-child(3){ grid-column:2 / 3; grid-row:2 / 3; }

.ebp-grid{
	display:grid !important;
	grid-template-columns:repeat(var(--ebp-cols),1fr);
	gap:var(--ebp-gap);
}
.ebp-grid .ebp-tile{ aspect-ratio:1 / 1; }

.ebp-tile{
	position:relative;
	display:block !important;
	overflow:hidden;
	background:var(--ebp-dark);
	cursor:zoom-in;
	text-decoration:none;
}
.ebp-tile img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	display:block;
	margin:0;
	transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.ebp-tile:hover img{ transform:scale(1.07); }
.ebp-tile:focus-visible{ outline:3px solid var(--ebp-accent); outline-offset:2px; }
.ebp-tile__more{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--ebp-overlay);
	color:#fff;
	font:600 1.7rem/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	letter-spacing:.5px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:782px){
	.ebp-stage{ max-height:none; }
	.ebp-thumb{ width:96px; height:64px; }

	/* Mosaico su mobile: 2 colonne pulite, senza buchi */
	.ebp-featured,
	.ebp-grid{
		grid-template-columns:1fr 1fr !important;
		grid-template-rows:none !important;
		aspect-ratio:auto !important;
		grid-auto-flow:row !important;
	}
	.ebp-featured .ebp-tile,
	.ebp-grid .ebp-tile{
		grid-column:auto !important;
		grid-row:auto !important;
		aspect-ratio:1 / 1 !important;
	}

	/* Prima foto in evidenza a tutta larghezza (tranne quando sono solo 2 foto) */
	.ebp-featured--dyn .ebp-tile:first-child,
	.ebp-featured--n4 .ebp-tile:first-child,
	.ebp-featured--n3 .ebp-tile:first-child,
	.ebp-featured--n1 .ebp-tile:first-child{
		grid-column:1 / -1 !important;
		aspect-ratio:16 / 10 !important;
	}

	/* Niente buchi: la tessera spaiata occupa tutta la larghezza */
	.ebp-featured--dyn .ebp-tile:last-child:nth-child(even),
	.ebp-featured--n4 .ebp-tile:last-child:nth-child(even),
	.ebp-grid .ebp-tile:last-child:nth-child(odd){
		grid-column:1 / -1 !important;
		aspect-ratio:16 / 10 !important;
	}

	.ebp-tile__more{ font-size:1.3rem; }
}

/* ============================================================
   Lightbox
   ============================================================ */
.ebp-lb{
	position:fixed;
	inset:0;
	z-index:99999;
	display:none;
	align-items:center;
	justify-content:center;
	background:rgba(4,10,10,.95);
	opacity:0;
	transition:opacity .22s ease;
}
.ebp-lb.is-open{ display:flex; opacity:1; }
.ebp-lb__stage{ position:relative; max-width:94vw; max-height:88vh; display:flex; align-items:center; justify-content:center; }
.ebp-lb__img{
	max-width:94vw; max-height:88vh; width:auto; height:auto;
	object-fit:contain;
	box-shadow:0 10px 44px rgba(0,0,0,.55);
	animation:ebp-lb-in .28s ease;
}
@keyframes ebp-lb-in{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
.ebp-lb__cap{
	position:fixed; left:0; right:0; bottom:20px;
	text-align:center; color:#fff;
	font:400 .95rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	padding:0 60px; text-shadow:0 1px 3px rgba(0,0,0,.6); pointer-events:none;
}
.ebp-lb__count{ position:fixed; top:18px; left:20px; color:#fff; font:600 .9rem system-ui,sans-serif; opacity:.85; }
.ebp-lb__btn{
	position:fixed; top:50%; transform:translateY(-50%);
	width:52px; height:52px; border:0;
	background:rgba(255,255,255,.14); color:#fff;
	font-size:26px; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:background .2s ease;
}
.ebp-lb__btn:hover{ background:var(--ebp-accent,#00A9AB); }
.ebp-lb__prev{ left:16px; }
.ebp-lb__next{ right:16px; }
.ebp-lb__close{ top:14px; right:16px; transform:none; width:46px; height:46px; }

@media (max-width:600px){
	.ebp-lb__btn{ width:44px; height:44px; font-size:22px; }
	.ebp-lb__prev{ left:6px; }
	.ebp-lb__next{ right:6px; }
	.ebp-lb__cap{ padding:0 20px; font-size:.85rem; }
}

/* ---- Rispetto delle preferenze di movimento ridotto ---- */
@media (prefers-reduced-motion:reduce){
	.ebp-js .ebp-gallery{ opacity:1; transform:none; transition:none; }
	.ebp-slide.is-active .ebp-slide__img{ animation:none; }
	.ebp-slide{ transition:none; }
	.ebp-tile img{ transition:none; }
	.ebp-lb, .ebp-lb__img{ transition:none; animation:none; }
}