/* ============================================
   SECCIÓN PROYECTOS - MOSAICO INDUSTRIAL
   ============================================ */

.projects-section {
    padding: 4rem 0;
    background-color: #111; /* Fondo oscuro industrial */
    color: #fff;
}

.project-mosaic {
    display: grid;
    /* Grid automático con columnas de mínimo 300px */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-auto-rows: 350px; /* Altura base de cada celda */
    grid-auto-flow: dense; /* Rellena los huecos vacíos automáticamente */
    gap: 4px; /* Un espacio milimétrico entre fotos se ve muy técnico */
}

/* ============================================
   ITEM DEL MOSAICO
   ============================================ */
.mosaic-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #000; /* Fondo negro por si la imagen tarda en cargar */
}

/* Clases modificadoras de tamaño (Lógica Razor) */
/* En pantallas grandes, el item 'large' ocupa 2x2 */
@media (min-width: 992px) {
    .mosaic-item.mosaic-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .mosaic-item.mosaic-wide {
        grid-column: span 2;
    }
}

/* ============================================
   LA IMAGEN
   ============================================ */
.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CRUCIAL: Mantiene la proporción sin estirar */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: grayscale(20%) brightness(0.8); /* Look metálico inicial */
}

/* Hover Effect: Zoom y Color */
.mosaic-item:hover img {
    transform: scale(1.08); /* Zoom suave */
    filter: grayscale(0%) brightness(1); /* Color real al hover */
}

/* ============================================
   OVERLAY Y CONTENIDO
   ============================================ */
.mosaic-overlay {
    position: absolute;
    inset: 0; /* top, right, bottom, left: 0 */
    background: linear-gradient( to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100% );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    opacity: 1; /* Siempre visible el degradado para legibilidad */
    transition: all 0.3s ease;
}

/* El texto se desplaza ligeramente */
.mosaic-content {
    transform: translateY(10px);
    transition: transform 0.4s ease;
}

.mosaic-item:hover .mosaic-content {
    transform: translateY(0);
}

/* Títulos */
.mosaic-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Enlace con flecha */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fca311; /* Color de acento (ej. Amarillo soldadura) */
    text-decoration: none;
    font-weight: 600;
    opacity: 0; /* Oculto inicialmente */
    transform: translateX(-10px);
    transition: all 0.3s ease 0.1s; /* Delay pequeño */
}

.mosaic-item:hover .link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* En móvil, forzamos todo a 1 columna o cuadrícula simple */
    .project-mosaic {
        grid-template-columns: 1fr;
        grid-auto-rows: 300px;
    }

    /* Reseteamos los spans para que no rompan el layout móvil */
    .mosaic-item.mosaic-large,
    .mosaic-item.mosaic-wide {
        grid-column: auto;
        grid-row: auto;
    }
}


/* --- AGREGAR AL FINAL DE TU CSS --- */

/* Clase para items verticales (Video de celular) */
/* Solo en pantallas medianas hacia arriba ocupa 2 espacios verticales */
@media (min-width: 768px) {
    .mosaic-item.mosaic-tall {
        grid-row: span 2;
        grid-column: span 1;
    }
}

/* Estilo del reproductor de video */
.mosaic-item video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto hace que llene todo el cuadro sin bordes negros */
    display: block;
    background: #000;
}

/* Badge decorativo */
.video-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    pointer-events: none; /* Para que el click pase al video */
    backdrop-filter: blur(2px);
    z-index: 5;
}