.slider-wrapper {
   position: relative;
   max-width: 100%;
   overflow: hidden;
}
.slider-wrapper[data-nav='overlapping']{
   padding-right: 32px;
}

.navigation-info {
   padding: 4px 8px;
   border-radius: 24px;
   border: 1px solid #E5E5E5;
   position: absolute;
   top: 0;
   right: 10px;
   z-index: 10;
   font-size: 1.2em;
   color: #666;
   background: white;
}



.navigation-info button{
   font-size: 1.2em;
   margin: 4px 8px;
   height: 24px;
   width: 24px;
   color: black;
   background: white;
   border-radius: 50%;
   transition: background 0.3s ease, color 0.3s ease;
   padding: 0;
   text-align: center;
   line-height: 20px;
}

.navigation-info button:hover{
   background: black;
   color:white;
}

.navigation-info .current-page{
   line-height: 24px;
}

/* Overlapping navigation styling */
.navigation-info.overlapping-nav {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 0;
   top: calc(50% - 24px);   
   right: unset;
   border: none;
}

.navigation-info.overlapping-nav .overlapping {
   position: absolute;
   background-color: #F6F6F6;
   cursor: pointer;
   font-size: 1.5em;
   border-radius: 50%;
   webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   height: 48px;
   width: 48px;
   padding: 8px;
   background-size: 32px 32px;
   background-position: center;
   background-repeat: no-repeat;
   margin: 0;   
   transform: translateY(50%);
   border: 1px solid #CCC;
}

.navigation-info.overlapping-nav .next.overlapping {
   right: 0px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000000' d='M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z'/%3E%3C/svg%3E");

}

.navigation-info.overlapping-nav .prev.overlapping {
   left: 0px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000000' d='m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z'/%3E%3C/svg%3E");  
}

.navigation-info.overlapping-nav .overlapping:hover{
   opacity: 1;
   background-color:white;
}


.navigation-info.carded-nav {
   position: absolute;
   right: 0;
   bottom: 0;
   top: 0;
   z-index: 50;
   pointer-events: auto;
   background: none;
   border: none;
   padding: 0;
   display: flex;
   align-items: flex-end;
   height: 100%;
}

/* Card container: rectangular, not pill */
.navigation-info .nav-card {
   display: flex;
   gap: 2px; /* spacing between buttons */
   background: white;
   box-shadow: 0 2px 16px rgba(0,0,0,0.18);
   padding: 8px;
   border: none;
   align-items: center;
   height: 100%;
   box-sizing: border-box;
   padding: 8px;
   border: 1px solid #E5E5E5;

}

/* Circular navigation buttons with arrow SVGs embedded */
.navigation-info .carded {
   background: #fff;
   border-radius: 50%;
   border: 1px solid #E5E5E5;
   height: 32px;
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #222;
   font-size: 1.5em;
   margin: 0 3px;
   transition: background 0.2s, color 0.2s;
   outline: none;
   background-repeat: no-repeat;
   background-position: center;
}

.navigation-info .carded:disabled {
   opacity: 0.4;
   pointer-events: none;
}

.navigation-info .carded:hover {
   background: #f3f3f3;
   color: #111;
}

.navigation-info .next.carded {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z'/%3E%3C/svg%3E");
}

.navigation-info .prev.carded {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z'/%3E%3C/svg%3E");  
}



.slider {
   display: flex;
   transition: transform 0.3s ease;
   margin-right: 32px; /*previews next card*/
   gap: 16px;
}

.slider-wrapper[data-nav='carded'] .slider{
   margin-right: 104px;
}


.slider[data-slides='1'], .slider-wrapper[data-slides-per-page="2"] .slider[data-slides='2']{
   margin-right: 0;
}

a.slide{
   color: black !important;
}
a.slide:hover{
   text-decoration: none !important;
}

.slide {
   text-decoration: none;
   overflow: hidden; /* Contain the zoomed image */
   align-items: center; /* Center the content vertically */
}

/* 6 Slides per Page */
.slider-wrapper[data-slides-per-page="6"] .slide {
   flex: 0 0 calc((100% / 6) - 13.33px); /* Adjusted for 16px gap */
 }
 
 /* 7 Slides per Page */
 .slider-wrapper[data-slides-per-page="7"] .slide {
   flex: 0 0 calc((100% / 7) - 13.71px); /* Adjusted for 16px gap */
 }
 
 /* 8 Slides per Page */
 .slider-wrapper[data-slides-per-page="8"] .slide {
   flex: 0 0 calc((100% / 8) - 14px); /* Adjusted for 16px gap */
 }


