/*
 * CSS para el contenedor de posts de Instagram
 * Objetivo: Mostrar los posts en un grid responsive
 * que se adapte a diferentes tamaños de pantalla.
 */

.instagram-posts-container {
    display: grid; /* Usamos CSS Grid para una disposición flexible */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Columnas que se auto-ajustan */
    gap: 25px; /* Espacio entre los posts */
    max-width: 1200px; /* Ancho máximo para el contenedor */
    margin: 40px auto; /* Centra el contenedor y le da margen superior e inferior */
    padding: 20px; /* Espaciado interno para que no se pegue a los bordes */
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
}

/*
 * Estilos para los bloques de Instagram incrustados
 * Los estilos en línea de Instagram son bastante específicos,
 * pero podemos ajustar algunos valores para mejorar la visualización
 * dentro de nuestro grid.
 */
.instagram-media {
    /* Aquí puedes sobrescribir o añadir estilos si los de Instagram no son suficientes.
       Por ejemplo, el 'max-width' y 'min-width' ya vienen de Instagram,
       pero podrías querer normalizar el ancho si no se ve bien.
    */
    width: 100% !important; /* Forzamos que cada post ocupe el 100% del espacio de su celda en el grid */
    margin: 0 auto !important; /* Aseguramos que los posts individuales estén centrados en su celda */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Una sombra más pronunciada para destacar cada post */
    transition: transform 0.2s ease-in-out; /* Animación suave al pasar el ratón */
}

.instagram-media:hover {
    transform: translateY(-5px); /* Pequeño efecto al pasar el ratón para indicar interactividad */
}

/*
 * Media Queries para responsividad (ajustes específicos para pantallas más pequeñas)
 * Aunque `auto-fit` y `minmax` ya hacen gran parte del trabajo,
 * podemos refinar la apariencia en dispositivos móviles.
 */
@media (max-width: 768px) {
    .instagram-posts-container {
        gap: 20px; /* Reducimos el espacio entre posts en pantallas medianas */
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .instagram-posts-container {
        grid-template-columns: 1fr; /* Una sola columna en pantallas muy pequeñas para mejor legibilidad */
        gap: 15px; /* Más espacio para que no se vean tan juntos */
        padding: 10px;
    }

    .instagram-media {
        /* Puedes ajustar el 'max-width' si ves que los posts incrustados se ven muy grandes en móviles */
        max-width: 100% !important;
    }
}/*
 * CSS para el contenedor de posts de Instagram
 * Objetivo: Mostrar los posts en un grid responsive
 * que se adapte a diferentes tamaños de pantalla.
 */

.instagram-posts-container {
    display: grid; /* Usamos CSS Grid para una disposición flexible */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Columnas que se auto-ajustan */
    gap: 25px; /* Espacio entre los posts */
    max-width: 1200px; /* Ancho máximo para el contenedor */
    margin: 40px auto; /* Centra el contenedor y le da margen superior e inferior */
    padding: 20px; /* Espaciado interno para que no se pegue a los bordes */
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
}

/*
 * Estilos para los bloques de Instagram incrustados
 * Los estilos en línea de Instagram son bastante específicos,
 * pero podemos ajustar algunos valores para mejorar la visualización
 * dentro de nuestro grid.
 */
.instagram-media {
    /* Aquí puedes sobrescribir o añadir estilos si los de Instagram no son suficientes.
       Por ejemplo, el 'max-width' y 'min-width' ya vienen de Instagram,
       pero podrías querer normalizar el ancho si no se ve bien.
    */
    width: 100% !important; /* Forzamos que cada post ocupe el 100% del espacio de su celda en el grid */
    margin: 0 auto !important; /* Aseguramos que los posts individuales estén centrados en su celda */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Una sombra más pronunciada para destacar cada post */
    transition: transform 0.2s ease-in-out; /* Animación suave al pasar el ratón */
}

.instagram-media:hover {
    transform: translateY(-5px); /* Pequeño efecto al pasar el ratón para indicar interactividad */
}

/*
 * Media Queries para responsividad (ajustes específicos para pantallas más pequeñas)
 * Aunque `auto-fit` y `minmax` ya hacen gran parte del trabajo,
 * podemos refinar la apariencia en dispositivos móviles.
 */
@media (max-width: 768px) {
    .instagram-posts-container {
        gap: 20px; /* Reducimos el espacio entre posts en pantallas medianas */
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .instagram-posts-container {
        grid-template-columns: 1fr; /* Una sola columna en pantallas muy pequeñas para mejor legibilidad */
        gap: 15px; /* Más espacio para que no se vean tan juntos */
        padding: 10px;
    }

    .instagram-media {
        /* Puedes ajustar el 'max-width' si ves que los posts incrustados se ven muy grandes en móviles */
        max-width: 100% !important;
    }
}