/* Event Highlights */
/* Events */
div:has(> div > .event-highlight), 
div:has(> .event-highlight) { 
     width: 100%; 
     height: 100%; 
}

.page-section.events .body-head { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 40px; 
    opacity: 0; 
    transform: translateY(50%); 
    transition: all .6s; 
}

.page-section.events.active .body-head {
     opacity: 1;
     transform: translateY(0);
}

/* Slick slider */
.event-highlight { 
     width: 100%; 
     height: 100%; 
     position: relative; 
     border: 1px solid var(--color-main-green); 
     border-radius: 1rem; 
     background-color: var(--iday-surface); 
     overflow: hidden; 
}

.event-slider {
    max-width: 100%;
    height: 100%; 
}

.event-slider .slide-item { 
     width: 100%;
     height: 100%;
}

.event-slider .slick-slide > div {
     height: 100%;
}

.event-info {
     width: auto;
     height: 100%;
     min-height: 512px;
     padding: 78px 30px;
     background-color: var(--color-white);
     cursor: grab;
}

.event-info-head {
     margin-bottom: 82px;
}

.event-info-head * {
     margin: 0;
}

.event-info-label {
     margin-bottom: 8px;
     text-transform: uppercase;
     font-size: 14px;
     font-weight: 700;
}

.event-info-title {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
     color: var(--color-event-title);
     font-size: 48px;
     overflow: hidden;
}

.event-info-title:after {
     content: none;
}

.event-details {
     margin: auto 0 0;
     padding: 0;
     list-style: none;
}

.event-slider .event-details {
     margin: auto 152px 0 0;
}

.event-details * {
     margin: 0;
     color: var(--color-dark-grey);
     line-height: 200%;
     font-size: 1rem;
}

.event-details .detail {
     display: flex;
     align-items: flex-start;
     line-height: 200%;
}

.event-details .detail .detail-icon {
     width: fit-content;
     height: 100%;
     display: flex;
     align-items: flex-start;
     margin-right: 14px;
     padding-block: 8px;
}

.event-details .detail img {
     width: 15px;
     min-width: 15px;
     min-height: 15px; 
     max-height: 15px;
     height: auto;
     margin-bottom: auto;
}

/* Controls */
.controls {
     bottom: 0;
     width: 100%;
     position: absolute;
     display: flex;
     justify-content: flex-end;
     gap: 32px;
     margin-bottom: 88px;
     padding-inline: 30px;
}

.event-highlight .slick-next, .event-highlight .slick-prev {
     top: unset;
     left: unset;
     right: unset;
     bottom: unset;
     width: 50px;
     height: 50px;
     position: static;
     display: flex;
     justify-content: center;
     align-items: center;
     background-size: contain;
     transform: unset;
     cursor: pointer;
     border: 1px solid var(--color-btn-bg);
     border-radius: 50%;
     background-color: var(--color-white);
     transition: all .3s;
}

.event-highlight .slick-next:focus-visible, .event-highlight .slick-prev:focus-visible {
     border: 2px solid black;
}

.event-highlight .slick-next:hover, .event-highlight .slick-prev:hover {
     background-color: var(--color-btn-bg);
}

.event-highlight .slick-next {
     transform: rotate(180deg);
}

.event-highlight .slick-next:before, .event-highlight .slick-prev:before {
     content: '';
     width: 16px;
     height: 16px;
     display: block;
     background-image: url('../images/slider-arrow-left.svg');
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     transition: all .3s;
}

.event-highlight .slick-next:hover:before, .event-highlight .slick-prev:hover:before {
     background-image: url('../images/slider-arrow-left-hover.svg');
}