/* 5 Slides per Page */
.slider-wrapper[data-slides-per-page="5"] .slide {
   flex: 0 0 calc((100% / 5) - 12.8px); /* Adjusted for 16px gap */
 }
 
 /* 4 Slides per Page */
 .slider-wrapper[data-slides-per-page="4"] .slide {
   flex: 0 0 calc((100% / 4) - 12px); /* Adjusted for 16px gap */
 }
/* 3 Slides per Page */
.slider-wrapper[data-slides-per-page="3"] .slide {
  flex: 0 0 calc((100% / 3) - 10.67px); /* Adjusted for 32px margin-right */
}

/* 2 Slides per Page */
.slider-wrapper[data-slides-per-page="2"] .slide {
  flex: 0 0 calc((100% / 2) - 8px); /* Adjusted for 16px gap */
}

/* 1 Slide per Page */
.slider-wrapper[data-slides-per-page="1"] .slide {
  flex: 0 0 100%;
}
/* One card only; over-write anything above */
.slider[data-slides='1'] .slide{
   flex: 0 0 67% !important;
}
/* Two cards only; over-write anything above */
.slider[data-slides='2'] .slide{
   flex: 0 0 calc((100% / 2) - 8px); /* Adjusted for 16px gap */
}

.slider-wrapper[data-slides-per-page="1"] .slider[data-slides='2'] .slide {
   flex: 0 0 100%;
 }



.skeleton .slide.sk-block{
   margin-right: 10px;
}


.slide:hover img {
   transform: scale(1.1);
}


.item-card{
   width: 100%;
}

.item-card:hover {
   cursor: default;
   user-select: none;
}


.item-card .event-details h3 {
   font-weight: bold;
   font-size: clamp(0.8rem, 2vw, 1.3em);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.item-card .event-details p {
   font-size: small;
   margin: 5px 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;   
}

.price {
   font-weight: bold;
}

.prev, .next {
   cursor: pointer;
   border: none;
   padding: 5px;
   display: inline;
}




.slider-header{
   margin-bottom: 1rem;;
}

/* let line-height work for margin */
.slider-header h2:not(:has(+ p)),
.slider-header h3:not(:has(+ p)),
.slider-header h4:not(:has(+ p)),
.slider-header strong.is-header:not(:has(+ p)){
    margin-bottom: 0;
}

.slider-header.has-navigation h2:not(:has(+ p)),
.slider-header.has-navigation h3:not(:has(+ p)),
.slider-header.has-navigation h4:not(:has(+ p)),
.slider-header.has-navigation strong.is-header:not(:has(+ p)){
   line-height: 56px;
}

.slider-header strong.is-header{
   font-size: clamp(1.3rem, 2.6vw, 1.6em);   
}


@media (min-width: 601px) {
   .slider-header{
      padding-right: 24px;
   }
   .slider-header.has-navigation{
      padding-right: 180px;
   }
   .slider-header.has-navigation{
      margin-bottom: 0;
   }   
}

.slider-header{
   position: relative;
}
.slider-header .navigation-info{
   top: unset;
   bottom: 8px;
}



.slide .slide-inner{
   position: relative;
}



.slide img{
   width: 100%;
   height: 100%;
   aspect-ratio: 13 / 7;
   transition: transform 0.5s ease;
   object-fit: cover;
   border-radius: 8px;
   min-height: 72px;
}

.slide .img-contain{
   border-radius: 8px;
   overflow: hidden;
   width: 100%;
   height: auto;
   margin-bottom: 1em;   
}

.slide:hover, .slide .item-card:hover{
   cursor: pointer;
}




@media (max-width: 600px) {
   .navigation-info.overlapping-nav,
   .navigation-info{
      display: none;
   }
   .slider{
      padding-top: 0;
   }   
}


/* The entire card is wrapped */
.slide.item-card a.wrap{
   color: unset;
   text-decoration: none;
   width: 100%;
   height: 100%;
}


.slide.item-card .details .title{
   font-weight: bold;
   font-size: clamp(var(--h4-min-size),2vw,var(--h4-max-size));
}



.slide.item-card .details p {
   font-size: small;
   margin: 5px 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;   
}

.slide.item-card .details p.preview{
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   white-space: unset;
   line-height: clamp(1em, 1.3em, 1.3em); 
}

.slider-wrapper header{
    all: unset; /* Resets all properties */
}