/* Palombo Portfolio — front-end */

.pp-gallery {
	--pp-h: 320px;
	--pp-h-t: 260px;
	--pp-h-m: 200px;
	--pp-gap: 14px;
	--pp-radius: 6px;
	--pp-cur-h: var(--pp-h);
	--pp-n-d: 3;
	--pp-n-t: 2;
	--pp-n-m: 1;
	--pp-n: var(--pp-n-d);
	--pp-ref: 1.7778;
	--pp-peek: .33; /* quanto del video successivo resta in vista */
	position: relative;
	width: 100%;
	container-type: inline-size;
	box-sizing: border-box;
}
.pp-gallery *, .pp-gallery *::before, .pp-gallery *::after { box-sizing: border-box; }

@media (max-width: 1024px) { .pp-gallery { --pp-cur-h: var(--pp-h-t); --pp-n: var(--pp-n-t); } }
@media (max-width: 640px)  { .pp-gallery { --pp-cur-h: var(--pp-h-m); --pp-n: var(--pp-n-m); } }

.pp-track { display: flex; gap: var(--pp-gap); }

/* ---------- elemento ---------- */
.pp-item {
	position: relative;
	display: block;
	flex: 0 0 auto;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
	outline-offset: 3px;
	-webkit-tap-highlight-color: transparent;
}
.pp-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #111;
	border-radius: var(--pp-radius);
	aspect-ratio: var(--r, 1.7778);
	/* stessa altezza per tutti; se non ci sta in larghezza si riduce.
	   Altezza E larghezza sono scritte in modo esplicito (larghezza = altezza x proporzione):
	   Safari su iPhone non ricava la larghezza dalla sola proporzione dentro un elemento flex
	   e mostrava le gallerie vuote (v1.3.2). */
	height: var(--pp-cur-h);
	width: calc(var(--pp-cur-h) * var(--r, 1.7778));
	max-width: 100%;
	isolation: isolate;
}
@supports (width: 1cqw) {
	.pp-media {
		height: min(var(--pp-cur-h), calc(100cqw / var(--r, 1.7778)));
		width: min(calc(var(--pp-cur-h) * var(--r, 1.7778)), 100cqw);
	}
}
.pp-media img,
.pp-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	max-width: none;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.pp-hover-zoom .pp-item:hover .pp-media img,
.pp-hover-zoom .pp-item:hover .pp-media video,
.pp-hover-zoom .pp-item:focus-visible .pp-media img,
.pp-hover-zoom .pp-item:focus-visible .pp-media video { transform: scale(1.06); }

/* velatura + titolo al passaggio */
.pp-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 55%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.pp-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 14px 16px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
	transform: translateY(8px);
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
}
.pp-item:hover .pp-media::after,
.pp-item:focus-visible .pp-media::after { opacity: 1; }
.pp-item:hover .pp-cap,
.pp-item:focus-visible .pp-cap { opacity: 1; transform: none; }

