/**
 * Main layout
 */
.calendar-layout{
    display:grid;
    grid-template-columns:
        minmax(0, 612px)
        minmax(0, 1fr);
    gap:var(--wp--preset--spacing--40);
    align-items:start;
}

.calendar-view {
    max-width: 612px;
    gap: var(--wp--preset--spacing--50);
}

/**
 * Calendar
 */
.calendar-view > div:not(:last-of-type),
.calendar {
    border-top: 2px solid var(--wp--preset--color--primary-100);
}

.calendar-view .year,
.calendar-view .calendar-header {
    height: 40px
}

.calendar-view .month{
    display:flex;
    justify-content: space-between;
    align-items:center;
    position:relative;
}

.calendar-view .year .current_year{
    color: var(--wp--preset--color--primary-500);
    text-align: center;
    font-family: var(--wp--preset--font-family--header);
    font-size:var(--wp--preset--font-size--medium);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.calendar-view .month .current_month{
    font-size:var(--wp--preset--font-size--large);
    font-weight:700;
    color: var(--wp--preset--color--primary-600);
    font-family: var(--wp--preset--font-family--header);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.calendar-view .month .prev_next_month{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    transition:ease-in-out 300ms;
    background-color:transparent;
    color:var(--wp--preset--color--primary-500);
    padding:0;
}

.calendar-view .month .prev_next_month svg{
    width:24px;
    height:24px;
    stroke:currentColor;
    transition:ease-in-out 300ms;
}

.calendar-view .month .prev_next_month:hover{
    background-color:transparent;
    color:var(--wp--preset--color--primary-600);
}

/**
 * Calendar grid
 */
.calendar-view .calendar-container .calendar,
.calendar-view .calendar-container .calendar-header{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:0;
}

.calendar-view .calendar-container .calendar-header{
    color:var(--wp--preset--color--primary-500);
    font-family: var(--wp--preset--font-family--header);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    letter-spacing: 2px;
}

.calendar-view .calendar-container .calendar-header > div{
    text-align:center;
    font-weight:700;
}

.calendar-view .calendar-container .calendar > div{
    padding:var(--wp--preset--spacing--10);
    position:relative;
    transition:ease-in-out 200ms;
}

.calendar-view .calendar-container .calendar > div:not(.emptydays){
    cursor:pointer;
}

.calendar-view .calendar-container .calendar .day-number{
    text-align:center;
    font-weight:700;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--header);
}

.calendar-view .calendar-container .calendar .today{

}

.calendar-view .calendar-container .calendar .current{
    border-radius: var(--wp--custom--border-radius--small);
    background: var(--wp--preset--color--primary-100);
}

/**
 * Event count indicator
 */
.calendar-view .calendar-container .calendar .list-of-courses .total{
    display:flex;
    position:absolute;
    top:4px;
    right:4px;
    height:1.4rem;
    width:1.4rem;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:var(--wp--preset--color--primary-500);
    color:var(--wp--preset--color--base);
    font-size:var(--wp--preset--font-size--xxsmall);
    font-weight:700;
}

.calendar-view .calendar-container .calendar .list-of-courses .pro{
    display:none;
}

/**
 * Calendar days
 */
.calendar-day {
    display: flex;
    justify-content: center;
    align-items: center;
}
.calendar-day:not(.emptydays):hover {
    border-radius: var(--wp--custom--border-radius--small);
    background-color: var(--wp--preset--color--grey-100);
}

/**
 * Event density colours
 */
.calendar-day.has-1-event .day-number{
    background-color:var(--wp--preset--color--secondary-100) !important;
}

.calendar-day.has-2-event .day-number{
    background-color:var(--wp--preset--color--secondary-200) !important;
}

.calendar-day.has-3-event .day-number{
    background-color:var(--wp--preset--color--secondary-300) !important;
}

/**
 * Calendar actions
 */
.calendar-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--wp--preset--spacing--40);
    margin-top:var(--wp--preset--spacing--30);
    padding: 0 var(--wp--preset--spacing--40);
}

/**
 * Events panel
 */
.calendar-events-panel{
    height: 100%;
}

/**
 * Events grid
 */
.calendar-events-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--wp--preset--spacing--40);
    align-items:start;
    height: 100%;
}

/**
 * Pagination wrapper
 */
