/* ==========================================================================
   Módulo: Intro Grid (3 Columnas de Introducción)
   ========================================================================== */

.module-intro-grid {
    padding: 0 0 20px 0;
    background-color: var(--color-white);
}

.module-intro-grid .container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.intro-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.intro-item {
    display: flex;
    flex-direction: column;
    align-items: end;
}

/* Contenedor de la Imagen */
.intro-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10; /* Fuerza a que todas sean rectangulares uniformes */
    overflow: hidden;
    margin-bottom: 20px;
}

.intro-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen sin deformarla */
    transition: transform 0.4s ease;
}

.intro-item:hover .intro-image-wrapper img {
    transform: scale(1.05); /* Suave efecto de zoom al pasar el ratón */
}

/* Contenido de texto */
.intro-text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Empuja el botón siempre hacia abajo */
    /*padding: 0 10px;*/
    width: 85%;
    padding-right: 10px;
}

/* Enlace "Learn More" */
.intro-link {
    color: var(--color-primary); /* Tomará el color rojo/azul de tu variable root */
    font-weight: 700;
    font-size: var(--text-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease, gap 0.2s ease;
    padding-right: 20px;
}

.intro-link:hover {
    gap: 12px; /* La flecha se mueve un poco a la derecha al hacer hover */
}

/* Responsive */
@media (max-width: 1024px) {
    .intro-grid-container {
        /*grid-template-columns: 1fr;*/ /* En móviles, se apilan una debajo de otra */
        gap: 0px;
    }

    .intro-image-wrapper {
        aspect-ratio: 16 / 9;
    }

    .intro-text{
        width: 100%;
        padding: 0 10px 0 20px;
    }
}

@media (max-width: 768px) {
    /* 1. Configuramos el contenedor principal */
    .intro-grid-container {
        display: flex;
        overflow-x: auto; /* Permite el scroll horizontal */
        scroll-snap-type: x mandatory; /* Activa el comportamiento de imán al hacer scroll */
        
        /* Ocultamos la barra de scroll para que parezca una app nativa */
        scrollbar-width: none; /* Para Firefox */
    }

    /* Ocultamos la barra de scroll en Chrome, Safari y Edge */
    .intro-grid-container::-webkit-scrollbar {
        display: none; 
    }

    /* 2. Configuramos cada tarjeta */
    .intro-item {
        /* Evita que se encojan, obligando a que ocupen el 85% del ancho de la pantalla */
        /* Al usar 85%, el usuario verá que asoma un pedazo de la siguiente tarjeta, invitándolo a deslizar */
        flex: 0 0 85%; 
        
        /* Hace que la tarjeta encaje perfectamente en el centro o al inicio al soltar el dedo */
        scroll-snap-align: center; 
    }
}