body, html {
            overflow-x: hidden;
            max-width: 100vw;
          }

          html {
            background-color: #C8BDFC;
          }
          .grid-item a {
            -webkit-user-drag: none;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
          }
          .organization-profile-event-container a {
            -webkit-user-drag: none;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;

          }
          .swiper-slide a {
            -webkit-user-drag: none;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
          }
          .ticketCard a {
            -webkit-user-drag: none;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
          }
          #location-filter, #date-filter {
            background-color: #B7D4DA;
            border-color: black;
          }
          .linkButtonNoUnderline {
              cursor: pointer;
              color: #373c44;
              text-decoration: none;
          }
          .swiper, .swiper-wrapper, .swiper-slide { touch-action: pan-y pan-x; }
          .swiper-wrapper {
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE 10+ */
            overscroll-behavior-x: contain;
          }
          .swiper-wrapper.dragging {
            cursor: grabbing;
            user-select: none;
            pointer-events: all;
          }
          .swiper-wrapper::-webkit-scrollbar {
            display: none; /* Safari and Chrome */
          }

          .swiper-container {
            width: 100%;
            max-width: 100vw;
          }




.section-title { margin-bottom: 0px; font-size: 1.6rem; }
.filter-bar { display: flex; gap: 1.2rem; align-items: center; }
.swiper { width: 100%; max-width: 100vw; }
.swiper-slide { display: flex; justify-content: center; align-items: stretch; will-change: transform; }
.swiper-button-next, .swiper-button-prev, .swiper-pagination { display: none !important; }

/* ---- Section 1: Responsive 16:9 ticket cards ---- */
#filtered-swiper .swiper-slide { max-width: 500px; width: 100%; margin-left: 5px; margin-right: 10px; }
.ticketCard {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
}
.upperCard {
  aspect-ratio: 16/9;
  background: #ddd;
  position: relative;
  overflow: hidden;
  border-radius: var(--pico-border-radius);
}
.upperCardImage {
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 6;
}

.upperCard img {
  max-width: fit-content;
}
.cardBackground {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: black; opacity: 0.5; z-index: 4;
}
.upperCardCover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.1); z-index: 8; }
.imageTextUpperLeft {
  color: black;
  top: 12px;
  background-color: white;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
  left: 12px;
  position: absolute;
  width: fit-content;
  font-size: 10px;
  z-index: 11;
}
.lowerCard { width: 100%; max-width: 500px; }
.lowerCard a { text-decoration: none; }
.eventTitleMobile { color: black; max-width: 408px; }
.bottomTicketCard { font-size: 12px; color: black; }

/* Mobile fix for Swiper slide width */
@media (max-width:600px) {
  #filtered-swiper .swiper-slide, .ticketCard { max-width: 98vw; }
}

/* ---- Section 2: Masonry - images only, 3col ---- */
.recommended-masonry-grid { width: 100%; background: none; }
.recommended-masonry-grid:after { content: ''; display: block; clear: both; }
.recommended-masonry-grid .grid-sizer, .recommended-masonry-grid .grid-item { width: 33.3333%; }
.recommended-masonry-grid .grid-item { float: left; padding: 0.5rem; box-sizing: border-box; }
.recommended-masonry-grid img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* --- Section 3: square people cards --- */
.people-square-img { width: 180px; height: 180px; object-fit: cover; border-radius: 24px; display: block; margin: 0 auto; }
@media (max-width: 767px) { .people-square-img { width: 110px; height: 110px; } }

/* ---- Section 4: Organizations, two per slide, org profile style ---- */
.orgs-swiper-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  width: 360px;
  max-width: 94vw;
  margin-left: 10px;
}
.organization-profile-event-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  background: #B7D4DA;
  border-color: black;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  width: 100%;
  min-height: 100px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-top: 10px;
  padding: 0 8px 0 0;
}
.organization-profile-event-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: #eee;
  margin: 10px 10px 10px 10px;
}
.organization-profile-event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.organization-profile-event-right-side {
  margin-left: 0;
  display: flex;
  flex-direction: column;
  flex:1 1 0%;
  min-width: 0;
  padding: 12px 0;
}
.organization-profile-event-right-side > a { text-decoration: none; }
.organization-profile-event-right-side > a h1 {
  font-size: 1.09rem;
  font-weight: bold;
  margin: 0 0 2px 0;
  color: #222;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.organization-profile-event-right-side > .org-headline {
  color: #444;
  font-size: .97rem;
  margin-bottom: 4px;
}
.organization-profile-event-right-side .org-address {
  font-size: .95em;
  color: #666;
  margin-top: 1px;
}
#orgs-swiper .swiper-slide { display: flex; justify-content: center; }



@media (max-width: 600px) {
  #orgs-swiper {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  #orgs-swiper .swiper-slide { 
    display: flex;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    /* NO width/max-width here; Swiper handles it. */
    box-sizing: border-box;
  }
  .orgs-swiper-col {
    width: 100%;
    padding-bottom: 10px;
    padding-right: 10px;
    max-width: none;  /* don't clamp */
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    margin-left: 10px;
  }
}

@media (max-width: 767px) {
  .recommended-masonry-grid .imageTextUpperLeft {
    display: none !important;
  }
}


select {
  background-color: #B7D4DA;
    border-color: black;
}