/* Galeria de telas do live e do instalador.
   Compartilhada entre a home (index.html) e a documentação (docs.html). */

/* ---- Galeria / Lightbox ---- */
.btn-view {
	display: inline-flex; height: 2.25rem; align-items: center; justify-content: center;
	gap: .45rem; padding: 0 .85rem; border-radius: .55rem; margin-top: auto;
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent); font-size: .8rem; font-weight: 600; transition: all .2s;
}
.btn-view:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-2px); }
.btn-view:active { transform: translateY(0); }
.btn-view .ti { font-size: 1rem; }
.btn-view .btn-count {
	font: 500 .68rem "JetBrains Mono", monospace; color: var(--fg-dim);
	padding: .05rem .4rem; border-radius: 999px; background: color-mix(in srgb, var(--bg) 45%, transparent);
}
.card-cta { display: flex; padding-top: 1.1rem; }

.lb {
	position: fixed; inset: 0; z-index: 200;
	display: flex; flex-direction: column;
	padding: clamp(.5rem, 2vw, 1.5rem);
	background: color-mix(in srgb, var(--bg) 72%, rgba(4, 4, 20, .82));
	backdrop-filter: blur(18px) saturate(120%);
	opacity: 0; visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.lb[hidden] { display: none; }
.lb.open { opacity: 1; visibility: visible; transition: opacity .25s ease; }
body.lb-open { overflow: hidden; }

.lb-top { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.lb-heading { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.lb-heading-icon {
	width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: .65rem; display: grid; place-items: center;
	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent); font-size: 1.15rem;
}
.lb-titles { min-width: 0; }
.lb-title { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-subtitle { font: 500 .68rem "JetBrains Mono", monospace; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-top-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.lb-counter {
	font: 500 .72rem "JetBrains Mono", monospace; color: var(--fg-dim);
	padding: .3rem .7rem; border-radius: 999px;
	border: 1px solid var(--border); background: var(--surface);
}
.lb-counter b { color: var(--accent); font-weight: 600; }
.lb-btn {
	width: 2.4rem; height: 2.4rem; flex: 0 0 auto; display: grid; place-items: center;
	border-radius: .6rem; border: 1px solid var(--border);
	background: var(--surface); color: var(--fg-dim);
	font-size: 1.15rem; transition: all .2s;
}
.lb-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface-2); }
.lb-btn:focus-visible, .lb-thumb:focus-visible, .btn-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-close:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.lb-stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; padding: .5rem 3.5rem; container-type: size; }
.lb-frame {
	position: relative; flex: 0 1 auto; margin-inline: auto;
	width: 100%; max-width: min(100cqw, calc(100cqh * 1280 / 719));
	aspect-ratio: 1280 / 719; max-height: 100%;
	display: flex; border-radius: 1rem; overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
	background: var(--bg2); box-shadow: 0 24px 70px -20px rgba(0,0,0,.7);
}
.lb-frame img {
	display: block; width: 100%; height: 100%;
	object-fit: contain; background: var(--bg2);
	user-select: none; -webkit-user-drag: none;
	transition: opacity .22s ease, transform .22s ease;
}
.lb-frame.loading::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
	background-size: 200% 100%; animation: lb-shimmer 1.3s linear infinite;
}
@keyframes lb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.lb-frame.swap img { opacity: 0; transform: scale(.995); }

.lb-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
	border-radius: 999px; font-size: 1.4rem;
	border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(10px); color: var(--fg);
	box-shadow: var(--shadow-card); transition: all .2s;
}
.lb-nav:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-50%) scale(1.06); }
.lb-nav:disabled { opacity: .3; cursor: not-allowed; }
.lb-nav:disabled:hover { background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--fg); transform: translateY(-50%); }
.lb-prev { left: .25rem; }
.lb-next { right: .25rem; }

.lb-bottom { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.lb-caption { text-align: center; font-size: .84rem; color: var(--fg-dim); }
.lb-caption b { color: var(--fg); font-weight: 600; }
.lb-hint { display: flex; align-items: center; gap: .4rem; font: 500 .64rem "JetBrains Mono", monospace; color: var(--faint); }
.lb-hint kbd {
	font: inherit; padding: .1rem .35rem; border-radius: .3rem;
	border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-dim);
}
.lb-thumbs {
	display: flex; gap: .4rem; overflow-x: auto; max-width: 100%;
	padding: .35rem; border-radius: .75rem; scrollbar-width: thin;
	border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
	background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.lb-thumbs::-webkit-scrollbar { height: 6px; }
.lb-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.lb-thumb {
	flex: 0 0 auto; width: 4.75rem; aspect-ratio: 16 / 9; padding: 0;
	border-radius: .45rem; overflow: hidden; position: relative;
	border: 1px solid var(--border); background: var(--bg2); opacity: .5; transition: all .2s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .85; transform: translateY(-2px); }
.lb-thumb.active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.lb-thumb .lb-num {
	position: absolute; right: .2rem; bottom: .2rem;
	font: 600 .58rem "JetBrains Mono", monospace; color: var(--fg);
	padding: 0 .3rem; border-radius: .3rem; background: color-mix(in srgb, var(--bg) 78%, transparent);
}

@media (max-width: 680px) {
	.lb-subtitle, .lb-hint { display: none; }
	.lb-counter { padding: .3rem .55rem; }
	.lb-nav { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; }
	.lb-prev { left: 0; }
	.lb-next { right: 0; }
	.lb-stage { padding: .25rem 2.6rem; }
	.lb-title { font-size: .82rem; }
	.lb-thumb { width: 3.5rem; }
}