/*
	README

	Modify this file as much or as little as needed.
*/

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

.core-featured-events {
    --slide-title-size: var(--text-lg);
    --promoted-slide-title-size: var(--text-lg);
    --slide-desc-size: var(--text-sm);
    --date-picker-button-background-color: var(--sw-button-primary-bg);
	--date-picker-button-color: var(--sw-button-primary-color);

    padding-block: 55px 68px;
    margin-block-end: 60px;
    max-width: unset;
    position: relative;
}

.core-featured-events::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background: url(https://assets.simpleviewinc.com/simpleview/image/upload/v1/clients/travelsantaana/grainy_texture_bf1835c9-05f3-465b-a27f-0e030a7e405b.png);
    background-repeat: repeat;
    background-position: 50% 50%;
    background-size: 300px;
}

.core-featured-events .widget-header {
    max-width: 1280px;
}

.core-featured-events .widget-title {
    text-align: center;
    font-family: var(--font-palasio-ink);
    font-size: 2.375rem;
    line-height: calc(42/38);
    letter-spacing: 0.1187rem;

}

.core-featured-events .widget-title::before,
.core-featured-events .widget-title::after {
    width: 26px;
    height: 42px;
    top: 40%;
}

.core-featured-events .widget-title::before {
    background: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/left-motif-straight.svg);
    left: -10px;
}

.core-featured-events .widget-title::after {
    background: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/right-motif-straight.svg);
    right: -10px;
}

.core-featured-events .widget-view-all {
    font-family: var(--font-santa-rosa);
    font-weight: 100;
    background-color: var(--sw-button-secondary-bg);
    color: var(--gray-300);
}

.core-featured-events .widget-view-all:hover,
.core-featured-events .widget-view-all:focus {
    background-color: var(--sw-button-secondary-bg-hover);
    translate: -6px 0;
}

/*----- date picker -----*/

.core-featured-events .input-label {
	font-weight: bold;
}

.core-featured-events .input {
	border: 2px solid var(--black);
    border-radius: var(--rounded-md);
}

.core-featured-events .form-button {
	background-color: var(--date-picker-button-background-color);
	border-radius: var(--rounded-full);
	text-align: center;
    font-weight: bold;
    color: var(--date-picker-button-color);
}

.core-featured-events .slides {
    max-width: 1280px;
    margin-inline: auto;
}

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

.core-featured-events .slide .slide-title {
    font-size: var(--slide-title-size);
    line-height: 1.2;
}

.core-featured-events .slide .details,
.core-featured-events .slide .details li a {
    font-size: var(--text-sm);
    font-weight: 100;
}

.core-featured-events .slide .details li i {
    font-size: 0.9375rem;
}

.core-featured-events .slide .slide-desc {
    font-size: var(--slide-desc-size);
}

.core-featured-events .slide .mini-date-section {
    color: var(--gray-700);
    z-index: 2;
}

.core-featured-events .slide .mini-date-section::before,
.core-featured-events .slide .mini-date-section::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    translate: -50% 0;
    display: block;
    width: 21px;
    height: 14px;
}

.core-featured-events .slide .mini-date-section::before {
    top: 0;
    transform: rotate(180deg);
}

.core-featured-events .slide.promoted .mini-date-section::before {
    top: -8px;
}

.core-featured-events .slide .mini-date-section::after {
    bottom: 8px;
}

.core-featured-events .slide .mini-date-section .date-month {
    letter-spacing: 0.075rem;
    line-height: 0.8;
}

.core-featured-events .slide .mini-date-section .date-day {
    letter-spacing: 0.1406rem;
    line-height: 1;

}

/*----- minor slide -----*/

.core-featured-events .slide.minor {
    padding-inline: 18px;
}

.core-featured-events .slide.minor .category {
    font-size: var(--text-xs);
}

.core-featured-events .slide.minor .category {
    line-height: 1.2;
}

.core-featured-events .slide.minor .mini-date-section {
    --month-size-mobile: 1.5rem;
    --day-size-mobile: 2.8125rem;
    position: relative;
    height: 112px;
    justify-content: center;
    padding-top: 24px;
}

.core-featured-events .slide.minor .mini-date-section::before,
.core-featured-events .slide.minor .mini-date-section::after {
    background: var(--top-decoration-yellow-dark);
}

.core-featured-events .slide.minor::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 100px;
    bottom: 0;
    translate: 0;
    display: block;
    width: 1.5px;
    height: 100%;
    background-color: var(--primary-color-900);
} 

/*----- promoted slide -----*/

