/* =========================================================================
   JEX Galeria Flickr — front-end
   Mobile-first. Tudo controlado por variáveis CSS:
   --jx-cols, --jx-gap, --jx-ratio, --jx-rowh, --jx-radius, --jx-hero-ratio,
   --jx-sticky, --jx-overlay  e as cores --jexfg-c-*.
   ========================================================================= */

.jexfg {
	/* valores efetivos (o Elementor sobrescreve no wrapper do widget) */
	--jx-cols: var(--jexfg-cols-m, 2);
	--jx-gap: var(--jexfg-gap, 6px);
	--jx-ratio: var(--jexfg-ratio, 4/3);
	--jx-rowh: calc(var(--jexfg-rowh, 260px) * .55);
	--jx-radius: var(--jexfg-radius, 10px);
	--jx-hero-ratio: 4/5;
	--jx-sticky: 0px;
	--jx-overlay: .75;
	--jx-ease: cubic-bezier(.2, .7, .2, 1);

	/* margem lateral própria: a galeria não encosta na borda da tela
	   mesmo quando a seção do Elementor ou o tema não têm padding */
	--jx-pad-x: var(--jexfg-pad, 16px);
	--jx-max: var(--jexfg-max, none);

	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: var(--jx-max);
	margin-inline: auto;
	padding-inline: var(--jx-pad-x);
	color: var(--jexfg-c-text, #141414);
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
	.jexfg {
		--jx-cols: var(--jexfg-cols-t, 3);
		--jx-gap: var(--jexfg-gap, 10px);
		--jx-rowh: calc(var(--jexfg-rowh, 260px) * .8);
		--jx-hero-ratio: 16/9;
		--jx-pad-x: var(--jexfg-pad-t, var(--jexfg-pad, 24px));
	}
}
@media (min-width: 1025px) {
	.jexfg {
		--jx-cols: var(--jexfg-cols, 4);
		--jx-gap: var(--jexfg-gap, 12px);
		--jx-rowh: var(--jexfg-rowh, 260px);
		--jx-hero-ratio: 21/9;
		--jx-pad-x: var(--jexfg-pad-d, var(--jexfg-pad, 32px));
	}
}

.jexfg *, .jexfg *::before, .jexfg *::after,
.jexfg-lb, .jexfg-lb *, .jexfg-lb *::before, .jexfg-lb *::after { box-sizing: border-box; }
.jexfg [hidden] { display: none !important; }

.jexfg + .jexfg { margin-top: clamp(32px, 6vw, 64px); }

/* Página de galeria automática */
.jexfg-page { width: 100%; max-width: 1280px; margin-inline: auto; padding-block: clamp(24px, 4vw, 48px); box-sizing: border-box; }

.jexfg__heading {
	margin: 0 0 clamp(14px, 3vw, 24px);
	font-size: clamp(1.5rem, 4.5vw, 2.4rem);
	line-height: 1.1;
	color: inherit;
}

/* ---------- Item base ---------- */

.jexfg__items { position: relative; margin: 0; padding: 0; }

.jexfg__item {
	position: relative;
	margin: 0;
	min-width: 0;
	border-radius: var(--jx-radius);
	overflow: hidden;
	background: color-mix(in srgb, var(--jexfg-c-secondary, #141414) 8%, transparent);
	animation: jexfg-in .45s var(--jx-ease) both;
}
@keyframes jexfg-in { from { opacity: 0; transform: translateY(8px); } }

.jexfg__link {
	display: block;
	position: relative;
	height: 100%;
	color: inherit;
	text-decoration: none !important;
	outline-offset: 3px;
}
.jexfg__link:focus-visible { outline: 3px solid var(--jexfg-c-primary, #FF5A1F); }

.jexfg__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--jx-ratio);
	height: 100%;
}
.jexfg__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: transform .6s var(--jx-ease), filter .5s ease, opacity .4s ease;
}

/* ---------- Efeitos de hover (só em aparelhos com mouse) ---------- */
@media (hover: hover) {
	.jexfg--hover-zoom .jexfg__link:hover img { transform: scale(1.06); }
	.jexfg--hover-escurecer .jexfg__media::after {
		content: ""; position: absolute; inset: 0;
		background: var(--jexfg-c-secondary, #141414); opacity: 0;
		transition: opacity .35s ease;
	}
	.jexfg--hover-escurecer .jexfg__link:hover .jexfg__media::after { opacity: .35; }
	.jexfg--hover-cores .jexfg__media img { filter: grayscale(1); }
	.jexfg--hover-cores .jexfg__link:hover img { filter: none; }
}

/* ---------- Legenda das fotos ---------- */
.jexfg__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 28px 12px 10px;
	font-size: .85rem; line-height: 1.3; font-weight: 600;
	color: #fff;
	background: linear-gradient(transparent, color-mix(in srgb, var(--jexfg-c-secondary, #141414) 85%, transparent));
	pointer-events: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jexfg--caption-hover .jexfg__caption { opacity: 0; transform: translateY(6px); transition: .3s var(--jx-ease); }
@media (hover: hover) {
	.jexfg--caption-hover .jexfg__link:hover .jexfg__caption,
	.jexfg--caption-hover .jexfg__link:focus-visible .jexfg__caption { opacity: 1; transform: none; }
}
@media (hover: none) {
	/* no celular não existe hover: a legenda fica para o lightbox */
	.jexfg--caption-hover .jexfg__caption { display: none; }
}

/* ---------- Cards de álbum ---------- */
.jexfg__item--album .jexfg__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--jexfg-c-secondary, #141414) calc(var(--jx-overlay) * 100%), transparent));
	pointer-events: none;
}
.jexfg__info {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; flex-direction: column; gap: 2px;
	padding: clamp(10px, 2.5vw, 18px);
	color: #fff;
}
.jexfg__title {
	font-size: clamp(.9rem, 2.4vw, 1.15rem);
	line-height: 1.2; font-weight: 800;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	text-wrap: balance;
}
.jexfg__meta { font-size: .78rem; opacity: .85; }
.jexfg__cta {
	align-self: flex-start;
	margin-top: 8px; padding: 6px 12px;
	border-radius: 999px;
	background: var(--jexfg-c-primary, #FF5A1F); color: #fff;
	font-size: .78rem; font-weight: 700;
	display: none;
}
.jexfg__badge {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	padding: 4px 9px; border-radius: 999px;
	background: var(--jexfg-c-primary, #FF5A1F); color: #fff;
	font-size: .72rem; font-weight: 700; line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* =========================================================================
   LAYOUTS
   ========================================================================= */

/* ---- Grade ---- */
.jexfg--layout-grade .jexfg__items {
	display: grid;
	grid-template-columns: repeat(var(--jx-cols), minmax(0, 1fr));
	gap: var(--jx-gap);
}

/* ---- Destaque + grade: 1º item ocupa a linha inteira e a última
        linha sempre se estica para não deixar buraco ---- */
.jexfg--layout-destaque .jexfg__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jx-gap);
}
.jexfg--layout-destaque .jexfg__item,
.jexfg--layout-destaque .jexfg__skeleton {
	flex: 1 1 calc((100% - (var(--jx-cols) - 1) * var(--jx-gap)) / var(--jx-cols));
	min-width: calc((100% - (var(--jx-cols) - 1) * var(--jx-gap)) / var(--jx-cols));
}
.jexfg--layout-destaque .jexfg__item:not(:first-child) .jexfg__media { aspect-ratio: auto; height: 100%; min-height: calc(var(--jx-rowh) * .9); }
.jexfg--layout-destaque .jexfg__item:first-child { flex-basis: 100%; }
.jexfg--layout-destaque .jexfg__item:first-child .jexfg__media { aspect-ratio: var(--jx-hero-ratio); }
.jexfg--layout-destaque .jexfg__item--album:first-child .jexfg__info { padding: clamp(16px, 4vw, 40px); }
.jexfg--layout-destaque .jexfg__item--album:first-child .jexfg__cta { display: inline-block; font-size: .9rem; padding: 10px 18px; }
.jexfg--layout-destaque .jexfg__item--album:first-child .jexfg__badge { top: 14px; right: 14px; font-size: .8rem; }

/* ---- Vitrine: carrossel grande de destaques, um álbum por vez ---- */
.jexfg { --jx-hero-title: clamp(1.9rem, 4.6vw + .6rem, 4rem); }
.jexfg--layout-vitrine { position: relative; }
.jexfg--layout-vitrine .jexfg__items {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--jx-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--jx-radius);
}
.jexfg--layout-vitrine .jexfg__items::-webkit-scrollbar { display: none; }
.jexfg--layout-vitrine .jexfg__items:focus-visible { outline: 3px solid var(--jexfg-c-primary, #FF5A1F); outline-offset: 4px; }
.jexfg--layout-vitrine .jexfg__item { scroll-snap-align: start; scroll-snap-stop: always; animation: none; }
.jexfg--layout-vitrine .jexfg__media {
	aspect-ratio: var(--jx-hero-ratio);
	min-height: 320px;
	max-height: 80vh;
	max-width: 100%;
}
.jexfg--layout-vitrine .jexfg__item--album .jexfg__media::after {
	background: linear-gradient(180deg,
		transparent 25%,
		color-mix(in srgb, var(--jexfg-c-secondary, #141414) 45%, transparent) 55%,
		color-mix(in srgb, var(--jexfg-c-secondary, #141414) 92%, transparent) 100%);
}
.jexfg--layout-vitrine .jexfg__info {
	gap: 6px;
	padding: clamp(20px, 5vw, 56px);
	padding-bottom: clamp(44px, 6vw, 64px); /* espaço para as bolinhas */
}
/* Título sempre inteiro e legível, em qualquer tela */
.jexfg--layout-vitrine .jexfg__title,
.jexfg--layout-destaque .jexfg__item--album:first-child .jexfg__title {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	max-width: 16em;
	font-size: var(--jx-hero-title);
	line-height: 1.02;
	font-weight: 900;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
	hyphens: auto;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.jexfg--layout-vitrine .jexfg__meta { font-size: clamp(.8rem, 1.6vw, 1rem); }
.jexfg--layout-vitrine .jexfg__cta {
	display: inline-flex; align-items: center; min-height: 44px;
	margin-top: 10px; padding: 0 22px; font-size: .95rem;
}
.jexfg--layout-vitrine .jexfg__badge { top: 16px; right: 16px; font-size: .8rem; padding: 6px 12px; }
.jexfg--layout-vitrine .jexfg__nav {
	display: inline-flex;
	top: auto; bottom: clamp(12px, 2.5vw, 24px); margin-top: 0;
	width: 48px; height: 48px;
}
.jexfg--layout-vitrine .jexfg__nav--next { right: clamp(12px, 2.5vw, 24px); }
.jexfg--layout-vitrine .jexfg__nav--prev { left: auto; right: calc(clamp(12px, 2.5vw, 24px) + 56px); }
@media (max-width: 767px) {
	.jexfg--layout-vitrine .jexfg__nav { width: 40px; height: 40px; }
	.jexfg--layout-vitrine .jexfg__nav--prev { right: calc(clamp(12px, 2.5vw, 24px) + 48px); }
}
.jexfg__dots {
	position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
	display: flex; justify-content: center; gap: 2px;
	pointer-events: none;
}
.jexfg__dots button {
	pointer-events: auto;
	width: 24px; height: 24px; padding: 0; margin: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 0; cursor: pointer;
}
.jexfg__dots button::before {
	content: ""; width: 8px; height: 8px; border-radius: 999px;
	background: rgba(255,255,255,.55);
	transition: width .25s var(--jx-ease), background-color .25s;
}
.jexfg__dots button[aria-current="true"]::before { width: 22px; background: var(--jexfg-c-primary, #FF5A1F); }
.jexfg__dots button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 999px; }
@media (max-width: 767px) {
	.jexfg__dots { justify-content: flex-start; left: 14px; bottom: 16px; }
	.jexfg--layout-vitrine .jexfg__info { padding-bottom: 64px; }
}

/* ---- Masonry (alturas naturais) ---- */
.jexfg--layout-masonry .jexfg__items {
	columns: var(--jx-cols);
	column-gap: var(--jx-gap);
}
.jexfg--layout-masonry .jexfg__item {
	break-inside: avoid;
	margin-bottom: var(--jx-gap);
	display: block;
}
.jexfg--layout-masonry .jexfg__media { aspect-ratio: var(--ar); }

/* ---- Justificado (linhas com mesma altura, estilo Flickr) ---- */
.jexfg--layout-justificado .jexfg__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jx-gap);
}
.jexfg--layout-justificado .jexfg__items::after { content: ""; flex-grow: 999999; }
.jexfg--layout-justificado .jexfg__item {
	flex-grow: var(--ar);
	flex-basis: calc(var(--jx-rowh) * var(--ar));
	max-width: 100%;
}
.jexfg--layout-justificado .jexfg__media { aspect-ratio: var(--ar); }

/* ---- Mosaico ---- */
.jexfg--layout-mosaico .jexfg__items {
	display: grid;
	grid-template-columns: repeat(var(--jx-cols), minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: var(--jx-gap);
}
.jexfg--layout-mosaico .jexfg__media { aspect-ratio: 1; }
.jexfg--layout-mosaico .jexfg__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.jexfg--layout-mosaico .jexfg__item:nth-child(6n + 4) { grid-column: span 2; }
.jexfg--layout-mosaico .jexfg__item:nth-child(6n + 4) .jexfg__media { aspect-ratio: 2 / 1; }
.jexfg--layout-mosaico .jexfg__item--album .jexfg__title { font-size: clamp(.85rem, 2vw, 1rem); }
.jexfg--layout-mosaico .jexfg__item:nth-child(6n + 1) .jexfg__title { font-size: clamp(1.1rem, 3vw, 1.6rem); }

/* ---- Carrossel (deslizar com o dedo, setas no desktop) ---- */
.jexfg--layout-carrossel { position: relative; }
.jexfg--layout-carrossel .jexfg__items {
	display: grid;
	grid-auto-flow: column;
	/* mostra um pedacinho do próximo card: dica visual de que dá para deslizar */
	grid-auto-columns: calc((100% - var(--jx-gap) * var(--jx-cols)) / (var(--jx-cols) + .18));
	gap: var(--jx-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}
.jexfg--layout-carrossel .jexfg__items::-webkit-scrollbar { display: none; }
.jexfg--layout-carrossel .jexfg__item { scroll-snap-align: start; animation: none; }
.jexfg--layout-carrossel .jexfg__items:focus-visible { outline: 3px solid var(--jexfg-c-primary, #FF5A1F); outline-offset: 4px; }

.jexfg__nav {
	position: absolute; top: 50%; z-index: 3;
	width: 44px; height: 44px; margin-top: -22px;
	display: none; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: #fff; color: var(--jexfg-c-secondary, #141414);
	box-shadow: 0 6px 20px rgba(0,0,0,.18);
	transition: opacity .2s, transform .2s;
}
.jexfg__nav::before {
	content: ""; width: 10px; height: 10px;
	border: solid currentColor; border-width: 0 3px 3px 0;
	transform: rotate(135deg); margin-left: 4px;
}
.jexfg__nav--next::before { transform: rotate(-45deg); margin: 0 4px 0 0; }
.jexfg__nav--prev { left: 8px; }
.jexfg__nav--next { right: 8px; }
.jexfg__nav:hover { background: var(--jexfg-c-primary, #FF5A1F); color: #fff; }
.jexfg__nav[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 768px) { .jexfg__nav { display: inline-flex; } }

/* =========================================================================
   Busca, botões, cabeçalho do álbum
   ========================================================================= */

/* Busca: a moldura (borda, fundo, arredondado) fica no contêiner e a lupa
   e o campo ficam lado a lado com flex. Assim, mesmo que o tema do site
   mude o padding ou a borda dos campos de busca, a lupa nunca fica por cima
   do texto. */
.jexfg .jexfg__search {
	display: flex; align-items: center; gap: 12px;
	position: relative;
	height: 52px;
	margin: 0 0 var(--jx-gap);
	padding: 0 20px 0 18px;
	background: var(--jexfg-c-bg, #fff);
	border: 2px solid color-mix(in srgb, var(--jexfg-c-text, #141414) 14%, transparent);
	border-radius: 999px;
	color: color-mix(in srgb, var(--jexfg-c-text, #141414) 55%, transparent);
	transition: border-color .2s;
	cursor: text;
}
.jexfg .jexfg__search:focus-within { border-color: var(--jexfg-c-primary, #FF5A1F); color: var(--jexfg-c-primary, #FF5A1F); }
.jexfg .jexfg__search-icon {
	position: static; flex: none;
	width: 20px; height: 20px; margin: 0;
	pointer-events: none;
}
/* :not(#jexfg-x) dá peso de ID ao seletor e vence as regras de campo do tema/Elementor */
.jexfg .jexfg__search input:not(#jexfg-x) {
	flex: 1 1 auto; min-width: 0; align-self: stretch;
	display: block; width: auto !important; height: auto !important; min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	font: inherit; font-size: 16px !important; line-height: normal !important; /* 16px evita zoom automático no iPhone */
	color: var(--jexfg-c-text, #141414) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	text-indent: 0 !important;
	min-width: 0 !important; max-width: none !important;
	position: static !important;
	-webkit-appearance: none; appearance: none;
}
.jexfg .jexfg__search input:not(#jexfg-x)::placeholder { color: color-mix(in srgb, var(--jexfg-c-text, #141414) 50%, transparent) !important; opacity: 1; }
.jexfg .jexfg__search input:not(#jexfg-x)::-webkit-search-decoration { -webkit-appearance: none; }
.jexfg .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.jexfg__more { display: flex; justify-content: center; margin-top: clamp(16px, 4vw, 28px); }
.jexfg__btn, .jexfg__back, .jexfg__flickr {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 28px;
	font: inherit; font-weight: 700; font-size: .95rem; line-height: 1;
	border-radius: 999px; cursor: pointer;
	text-decoration: none !important;
	transition: background-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.jexfg__btn {
	color: #fff;
	background: var(--jexfg-c-primary, #FF5A1F);
	border: 2px solid var(--jexfg-c-primary, #FF5A1F);
}
.jexfg__btn:hover { filter: brightness(1.08); box-shadow: 0 8px 22px color-mix(in srgb, var(--jexfg-c-primary, #FF5A1F) 40%, transparent); }
.jexfg__btn:active, .jexfg__back:active { transform: scale(.97); }
.jexfg__btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.jexfg__btn[aria-busy="true"]::before {
	content: ""; width: 16px; height: 16px;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
	animation: jexfg-spin .7s linear infinite;
}
@keyframes jexfg-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) { .jexfg__more .jexfg__btn { width: 100%; } }

.jexfg__albumhead {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 var(--jx-gap);
	padding: 10px 0;
}
.jexfg__view--album .jexfg__albumhead {
	position: sticky; top: var(--jx-sticky); z-index: 20;
	margin-inline: -4px; padding: 10px 4px;
	background: var(--jexfg-c-bg, #fff);
	box-shadow: 0 10px 18px -18px rgba(0,0,0,.6);
}
.jexfg__albumhead-text { flex: 1; min-width: 0; }
.jexfg__albumtitle {
	margin: 0; font-size: clamp(1.05rem, 3.5vw, 1.6rem); line-height: 1.15;
	color: inherit;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jexfg__back {
	flex: none;
	width: 48px; padding: 0;
	color: #fff;
	background: var(--jexfg-c-secondary, #141414);
	border: 0;
}
.jexfg__back::before {
	content: ""; width: 11px; height: 11px;
	border: solid currentColor; border-width: 0 0 3px 3px;
	transform: rotate(45deg); margin-left: 4px;
}
.jexfg__back:hover { background: var(--jexfg-c-primary, #FF5A1F); }
.jexfg__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 768px) {
	.jexfg__back { width: auto; padding: 0 20px 0 16px; }
	.jexfg__back span { position: static; width: auto; height: auto; clip: auto; }
}
.jexfg__flickr {
	flex: none; min-height: 40px; padding: 0 16px; font-size: .85rem;
	color: var(--jexfg-c-text, #141414);
	border: 2px solid color-mix(in srgb, var(--jexfg-c-text, #141414) 18%, transparent);
	background: transparent;
}
.jexfg__flickr:hover { border-color: var(--jexfg-c-primary, #FF5A1F); color: var(--jexfg-c-primary, #FF5A1F); }
@media (max-width: 480px) { .jexfg__albumhead .jexfg__flickr { display: none; } }

/* ---------- Esqueleto de carregamento ---------- */
.jexfg__skeleton {
	border-radius: var(--jx-radius);
	aspect-ratio: var(--jx-ratio);
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--jexfg-c-text, #141414) 6%, transparent) 30%,
		color-mix(in srgb, var(--jexfg-c-text, #141414) 12%, transparent) 50%,
		color-mix(in srgb, var(--jexfg-c-text, #141414) 6%, transparent) 70%);
	background-size: 300% 100%;
	animation: jexfg-shimmer 1.3s linear infinite;
}
.jexfg--layout-justificado .jexfg__skeleton { flex: 1 1 calc(var(--jx-rowh) * 1.4); aspect-ratio: auto; height: var(--jx-rowh); }
.jexfg--layout-masonry .jexfg__skeleton { margin-bottom: var(--jx-gap); }
@keyframes jexfg-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.jexfg__empty, .jexfg__error { padding: 24px 0; text-align: center; opacity: .75; }
.jexfg__sentinel { height: 1px; }

.jexfg-notice {
	padding: 14px 18px; border-left: 4px solid #d63638;
	background: #fff4f4; color: #1d2327; font-size: 14px;
}
.jexfg-notice--soft { border-color: #ccc; background: #f6f6f6; }

/* =========================================================================
   LIGHTBOX (tela cheia) — pensado primeiro para o toque
   ========================================================================= */

.jexfg-lb {
	position: fixed; inset: 0; z-index: 999999;
	display: flex; flex-direction: column;
	background: color-mix(in srgb, var(--jexfg-c-secondary, #0b0b0b) 70%, #000);
	color: #fff;
	opacity: 0; visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
	touch-action: none;
	-webkit-user-select: none; user-select: none;
	font-family: inherit;
}
.jexfg-lb.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.jexfg-lb__bar {
	display: flex; align-items: center; gap: 8px;
	padding: max(8px, env(safe-area-inset-top)) 8px 8px;
	position: relative; z-index: 3;
}
.jexfg-lb__count { flex: 1; padding-left: 8px; font-size: .9rem; font-variant-numeric: tabular-nums; opacity: .85; }
.jexfg-lb__btn {
	width: 48px; height: 48px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.08); color: #fff;
	text-decoration: none !important;
	transition: background .2s;
}
.jexfg-lb__btn:hover, .jexfg-lb__btn:focus-visible { background: var(--jexfg-c-primary, #FF5A1F); outline: none; }
.jexfg-lb__btn svg { width: 22px; height: 22px; }

.jexfg-lb__stage {
	position: relative; flex: 1; min-height: 0;
	overflow: hidden;
}
.jexfg-lb__track {
	display: flex; height: 100%;
	will-change: transform;
}
.jexfg-lb__slide {
	flex: 0 0 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	padding: 0 4px;
}
.jexfg-lb__slide img {
	max-width: 100%; max-height: 100%;
	width: auto; height: auto;
	object-fit: contain;
	border-radius: 4px;
	transition: transform .25s ease;
	-webkit-user-drag: none;
}
.jexfg-lb__slide img.is-zoomed { transform: scale(2); cursor: zoom-out; }
.jexfg-lb__spinner {
	position: absolute; width: 36px; height: 36px;
	border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%;
	animation: jexfg-spin .8s linear infinite;
}
.jexfg-lb__arrow {
	position: absolute; top: 50%; z-index: 2; margin-top: -28px;
	width: 56px; height: 56px;
	display: none;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(0,0,0,.35); color: #fff;
}
.jexfg-lb__arrow::before {
	content: ""; display: block; width: 14px; height: 14px; margin: auto;
	border: solid currentColor; border-width: 0 3px 3px 0;
	transform: translateX(3px) rotate(135deg);
}
.jexfg-lb__arrow--next::before { transform: translateX(-3px) rotate(-45deg); }
.jexfg-lb__arrow--prev { left: 16px; }
.jexfg-lb__arrow--next { right: 16px; }
.jexfg-lb__arrow:hover { background: var(--jexfg-c-primary, #FF5A1F); }
@media (hover: hover) and (min-width: 768px) { .jexfg-lb__arrow { display: block; } }

.jexfg-lb__caption {
	position: relative; z-index: 3;
	padding: 12px 16px max(14px, env(safe-area-inset-bottom));
	max-height: 30vh; overflow-y: auto;
	text-align: center;
}
.jexfg-lb__title { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.jexfg-lb__desc { display: block; margin-top: 4px; font-size: .85rem; opacity: .75; line-height: 1.4; }
.jexfg-lb__caption:empty { padding: 0 0 max(10px, env(safe-area-inset-bottom)); }
.jexfg-lb__hint {
	position: absolute; left: 50%; bottom: 18%; z-index: 4;
	transform: translateX(-50%);
	padding: 8px 14px; border-radius: 999px;
	background: rgba(0,0,0,.6); font-size: .8rem;
	pointer-events: none;
	animation: jexfg-hint 2.6s ease forwards;
}
@keyframes jexfg-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

html.jexfg-lock, html.jexfg-lock body { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
	.jexfg *, .jexfg-lb, .jexfg-lb * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}