:root {
   --max-width: 1180px;
   --h2-min-size: 1.5em;
   --h2-max-size: 1.8em;
   --h3-min-size: 1.4em;
   --h3-max-size: 1.6em;
   --h4-min-size: 1.3em;
   --h4-max-size: 1.4em;
 }
 #header-basic{
    overflow: hidden;
 }

#header-basic .centered{
   width: var(--max-width) !important;
   padding-left: 16px;
   padding-right: 16px;
   box-sizing: border-box;
}

#header-basic img.logo{
   width: 140px !important;
}



body{
   background: white;
}

section{
   margin-bottom: clamp(1.5rem, 2vw, 3.5rem);
}
section.hero{
   margin-bottom: 0;
}


.hero {   
   background-size: cover;
   height: 30vw; /* Sets the height to 30% of the viewport width */
   min-height: 180px; /* Ensures the height does not go below 180px */
   max-height: 320px; /* Ensures the height does not exceed 400px */
   display: flex;
   justify-content: center;
   align-items: center;
   position:relative;
   color:white;
   flex-direction: column;
}
.hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6); /* Black overlay with 50% opacity */
   z-index: 1; /* Ensures the overlay is above the background image but below any content */
}

.hero h1{
   font-size: clamp(1.5rem, 5vw, 3.5rem);
   color:white; 
   font-weight: bold;
   text-align: center;
   max-width: 740px;
   padding-left: 32px;
   padding-right: 32px;
}
.hero *{
   z-index: 2;
}
.hero a{
   color: white;
}


h2, .mobile h2{
   font-size: clamp(var(--h2-min-size), 3vw, var(--h2-max-size));
   font-weight: 500;
 }
 
 h3, .mobile h3 {
   font-size: clamp(var(--h3-min-size), 2.5vw, var(--h3-max-size));
   font-weight: 500;
 }
 
 h4, .mobile h4 {
   font-size: clamp(var(--h4-min-size), 2vw, var(--h4-max-size));
   font-weight: 500;
 }


.container {
   max-width: 1180px;
   margin: auto;
   position: relative;
   padding: 0 16px;
   box-sizing: border-box;
}

nav{
   display: flex;
   gap: 24px;
   overflow-x: auto;
}

.tabs a {
   display: inline-block;
   line-height: 3.2em;
   text-decoration: none;
   color: #666;
   border-bottom: 2px solid white;
   font-size: 1.4em;
   white-space: nowrap;
}
.tabs a.active{
   color: black;
   border-bottom-color:black;
   font-weight: 500;
}
.tabs a:hover{
   color: #222;
}
.faq h3 {
   cursor: pointer;
}
.faq p {
   display: none;
}
.side-by-side div.col:first-child {
   margin-bottom: 2rem;
}
@media (min-width: 768px) {
   .side-by-side {
       display: flex;
       justify-content: space-between;
   }
   .side-by-side div.col:first-child {
       flex: 1;
       margin-right: 5rem;
       margin-bottom: 0;
   }
   .side-by-side div:last-child {
       width: 25%;
   }
}




.slider-wrapper {
   position: relative;
   max-width: 100%;
   overflow: hidden;
}

.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;
}




.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;
}

.slider {
   display: flex;
   transition: transform 0.5s ease;
   padding-top: 20px;
   margin-right: 30px; /*previews next card*/
}


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

.slide {
   text-decoration: none;
   color: black;
   flex: 0 0 33.333%; /* Each slide takes up one third of the slider width */
   box-sizing: border-box;
   padding: 10px;
   overflow: hidden; /* Contain the zoomed image */
   display: flex; /* Make sure the <li> element is flexible */
   align-items: center; /* Center the content vertically */
}

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


.slide img {
   width: 100%;
   height: 100%;
   aspect-ratio: 13/7;
   transition: transform 0.5s ease;
   object-fit: cover; /* Ensure the image covers the area without distortion */
   border-radius: 8px;
   min-height: 72px;
   filter: brightness(0.8);

}

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


.item-card{
   width: 100%;
}

.item-card .event-details h3 {
   font-weight: bold;
   font-size: 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;
}

@media (hover: none) { /* Hide buttons on touch devices */
   .prev, .next {
       display: none;
   }
}



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

.event-item {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   gap: 20px;
   align-items: center;
   padding: 10px;
   border-bottom: 1px solid #ccc;
}

.event-date {
   text-align: center;
}