.core-featured-events .slide.promoted .mini-date-section {
    --month-size-mobile: 1.5rem;
    --day-size-mobile: 2.8125rem;
    color: var(--gray-100);
}


.core-featured-events .slide.promoted .mini-date-section::before,
.core-featured-events .slide.promoted .mini-date-section::after {
    background: var(--top-decoration-yellow-light);
}

.core-featured-events .slide.promoted .img-cont::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    height: 50%;
    bottom: 0;
    top: auto;
    background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
    content: '';
    pointer-events: none;
}

.core-featured-events .slide.promoted .content-section {
    color: var(--white);
    text-shadow: 0 0 16px rgba(0,0,0,.5);
    padding-inline-end: 10px;
    padding-block: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    padding: 20px 18px;
    padding-inline-start: 25px;
    right: 0;
    left: auto;
    width: calc(100% - 106px);
    max-width: unset;
}


.core-featured-events .slide.promoted .content-section::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: -5px;
    bottom: 0;
    translate: 0;
    display: block;
    width: 1.5px;
    height: 100%;
    background-color: var(--primary-color-900);
} 


.core-featured-events .slide.promoted .slide-title,
.core-featured-events .slide.promoted .details,
.core-featured-events .slide.promoted .details li a,
.core-featured-events .slide.promoted .slide-desc {
    color: inherit;
}

.core-featured-events .slide.promoted .slide-title {
    font-size: var(--promoted-slide-title-size);
    margin-block-end: 2px;
}

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

.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 {
    display: inline-block;
    text-decoration: none;
    color: var(--primary-color-900);
}

/*===================================*/
/*=====----- 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 .view-all-row {
        justify-content: start;
        padding-block-end: 32px;
    }
	/*----- minor slide -----*/

	.core-featured-events .slide.minor .mini-date-section {
        --month-size-desk: 1.375rem;
        --day-size-desk: 3.4375rem;
    }
    
    .core-featured-events .slide.minor {
        padding-inline: 0;
    }

    
    .core-featured-events .slide.minor::after {
        left: 76px;
    }
}

@media (min-width: 64em) {
	.core-featured-events {
        --slide-title-size: 1.375rem;
        --promoted-slide-title-size: 1.375rem;
        --slide-desc-size: var(--text-base);

        padding-block: 103px 100px;
    }

    .core-featured-events .widget-header {
        padding-inline: 0;
        margin-block-end: 35px;
    }

    .core-featured-events .widget-title {
        font-size: 3.3125rem;
        letter-spacing: 0.1656rem;
        padding-inline: 46px;
        line-height: calc(48/53);
    }

    .core-featured-events .widget-title::before,
    .core-featured-events .widget-title::after {
        width: 26px;
        height: 41px;
    }

    .core-featured-events .widget-title::before {
        left: 0;
    }

    .core-featured-events .widget-title::after {
        right: 0;
    }

    .core-featured-events .view-all-row {
        padding-inline-start: 14px;;
    }

    /*----- SLIDES -----*/
    .core-featured-events .slides {
        grid-template-columns: 7.3fr 4.11fr;
        padding-inline-end: 87px;
        row-gap: 35px;
    }

    .core-featured-events .slide .mini-date-section {
        height: 106px;
        width: 68px;
        padding-block: 30px 26px;
    }

    .core-featured-events .slide.promoted .mini-date-section::before {
        top: -2px;
    }
    
    .core-featured-events .slide .mini-date-section .date-day {
        font-family: var(--font-body);
        line-height: 0.8;
    }

    .core-featured-events .slide .details li i {
        font-size: 17px;
    }


	/*----- minor slide -----*/
    .core-featured-events .slide.minor {
        padding-inline-start: 14px;
    }

    .core-featured-events .slide.minor::after {
        left: 98px;
        width: 2px;
    }


    .core-featured-events .slide.minor .mini-date-section {
        --month-size-desk: 1.75rem;
        --day-size-desk: 3.4375rem;

        padding: var(--space-4);
        padding-block-start: 22px;
    }


    .core-featured-events .slide.minor .category,
    .core-featured-events .slide .details,
    .core-featured-events .slide .details li a {
        font-size: var(--text-base);
    }

	/*----- promoted slide -----*/

	.core-featured-events .slide.promoted .mini-date-section {
        --month-size-desk: 1.75rem;
        --day-size-desk: 3.4375rem;
    }

    /*----- marquee bottom -----*/

    .core-featured-events.marquee-bottom {
        --slide-title-size: var(--text-lg);
    }

    .core-featured-events.marquee-bottom .slide.minor .category,
    .core-featured-events.marquee-bottom .slide.minor .details {
        font-size: var(--text-xs);
    }
}