:root{
  --brand:#0ea5e9;  /* sky-500 */
  --ink:#0b7285;
}

/* HERO + base */
.hero-gallery{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 20%, rgba(14,165,233,.10), transparent 60%);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.badge-brand{ background:var(--brand); }
.card-soft{ border:1px solid rgba(0,0,0,.06); border-radius:1rem; background:var(--bs-body-bg); }
.divider{ height:1px; background:rgba(0,0,0,.08); }

.gallery-controls .btn-check + label{
  border-radius:.6rem; padding:.4rem .6rem; border:1px solid rgba(0,0,0,.08);
}
.gallery-controls .btn-check:checked + label{
  border-color: rgba(14,165,233,.35);
  box-shadow:0 0 0 3px rgba(14,165,233,.12) inset;
  color: var(--ink); font-weight:600;
}
.search-wrap .form-control{ border-radius:.75rem; }
.sort-select{ border-radius:.6rem; }

/* Masonry de columnas (seguimos usando columnas, pero las tarjetas ahora tienen alto fijo por ratio) */
.masonry{ column-count:1; column-gap:1rem; }
@media (min-width:576px){ .masonry{ column-count:2; } }
@media (min-width:992px){ .masonry{ column-count:3; } }
@media (min-width:1400px){ .masonry{ column-count:4; } }

/* === Tarjeta con tamaño estático (independiente del tamaño de la imagen) === */
.g-item{
  break-inside: avoid;
  margin:0 0 1rem 0;
  position:relative;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  background: var(--bs-body-bg);

  /* Tamaño fijo por relación de aspecto: mismo alto para todas las tarjetas por columna */
  aspect-ratio: 16 / 10; /* Ajusta a 4/3 o 1/1 si prefieres otro formato */
}

/* El link ocupa todo el figure */
.g-link{
  display:block;
  height:100%;
  position:relative;
}

/* La imagen rellena el contenedor fijo */
.g-thumb{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;          /* recorte suave para llenar sin deformar */
  transition: transform .28s ease;
}

.g-item:hover .g-thumb{ transform: scale(1.03); }

/* Caption pegado abajo dentro del contenedor fijo */
.g-caption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color:#fff; padding: .75rem .9rem;
}
.g-title{ font-weight:700; font-size:1rem; }
.g-meta{ font-size:.9rem; opacity:.9; }

.load-more-wrap{ text-align:center; }
.load-more-wrap .btn{ min-width:200px; }

/* === Modal con marco de tamaño fijo === */
.lightbox-frame{
  width:100%;
  height:78vh;                /* altura fija del visor */
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit: contain;        /* muestra completa sin recortar, dentro del marco fijo */
  background:#000;
}

@media (prefers-color-scheme: dark){
  .hero-gallery{ border-bottom-color:rgba(255,255,255,.12); }
  .card-soft{ border-color:rgba(255,255,255,.12); }
  .divider{ background:rgba(255,255,255,.12); }
  .g-item{ border-color:rgba(255,255,255,.14); }
}

/* ===== Lightbox auto-fit (sin huecos a la derecha) ===== */
.modal-dialog.modal-image{
  /* el ancho lo fijamos por JS según la imagen; aquí permitimos que se reduzca */
  max-width: none;
  width: auto;
  margin: 0.5rem auto; /* centrado vertical/horizontal */
}
#lightboxModal .modal-content{ background:#000; }
#lightboxModal .modal-body{ padding:0; }

.lightbox-img{
  display:block;
  width:auto; height:auto;
  max-width:95vw;          /* límites por viewport */
  max-height:85vh;
  object-fit:contain;      /* sin recortar */
  background:#000;
}

/* ===== Lightbox auto-fit (sin huecos) ===== */
.modal-dialog.modal-image{ max-width:none; width:auto; margin:0.5rem auto; }
#lightboxModal .modal-content{ background:#000; }
#lightboxModal .modal-body{ padding:0; }

.lightbox-img{
  display:block; width:auto; height:auto;
  max-width:95vw; max-height:85vh;
  object-fit:contain; background:#000;
}

/* Botones de navegación en el lightbox */
#lightboxBody{ position:relative; }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:28px; line-height:1; user-select:none;
  backdrop-filter: blur(2px);
}
.lb-prev{ left:12px; }
.lb-next{ right:12px; }
.lb-nav:hover{ background:rgba(255,255,255,.22); }
.lb-nav:active{ transform:translateY(-50%) scale(.98); }