/* tasto play */
.pp-play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: rgba(0, 0, 0, .38);
	border: 1.5px solid rgba(255, 255, 255, .85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: transform .35s ease, background .35s ease, color .35s ease;
}
.pp-play svg { width: 24px; height: 24px; margin-left: 3px; }
.pp-item:hover .pp-play,
.pp-item:focus-visible .pp-play { transform: scale(1.12); background: #fff; color: #111; }

/* su touch niente hover: il titolo resta visibile */
@media (hover: none) {
	.pp-media::after { opacity: 1; }
	.pp-cap { opacity: 1; transform: none; }
}

.pp-text { display: none; }

/* ---------- griglia ---------- */
.pp-grid .pp-track { flex-wrap: wrap; }
/* la griglia ragiona in "video per riga": l'altezza si calcola da sola, come nel carosello */
@supports (width: 1cqw) {
	.pp-grid .pp-media {
		height: min(
			calc(((100cqw - (var(--pp-n) - 1) * var(--pp-gap) - 1px) / var(--pp-n)) / var(--pp-ref)),
			calc(100cqw / var(--r, 1.7778))
		);
		width: min(
			calc(((100cqw - (var(--pp-n) - 1) * var(--pp-gap) - 1px) / var(--pp-n)) / var(--pp-ref) * var(--r, 1.7778)),
			100cqw
		);
	}
}

/* ---------- carosello ---------- */
.pp-carousel .pp-track {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	overscroll-behavior-x: contain;
}
.pp-carousel .pp-track::-webkit-scrollbar { display: none; }
.pp-carousel .pp-item { scroll-snap-align: start; }

/* l'altezza del carosello dipende da quanti elementi si vogliono vedere (+ un pezzo del successivo) */
@supports (width: 1cqw) {
	.pp-carousel .pp-media {
		height: calc(((100cqw - var(--pp-n) * var(--pp-gap)) / (var(--pp-n) + var(--pp-peek))) / var(--pp-ref));
		width: calc(((100cqw - var(--pp-n) * var(--pp-gap)) / (var(--pp-n) + var(--pp-peek))) / var(--pp-ref) * var(--r, 1.7778));
	}
}

/* sfumatura sul bordo destro: c'è altro da sfogliare */
.pp-carousel::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(36px, 8%, 90px);
	z-index: 3;
	border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
	background: linear-gradient(to left, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
	pointer-events: none;
	opacity: 1;
	transition: opacity .3s ease;
}
.pp-carousel.pp-at-end::after,
.pp-carousel.pp-no-scroll::after { opacity: 0; }
.pp-carousel .pp-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.pp-carousel .pp-track.is-dragging .pp-item { pointer-events: none; }
.pp-carousel .pp-item img { -webkit-user-drag: none; user-select: none; }

.pp-nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(10, 10, 10, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background .25s ease, opacity .25s ease, transform .25s ease;
}
.pp-nav svg { width: 22px; height: 22px; }
.pp-nav:hover { background: rgba(10, 10, 10, .85); }
.pp-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pp-prev { left: 10px; }
.pp-next { right: 10px; }
.pp-nav[disabled] { opacity: 0; pointer-events: none; }
.pp-no-scroll .pp-nav { display: none; }
@media (max-width: 640px) { .pp-nav { display: none; } }

/* ---------- elenco ---------- */
.pp-list .pp-track { flex-direction: column; }
.pp-list .pp-item {
	display: flex;
	align-items: center;
	gap: clamp(14px, 3vw, 32px);
	width: 100%;
}
.pp-list .pp-media { flex: 0 0 auto; }
.pp-list .pp-cap { display: none; }
.pp-list .pp-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1 1 200px;
}
.pp-list .pp-text strong {
	font-size: clamp(16px, 2.2vw, 22px);
	line-height: 1.25;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.pp-list .pp-text span { font-size: 15px; line-height: 1.55; opacity: .75; }
@media (max-width: 640px) {
	.pp-list .pp-item { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- comparsa allo scroll ---------- */
.pp-item.pp-pre { opacity: 0; transform: translateY(18px); }
.pp-item.pp-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }

.pp-error { padding: 10px 14px; background: #fff3cd; color: #664d03; border-radius: 4px; }

/* ---------- lightbox ---------- */
.pp-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 56px 16px 24px;
	background: rgba(6, 6, 6, .94);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s;
	touch-action: pan-y;
}
.pp-lb.is-open { opacity: 1; visibility: visible; }
.pp-lb-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	transform: scale(.96);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.pp-lb.is-open .pp-lb-stage { transform: none; }
.pp-lb-stage img,
.pp-lb-stage video {
	display: block;
	max-width: min(100%, 1600px);
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 3px;
	background: #000;
	object-fit: contain;
}
.pp-lb-embed {
	aspect-ratio: var(--r, 1.7778);
	width: min(100%, calc((100vh - 150px) * var(--r, 1.7778)));
	max-height: 100%;
	background: #000;
	border-radius: 3px;
	overflow: hidden;
}
.pp-lb-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.pp-lb-info {
	flex: 0 0 auto;
	max-width: 900px;
	padding-top: 14px;
	color: #fff;
	text-align: center;
	min-height: 20px;
}
.pp-lb-info strong { display: block; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.pp-lb-info span { display: block; margin-top: 4px; font-size: 14px; opacity: .7; }
.pp-lb-btn {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, .08);
	cursor: pointer;
	transition: background .2s ease;
}
.pp-lb-btn:hover { background: rgba(255, 255, 255, .2); }
.pp-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pp-lb-btn svg { width: 22px; height: 22px; }
.pp-lb-close { top: 10px; right: 12px; }
.pp-lb-prev { left: 12px; top: 50%; margin-top: -23px; }
.pp-lb-next { right: 12px; top: 50%; margin-top: -23px; }
.pp-lb-count { position: absolute; top: 22px; left: 18px; color: #fff; opacity: .6; font-size: 13px; letter-spacing: .08em; }
.pp-lb.is-single .pp-lb-prev, .pp-lb.is-single .pp-lb-next, .pp-lb.is-single .pp-lb-count { display: none; }
@media (max-width: 640px) {
	.pp-lb { padding: 56px 0 16px; }
	.pp-lb-stage img, .pp-lb-stage video { border-radius: 0; }
	.pp-lb-embed { border-radius: 0; }
	.pp-lb-prev, .pp-lb-next { top: auto; bottom: 14px; margin: 0; }
	.pp-lb-prev { left: 12px; }
	.pp-lb-next { right: 12px; }
}
html.pp-lb-lock, html.pp-lb-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.pp-media img, .pp-media video, .pp-cap, .pp-play, .pp-media::after,
	.pp-item.pp-in, .pp-lb, .pp-lb-stage { transition: none !important; }
	.pp-item.pp-pre { opacity: 1; transform: none; }
	.pp-carousel .pp-track { scroll-behavior: auto; }
}

/* ---------- fluidità dello scorrimento su touch (v1.3.2) ----------
   Su telefono: niente sfocatura dietro al tasto play (pesantissima su iPhone con decine di
   miniature), niente transizioni sulle immagini, aggancio preciso a ogni video. */
@media (hover: none) {
	.pp-play {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(0, 0, 0, .5);
	}
	.pp-media img,
	.pp-media video { transition: none; }
	.pp-carousel .pp-track {
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-behavior: auto;
	}
	.pp-carousel .pp-item { scroll-snap-stop: normal; }
}