.calendar-events-pagination{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

/**
 * Individual pages
 */
.calendar-events-page{
    display:none;
}

.calendar-events-page.is-active{
    display:block;
}

/**
 * Event grid
 */
.calendar-events-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--wp--preset--spacing--40);
}

/**
 * Dots
 */
.calendar-pagination-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0.5rem;
}

/**
 * Dot
 */
.calendar-pagination-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    border:none;
    padding:0;
    background-color:var(--wp--preset--color--primary-200);
    cursor:pointer;
    transition:ease-in-out 200ms;
}

/**
 * Active dot
 */
.calendar-pagination-dot.is-active{
    background-color:var(--wp--preset--color--primary-500);
}

/**
 * Hover
 */
.calendar-pagination-dot:hover{
    background-color:var(--wp--preset--color--primary-400);
}

/**
 * Event card
 */
.calendar-event-card {
    display:flex;
    flex-direction:column;
    height:100%;
    text-decoration: none;
    color: var(--wp--preset--color--grey-600);
    transition: ease-in-out 300ms;
    background-color: var(--wp--preset--color--base);
    border-radius: var(--wp--custom--border-radius--small);
    overflow: hidden;
    border: 2px solid var(--wp--preset--color--grey-300);
}

.calendar-event-card:hover{
    box-shadow: var(--wp--custom--box-shadow--deep);
    color: var(--wp--preset--color--grey-600);
}
.calendar-event-card:hover .calendar-event-date {
    background-color: var(--wp--preset--color--primary-200);
}
.calendar-event-card:hover .calendar-event-content {
    background-color: var(--wp--preset--color--primary-100);
}
.calendar-event-card:hover .calendar-event-image img {
    transform: scale(1.05);
}

.calendar-event-image {
    overflow: hidden;
    aspect-ratio: 16 / 11;
    width: 100%;
    height: auto;
    background-color: var(--wp--preset--color--secondary-200);
}

.calendar-event-image img{
    width:100%;
    height: auto;
    display:block;
    aspect-ratio: 16 / 11;
    object-fit:cover;
    transition: 0.3s ease-in-out;
}

.calendar-event-content{
    padding:var(--wp--preset--spacing--40);
    display:flex;
    flex-direction:column;
    flex-grow:1;
    gap: var(--wp--preset--spacing--40);
    transition: 0.3s ease-in-out;
}

.calendar-event-date{
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--header);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    background-color: var(--wp--preset--color--grey-200);
    transition: 0.3s ease-in-out;
}

.calendar-event-card h4{
    margin: 0;
    font-size:var(--wp--preset--font-size--large);
}

.calendar-event-excerpt{
    font-size:var(--wp--preset--font-size--small);
    line-height:1.5;
}

/**
 * Tablet
 */
@media screen and (max-width:1024px){

    .calendar-layout{
        grid-template-columns:1fr;
    }

    .calendar-events-panel{
        position:relative;
        top:auto;
    }

}

/**
 * Mobile
 */
@media screen and (max-width:768px){

    .calendar-view .calendar-container .calendar .list-of-courses .total{
        height:1.2rem;
        width:1.2rem;
    }

    .calendar-events-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .calendar-events-grid .calendar-events-card:nth-of-type(3) {
        display: none;
    }

    /**
     * Carousel mode
     */
    .calendar-events-grid.is-carousel{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        gap:var(--wp--preset--spacing--40);
        padding-bottom:0.5rem;
        grid-template-columns:none;
    }

    .calendar-events-grid.is-carousel .calendar-event-card{
        min-width:280px;
        max-width:280px;
        flex-shrink:0;
        scroll-snap-align:start;
    }

}

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

    .calendar-view .month{
        gap:var(--wp--preset--spacing--20);
    }

    .calendar-view .month .current_month{
        font-size:var(--wp--preset--font-size--xlarge);
    }

    .calendar-view .calendar-container .calendar .list-of-courses .total{
        top:2px;
        right:2px;
        height:1rem;
        width:1rem;
        font-size:10px;
    }

    .calendar-events-grid.is-carousel .calendar-event-card{
        min-width:85%;
        max-width:85%;
    }
}

@media (max-width: 432px) {
    .calendar-events-grid {
        padding:var(--wp--preset--spacing--80);
        grid-template-columns:repeat(1, minmax(0, 1fr));
    }
}