/* Calendario de actividades Uplaan - [uplaan_calendario] */

.uplaan-calendar-block {
    --uplaan-color-1: var(--qode-main-color, #6f2c3e);
    --uplaan-color-2: #4a1c28;
    --uplaan-text: #3a3a3a;
    --uplaan-title-width: 200px;
    --uplaan-overlap: 1.5em; /* lo que bajan las tarjetas sobre el día siguiente */
    max-width: 100%;
    padding-bottom: calc(var(--uplaan-overlap) + 12px);
}

.uplaan-calendar-block *,
.uplaan-calendar-block *::before,
.uplaan-calendar-block *::after {
    box-sizing: border-box;
}

@keyframes uplaanFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.uplaan-calendar-block .uplaan-calendar-container {
    animation: uplaanFadeIn 1s ease-in-out;
}

.uplaan-calendar-block p {
    margin: 0;
}

/* Día */

.uplaan-calendar-block .date-container {
    display: flex;
}

.uplaan-calendar-block .date-container:nth-child(odd) {
    background: var(--uplaan-color-1);
}

.uplaan-calendar-block .date-container:nth-child(even) {
    background: var(--uplaan-color-2);
}

/* La fecha arranca a la altura de la primera tarjeta */
.uplaan-calendar-block .date-title-container {
    flex: 0 0 var(--uplaan-title-width);
    padding: calc(var(--uplaan-overlap) * 2 + 1em) 1.8em 1.8em;
}

.uplaan-calendar-block .date-title {
    color: #fff;
    line-height: 1.4;
}

.uplaan-calendar-block .date-title strong {
    display: block;
    text-transform: lowercase;
    font-size: 1.2em;
}

.uplaan-calendar-block .date-title span {
    display: block;
}

/* Actividades */

.uplaan-calendar-block .date-events-container {
    flex: 1 1 auto;
    min-width: 0;
    padding: calc(var(--uplaan-overlap) + 1em) 1.2em 0 0;
}

.uplaan-calendar-block ul.date-events {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr));
    gap: 1.2em;
    margin: 0;
    padding: 0;
    transform: translateY(var(--uplaan-overlap));
}

.uplaan-calendar-block li.event-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 1em;
    background: #fff;
    color: var(--uplaan-text);
    box-shadow: 5px 2px 10px rgba(0, 0, 0, .2);
}

.uplaan-calendar-block .event-name {
    font-size: .85em;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: .3em;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.uplaan-calendar-block .date-container:nth-child(odd) .event-name {
    color: var(--uplaan-color-1);
}

.uplaan-calendar-block .date-container:nth-child(even) .event-name {
    color: var(--uplaan-color-2);
}

.uplaan-calendar-block .event-time {
    color: var(--uplaan-text);
}

.uplaan-calendar-block .event-app-link {
    margin-top: auto;
    padding-top: .8em;
}

.uplaan-calendar-block .download-text {
    font-size: .72em;
    text-transform: uppercase;
}

.uplaan-calendar-block .download-text a {
    display: block;
    padding: .8em 1em;
    border: 1px solid var(--uplaan-color-1);
    border-radius: 4px;
    color: var(--uplaan-color-1);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease-out, color .2s ease-out;
}

.uplaan-calendar-block .download-text a:hover,
.uplaan-calendar-block .download-text a:focus {
    background-color: var(--uplaan-color-1);
    color: #fff;
}

.uplaan-calendar-block .uplaan-calendar-empty {
    padding: 2em;
    text-align: center;
}

/* Tablet */

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

    .uplaan-calendar-block {
        --uplaan-title-width: 150px;
    }

    .uplaan-calendar-block .date-title-container {
        padding-left: 1.2em;
        padding-right: 1.2em;
    }

    .uplaan-calendar-block ul.date-events {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr));
    }

}

/* Móvil: el día arriba y las actividades debajo, sin solaparse */

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

    .uplaan-calendar-block {
        padding-bottom: 0;
    }

    .uplaan-calendar-block .date-container {
        flex-direction: column;
    }

    .uplaan-calendar-block .date-title-container {
        flex: none;
        padding: 1.2em 1em .8em;
    }

    .uplaan-calendar-block .date-events-container {
        padding: 0 1em 1.2em;
    }

    .uplaan-calendar-block ul.date-events {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 13em), 1fr));
        gap: .8em;
        transform: none;
    }

}