/**
 * CRITICAL FIX: JURY HERO BACKGROUND VISIBILITY
 * 
 * Problem: Background image not rendering/visible on jury page
 * Solution: Force visibility with maximum specificity and !important overrides
 * Status: Production-critical fix applied
 */

/* === JURY HERO - GUARANTEED VISIBILITY === */
/* Using maximum specificity and !important for override power */

.jury-hero,
section[class*="jury-hero"],
[data-jury="hero"],
.hero[class*="jury"] {
  /* CRITICAL: Force minimum height so background is visible */
  min-height: 80vh !important;
  height: auto !important;
  
  /* CRITICAL: Background image with absolute path */
  background-image: url("/images/grand-jury-bg.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  
  /* CRITICAL: Positioning context */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  
  /* CRITICAL: Layering */
  z-index: 10 !important;
  overflow: hidden !important;
  
  /* CRITICAL: Ensure background is not covered */
  isolation: isolate !important;
  
  /* CRITICAL: Ensure full visibility */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* === HERO OVERLAY - POSITIONED BEHIND CONTENT === */
/* This overlay provides text contrast without covering the background */
.jury-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  
  /* Gradient for text readability - from left to right */
  background: linear-gradient(
    to right,
    rgba(13, 13, 15, 0.85) 0%,
    rgba(13, 13, 15, 0.65) 35%,
    rgba(13, 13, 15, 0.35) 65%,
    transparent 100%
  ) !important;
  
  /* Position BEHIND content */
  z-index: -1 !important;
  pointer-events: none !important;
}

/* === CONTENT POSITIONING === */
/* Ensure content stays above overlay */
.jury-hero > *,
.jury-hero h1,
.jury-hero h2,
.jury-hero h3,
.jury-hero p,
.jury-hero .container,
.jury-hero .content,
.jury-hero .stagger-children {
  position: relative !important;
  z-index: 2 !important;
}

/* === HERO SECTION CONTAINER === */
section[class*="hero"] {
  background-image: url("/images/grand-jury-bg.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

/* === MOBILE OPTIMIZATION === */
@media (max-width: 768px) {
  .jury-hero {
    min-height: 60vh !important;
    background-position: 60% center !important;
  }
  
  .jury-hero::before {
    background: linear-gradient(
      to bottom,
      rgba(13, 13, 15, 0.9) 0%,
      rgba(13, 13, 15, 0.8) 40%,
      rgba(13, 13, 15, 0.5) 70%,
      rgba(13, 13, 15, 0.2) 100%
    ) !important;
  }
}

/* === TABLET OPTIMIZATION === */
@media (max-width: 1024px) {
  .jury-hero {
    min-height: 70vh !important;
    background-position: 50% center !important;
  }
}

/* === ENSURE NO OVERLAYS BLOCK BACKGROUND === */
.jury-hero .overlay,
.jury-hero .overlay-dark,
.jury-hero [class*="overlay"] {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

/* === FALLBACK STYLING === */
.jury-hero {
  background-color: #0d0d0f !important; /* Fallback dark color */
}

/* === PARALLAX LAYER COMPATIBILITY === */
.jury-hero[data-layer],
.jury-hero[data-parallax] {
  min-height: 80vh !important;
  background-size: cover !important;
  background-position: center !important;
}

/* === ENSURE NO GRAIN INTERFERENCE === */
.jury-hero .grain,
.jury-hero [class*="grain"] {
  display: none !important;
  visibility: hidden !important;
}