/* ============================================
   MEMBERSHIP MOSAIC BACKGROUND
   Easy to remove: Just delete this file and remove the link from index.php
   ============================================ */

/* Mosaic Background Container */
.membership-mosaic-bg {
  position: absolute;
  top: 250px; /* Start below header area */
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 0.45; /* Increased visibility */
  pointer-events: none;
}

/* Grid of mosaic images */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  gap: 4px;
  width: 100%;
  height: 100%;
  transform: rotate(-2deg) scale(1.1); /* Slight angle for dynamic feel */
}

.mosaic-item {
  width: 160px;
  height: 160px;
  background-size: cover;
  background-position: center;
  filter: blur(0px); /* No blur for better visibility */
  transition: filter 0.3s ease;
  border: none; /* Removed test border */
}

/* Gradient overlay for better text readability */
.membership-mosaic-overlay {
  position: absolute;
  top: -250px; /* Start from top to fade the mosaic in */
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.98) 250px,
    rgba(255, 255, 255, 0.75) 350px,
    rgba(255, 255, 255, 0.65) 60%,
    rgba(255, 255, 255, 0.75) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Ensure content stays above background */
.membership-section {
  position: relative;
}

.membership-section .container {
  position: relative;
  z-index: 2;
}

/* Mobile adjustments - full background of tiny faces */
@media (max-width: 768px) {
  .membership-section {
    overflow: hidden; /* Prevent horizontal scroll */
  }

  .membership-mosaic-bg {
    top: -20px !important; /* Start above the top to ensure coverage */
    left: -20px !important; /* Go beyond left edge */
    right: -20px !important; /* Go beyond right edge */
    bottom: -20px !important; /* Go beyond bottom */
    width: calc(100% + 40px) !important; /* Extend beyond viewport */
    opacity: 0.45; /* A bit lighter */
  }

  .mosaic-grid {
    grid-template-columns: repeat(auto-fill, 45px);
    grid-template-rows: repeat(auto-fill, 45px); /* Force square grid cells */
    gap: 2px !important; /* Force equal gaps */
    grid-auto-rows: 45px; /* Ensure all rows are 45px */
    transform: none;
    width: calc(100% + 40px); /* Match parent width */
    padding-top: 20px; /* Ensure faces at very top */
  }

  .mosaic-item {
    width: 45px !important;
    height: 45px !important;
    filter: none;
    background-size: cover !important; /* Ensure images fill the square */
    aspect-ratio: 1 / 1 !important; /* Force square aspect ratio */
  }
}

/* Performance: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .mosaic-item {
    transition: none;
  }
}

/* Optional: Hover effect for desktop (commented out by default) */
/*
.membership-section:hover .mosaic-item {
  filter: blur(0.5px);
}
*/

/* Toggle classes for easy testing */
.mosaic-hidden .membership-mosaic-bg {
  display: none;
}

.mosaic-visible .membership-mosaic-bg {
  opacity: 0.25;
}

.mosaic-prominent .membership-mosaic-bg {
  opacity: 0.35;
  filter: blur(0px);
}