/*==============================*/
/*=====----- TEMPLATE -----=====*/
/*==============================*/

.core-featured-events {
    --slide-title-size: var(--text-xl);
    --promoted-slide-title-size: var(--text-2xl-2);

    position: relative;
    max-width: 100%;
    padding: 0;
    padding-top: var(--space-5);
    margin-bottom: 54px;
}

.core-featured-events .events-title {
    width: 100%;
    max-width: 69px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    pointer-events: none;
}

.core-featured-events .events-title.featured {
    max-width: 65px;
}

@media (min-width: 640px) {
    .core-featured-events .events-title.featured {
        max-width: 1440px;
    }    
}

.core-featured-events .events-title img { width: 100%; }

.core-featured-events .widget-view-all {
    font-family: var(--font-body);
    font-weight: bold;
    background-color: var(--sw-button-primary-bg);
}

.core-featured-events .view-all-row {
    padding-top: var(--space-4);
    padding-bottom: var(--space-8);
}

.core-featured-events .view-all-row .widget-view-all {
    color: var(--white);
    padding: 10px var(--space-4);
}

/*============================*/
/*=====----- SLIDES -----=====*/
/*============================*/

.core-featured-events .slides {
    gap: 0;
    max-width: 1200px;
    padding: 0 var(--space-5);
    margin: 0 auto;
}

.core-featured-events .slide .details { gap: 4px 10px; }

.core-featured-events .slide .details li a {
    grid-template-columns: 20px minmax(auto, max-content);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-normal);
    color: var(--gray);
    gap: var(--space-1);
    text-decoration: none;
}

.core-featured-events .details li:not(.has-link) { display: flex; }

.core-featured-events .details li .date {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-none);
    letter-spacing: var(--leading-tight);
    color: var(--gold);
}

.core-featured-events.alternate .details li .date { color: var(--black-text); }

.core-featured-events .slide .details li a i {
    height: var(--space-5);
    width: var(--space-5);
    font-size: var(--text-xs);
}

.core-featured-events.alternate .slide .details li a i { background-color: var(--yellow); }

/*----- minor slide -----*/
.core-featured-events .minor-slides-cont {
    background-color: var(--tan);
    padding: var(--space-1) var(--space-5) 0 var(--space-5);
}

.core-featured-events .slide.minor {
    padding: var(--space-4) 0 var(--space-3);
    border-bottom: 2px solid rgba(112, 112, 112, 0.25);
}

.core-featured-events .slide.minor .slide-title,
.core-featured-events .slide.minor .slide-title a {
    font-size: var(--slide-title-size);
    line-height: 1.2;
    margin-bottom: 2px;
}

/*----- promoted slide -----*/
.core-featured-events .slide.promoted {
    max-width: calc(100% - 69px);
    margin-bottom: var(--space-2);
}

.core-featured-events .slide.promoted .img-cont { margin-bottom: var(--space-4); }

.core-featured-events .slide.promoted .mini-date-section {
    gap: var(--space-1);
    padding: 6px var(--space-4) var(--space-1) var(--space-2);
}

.core-featured-events.alternate .slide.promoted .mini-date-section { background-color: var(--yellow); }

.core-featured-events .slide.promoted .mini-date-section .date-month {
    font-size: 1.4375rem;
    color: var(--white);
    text-transform: capitalize;
}

.core-featured-events.alternate .slide.promoted .mini-date-section .date-month { color: var(--black-text); }

.core-featured-events .slide.promoted .mini-date-section .date-day {
    font-size: 1.4375rem;
    color: var(--white);
}

.core-featured-events.alternate .slide.promoted .mini-date-section .date-day { color: var(--black-text); }

.core-featured-events .slide.promoted .content-section {
    position: static;
    max-width: 100%;
    padding: 0;
    pointer-events: all;
}

.core-featured-events .slide.promoted .slide-title,
.core-featured-events .slide.promoted .slide-title a {
    font-size: var(--promoted-slide-title-size);
    color: var(--black-text);
    line-height: 1.19;
    letter-spacing: -0.015em;
    margin-bottom: 0;
}

.core-featured-events .slide.promoted .details,
.core-featured-events .slide.promoted .details li a { color: var(--gray); }

.core-featured-events .slide.promoted .details { --icon-color: var(--black-text); }

.core-featured-events .slide.promoted .details li a { text-decoration: none; }

.core-featured-events .slide.promoted .details li .icon,
.core-featured-events .slide.promoted .details li .icon::before { text-decoration: none; }

/*===================================*/
/*=====----- MEDIA QUERIES -----=====*/
/*===================================*/

@media (hover: hover) {
    /*----- promoted slide -----*/
    .core-featured-events .slide.promoted .slide-title a:hover {
        color: inherit;
    }
}

@media (min-width: 40em) {
	.core-featured-events {
        padding-top: var(--space-24);
    }

    .core-featured-events .events-title {
        max-width: 1440px;
        right: 50%;
        transform: translateX(50%);
    }

    .core-featured-events .slides {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-8);
        align-items: start;
    }

    .core-featured-events .slide.promoted {
        grid-column: 1;
        grid-row: 1 / -1;
        max-width: 100%;
        margin-bottom: 0;
    }

    .core-featured-events .minor-slides-cont {
        grid-column: 2;
        grid-row:1;
        margin-top: var(--space-16);
    }
}

@media (min-width: 64em) {
	.core-featured-events {
        --slide-title-size: var(--text-3xl-1);
        --promoted-slide-title-size: var(--text-5xl);

        padding-top: 180px;
        margin-bottom: var(--space-16);
    }

    .core-featured-events .view-all-row {
        padding-top: var(--space-4);
        padding-bottom: var(--space-12);
    }
    
    .core-featured-events .view-all-row .widget-view-all {
        font-size: var(--text-base);
        padding: var(--space-4) var(--space-6);
    }

    .core-featured-events .slides {
        grid-template-columns: 0.757fr 1fr;
        gap: 57px;
    }

    .core-featured-events .slide .details { gap: 8px 15px; }

    .core-featured-events .slide .details li a {
        grid-template-columns: 30px minmax(auto, max-content);
        font-size: 1.3125rem;
        gap: var(--space-2);
    }

    .core-featured-events .slide .details li .date {
        font-size: 1.375rem;
        line-height: var(--leading-tight);
        letter-spacing: var(--leading-tight);
    }

    .core-featured-events .slide .details li a i {
        height: 30px;
        width: 30px;
        font-size: var(--text-base);
    }

	/*----- minor slide -----*/
    .core-featured-events .minor-slides-cont {
        margin-top: 137px;
        padding-left: var(--space-10);
        padding-right: var(--space-10);
        padding-top: 18px;
    }

    .core-featured-events .slide.minor { padding: var(--space-5) 0; }

    .core-featured-events .slide.minor .slide-title,
    .core-featured-events .slide.minor .slide-title a {
        line-height: 1.14;
        letter-spacing: -0.015em;
        margin-bottom: var(--space-1);
    }

	/*----- promoted slide -----*/
    .core-featured-events .slide.promoted .mini-date-section { padding: var(--space-2) 10px var(--space-1) 10px; }
    
    .core-featured-events .slide.promoted .mini-date-section .date-month { font-size: 2.125rem; }
    
    .core-featured-events .slide.promoted .mini-date-section .date-day { font-size: 2.125rem; }

    .core-featured-events .slide.promoted .slide-title,
    .core-featured-events .slide.promoted .slide-title a {
        line-height: 1.09;
        letter-spacing: -0.015em;
        margin-bottom: var(--space-1);
    }
}