/* =========================================================
   EGO PROJECT — Galería Multimedia (Fotos y Video)
   Hoja de estilos independiente: no modifica style.css.
   Reutiliza las variables de diseño ya definidas en :root
   (style.css) — mismos negros, dorado, tipografías y radios.
   ========================================================= */

/* ---------- Barra de filtros ---------- */
.gallery-filters{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:44px 0 56px;
}
.gallery-filter{
  padding:12px 24px;
  border:1px solid var(--line-strong);
  background:transparent;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:999px;
  cursor:pointer;
  transition: all .3s var(--ease);
}
.gallery-filter:hover{ color: var(--white); border-color: var(--white); }
.gallery-filter.active{
  background: var(--gold);
  border-color: var(--gold);
  color:#0a0a0a;
}

/* ---------- Cuadrícula híbrida (Grid + Flexbox interno) ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows:220px;
  grid-auto-flow:dense;
  gap:14px;
}

/* Asimetría: la pieza destacada (M00155) ocupa 2x2, y algunas tarjetas
   ocupan el doble de ancho para romper la retícula uniforme. */
.gallery-card--feature{ grid-column:span 2; grid-row:span 2; }
.gallery-card--wide{ grid-column:span 2; }

@media (max-width:640px){
  .gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); grid-auto-rows:170px; gap:10px; }
  .gallery-card--feature{ grid-column:span 2; grid-row:span 1; }
  .gallery-card--wide{ grid-column:span 1; }
}

/* ---------- Tarjeta multimedia ---------- */
.gallery-card{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background: var(--panel);
  cursor:pointer;
  transition: transform .4s var(--ease), border-color .4s;
}
.gallery-card:hover{ transform: translateY(-3px); border-color: var(--line-strong); }
.gallery-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.gallery-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .6s var(--ease), filter .4s;
}
.gallery-card:hover img{ transform: scale(1.06); filter:brightness(.55); }

/* Degradado + texto que aparece en hover, como pide el brief */
.gallery-card-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px;
  background: linear-gradient(180deg, transparent 45%, rgba(6,6,6,.92) 100%);
  opacity:0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery-card:hover .gallery-card-overlay,
.gallery-card:focus-visible .gallery-card-overlay{
  opacity:1; transform:none;
}
.gallery-card-tag{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gold); margin-bottom:6px;
}
.gallery-card-title{
  font-family: var(--font-serif);
  font-size:1.15rem;
  color: var(--white);
  margin:0 0 4px;
  line-height:1.2;
}
.gallery-card-desc{
  font-size:.78rem;
  color: var(--grey);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Icono central: play (video) o expandir (foto) */
.gallery-card-icon{
  position:absolute; top:50%; left:50%;
  width:52px; height:52px;
  transform:translate(-50%,-50%) scale(.85);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(6,6,6,.35);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  color: var(--white);
  opacity:0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery-card:hover .gallery-card-icon,
.gallery-card:focus-visible .gallery-card-icon{
  opacity:1; transform:translate(-50%,-50%) scale(1);
}
.gallery-card-icon svg{ width:20px; height:20px; }

.gallery-card-badge{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px; border-radius:50%;
  background: rgba(6,6,6,.55);
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--white);
}
.gallery-card-badge svg{ width:14px; height:14px; }

.gallery-empty{
  grid-column:1/-1;
  text-align:center;
  color: var(--grey-dim);
  padding:60px 0;
}

/* =========================================================
   LIGHTBOX / MODAL
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: rgba(4,4,4,.94);
  backdrop-filter: blur(6px);
  padding:28px;
  opacity:0;
  visibility:hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox[hidden]{ display:flex; } /* [hidden] se controla por JS via is-open, no por el atributo en runtime */

.lightbox-stage{
  position:relative;
  max-width:min(1100px, 92vw);
  max-height:70vh;
  width:100%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-stage img{
  max-width:100%; max-height:70vh;
  border-radius:10px;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  opacity:0;
  transform: scale(.97);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.lightbox-stage img.is-visible{ opacity:1; transform:none; }

.lightbox-close,
.lightbox-nav{
  position:fixed;
  z-index:1010;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background: rgba(17,17,17,.6);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: border-color .3s, color .3s;
}
.lightbox-close:hover,
.lightbox-nav:hover{ border-color: var(--gold); color: var(--gold); }
.lightbox-close{ top:24px; right:24px; font-size:1.4rem; line-height:1; }
.lightbox-nav{ top:50%; transform:translateY(-50%); }
.lightbox-prev{ left:24px; }
.lightbox-next{ right:24px; }
.lightbox-nav svg{ width:18px; height:18px; }

.lightbox-caption{
  max-width:min(760px, 92vw);
  text-align:center;
  margin-top:22px;
}
.lightbox-category{
  display:inline-block;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold); margin-bottom:8px;
}
.lightbox-caption h3{
  margin:0 0 8px;
  font-size:1.5rem;
}
.lightbox-caption p{
  margin:0; color: var(--grey); font-size:.92rem;
}
.lightbox-counter{
  margin-top:14px;
  font-size:.74rem; letter-spacing:.08em;
  color: var(--grey-dim);
}

/* ---------- Reproductor de video con controles propios ---------- */
.lightbox-video-wrap{
  position:relative;
  width:100%;
  max-width:min(900px, 92vw);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  background:#000;
}
.lightbox-video-wrap video{
  display:block;
  width:100%;
  max-height:64vh;
  background:#000;
}
.video-controls{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  background: rgba(10,10,10,.85);
  border-top:1px solid var(--line);
}
.vc-btn{
  flex:none;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: border-color .3s, color .3s;
}
.vc-btn:hover{ border-color: var(--gold); color: var(--gold); }
.vc-btn svg{ width:15px; height:15px; }

.vc-seek{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:3px;
  border-radius:99px;
  background: var(--line-strong);
  cursor:pointer;
}
.vc-seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px; height:12px;
  border-radius:50%;
  background: var(--gold);
  cursor:pointer;
}
.vc-seek::-moz-range-thumb{
  width:12px; height:12px; border:none; border-radius:50%;
  background: var(--gold); cursor:pointer;
}
.vc-time{
  flex:none;
  font-size:.72rem;
  color: var(--grey-dim);
  min-width:86px;
  text-align:right;
  font-variant-numeric: tabular-nums;
}

@media (max-width:720px){
  .lightbox-nav{ width:38px; height:38px; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .lightbox-close{ top:14px; right:14px; }
  .video-controls{ gap:8px; padding:10px; }
  .vc-time{ min-width:70px; font-size:.66rem; }
}

/* Bloquea el scroll del body mientras el lightbox está abierto */
body.lightbox-open{ overflow:hidden; }