/* =========================================
   AOS PREMIUM GALLERY (Fixed & Collage Mode)
   ========================================= */
.gallery-section {
  padding: 80px 40px;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden; /* Prevents scrollbar flickering during animation */
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 300px; /* Base row height for desktop */
  gap: 24px;
  grid-auto-flow: dense; /* Crucial for collage effect */
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background: #f0f0f0; /* Placeholder color while loading */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform; /* Performance optimization for mobile */
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* --- DESKTOP SPANS --- */
.g-span-12 { grid-column: span 12; grid-row: span 2; } /* Full Hero */
.g-span-8  { grid-column: span 8;  grid-row: span 1; } /* Wide Landscape */
.g-span-6  { grid-column: span 6;  grid-row: span 1; } /* Half Width */
.g-span-4  { grid-column: span 4;  grid-row: span 1; } /* Portrait/Standard */


/* =========================================
   MOBILE COLLAGE LAYOUT (The "Pinterest" Look)
   ========================================= */
@media (max-width: 768px) {
  .gallery-section {
    padding: 60px 15px;
  }

  .gallery-grid {
    display: grid;
    /* 2 Columns on Mobile */
    grid-template-columns: repeat(2, 1fr); 
    /* Smaller base height for mobile rows */
    grid-auto-rows: 160px; 
    gap: 10px;
  }

  /* COLLAGE LOGIC:
     We map the Desktop classes to Mobile Behaviors 
     to create the uneven "Collage" look.
  */

  /* 1. The "Portrait" shots become TALL on mobile (Span 2 rows vertically) */
  .g-span-4 {
    grid-column: span 1 !important;
    grid-row: span 2 !important; /* Makes it tall */
  }

  /* 2. The "Landscape" shots become WIDE on mobile (Span 2 cols horizontally) */
  .g-span-8 {
    grid-column: span 2 !important;
    grid-row: span 1.5 !important; /* Slightly taller than standard */
  }

  /* 3. The "Hero" shots stay HUGE */
  .g-span-12 {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }

  /* 4. The "Half" shots become small squares */
  .g-span-6 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}