/* ===== Galeria — Cine Super K ===== */
:root{
  --brand-1:#6f7cff; --brand-2:#705cfc;
  --ink-1:#fff; --ink-2:#eaeef7; --ink-3:#cbd3e1; --muted:#9aa6bf;
  --card-a:#141720; --card-b:#11141a; --stroke-1:rgba(255,255,255,.08);
}

/* Container/hero */
.section-galeria .container{max-width:1140px;}
.gal-hero{max-width:920px;margin-inline:auto;text-align:center;}
.gal-headline{
  font-weight:800;font-size:clamp(2.1rem,3.8vw,3.1rem);margin:0 0 8px;
  background:linear-gradient(180deg,var(--ink-1) 0%,#dfe2ff 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 10px 36px rgba(112,92,252,.28);
}
.gal-underline{
  height:3px;width:180px;margin:12px auto 14px;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--brand-1),var(--brand-2),transparent);
  filter:drop-shadow(0 0 12px rgba(112,92,252,.5));
}
.gal-caption{font-size:1.06rem;color:var(--muted);}

/* Grid responsivo (1–4 colunas) */
.gallery-grid{
  --gap:14px;
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(1, 1fr);
  list-style:none; padding:0; margin:0;
}
@media (min-width: 576px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (min-width: 992px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (min-width: 1200px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr);} }

/* Card da foto */
.gal-card{
  width:100%; border:0; padding:0; background:transparent; text-align:inherit;
  cursor:pointer;
}
.gal-fig{
  position:relative; overflow:hidden; border-radius:16px;
  background:linear-gradient(180deg,var(--card-a),var(--card-b));
  border:1px solid var(--stroke-1);
  box-shadow:0 12px 28px rgba(0,0,0,.30);
}
.gal-img{
  display:block; width:100%; height:280px; object-fit:cover; object-position:center;
  transition: transform .35s ease, opacity .3s ease;
}
@media (max-width:576px){ .gal-img{ height:210px; } }

/* Hover com overlay */
.gal-fig::before{
  content:""; position:absolute; inset:auto 0 0 0; height:56%;
  background:linear-gradient(0deg, rgba(11,13,18,.80), rgba(11,13,18,0));
  opacity:.0; transition:opacity .25s ease;
}
.gal-cap{
  position:absolute; left:12px; right:12px; bottom:10px;
  color:var(--ink-2); font-size:.95rem; line-height:1.35;
  transform: translateY(10px); opacity:0; transition: .25s ease;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.gal-card:hover .gal-img{ transform: scale(1.03); }
.gal-card:hover .gal-fig::before{ opacity:1; }
.gal-card:hover .gal-cap{ transform: translateY(0); opacity:1; }

/* ===== Lightbox (modal) ===== */
.gal-modal .modal-content{
  background: linear-gradient(180deg, #0b0d12, #11141a);
  border:1px solid var(--stroke-1); border-radius:16px; overflow:hidden;
}
.gal-modal-header{
  display:flex; justify-content:flex-end; padding:8px;
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.gal-close{
  border:1px solid rgba(255,255,255,.12); color:#fff; border-radius:12px; background:rgba(255,255,255,.06);
  padding:8px 10px;
}
.gal-close:hover{ background:rgba(255,255,255,.12); }

.gal-modal-body{
  position:relative; padding:14px 56px; /* espaço para botões prev/next */
}
.gal-prev, .gal-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:12px; color:#fff;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
}
/* .gal-prev:hover, .gal-next:hover{ background:rgba(255,255,255,.12); }
.gal-prev{ left:10px; } .gal-next{ right:10px; } */

.gal-stage{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.gal-stage-img{
  max-width:100%; height:auto; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.gal-stage-cap{ color:var(--ink-3); text-align:center; font-size:.98rem; }

@media (max-width:576px){
  .gal-modal-body{ padding:12px 44px; }
  .gal-prev, .gal-next{ width:40px; height:40px; }
}


/* ===== Fallback para modal SEM Bootstrap ===== */
.gal-modal:not(.show){ display:none; }   /* escondida por padrão */
.gal-modal.show {
  display:block;
}
.gal-modal.show .modal-dialog {
  /* garante centralização mesmo sem CSS do Bootstrap */
  max-width: min(1200px, 96vw);
  width: auto;
  margin: 4vh auto;
}
.gal-modal.fallback-open {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,.6);
  overflow-y: auto;
}
body.modal-open { overflow: hidden; } /* bloqueia scroll atrás */

/* se o Bootstrap CSS não existir, assegura um layout aceitável */
.gal-modal .modal-dialog { width: auto; margin: 4vh auto; }
.gal-modal .modal-content {
  margin: 0 2vw;
}


/* ===== Ajustes pedid os: prev/next sem animação e ícone central ===== */
.gal-prev,
.gal-next{
  /* mantém posicionamento e aparência geral */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);      /* só para centralizar verticalmente no container */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);

  /* centraliza ícone perfeitamente */
  display: flex;
  align-items: center;
  justify-content: center;

  /* remove qualquer animação/transição */
  transition: none !important;
}
.gal-prev i,
.gal-next i{
  /* garante ícone centrado sem animações */
  display: inline-block;
  line-height: 1;
  font-size: 1.1rem;
  transition: none !important;
}

/* posicionamento lateral */
.gal-prev{ left: 10px; }
.gal-next{ right: 10px; }

/* remove “efeito hover” animado (mantém apenas leve realce estático, se quiser pode tirar) */
/* .gal-prev:hover,
.gal-next:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  transition: none !important;
} */

/* mobile: mantém proporções */
@media (max-width: 576px){
  .gal-prev,
  .gal-next{
    width: 40px;
    height: 40px;
  }
}