/* ===== AO Masonry Gallery (imágenes + videos) ===== */
:root{
  --g-gap: 14px;
  --g-card: #0f172a;
  --g-border:#223254;
  --g-radius:16px;
  --g-shadow: 0 10px 28px rgba(2,6,23,.28);
  --g-title:#e2e8f0;
  --g-muted:#cfe5ff;
}

.ao-gallery{
  /* Wider gallery to better match the provided sample image: occupy most of the
     content width while keeping comfortable side padding for readability. */
  width:92%;
  max-width:1200px; /* cap to avoid overly wide cards on very large screens */
  margin:0 auto;
  padding:18px 20px;
}
@media (min-width: 1400px){
  .ao-gallery{ max-width:1400px; }
}
.ao-g-title{margin:0 0 14px;font-size:1.8rem;font-weight:1200;color:var(--g-title)}
.ao-g-note{margin:0 0 18px;color:var(--g-muted)}

.ao-g-grid{
  display:grid;
  /* tighter masonry columns: allow 2 cols on small, 3 on desktop, with comfortable
     minimum so cards collapse similarly to your sample image */
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  grid-auto-rows: 12px;         /* base row height used by JS span calculation */
  gap: calc(var(--g-gap) + 4px);
}

@media (min-width: 1100px){
  .ao-g-grid{ grid-template-columns: repeat(3, 1fr); }
}

.ao-g-item{
  position:relative; display:block;
  border-radius:var(--g-radius);
  overflow:hidden;
  background:var(--g-card);
  border:1px solid var(--g-border);
  box-shadow: var(--g-shadow);
  transform: translateZ(0);
}
.ao-g-item img,
.ao-g-item video{
  width:100%; display:block;
  object-fit:cover;
  /* Use fixed-ish thumbnail heights so the grid looks regular like your sample.
     JavaScript will still compute row spans to keep masonry behaviour, but
     a consistent rendered height produces the compact look. */
  height: 220px; /* desktop thumbnail height */
}

@media (max-width: 900px){
  .ao-g-item img, .ao-g-item video{ height: 180px; }
}

/* stronger card look: subtle border + lifted shadow */
.ao-g-item{
  border-radius:18px;
  border:1px solid rgba(0,0,0,0.18);
  box-shadow: 0 12px 30px rgba(2,6,23,0.36);
}
.ao-g-item video{ aspect-ratio: 16/9; background:#0b1220 }

/* Hover sutil */
.ao-g-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.25),transparent);
  opacity:0; transition:opacity .15s ease;
}
.ao-g-item:hover::after{ opacity:1 }

/* ===== Lightbox ===== */
.ao-g-lightbox{
  position:fixed; inset:0; z-index:3000;
  background:rgba(3,10,25,.85);
  display:none; place-items:center; padding:22px;
}
.ao-g-lightbox[aria-hidden="false"]{ display:grid }
.ao-g-stage{
  width:min(1200px,92vw); height:min(84vh,800px);
  display:grid; place-items:center;
}
.ao-g-stage img, .ao-g-stage video{
  max-width:100%; max-height:100%;
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.45);
  background:#000;
}
.ao-g-close{
  position:absolute; top:16px; right:16px;
  width:42px; height:42px; border-radius:999px;
  border:1px solid #223254; background:#0e182f; color:#e2e8f0;
  cursor:pointer; font-size:18px;
}
.ao-g-close:hover{ background:#132241 }

/* Opcional: “etiquetas” pequeñas en la esquina */
.ao-g-badge{
  position:absolute; left:10px; top:10px;
  background:rgba(0,0,0,.5); color:#ffffff;
  padding:6px 10px; border-radius:999px; font-size:.85rem; font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
}

/* small bottom bar under each card to emulate sample's dark strip */
.ao-g-item::before{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background: rgba(2,6,23,0.6);
  pointer-events: none;
}