/* Optimizado para variables de Wordpress */


:root {		

    /* Capturamos variables globales del theme */
    --he-items-text-font-normal: var(--heading--font-weight-page-title);
    --he-items-text-font-bold: var(--heading--font-weight-strong);
    --he-items-text-font-size-normal: var(--global--font-size-md);
    --he-items-text-font-size-large: var(--global--font-size-lg);
    --he-items-text-font-size-sm: var(--global--font-size-sm);
    
    /* Variables locales que usaremos */
    --he-container-max-width: 57em;  /* aproximadamente 900px */
    --he-container-margin-top: 4em;
    --he-container-margin-bottom: 1.5em;
    --he-container-space-gap: 1em;
    
    --he-content-max-width: 100%;
    
    --he-items-min-width: 20em;
    --he-items-max-width: 20em;
    --he-items-min-height: 10em;
    --he-items-border-radius: 0.5em;
    --he-items-box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
    --he-items-box-shadow-hover: 2px 2px 2px 1px rgb(0 0 0 / 20%);
    --he-items-border-color: gray;
    --he-items-border: 1px solid var(--he-items-border-color) ;
    --he-items-bgcolor: black;
    --he-items-font-color: white;
    
    --he-items-info-max-width: calc(var(--he-items-min-width) - 4em);
    --he-items-info-max-height: calc(var(--he-items-min-height) - 0.3em );
    
    --he-items-text-gap: .5em;
    --he-content-text-gap: 2em;
    
    /*--he-items-text-font-normal: 300;
    --he-items-text-font-bold: 600;
    --he-items-text-font-size-normal: medium;
    --he-items-text-font-size-large: large;
    --he-items-text-font-sm: sm;*/

    --he-items-bg-category-linear: linear-gradient(rgb(0 0 0 / 80%), rgb(0 0 0 / 50%));

   
    }
    
/* ********************************************* */

.home-events-container {
    max-width: var(--he-container-max-width);
    margin: var(--he-container-margin-top) auto var(--he-container-margin-bottom) auto !important;
} 

.home-events-container .home-events-title {
    text-align: center;
    margin: 1.5em auto;
}

.home-events-container .home-events-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--he-items-max-width), var(--he-items-max-width)));
    justify-items: center;
    justify-content: center;
    gap: var(--he-content-text-gap);
}

.home-events-content .home-events-item-anchor {
    max-width: var(--he-items-min-width); 
    min-width: var(--he-items-max-width);
    max-height: var(--he-items-min-height);
    text-decoration: none;
    position: relative;
}

.home-events-item-anchor:hover .home-events-item {
    box-shadow: var(--he-items-box-shadow-hover) ;
}

.home-events-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--he-items-text-gap);
    min-width: var(--he-items-min-width);
    height: var(--he-items-min-height);
    border: var(--he-items-border);
    background-color: var(--he-items-bgcolor);
    border-radius: var(--he-items-border-radius);
    box-shadow: var(--he-items-box-shadow);
    overflow: hidden;
    background-size: cover;
    transition: .5s;
}

.home-events-item-description {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    width: 100%;
    padding-right: 0.5em;
}

.home-events-item-name,
.home-events-item-datetime {
    font-size: var(--he-items-text-font-size-sm);
    color: var(--he-items-font-color);
    letter-spacing: .16rem;
}

.home-events-item-datetime {padding-left: .5em;}

.home-events-item-name {padding-left: 2em;}

.home-events-item .home-events-item-info {
    min-width: calc(var(--he-items-max-width) - 4em);
    min-height: calc(var(--he-items-min-height) - 5em );
    overflow: hidden;
}

.home-events-item-info .home-events-item-title,
.home-events-item-info .home-events-item-localizacion {
    margin: 0.5em;
    display: block;
    font-weight: var(--he-items-text-font-bold);
    font-size: var(--he-items-text-font-size-normal);
    color: var(--he-items-font-color);
}

.home-events-item-description .home-events-item-datetime,
.home-events-item-info .home-events-item-localizacion {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5em;
    width: 95%;
}

/* Declaraciones para iconos */

.home-events-content .ozzy-icon {
    width: 25px;
    height: 25px;
}

@media only screen and (max-width: 480px) {

    .home-events-container .home-events-content {
        grid-template-columns: none;
        justify-content: normal;
        width: 90%;
        margin: 0 auto;
    }

    :root {
        --he-items-min-width: 15em;
        --he-items-max-width: 15em;
        --he-items-min-height: 10em;
    }

}