/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* --- Estructura del Grid (rejilla) --- */
.mgp-album-shortcode-grid {
    display: grid;
    /* Crea columnas de 300px y las ajusta a la pantalla */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 30px;
    margin-top: 20px;
    padding: 0;
    list-style: none; /* Asegura que no haya viñetas */
}

/* --- Estilo del Contenedor del Álbum --- */
.mgp-album-shortcode-item {
    text-align: center; /* Centra el título y el tipo */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra la imagen */
}

/* --- Contenedor de la Imagen (Clave para el Cuadrado 300x300) --- */
.album-image-container {
    width: 300px;
    height: 300px;
    overflow: hidden; /* Recorta la imagen si es necesario */
    border-radius: 4px; /* Opcional: bordes suaves */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Opcional: pequeña sombra */
}

/* --- La Imagen en Sí --- */
.album-cover-img,
.album-placeholder {
    width: 100%; /* Ocupa todo el contenedor 300x300 */
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin distorsionarse */
    display: block;
}

.album-placeholder {
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: #555;
}

/* --- Estilo de Texto Centrado --- */
.album-title {
    font-size: 1.1em;
    margin: 10px 0 5px 0; /* Espacio entre imagen y título */
    line-height: 1.3;
}

.album-title a {
    text-decoration: none;
    color: inherit;
}

.album-type {
    font-size: 0.9em;
    color: #666;
    margin-top: 0;
    font-style: italic;
}