/* ============================================================
   assets/galeria.css — Carrossel da home + galeria + lightbox
   Casos Ufológicos · usa os tokens já definidos no style.css
   (--neon, --line, --txt-dim, --bg-2, --f-display, --f-mono, --f-body)
   ============================================================ */

/* ── Faixa do carrossel na home ───────────────────────────── */
.gal-faixa { position: relative; }
.gal-faixa__wrap { position: relative; }

.gal-trilho {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 243, 255, .35) transparent;
}
.gal-trilho::-webkit-scrollbar { height: 6px; }
.gal-trilho::-webkit-scrollbar-track { background: transparent; }
.gal-trilho::-webkit-scrollbar-thumb { background: rgba(0, 243, 255, .3); border-radius: 3px; }

.gal-item--slide { flex: 0 0 auto; width: 260px; scroll-snap-align: start; }
@media (max-width: 520px) { .gal-item--slide { width: 76vw; max-width: 300px; } }

/* Setas */
.gal-seta {
  position: absolute; top: 38%; transform: translateY(-50%);
  z-index: 3; width: 38px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 16, .82); color: var(--neon, #00f3ff);
  border: 1px solid var(--line, rgba(0, 243, 255, .2)); border-radius: 6px;
  font-family: var(--f-mono, monospace); font-size: 1.1rem; cursor: pointer;
  transition: background .18s, border-color .18s, opacity .18s;
}
.gal-seta:hover { background: rgba(0, 243, 255, .12); border-color: var(--neon, #00f3ff); }
.gal-seta:focus-visible { outline: 2px solid var(--neon, #00f3ff); outline-offset: 2px; }
.gal-seta--prev { left: -6px; }
.gal-seta--next { right: -6px; }
.gal-seta[hidden] { display: none; }
@media (max-width: 680px) { .gal-seta { display: none; } }

/* ── Grade da galeria ─────────────────────────────────────── */
.gal-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ── Card (comum aos dois contextos) ──────────────────────── */
.gal-item {
  display: flex; flex-direction: column;
  padding: 0; margin: 0; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(0, 243, 255, .035), transparent);
  border: 1px solid var(--line, rgba(0, 243, 255, .2));
  border-radius: 12px; overflow: hidden;
  color: inherit; font: inherit;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.gal-item:hover, .gal-item:focus-visible {
  border-color: var(--neon, #00f3ff);
  box-shadow: 0 0 22px rgba(0, 243, 255, .12);
  transform: translateY(-2px);
}
.gal-item:focus-visible { outline: 2px solid var(--neon, #00f3ff); outline-offset: 2px; }

.gal-thumb {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 3; background: #070b15; overflow: hidden;
}
.gal-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.gal-play {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 16, .72); border: 1px solid var(--neon, #00f3ff);
  color: var(--neon, #00f3ff); font-size: .9rem; pointer-events: none;
}
.gal-cap { display: block; padding: .6rem .75rem .7rem; }
.gal-cap__tit {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--f-body, sans-serif); font-size: .92rem; font-weight: 600;
  color: #eaf2ff; line-height: 1.3;
}
.gal-cap__leg {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .25rem;
  font-family: var(--f-body, sans-serif); font-size: .8rem;
  color: var(--txt-dim, #7d93b4); line-height: 1.4;
}

/* ── Lightbox ─────────────────────────────────────────────── */
.gal-lb {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 5, 12, .94);
  padding: 20px;
}
.gal-lb[hidden] { display: none; }
.gal-lb__box {
  position: relative;
  max-width: min(1100px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column; gap: 10px;
}
.gal-lb__midia {
  display: flex; align-items: center; justify-content: center;
  max-height: 72vh; min-height: 120px;
}
.gal-lb__midia img, .gal-lb__midia video {
  max-width: 100%; max-height: 72vh;
  width: auto; height: auto;
  border: 1px solid var(--line, rgba(0, 243, 255, .2)); border-radius: 8px;
  background: #050810;
}
.gal-lb__info {
  font-family: var(--f-body, sans-serif); color: #eaf2ff;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.gal-lb__tit { font-size: 1rem; font-weight: 600; margin: 0; }
.gal-lb__leg { font-size: .88rem; color: var(--txt-dim, #7d93b4); margin: 0; flex: 1 1 260px; }
.gal-lb__cred {
  font-family: var(--f-mono, monospace); font-size: .68rem;
  letter-spacing: 1px; text-transform: uppercase; color: var(--txt-dim, #7d93b4);
}
.gal-lb__cta {
  display: inline-block; text-decoration: none;
  font-family: var(--f-display, sans-serif); font-size: .68rem;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  background: var(--neon, #00f3ff); color: #021016;
  border-radius: 6px; padding: 10px 18px; white-space: nowrap;
}
.gal-lb__cta:hover { filter: brightness(1.1); }
.gal-lb__cta[hidden] { display: none; }

.gal-lb__btn {
  position: absolute; z-index: 2;
  background: rgba(5, 8, 16, .85); color: var(--neon, #00f3ff);
  border: 1px solid var(--line, rgba(0, 243, 255, .25)); border-radius: 6px;
  font-family: var(--f-mono, monospace); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s;
}
.gal-lb__btn:hover { background: rgba(0, 243, 255, .14); border-color: var(--neon, #00f3ff); }
.gal-lb__btn:focus-visible { outline: 2px solid var(--neon, #00f3ff); outline-offset: 2px; }
.gal-lb__fechar { top: -6px; right: -6px; width: 40px; height: 40px; font-size: 1.05rem; }
.gal-lb__nav { top: 36%; width: 40px; height: 58px; font-size: 1.15rem; }
.gal-lb__nav--prev { left: -52px; }
.gal-lb__nav--next { right: -52px; }
.gal-lb__nav[hidden] { display: none; }
@media (max-width: 900px) {
  .gal-lb__nav--prev { left: 2px; }
  .gal-lb__nav--next { right: 2px; }
  .gal-lb__fechar { top: 2px; right: 2px; }
}

body.gal-travado { overflow: hidden !important; }

/* ── Paginação da galeria ─────────────────────────────────── */
.gal-pag {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; align-items: center; margin-top: 30px;
}
.gal-pag a, .gal-pag span {
  font-family: var(--f-mono, monospace); font-size: .78rem;
  padding: 8px 13px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--line, rgba(0, 243, 255, .2)); color: var(--txt-dim, #7d93b4);
}
.gal-pag a:hover { border-color: var(--neon, #00f3ff); color: var(--neon, #00f3ff); }
.gal-pag .gal-pag--on { background: rgba(0, 243, 255, .12); border-color: var(--neon, #00f3ff); color: var(--neon, #00f3ff); }

.gal-vazio {
  font-family: var(--f-body, sans-serif); color: var(--txt-dim, #7d93b4);
  text-align: center; padding: 30px 10px;
}

@media (prefers-reduced-motion: reduce) {
  .gal-trilho { scroll-behavior: auto; }
  .gal-item, .gal-seta, .gal-lb__btn { transition: none; }
}