/*
* This is a manifest file that'll be compiled into application.css.
*
* With Propshaft, assets are served efficiently without preprocessing steps. You can still include
* application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
* cascading order, meaning styles declared later in the document or manifest will override earlier ones,
* depending on specificity.
*
* Consider organizing styles into separate files for maintainability.
*/
body {
  position: relative;
  background-color: var(--color-background, #1f1f1f) !important;
}

/* Background image with opacity using pseudo-element */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/assets/escheresque-80ee8372.webp");
  background-repeat: repeat;
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

/* Override Tailwind's bg-background for direct children of body to maintain transparency */
body > .bg-background {
  background-color: transparent !important;
}

/* ===== Related Releases Styles ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ensure consistent grid item heights and better spacing */
.related-releases-grid {
  display: grid;
  align-items: stretch;
}

/* Enhanced spacing for larger screens */
@media (min-width: 1024px) {
  .related-releases-grid {
    gap: 2rem;
  }
}

@media (min-width: 1280px) {
  .related-releases-grid {
    gap: 2.5rem;
  }
}

/* Add subtle scroll behavior for mobile */
@media (max-width: 640px) {
  .related-releases-grid {
    scroll-behavior: smooth;
  }
}

/* Ensure cards maintain minimum height on larger screens */
@media (min-width: 768px) {
  .related-releases-grid .group {
    min-height: 280px;
  }
}

@media (min-width: 1024px) {
  .related-releases-grid .group {
    min-height: 320px;
  }
}

/* ===== Admin Layout Overrides ===== */
/* Ensure admin pages have clean backgrounds without main site styling */
body.admin-layout {
  background-color: #f9fafb !important; /* bg-gray-50 */
}

body.admin-layout::before {
  display: none !important; /* Remove background image for admin pages */
}

/* Ensure full height for admin layout */
html.admin-layout,
body.admin-layout {
  height: 100% !important;
  min-height: 100vh !important;
}

/* ===== Album Cover Skeleton Styles ===== */
.album-cover-skeleton {
  position: relative;
  background: linear-gradient(
    90deg,
    #2a2a2a 25%,
    #3a3a3a 50%,
    #2a2a2a 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 2s infinite ease-in-out;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(200%) skewX(-12deg);
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

/* Bandcamp embed iframe styles */
.bandcamp-embed-iframe {
  border: 0;
  width: 100%;
  height: 472px;
  border-radius: 8px;
}
