/*

img, video {
  filter: blur(20px);
}
img:hover, video:hover {
  filter: none;

}

*/
.donate, a[href="https://opencollective.com/stashapp"] {
  display: none !important;
}

/* Stash-Logo links oben durch UTOPIA-X ersetzen */
.navbar-brand .brand-link {
  font-size: 0 !important;
}
.navbar-brand .brand-link::after {
  content: "UTOPIA-X";
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}

/* Zweiten Szenen-Bereich (Zufall) als Grid statt Sidescroller anzeigen */
.recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slider {
  padding: 0 !important;
}
.recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-list {
  overflow: visible !important;
}
.recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-track {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  transform: none !important;
  gap: 10px;
}
.recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide {
  flex: 0 0 calc(20% - 10px) !important;
  width: calc(20% - 10px) !important;
  max-width: calc(20% - 10px) !important;
}
.recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide.slick-cloned {
  display: none !important;
}
.recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-arrow,
.recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-dots {
  display: none !important;
}
@media (max-width: 1200px) {
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide {
    flex: 0 0 calc(25% - 10px) !important;
    width: calc(25% - 10px) !important;
    max-width: calc(25% - 10px) !important;
  }
}
@media (max-width: 800px) {
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide {
    flex: 0 0 calc(33.3333% - 10px) !important;
    width: calc(33.3333% - 10px) !important;
    max-width: calc(33.3333% - 10px) !important;
  }
}

/* Zufall: Mobile single-column override - higher specificity than Zufall grid rules */
@media (max-width: 900px) {
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-track {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide .scene-card,
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide .grid-card,
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* === Custom Mobile + Group Cover Fixes === */

/* Problem 1: Mobile-only — Szenen-Karten untereinander, volle Breite */
@media (max-width: 900px) {
  .grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .grid > .scene-card,
  .grid > .grid-card,
  .grid > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
  .scene-card .video-section,
  .scene-card .thumbnail-section,
  .grid-card .thumbnail-section {
    width: 100% !important;
  }
  .scene-card .video-section img,
  .scene-card .video-section video,
  .scene-card .thumbnail-section img,
  .grid-card .thumbnail-section img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}

/* Problem 2: Gruppen-Uebersicht — responsives Grid (16:9, max 6 Spalten) */
.group-list .row,
.movie-list .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 1rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.group-list .row > .group-card,
.movie-list .row > .movie-card,
.group-list .row > .grid-card,
.movie-list .row > .grid-card {
  width: 100% !important;
  max-width: 100% !important;
  flex: unset !important;
  margin: 0 !important;
  padding: 0 !important;
}
.group-card .thumbnail-section,
.movie-card .thumbnail-section,
.group-card .video-section,
.movie-card .video-section {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}
.group-card .thumbnail-section img,
.movie-card .thumbnail-section img,
.group-card .video-section img,
.movie-card .video-section img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
@media (min-width: 1600px) {
  .group-list .row,
  .movie-list .row {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* Mobile Force 1-Spalte (Gruppen + Szenen) */
@media (max-width: 900px) {
  .group-list .row,
  .movie-list .row,
  .scenes-list .row,
  .scene-list .row,
  .item-list-container .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .group-list .row > *,
  .movie-list .row > *,
  .scenes-list .row > *,
  .scene-list .row > *,
  .item-list-container .row > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile Slick-Carousels aufbrechen → vertikales Stacking */
@media (max-width: 900px) {
  .recommendations-container .slick-slider {
    overflow: visible !important;
  }
  .recommendations-container .slick-list {
    overflow: visible !important;
    height: auto !important;
  }
  .recommendations-container .slick-track {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    transform: none !important;
    gap: 1rem !important;
    margin-left: 0 !important;
  }
  .recommendations-container .slick-slide {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    margin: 0 !important;
  }
  .recommendations-container .slick-slide.slick-cloned {
    display: none !important;
  }
  .recommendations-container .slick-slide > div,
  .recommendations-container .slick-slide .scene-card,
  .recommendations-container .slick-slide .movie-card,
  .recommendations-container .slick-slide .performer-card,
  .recommendations-container .slick-slide .grid-card,
  .recommendations-container .slick-slide .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .recommendations-container .slick-slide .video-section,
  .recommendations-container .slick-slide .thumbnail-section,
  .recommendations-container .slick-slide .scene-card-preview,
  .recommendations-container .slick-slide .card-section {
    width: 100% !important;
    max-width: 100% !important;
  }
  .recommendations-container .slick-slide .video-section img,
  .recommendations-container .slick-slide .video-section video,
  .recommendations-container .slick-slide .thumbnail-section img,
  .recommendations-container .slick-slide .scene-card-preview img,
  .recommendations-container .slick-slide .scene-card-preview video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  .recommendations-container .slick-arrow,
  .recommendations-container .slick-dots {
    display: none !important;
  }
}
/* Zufall-Reihe: Slick-Carousel aufbrechen, normales Grid-Layout */
@media (min-width: 901px) {
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slider {
    overflow: visible !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-list {
    overflow: visible !important;
    height: auto !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-track {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide {
    flex: 0 0 calc(20% - 16px) !important;
    width: calc(20% - 16px) !important;
    min-width: 200px !important;
    margin: 0 !important;
    height: auto !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide > div {
    width: 100% !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide .scene-card,
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide .grid-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-arrow,
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-slide.slick-current {
    margin-left: -14px !important;
  }
  .recommendations-container .recommendation-row.scene-recommendations:nth-of-type(2) .slick-dots {
    display: none !important;
  }
}