/** 
 * Evomeet 2025
 * JBlanco
 */
 
/**
 * Estilos para shortcode Listado de Webinars 
 */

.webinar-grid-container {
    display: grid;
    /* Define 4 columnas en pantallas grandes, y se adapta automáticamente */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; /* Espacio entre las tarjetas de webinar */
}

/* Estilos para el contenedor principal de cada webinar (equivalente a .item.grid-previ) */
.webinar-item .post {
    line-height: 1.428571429;
    background-color: var(--tertiary-color); /* Color de fondo adaptado de previ.online */
    transition: all 0.2s ease-in-out;
    display: flex; /* Para flex-direction column y justify-content space-between */
    flex-direction: column;
    max-width: 100%;
    height: 100%; /* Para igualar alturas si el contenedor padre es flex/grid */
    position: relative;
    padding: 20px;
    margin: 0;
    border-radius: 1.8rem; /* Esquinas redondeadas */
    overflow: hidden; /* Para que la imagen no se salga del borde redondeado */
}

/* Estilos para la miniatura (imagen destacada) */
.webinar-item .post > .thumbnail {
    margin: -20px 0 0 -20px; 
    width: calc(100% + 40px); 
    position: relative; 
    background-color:var(--main-color);
    overflow:hidden;
}
.webinar-item .post > .thumbnail .pattern-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    transition: all 3s ease;
}
.webinar-item:hover .post > .thumbnail .pattern-background{
    transform: scale(1.1);
}
.webinar-item .post > .thumbnail .pattern-background .pattern-effect-inner{
    background-repeat: no-repeat; 
    background-position:center center;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1;
    transition: all 3s ease;
}


.webinar-item .post > .thumbnail img {
    position:relative;
    z-index:2;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: auto;
    display: block;
}
.webinar-item .post > .thumbnail .photo{
    transition: all 5s ease;
}
.webinar-item:hover  .post > .thumbnail .photo{
    transform: scale(1.1);
}


/* Estilos para el logo del patrocinador */
.webinar-item .post .sponsor-logo-wrapper {
    position: absolute;
    bottom: 10px; 
    left: 20px; 
    z-index:3;
    text-align:left;
}

.webinar-item .post .sponsor-logo-wrapper img {
    max-width: 80px; /* Tamaño pequeño para el logo */
    height: auto;
    display: block;
    margin:5px 0 0 0;
}

/* Estilos para el texto "Colaborador específico de esta sesión" (nuevo) */
.webinar-item .post .sponsor-logo-wrapper .sponsor-text {
    display:block;
    font-size: 0.7rem; 
    color: #333; 
    line-height: 1; 
    max-width:100px;
}


/* Estilos para el contenido de texto */
.webinar-item .post .content {
    padding: 20px 0 0;
    color: #333333;
    flex-grow: 1; /* Permite que el contenido crezca y empuje el botón hacia abajo */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Estilos para el título del webinar */
.webinar-item .post .content .entry-title {
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1em;
    color: #333;
}

/* Estilos para el nombre del ponente */
.webinar-speaker-name {
    font-size: 0.95rem;
    color: var(--main-color);
    font-weight: 500;
    margin-bottom: 15px;
}

/* Estilos para el texto extra */
.webinar-item .post .content .entry-content {
    margin-bottom: 20px;
    color: #949ca1;
    font-size: 0.875rem;
}

.webinar-item .post .content .entry-content > * {
    margin: 0;
}

/* Estilos para el botón de inscripción */
.webinar-item .post .content .button {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    width: 100%;
    text-align: center; /* Centra el botón */
    padding: 1rem 0;
    margin-top: auto; /* Empuja el botón al final de la tarjeta */
}

.webinar-item .post .content .button a {
    color: var(--main-color);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.2em 1.3em;
    margin: auto;
    text-decoration: none;
    border: 2px solid var(--main-color);
    border-radius: 2em;
    background-color: transparent;
    transition: all 0.3s ease;
}

.webinar-item .post .content .button a:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #ffffff;
}

/* Estilos para la fecha de inicio (superpuesta en la imagen) */
.start-date-wrapper {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index:3;
    display: flex; /* Usar flexbox para apilar */
    flex-direction: column; /* Apilar verticalmente */
    align-items: flex-start; /* Alinear a la izquierda */
}

.start-date-wrapper .start-date__date,
.start-date-wrapper .start-date__hour {
    color: #ffffff;
    width: fit-content;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0.2em 1.3em;
    margin: 5px 0 0 0; /* Ajustado para un pequeño margen entre ellos */
    text-decoration: none;
    border-radius: 2em;
    background-color: var(--secondary-color);
    display: block; /* Asegura que cada uno ocupe su propia línea */
}
.start-date-wrapper .start-date__hour {
    margin-top: 5px; /* Espacio entre fecha y hora */
}

/* Media queries para hacer el grid responsive en diferentes tamaños de pantalla */
@media (max-width: 767px) {
    .webinar-grid-container {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .webinar-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .webinar-grid-container {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en algunos portátiles */
    }
}

@media (min-width: 1440px) {
    .webinar-grid-container {
        grid-template-columns: repeat(4, 1fr); /* 4 columnas en pantallas grandes */
    }
}