/* =====================================================================
   SHOW GLASS — LOJA · "Conheça nossas obras" (carrossel de vídeos) v1.2
   Mesma linguagem do bloco Projetos da home: cards verticais 9:16 com
   façade (iframe só no clique), lightbox vertical, scroll mobile.
   ===================================================================== */

.sglv-wrap{ font-family:var(--sgl-ui,'Inter',sans-serif); }
.sglv-head{ margin-bottom:26px; }
.sglv-eyebrow{
  display:block; font-size:12px; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sgl-gold,#C6A053); margin-bottom:10px;
}
.sglv-title{
  font-family:var(--sg-display,'Cormorant Garamond',serif) !important;
  font-size:34px !important; font-weight:500 !important; line-height:1.15 !important;
  color:#F5F2EA !important; letter-spacing:0 !important; text-transform:none !important; margin:0 !important;
}
.sglv-title em{ font-style:italic; color:var(--sgl-gold,#C6A053); }

.sglv-strip-wrap{ position:relative; }
.sglv-strip{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:2px 2px 8px; scrollbar-width:none;
}
.sglv-strip::-webkit-scrollbar{ display:none; }

.sglv-card{
  position:relative; flex:0 0 210px; aspect-ratio:9/16;
  border-radius:10px; overflow:hidden; cursor:pointer; scroll-snap-align:start;
  background:#101B28;
}
.sglv-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.sglv-card:hover img{ transform:scale(1.06); }
.sglv-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,21,33,.05) 40%,rgba(10,21,33,.72) 100%);
  transition:opacity .3s ease;
}
.sglv-card:hover::after{ opacity:.75; }
.sglv-card .sglv-card-title{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  color:#F5F2EA; font-size:12.5px; font-weight:500; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sglv-card .sglv-play{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(245,244,241,.92);
}
.sglv-card .sglv-play::after{
  content:""; position:absolute; top:50%; left:55%; transform:translate(-50%,-50%);
  border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--sgl-goldd,#9C7A2E);
}

/* setas (desktop) */
.sglv-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(245,244,241,.94); color:var(--sgl-ink,#0A1521);
  font-size:20px; line-height:42px; text-align:center;
  box-shadow:0 4px 16px rgba(10,21,33,.35);
  transition:transform .15s ease; padding:0;
}
.sglv-arrow:hover{ transform:translateY(-50%) scale(1.06); }
.sglv-prev{ left:-14px; } .sglv-next{ right:-14px; }
@media (max-width:1024px){ .sglv-arrow{ display:none; } .sglv-card{ flex:0 0 42vw; } }

/* lightbox vertical */
.sglv-lb{
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  background:rgba(8,12,17,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.sglv-lb-inner{
  position:relative; aspect-ratio:9/16; height:min(86vh,760px); max-width:92vw;
  border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.sglv-lb-inner iframe{ width:100%; height:100%; border:0; display:block; }
.sglv-lb-close{
  position:absolute; top:18px; right:18px; z-index:2;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:#102338; color:#F5F2EA; font-size:19px; line-height:44px; text-align:center;
  box-shadow:0 4px 18px rgba(0,0,0,.4); padding:0;
}
.sglv-lb-close:hover{ background:#1D2D46; }