/* ========== RESET & BASE STYLES ========== */ 
body { 
  margin: 0; 
  padding: 0; 
  font-family: sans-serif; 
  background-color: #f5f5f0; 
  background-image: url('images/gallery-wall-floor.jpg'); /* your long jpeg */ 
  background-repeat: repeat-x; /* tile horizontally */ 
  background-size: auto 6vh; /* scale height to 85vh, keep proportions */ 
  background-position: bottom center; /* anchor to bottom */ 
  background-attachment: scroll; /* make it move with the page */ 
  overflow-x: hidden; /* avoid double scrollbars */ 
} 

/* ========== GALLERY CONTAINER ========== */ 
.gallery { 
  display: flex; 
  align-items: center; 
  height: 100vh; 
  gap: 40px; 
  cursor: grab; 
  position: relative; 
  padding-left: 40px; 
  padding-right: 40px; 
  overflow-x: auto; 
  overflow-y: hidden; 
  white-space: nowrap; 
  -webkit-overflow-scrolling: touch; 
  transform: translateY(-4vh);  /* pushes gallery up slightly */ 
}

.gallery:active { 
  cursor: grabbing; 
} 

/* ========== INTRO TEXT BOX ========== */ 
.intro-box { 
  flex: 0 0 220px; /* fixed width column */ 
  font-size: 13px; line-height: 1.5; 
  background-color: rgba(255, 255, 255, 0.0); 
  padding: 10px; white-space: normal; /* allow text to wrap instead of manual <br> */ 
} 

.highlight { 
  color: rgba(0,0,255); 
  font-weight: bold; 
} 

/* ========== CONTACT ICONS ========== */ 
.contact-icons i {
  font-size: 16px; 
  color: rgba(0,0,255); 
  margin: 0 4px; 
  text-decoration: none; 
} 

/* ========== PAINTINGS ========== */ 
.gallery img {
  --ty: 0;
  --s: 1;
  transform: translateY(var(--ty)) scale(var(--s));
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  border: 0 solid white;
  object-fit: contain;
  transition: opacity 0.45s ease, transform 0.45s ease, margin 0.45s ease;
  height: auto;
  max-height: 85vh;
  opacity: 1;
  display: inline-block;
}

/* When hidden: reduce scale (keeps translateY) and fade */
.gallery img.hidden {
  --s: 0.92;            /* slight shrink while preserving translateY */
  opacity: 0;
  pointer-events: none; /* avoid interaction while hidden */
  margin: 0;            /* collapse spacing smoothly */
}

/* Manual vertical staggering */ 
.gallery img:nth-child(3) { --ty: -4vh; }
.gallery img:nth-child(4) { --ty: -5vh; }
.gallery img:nth-child(5) { --ty: -2vh; }
.gallery img:nth-child(6) { --ty: -3vh; }
.gallery img:nth-child(7) { --ty: -3vh; }
.gallery img:nth-child(8) { --ty: -1vh; }
.gallery img:nth-child(9) { --ty: -6vh; }
.gallery img:nth-child(11) { --ty: -3vh; }
.gallery img:nth-child(12) { --ty: -7vh; }

/* ========== MODAL (ENLARGED IMAGE VIEW) ========== */ 
.modal { 
  display: none; 
  position: fixed; 
  z-index: 2000; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,255,1); 
  text-align: center; 
  overflow-y: auto; /* allow scroll if needed on small devices */ 
  padding-top: 10vh; /* give space for logo */ 
} 

.modal-content { 
  display: inline-block; 
  max-width: 90%; 
  margin: auto; 
} 

.modal img { 
  max-width: 100%; 
  max-height: 80vh; /* scaled for mobile */ 
  height: auto; 
} 

.modal p { 
  margin-top: 12px; 
  font-size: 14px; 
  color: white; 
  font-family: sans-serif; 
} 

.modal-close { 
  position: fixed; 
  top: 20px; 
  right: 20px; 
  color: white; 
  font-size: 32px; 
  font-weight: bold; 
  cursor: pointer; 
  z-index: 3000; /* keep above everything */ 
} 

/* ========== LOGO ========== */ 
.logo { 
  position: fixed; 
  top: 20px; 
  left: 20px; 
  z-index: 3000; 
  transition: opacity 0.3s ease; 
} 

.logo img { 
  height: 6vh; 
  width: auto;
  max-height: 10vh; 
} 

.scrolled .logo {
  opacity: 0; 
} 

/* ========== HOVER INFO BOX ========== */ 
.hover-info { 
  display: none;
  position: fixed; 
  bottom: 7vh; 
  left: 50%; 
  transform: translateX(-50%); 
  background-color: rgba(0, 0, 255, 1.0); 
  padding: 8px 14px; 
  font-size: 12px; 
  color: white; 
  font-family: sans-serif; 
  border-radius: 0px; 
  display: none; 
  pointer-events: none; 
  z-index: 5000; 
  opacity: 0; 
  transition: opacity 0.5s ease; 
} 

.hover-info.show { 
  display: block; 
  opacity: 1; 
} 

.hover-info.hide {
  opacity: 0; 
} 

/* ========== FILTER TOGGLE LINK ========== */ 
.filter-toggle a {
  color: rgba(0,0,255,1); 
  text-decoration: none; 
  cursor: pointer; 
} 

.filter-toggle a:visited {
  color: rgba(0,0,255,1); /* removes purple visited state */ 
}

.filter-toggle a:hover { 
  text-decoration: underline; /* underline only on hover */ 
}