/* /css/gallery-style.css */

/* 1. GLOBAL RESET */
* { 
  box-sizing: border-box; /* Crucial: Prevents padding from breaking layout */
}

body { 
  margin: 0; 
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
  background: #0b0d12; 
  color: white; 
  line-height: 1.5;
  overflow-x: hidden; /* Prevents side-scrolling on mobile */
}

.container { 
  max-width: 1400px; 
  margin: 0 auto; 
  padding: 20px;
  width: 100%;
}

/* 2. HEADER & NAVIGATION */
.back { 
  display: block; 
  text-align: center; 
  margin: 20px auto;
  color: #888; 
  text-decoration: none; 
  font-size: 0.9rem;
}

.back:hover { color: white; }

h1 { 
  margin: 40px 0 12px 0;
  text-align: center; 
  font-size: 3rem; 
  font-weight: 800;
  letter-spacing: -1.5px;
  width: 100%;
}

.meta { 
  text-align: center; 
  display: block;
  width: 100%;
  color: #888; 
  font-size: 1.1rem; 
  margin: 0 auto 50px auto; /* Centered margins */
  text-transform: uppercase; 
  letter-spacing: 2px;
}

/* 3. GALLERY GRID */
#gallery { 
  width: 100%; 
}

.gallery-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  width: 100%;
}

.gallery-item { 
  position: relative; 
  overflow: hidden; 
  border-radius: 10px; 
  background: #171b22; 
  transition: transform 0.3s ease;
}

.gallery-item img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

.gallery-item:hover { 
  transform: translateY(-4px);
  z-index: 10;
}

/* 4. MOBILE FIXES */
@media (max-width: 600px) {
  .container {
    padding: 15px; /* Even padding for symmetry */
  }

  h1 {
    font-size: 2rem;
    margin-top: 20px;
  }

  .meta {
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 30px;
    padding: 0; /* Remove side padding that might be pushing it */
  }

  /* Reset the gallery rows for mobile stacking */
  .gallery-row {
    flex-direction: column !important;
    gap: 10px;
    margin-bottom: 0;
  }

  .gallery-item {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 10px;
  }

  .gallery-item img {
    height: auto !important;
  }
}