/* Ensure footer sits at bottom when page content is short */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body { top : 25px;
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
    background-color: #000000;
    background-image: url('images/IMG_20231210_143507.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Make gallery main area grow to push footer down */
.container.gallery-page { flex: 1; display: flex; flex-direction: column; }

/* Gallery page styles (masonry) */
.gallery-page h1{ text-align:center; color: transparent;
  background: linear-gradient(to right, red, cyan);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 3.9rem;
 }
.gallery-page .intro{ text-align:center; color:#322f2f; margin-bottom:1rem; }
.gallery-page .intro{ text-align:center; color: transparent;
  background: linear-gradient(to right, red, cyan);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 2rem; }

/* Masonry layout using CSS columns */
.gallery-grid{
  column-count: 4;
  column-gap: 1rem;
  margin: 2rem 0;
}
.gallery-item{
  display: inline-block;
  width: 100%;
  margin: 0 0 1rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  position: relative;
  overflow: hidden;
}

/* Overlay caption — uses data-caption attribute on the anchor */
.gallery-item::after{
  content: attr(data-caption);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.6));
  color: #fff;
  font-weight:600;
  transform: translateY(100%);
  transition: transform .22s ease;
  text-align: center;
}
.gallery-item:hover::after,
.gallery-item:focus::after{ transform: translateY(0); }
.gallery-item img{
  width: 100%;
  height: auto; /* preserve aspect ratio */
  object-fit: cover;
  border-radius: 8px;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery-item img:hover{ transform: scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,0.6); }

.note{ text-align:center; color:#ccc; margin-bottom:2rem; }

/* Responsive column counts */
@media (max-width:1200px){ .gallery-grid{ column-count: 3; } }
@media (max-width:900px){ .gallery-grid{ column-count: 2; } }
@media (max-width:480px){ .gallery-grid{ column-count: 1; } }


.col .note{
  color: #000000;
  background: #ff6b6b;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 6px;
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1200;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
@media (max-width:480px){ .col .note{ bottom:12px; padding:.45rem .75rem; }}