/**
 * F45 Studio gallery lightbox — scoped styles.
 * Enqueued on homepage only. Does not affect other blocks.
 */

/* Body scroll lock while lightbox is open */
body.f45-lightbox-open { overflow: hidden; }

/* CTA button next to studio gallery (reuses theme tokens, no design overhaul) */
.f45-studio-gallery-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding: 0.75rem 1.25rem;
	background: var(--f45-ink, #0A0A0A);
	color: var(--f45-white, #fff);
	border: 1px solid var(--f45-ink, #0A0A0A);
	border-radius: var(--f45-radius-pill, 999px);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.f45-studio-gallery-cta:hover,
.f45-studio-gallery-cta:focus-visible {
	background: var(--f45-red, #E30613);
	border-color: var(--f45-red, #E30613);
	color: var(--f45-white, #fff);
	text-decoration: none;
	outline: none;
}
.f45-studio-gallery-cta:focus-visible {
	box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.35);
}

/* Preview click affordance */
[data-gallery-open] { cursor: zoom-in; }
[data-gallery-open]:focus-visible {
	outline: 3px solid var(--f45-red, #E30613);
	outline-offset: 2px;
}

/* Lightbox overlay */
.f45-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.f45-lightbox[hidden] { display: none; }

.f45-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.94);
	animation: f45-lb-fade 180ms ease-out;
}

.f45-lightbox__figure {
	position: relative;
	margin: 0;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.f45-lightbox__media {
	position: relative;
	max-width: 90vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	pointer-events: auto;
}
.f45-lightbox__media img,
.f45-lightbox__media picture {
	display: block;
	max-width: 90vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.f45-lightbox__media picture img {
	max-width: 90vw;
	max-height: 82vh;
}

.f45-lightbox__btn {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
	z-index: 2;
}
.f45-lightbox__btn:hover,
.f45-lightbox__btn:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	outline: none;
}
.f45-lightbox__btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.f45-lightbox__close {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
}
.f45-lightbox__prev,
.f45-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
}
.f45-lightbox__prev { left: 16px; }
.f45-lightbox__next { right: 16px; }

.f45-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	background: rgba(0, 0, 0, 0.55);
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

/* Mobile: hide desktop arrows, rely on swipe */
@media (max-width: 720px) {
	.f45-lightbox__prev,
	.f45-lightbox__next {
		display: none;
	}
	.f45-lightbox__close {
		top: 12px;
		right: 12px;
	}
	.f45-lightbox__counter {
		bottom: 14px;
		font-size: 0.85rem;
	}
	.f45-lightbox__media,
	.f45-lightbox__media img,
	.f45-lightbox__media picture,
	.f45-lightbox__media picture img {
		max-width: 100vw;
		max-height: 82vh;
	}
}

@keyframes f45-lb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.f45-lightbox__backdrop { animation: none; }
	.f45-lightbox__btn { transition: none; }
}
.f45-lightbox--no-motion .f45-lightbox__backdrop { animation: none; }

/* --- First-open swipe hint (mobile only, injected by JS on first open) --- */
.f45-lightbox__hint {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: rgba(10, 10, 10, 0.7);
	color: #fff;
	padding: 14px 20px 12px;
	border-radius: 14px;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	animation: f45-hint-in 200ms ease-out forwards;
}
.f45-lightbox__hint--out {
	animation: f45-hint-out 300ms ease-out forwards;
}
.f45-lightbox__hint-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.f45-lightbox__hint-icon {
	color: #fff;
	overflow: visible;
}
.f45-lightbox__hint-finger {
	animation: f45-hint-swipe 1.25s ease-in-out 2;
	transform-origin: center;
}
.f45-lightbox__hint-text {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

/* Reduced-motion: static hint, no animations, longer visible time */
.f45-lightbox__hint--static,
.f45-lightbox__hint--static .f45-lightbox__hint-finger {
	animation: none !important;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.f45-lightbox__hint,
	.f45-lightbox__hint-finger { animation: none !important; }
	.f45-lightbox__hint { opacity: 1; }
}

@keyframes f45-hint-in {
	from { opacity: 0; transform: translate(-50%, -46%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes f45-hint-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@keyframes f45-hint-swipe {
	0%   { transform: translateX(20px); }
	50%  { transform: translateX(-20px); }
	100% { transform: translateX(20px); }
}