/* --------------------------------------------------- */
/* 1. CONTENEDOR DE LA REJILLA (GRID)
/* Asume que este contenedor ya existe en tu HTML.
/* --------------------------------------------------- */
.services-grid-container {
    display: grid;
    /* Usamos 5 columnas para tener más control sobre el ancho */
    grid-template-columns: repeat(5, 1fr);
    /* Define una altura fija para las filas */
    grid-auto-rows: 300px; 
    gap: 1.5rem; /* Asegúrate de tener esta variable --gap definida o reemplaza el valor */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor si es necesario */
}

/* --------------------------------------------------- */
/* 2. TARJETA INDIVIDUAL (OPTIMIZADA)
/* Aplica esta clase a tus elementos de tarjeta.
/* --------------------------------------------------- */
.service-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem; /* Reemplaza con tu variable de radio si la tienes */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* Transición solo para 'transform', que es más eficiente para el rendimiento */
    transition: transform 0.3s ease;
    
    /* Avisa al navegador que esta propiedad cambiará para optimizar el renderizado */
    will-change: transform;
}

.service-card:hover {
    transform: translateY(-5px) scale(1.02);
    /* La sombra cambia al instante, sin una animación costosa que ralentice la página */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------- */
/* 3. POSICIONAMIENTO ESPECÍFICO DE CADA TARJETA
/* --------------------------------------------------- */

/* Tarjeta 1: Más ancha (ocupa 3 de 5 columnas) */
.service-card:nth-child(1) {
    grid-column: span 3; 
}

/* Tarjeta 2: Más estrecha (ocupa 2 de 5 columnas) */
.service-card:nth-child(2) {
    grid-column: span 2;
}

/* Tarjeta 3: Más estrecha (ocupa 2 de 5 columnas) */
.service-card:nth-child(3) {
    grid-column: span 2;
}

/* Tarjeta 4: Más ancha (ocupa 3 de 5 columnas) */
.service-card:nth-child(4) {
    grid-column: span 3;
}

/* --------------------------------------------------- */
/* 4. IMAGEN DE FONDO (OPTIMIZADA)
/* Asume que tienes una imagen dentro de cada .service-card
/* --------------------------------------------------- */
.card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Asegúrate de que el contenido de texto tenga un z-index mayor */
    transition: transform 0.4s ease;
    will-change: transform;
}

.service-card:hover .card-background-image {
    transform: scale(1.1);
}


/* --------------------------------------------------- */
/* 5. ADAPTABILIDAD (RESPONSIVE)
/* --------------------------------------------------- */
@media (max-width: 768px) {
    .services-grid-container {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
        grid-auto-rows: 250px;
    }

    /* Reseteamos el posicionamiento para que fluyan naturalmente en una columna */
    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(3),
    .service-card:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
    }
}