/* ---------- Layout & Masonry (CSS columns) ---------- */
:root{
  --max-width: 1200px;
  --gap: 12px;
  --bg: #111;
  --light: #fff;
}

* { box-sizing: border-box; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f6f6f6;
  color: #222;
  -webkit-font-smoothing:antialiased;
}

/* container centering */
.gallery {
  width: min(96%, var(--max-width));
  margin: 28px auto;
  columns: 4 220px;       /* masonry columns: count + ideal column width */
  column-gap: var(--gap);
  /* small visual padding */
  padding-bottom: 28px;
}

/* images as masonry items */
.gallery img {
  width: 100%;
  margin: 0 0 var(--gap) 0;
  display: block;
  border-radius: 8px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
  transform-origin: center center;

  /* transitions for the hover effect */
  transition: transform 260ms cubic-bezier(.22,.9,.34,1), box-shadow 260ms ease, opacity 260ms ease;
  will-change: transform, opacity;
  object-fit: cover;
}

/* Hover zoom effect */
.gallery img:hover,
.gallery img:focus {
  transform: scale(1.04);
  opacity: 0.95;
  box-shadow: 0 18px 40px rgba(16,24,40,0.12);
  cursor: pointer;
}

/* Improve focus outline for keyboard users */
.gallery img:focus {
  outline: 3px solid rgba(0,123,255,0.15);
  outline-offset: 4px;
}

/* ---------- Lightbox (kept simple) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  display: none; /* script toggles display */
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.8);
  z-index: 1000;
}

.lightbox[aria-hidden="false"]{
  display: flex;
}

.lightbox img {
  max-width: 92%;
  max-height: 84%;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(2,6,23,0.6);
}

/* lightbox buttons */
.lightbox button {
  position: absolute;
  background: none;
  color: var(--light);
  border: none;
  font-size: 2.2rem;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
  opacity: 0.95;
  transition: opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

.lightbox button:hover { opacity: 1; }

.lightbox .close { top: 18px; right: 18px; font-size: 2.6rem; }
.lightbox .prev  { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox .next  { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- Responsive: fewer columns on smaller screens ---------- */
@media (max-width: 1100px) {
  .gallery { columns: 3 200px; }
}
@media (max-width: 780px) {
  .gallery { columns: 2 180px; }
}
@media (max-width: 460px) {
  .gallery { columns: 1 100%; }
  .lightbox button { font-size: 1.6rem; }
  .lightbox: ; .close { font-size: 2rem; }
}
.gallery-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #ff6600, #ffcc33);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    margin: 40px 0 30px 0;
    font-family: 'Poppins', sans-serif;
}

.gallery-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #ff6600;
    margin: 10px auto 0 auto;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.gallery-title:hover::after {
    width: 120px;
}
  
@media (max-width: 768px) {
    .gallery-title {
        font-size: 1.8rem;
        margin: 30px 0 20px 0;
    }

    .gallery-title::after {
        width: 60px;
    }

    .gallery-title:hover::after {
        width: 90px;
    }
}
#backToTop {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  font-size: 24px;
  background-color: orange;
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

#backToTop:hover {
  background-color: darkorange;
}