/* 1. The H1 Text Style */
h1.hover-reveal {
  display: inline-block !important;
  position: relative !important; 
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important; 
  font-size: 25px !important; 
  font-family: inherit; 
  line-height: 1.2 !important;
  text-transform: inherit;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important; 
  transition: color 0.3s ease !important; 
}

/* 2. The Pop-up Media */
.hover-reveal .pop-up-content {
  display: none !important; 
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 50vw !important; 
  max-width: 900px !important;
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 50 !important; 
  /* Critical: allows you to scroll "through" the image */
  pointer-events: none !important; 
}

/* 3. The Media Trigger */
.hover-reveal:hover .pop-up-content {
  display: block !important;
}

/* 4. The Text Hover Effect */
h1.hover-reveal:hover {
  color: #999999 !important;
}

/* 5. Mobile Adjustments - THE FIX */
@media screen and (max-width: 768px) {
  /* Ensure the container itself doesn't cut off */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  h1.hover-reveal {
    z-index: 9999 !important;
    /* Keeps text clickable/touchable */
    pointer-events: auto !important; 
  }

  .hover-reveal .pop-up-content {
    width: 95vw !important; 
    max-width: none !important; 
    /* Changed from -1 to 1 to keep it in the DOM flow properly */
    z-index: 1 !important; 
    opacity: 0.6 !important; 
    /* Ensures your thumb can still scroll the page */
    pointer-events: none !important; 
  }

  .hover-reveal .pop-up-content img,
  .hover-reveal .pop-up-content video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

.lunchbox {
    position: absolute !important;
    /* Force it to fill the screen width */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    
    /* Ensure it at least covers the whole screen height */
    min-height: 100vh !important; 
    
    /* Crucial: let the content determine the final height */
    height: auto !important; 
}