/*
Theme Name: Impreza Child
Template: Impreza
Description:  Tema hijo para Impreza By CM
Version: 1.1
Author:	Un tal Camilo Medina
Theme URI: http://us-themes.com/
Author URI: http://untalcamilomedina.com/
*/

/*Add your own styles here:*/

/*Estilos de columas para el shortcode de traer cursos por categorias*/
/* Estilos para el contenedor principal de los cursos (la cuadrícula) */
.cursos-grid {
    display: grid;
    /* Define columnas automáticas: mínimo 300px, máximo 1fr (distribuye el espacio equitativamente) */
    /* Esto creará 2 columnas si el ancho lo permite, o más/menos según la pantalla */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px; /* Espacio entre los elementos de la cuadrícula */
    margin-top: 25px; /* Margen superior para separar del contenido previo */
    padding: 15px; /* Espacio interno alrededor de la cuadrícula */
}

/* Estilos para cada elemento individual del curso (la "tarjeta") */
.curso-item {
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados para la tarjeta */
    overflow: hidden; /* Asegura que cualquier contenido que se desborde se recorte (ej. bordes de imagen) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave para darle profundidad */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transiciones suaves para el efecto hover */
    display: flex; /* Usamos flexbox para organizar el contenido interno (imagen, título) */
    flex-direction: column; /* Apila los elementos verticalmente */
}

/* Efecto al pasar el cursor sobre la tarjeta */
.curso-item:hover {
    transform: translateY(-8px); /* Ligeramente eleva la tarjeta */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18); /* Aumenta la sombra para un efecto más pronunciado */
}

/* Estilos para el enlace que envuelve toda la tarjeta */
.curso-item a {
    display: block; /* Hace que todo el espacio del "item" sea clickeable */
    text-decoration: none; /* Elimina el subrayado por defecto de los enlaces */
    color: inherit; /* Hereda el color del texto para no ser el azul por defecto */
    height: 100%; /* Asegura que el enlace ocupe toda la altura del item */
}

/* Estilos para la imagen destacada del curso */
.curso-item img {
    width: 100%; /* La imagen ocupa todo el ancho de su contenedor */
    height: 200px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Recorta la imagen para que cubra el área sin distorsionarse */
    display: block; /* Elimina espacio extra debajo de la imagen */
    border-radius: 12px 12px 0 0; /* Redondea solo las esquinas superiores de la imagen */
}

/* Estilos para el placeholder (cuando no hay imagen destacada) */
.imagen-placeholder {
    width: 100%; /* Ocupa todo el ancho */
    height: 200px; /* Misma altura que las imágenes para mantener la consistencia */
    background-color: #f0f4f7; /* Un color de fondo claro y moderno */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    color: #6a6a6a; /* Color de texto suave */
    font-size: 1.2em; /* Tamaño de fuente para el nombre del sitio */
    font-weight: bold; /* Texto en negrita */
    text-align: center; /* Asegura que el texto esté centrado si ocupa varias líneas */
    padding: 10px; /* Espaciado interno */
    border-radius: 12px 12px 0 0; /* Redondea solo las esquinas superiores */
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
    text-transform: uppercase; /* Opcional: convierte el texto a mayúsculas para un look más "branding" */
    font-family: 'Arial', sans-serif; /* Puedes cambiar la fuente si tienes una específica en tu tema */
}

/* Estilos para el título del curso */
.curso-item h3 {
    font-size: 1.25em; /* Tamaño de fuente ligeramente mayor para el título */
    margin: 15px 15px 20px; /* Margen superior, horizontal y inferior */
    color: #333; /* Color de texto oscuro para legibilidad */
    line-height: 1.4; /* Espaciado entre líneas */
    min-height: 50px; /* Asegura un espacio mínimo para el título, útil si es corto */
    display: flex; /* Permite centrar el texto verticalmente si el min-height es mayor */
    align-items: center; /* Centra el texto verticalmente */
    justify-content: center; /* Centra el texto horizontalmente */
    text-align: center; /* Asegura el centrado de texto */
    flex-grow: 1; /* Permite que el título ocupe el espacio restante si hay poco contenido */
}

/* --- Responsive Design (Ajustes para diferentes tamaños de pantalla) --- */

/* Para pantallas medianas (tabletas, etc.) */
@media (max-width: 992px) {
    .cursos-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajusta el tamaño mínimo de columna */
        gap: 20px;
    }
    .curso-item img, .imagen-placeholder {
        height: 180px; /* Ligeramente más pequeña la imagen/placeholder */
    }
    .curso-item h3 {
        font-size: 1.15em;
        margin: 12px;
    }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    .cursos-grid {
        grid-template-columns: 1fr; /* Una sola columna para móviles */
        gap: 15px;
        padding: 10px;
    }
    .curso-item img, .imagen-placeholder {
        height: 160px; /* Aún más pequeña la imagen/placeholder */
    }
    .curso-item h3 {
        font-size: 1.1em;
        margin: 10px;
    }
}