.event-info strong {
   font-weight: bold;
}

.event-price {
   text-align: right;
}

.price-button {
   padding: 8px 16px;
   background-color: #007BFF;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
}

.price-button:hover {
   background-color: #0056b3;
}

.view-more {
   text-align: center;
   padding: 20px;
}

@media (max-width: 768px) {
   .event-item {
       grid-template-columns: 1fr 1fr;
       grid-template-areas:
           "date info"
           "price price";
   }

   .event-date {
       grid-area: date;
   }

   .event-info {
       grid-area: info;
   }

   .event-price {
       grid-area: price;
       text-align: center;
   }
}

.performer-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.performer-item {
   display: flex;
   width: 100%; /* Ensure the list item is full width */
   align-items: center; /* Vertically center the contents */
   margin-bottom: 24px; /* Space between rows */
   box-sizing: border-box;
   color: black !important;

}

.performer-avatar {
   width: 48px; /* Avatar takes up 20% of the list item's width */
   height: 48px; /* Maintain aspect ratio */
   margin-right: 16px;
   flex-shrink: 0; /* Prevent the image from shrinking */
   border-radius: 8px;
   object-fit: cover;
}

.performer-info {
   display: flex;
   flex-direction: column;
   justify-content: center; /* Center the text vertically */
   flex-grow: 1; /* Allow the text block to fill the rest of the item */
   text-decoration: none !important;
}

.performer-info strong {
   font-weight: bold;
   margin-bottom: 5px; /* Space between the name and the action text */
   font-size: 1.3em;
}

.performer-info span {
   cursor: pointer; /* Suggest interactivity */
   font-size: 1.1em;
}

.performer-list a.link-wrapper:hover{
   text-decoration:none !important;
}
.performer-list a.link-wrapper:hover{
   opacity: 0.9;
}

.venue-list{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px; /* Adjust the gap between the columns as needed */   
}
.venue-item, .venue-item a {
   color: black !important;
}

.venue-list strong{
   font-weight: 500;
   margin-bottom: 5px; /* Space between the name and the action text */
   font-size: 1.2em;
   display: block; /* Make the link fill the container */
   overflow: hidden; /* Hide the overflow text */
   white-space: nowrap; /* Prevent the text from wrapping */
   text-overflow: ellipsis; /* Show ellipsis (...) when the text overflows */
   width: 240px; /* Ensure the strong element takes full width of the container */      
}
.venue-list span {
   cursor: pointer; /* Suggest interactivity */
   font-size: 1.07em;
}


.filter-buttons {
   margin-bottom: 20px;
}

.filter-buttons button {
   margin-right: 10px;
   padding: 10px 20px;
   cursor: pointer;
}

.filter-buttons button.active {
   background-color: black;
   color: white;
}

.spinner {
   text-align: center;
   margin-top: 20px;
}

.list-cities {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 10px;
   list-style-type: none;
   padding: 0;
   margin: 0;
   border-left: 4px solid #e5e5e5;
   padding-left: 10px;
   margin-bottom: 48px   
}

.list-cities li{
   margin-bottom: 0.5rem;
   letter-spacing: 0.0125rem;
}


.list-cities li a {
   color: #222;
   font-size: 16px;
}


.navigation-sort-cities {
   display: flex;
   justify-content: space-between; /* Distribute items evenly with space in between */
   margin-bottom: 40px; /* Space below the tabbed navigation */
   width: fit-content; /* Limit width to content width */
}

.navigation-sort-cities a {
   text-decoration: none;
   color: #333;
   padding: 5px 10px; /* Adjust padding to create space around text */
   font-size: 16px;
   background: #F1F1F1;
   border-radius: 8px;
   margin-right: 20px;
}

.navigation-sort-cities a.active {
 font-weight: 500;
}



.city-group {
   margin-bottom: 20px;
}

.item-card.skeleton {
   background: #f1f1f1;
   position: relative;
   overflow: hidden;
   height: 150px; /* Adjust height as needed */
   width: 100%; /* Adjust width as needed */
   border-radius: 18px;
   padding: unset;
   border: 10px solid white;
}

.item-card.skeleton::before {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: linear-gradient(90deg, rgba(224, 224, 224, 0) 0%, rgba(224, 224, 224, 0.8) 50%, rgba(224, 224, 224, 0) 100%);
   animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
   0% {
       transform: translateX(-100%);
   }
   100% {
       transform: translateX(100%);
   }
}