/* Google Photos Gallery — front-end styles
   The grid stays quiet so the photos lead; the lightbox is the signature moment. */

.gpg-gallery {
	--gpg-cols: 3;
	--gpg-gap: 10px;
	--gpg-radius: 14px;
	margin: 1.2em 0;
}

/* ---- Masonry layout (natural photo heights) ---- */
.gpg-masonry {
	column-count: var(--gpg-cols);
	column-gap: var(--gpg-gap);
}
.gpg-masonry .gpg-item {
	break-inside: avoid;
	margin: 0 0 var(--gpg-gap);
	display: block;
}
.gpg-masonry .gpg-frame {
	height: auto;
}
.gpg-masonry .gpg-img {
	position: static;
	width: 100%;
	height: auto;
	display: block;
}

/* ---- Grid layout (equal squares) ---- */
.gpg-grid {
	display: grid;
	grid-template-columns: repeat(var(--gpg-cols), 1fr);
	gap: var(--gpg-gap);
}
.gpg-grid .gpg-item {
	margin: 0;
}
.gpg-grid .gpg-frame {
	padding-bottom: 100% !important; /* force square */
	height: 0;
}

/* ---- Shared item styling ---- */
.gpg-item {
	position: relative;
	padding: 0;
	cursor: pointer;
	list-style: none;
}
.gpg-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--gpg-radius);
	background: rgba(0, 0, 0, 0.04);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.gpg-grid .gpg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gpg-img {
	display: block;
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.gpg-img.gpg-loaded {
	opacity: 1;
}

/* Hover: gentle lift + slow inner zoom + reveal icon */
@media (hover: hover) {
	.gpg-item:hover .gpg-frame {
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
		transform: translateY(-2px);
	}
	.gpg-item:hover .gpg-img {
		transform: scale(1.06);
	}
	.gpg-item:hover .gpg-overlay {
		opacity: 1;
		transform: translateY(0);
	}
}

.gpg-overlay {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(20, 20, 22, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 50%;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

/* Keyboard focus */
.gpg-item:focus-visible {
	outline: none;
}
.gpg-item:focus-visible .gpg-frame {
	outline: 3px solid #4285f4;
	outline-offset: 3px;
}

/* Responsive column reductions */
@media (max-width: 1024px) {
	.gpg-masonry { column-count: min(var(--gpg-cols), 3); }
	.gpg-grid { grid-template-columns: repeat(min(var(--gpg-cols), 3), 1fr); }
}
@media (max-width: 680px) {
	.gpg-masonry { column-count: 2; }
	.gpg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
	.gpg-masonry { column-count: 1; }
	.gpg-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Lightbox — the signature element
   =========================================================== */
.gpg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(14, 14, 16, 0.92);
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s ease, visibility 0.32s ease;
}
.gpg-lightbox.gpg-open {
	opacity: 1;
	visibility: visible;
}

.gpg-lb-stage {
	position: relative;
	max-width: 92vw;
	max-height: 86vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gpg-lb-img {
	max-width: 92vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
	transform: scale(0.96);
	opacity: 0;
	transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
}
.gpg-lightbox.gpg-open .gpg-lb-img.gpg-ready {
	transform: scale(1);
	opacity: 1;
}

/* Controls */
.gpg-lb-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
	z-index: 2;
}
.gpg-lb-btn:hover {
	background: rgba(255, 255, 255, 0.22);
}
.gpg-lb-btn:active {
	transform: translateY(-50%) scale(0.92);
}
.gpg-lb-prev { left: 2.5vw; }
.gpg-lb-next { right: 2.5vw; }

.gpg-lb-close {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
	z-index: 3;
}
.gpg-lb-close:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: rotate(90deg);
}

.gpg-lb-counter {
	position: absolute;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	background: rgba(255, 255, 255, 0.08);
	padding: 6px 14px;
	border-radius: 999px;
	z-index: 3;
}

.gpg-lb-spinner {
	position: absolute;
	width: 34px;
	height: 34px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: gpg-spin 0.8s linear infinite;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.gpg-lb-spinner.gpg-show { opacity: 1; }
@keyframes gpg-spin { to { transform: rotate(360deg); } }

@media (max-width: 680px) {
	.gpg-lb-btn { width: 44px; height: 44px; }
	.gpg-lb-prev { left: 8px; }
	.gpg-lb-next { right: 8px; }
	.gpg-lb-close { top: 12px; right: 12px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gpg-img,
	.gpg-frame,
	.gpg-overlay,
	.gpg-lb-img,
	.gpg-lb-btn,
	.gpg-lb-close,
	.gpg-lightbox {
		transition: none !important;
	}
	.gpg-item:hover .gpg-img { transform: none; }
	.gpg-lb-spinner { animation: none; }
}