/*
=================================================================
  GALERÍA DBR CONSTRUCCIONES — CSS3
  Archivo: galeria-dbr.css
  Agregar en <head>: <link rel="stylesheet" href="css/galeria-dbr.css">
=================================================================
*/


/* ----------------------------------------------------------------
   1. SKELETON LOADER — placeholder gris animado mientras carga
      la imagen. Desaparece automáticamente cuando img se carga.
---------------------------------------------------------------- */

.image-box {
    position: relative;
    overflow: hidden;
    background: #e8e8e8;           /* fondo gris visible antes de cargar */
    display: block;
}

/* Efecto shimmer animado sobre el placeholder */
.image-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    will-change: transform;
    animation: dbr-shimmer 1.4s infinite;
    z-index: 1;
    pointer-events: none;
}

/* El shimmer desaparece cuando la imagen ya está cargada */
.image-box.dbr-loaded::before {
    display: none;
}

@keyframes dbr-shimmer {
    0%   { transform: translateX(0); }
    100% { transform: translateX(433%); }
}


/* ----------------------------------------------------------------
   2. IMAGEN — ocupa el 100% del figure, aspecto fijo 4:3
      (sin esto el layout "salta" cuando carga = CLS)
---------------------------------------------------------------- */

.image-box img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;          /* reserva espacio antes de cargar */
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease, opacity 0.3s ease;
    opacity: 0;                    /* empieza invisible */
}

/* Aparece suavemente al cargar */
.image-box img.dbr-visible {
    opacity: 1;
}

/* Zoom sutil al hacer hover — no toca la clase overlay existente */
.inner-box:hover .image-box img {
    transform: scale(1.05);
}


/* ----------------------------------------------------------------
   3. RESPONSIVE — ajuste de aspect-ratio en móvil
      En pantallas pequeñas las imágenes col-lg-2 son cuadradas
---------------------------------------------------------------- */

@media (max-width: 575px) {
    .gallery-item .image-box img {
        aspect-ratio: 1 / 1;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .gallery-item .image-box img {
        aspect-ratio: 4 / 3;
    }
}


/* ----------------------------------------------------------------
   4. CORRECCIÓN TYPO en el HTML original
      "portable" → "potable" ya corregido en el HTML,
      pero por si acaso el h3 heredado necesita alineación
---------------------------------------------------------------- */

.overlay-box .content h3 {
    font-size: 16px;
    margin-bottom: 6px;
    line-height: 1.3;
}

.overlay-box .content h3 a {
    color: inherit;
    text-decoration: none;
}

.overlay-box .content h3 a:hover {
    text-decoration: underline;
}