/*
 * Tema do lightbox dos sites StudioWeb (PhotoSwipe v5) com a aparência do GLightbox que os sites usavam
 * (fundo preto a 92%, botões translúcidos de cantos arredondados, legenda em caixa branca), alvos de toque
 * de 44 px, safe-area do celular, 100dvh e a cor de destaque do site (--sw-accent).
 * Vive no plugin base e vai com a biblioteca "spotlight": o fallback sem o plugin studioweb-spotlight
 * (desativado ou desinstalado) abre o mesmo diálogo de hoje, com as legendas data-description.
 * Novo layout só depois da aprovação do usuário.
 */
:root {
	--sw-accent: var(--bs-primary, #2271b1);
}

.pswp {
	/* Acima do cabeçalho fixo e dos botões flutuantes do site, como o GLightbox (999999) */
	z-index: 1000000;
	--pswp-bg: #000;
	--pswp-icon-color: #fff;
	--pswp-icon-color-secondary: #000;
	--pswp-icon-stroke-color: transparent;
	--pswp-icon-stroke-width: 0;
	width: 100%;
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.pswp *,
.pswp *::before,
.pswp *::after {
	box-sizing: border-box;
}

/* Sem contador, como no GLightbox */
.pswp__counter {
	display: none;
}

.pswp__top-bar {
	height: calc(60px + env(safe-area-inset-top, 0px));
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
	align-items: flex-start;
}

/* Botões: fundo preto translúcido e cantos de 4 px (GLightbox "clean"), alvo mínimo de 44 px */
.pswp__button {
	position: relative;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	margin: 15px 10px 0 0;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.32);
	opacity: 1;
	transition: background-color 0.15s ease;
}

.pswp__button:hover,
.pswp__button:active {
	background-color: rgba(0, 0, 0, 0.7);
	opacity: 1;
}

.pswp__button:focus-visible,
.pswp [tabindex]:focus-visible {
	outline: 2px solid var(--sw-accent, #2271b1);
	outline-offset: 2px;
	background-color: rgba(0, 0, 0, 0.7);
}

.pswp__button .pswp__icn {
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: 0;
	transform: translate(-50%, -50%);
}

.pswp__button--arrow {
	position: absolute;
	top: 45%;
	width: 44px;
	height: 50px;
	margin: 0;
	transform: translateY(-50%);
}

/* No celular as setas continuam visíveis (no GLightbox também ficavam), com alvo de 44 px */
.pswp--touch .pswp__button--arrow {
	visibility: visible;
}

.pswp__button--arrow .pswp__icn {
	top: 50%;
	width: 32px;
	height: 32px;
	margin: 0;
}

.pswp__button--arrow--prev {
	left: calc(30px + env(safe-area-inset-left, 0px));
}

.pswp__button--arrow--next {
	right: calc(30px + env(safe-area-inset-right, 0px));
}

.pswp__button--arrow--next .pswp__icn {
	right: auto;
	transform: translate(-50%, -50%) scale(-1, 1);
}

/* Legenda (data-description): caixa branca, texto escuro, como no GLightbox no computador */
.sw-spotlight-caption {
	position: absolute;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	width: min(900px, calc(100% - 40px));
	transform: translateX(-50%);
	padding: 22px 20px;
	background: #fff;
	color: #000;
	font-family: arial, sans-serif;
	font-size: 1em;
	line-height: 1.4em;
	overflow-wrap: anywhere;
	pointer-events: none;
}

.sw-spotlight-caption[hidden],
.pswp--zoomed-in .sw-spotlight-caption {
	display: none;
}

/* Celular: legenda em degradê sobre a foto (como o GLightbox no celular) e setas mais junto da borda */
@media (max-width: 768px) {
	.pswp__button--arrow--prev {
		left: calc(8px + env(safe-area-inset-left, 0px));
	}

	.pswp__button--arrow--next {
		right: calc(8px + env(safe-area-inset-right, 0px));
	}

	.sw-spotlight-caption {
		left: 0;
		bottom: 0;
		width: 100%;
		transform: none;
		padding: 19px calc(11px + env(safe-area-inset-right, 0px)) calc(19px + env(safe-area-inset-bottom, 0px)) calc(11px + env(safe-area-inset-left, 0px));
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.75) 100%);
		color: #fff;
	}
}