/* ==========================================================
   BiosMed – "Nuestras Instalaciones"
   Ubicación: /wp-content/themes/medicenter-child/css/installations-gallery.css

   Elemento real: WPBakery "Galería de imágenes" (shortcode
   vc_gallery). Estructura confirmada en el código del plugin:

     <div class="wpb_gallery ... biosmed-installations-gallery">
       <div class="wpb_wrapper">
         <div class="wpb_gallery_slides">
           <a href="[imagen grande]" data-lightbox="...">
             <img ...>
           </a>
           ... (una vez por foto — sin <li>/<ul>)
         </div>
       </div>
     </div>

   "biosmed-installations-gallery" y "biosmed-installations-title"
   se agregan de forma nativa en el campo "Extra class name" de
   cada elemento de WPBakery — no se tocó ningún archivo PHP del
   tema ni del plugin, ni las fotografías originales.
   ========================================================== */

.biosmed-installations-gallery .wpb_gallery_slides {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  float: none !important;
}

.biosmed-installations-gallery .wpb_gallery_slides > a {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--biosmed-white, #ffffff);
  box-shadow: 0 3px 12px rgba(20, 30, 60, 0.08);
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}

.biosmed-installations-gallery .wpb_gallery_slides > a img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.biosmed-installations-gallery .wpb_gallery_slides > a:hover {
  box-shadow: 0 8px 22px rgba(20, 30, 60, 0.14);
}

.biosmed-installations-gallery .wpb_gallery_slides > a:hover img {
  transform: scale(1.035);
}

/* Título — normaliza el espacio hacia la galería sin depender
   del "Espacio Vacío" fijo */
.biosmed-installations-title {
  margin-bottom: 4px;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

/* Tablet / laptop pequeño */
@media (max-width: 1024px) {
  .biosmed-installations-gallery .wpb_gallery_slides {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
  }
}

/* Tablet vertical y móvil grande */
@media (max-width: 768px) {
  .biosmed-installations-gallery .wpb_gallery_slides {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Móvil */
@media (max-width: 430px) {
  .biosmed-installations-gallery .wpb_gallery_slides {
    gap: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .biosmed-installations-gallery .wpb_gallery_slides > a,
  .biosmed-installations-gallery .wpb_gallery_slides > a img {
    transition: none;
  }
}