/* =============================
   HERO SECTION
============================= */
.hero {
  text-align: center;
  padding: 60px 20px 40px;
}
.hero h1 {
  font-size: 2.8rem;
  color: #6b4f3b;
  margin-bottom: 20px;
}
.hero img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.4s ease;
}
.hero img:hover { transform: scale(1.03); }
.hero-message {
  margin-top: 15px;
  font-size: 1.2rem;
  color: #7b7b7b;
}

/* =============================
   CATEGORY HEADER
============================= */
.category-header {
  text-align: center;
  padding: 80px 20px 40px;
  background-color: #f6f3ee;
}
.category-header h1 {
  font-size: 3rem;
  color: #6b4f3b;
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.category-header p {
  color: #7b7b7b;
  font-size: 1.1rem;
}

/* =============================
   GALLERY GRID (FOR PATTERNED LAYOUT)
============================= */
.category-gallery {
  padding: 40px 5%;
}

.gallery-pattern {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Single full-width image (50% smaller) */
.pattern-1 img {
  width: 100%;
  border-radius: 12px;
  height: 50%; /* was auto — now 50% of its natural size */
  max-height: 650px; /* optional limit so it doesn’t grow too tall */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
  object-fit: cover;
}
.pattern-1 img:hover {
  transform: scale(1.05);
}

/* Multi-image horizontal rows (now 1.5× taller) */
.pattern-2,
.pattern-3,
.pattern-4 {
  display: flex;
  gap: 20px;
  overflow-x: hidden; /* removed scroll */
  scroll-behavior: smooth;
  cursor: grab;
}

/* Original: 300 → 450px */
.pattern-2 img {
  flex: 1;
  height: 450px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

/* Original: 250 → 375px */
.pattern-3 img {
  flex: 1;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

/* Original: 200 → 300px */
.pattern-4 img {
  flex: 1;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.pattern-2 img:hover,
.pattern-3 img:hover,
.pattern-4 img:hover {
  transform: scale(1.05);
}

.drag-scroll.active {
  cursor: grabbing;
}


/* ============================================
   MOBILE RESPONSIVE STYLES
   Keeps same layout but scales down image sizes
============================================ */
@media (max-width: 768px) {

  /* HERO */
  .hero {
    padding: 40px 15px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero img {
    max-height: 300px;
  }
  .hero-message {
    font-size: 1rem;
  }

  /* CATEGORY HEADER */
  .category-header {
    padding: 60px 15px 30px;
  }
  .category-header h1 {
    font-size: 2.2rem;
  }
  .category-header p {
    font-size: 1rem;
  }

  /* GALLERY PATTERNED LAYOUT (MOBILE SCALED VERSIONS) */

  /* Full-width big image */
  .pattern-1 img {
    max-height: 300px;
    height: 300px;
  }

  /* Horizontal rows — scaled down to mobile size */
  .pattern-2 img {
    height: 250px; /* was 450px */
  }

  .pattern-3 img {
    height: 220px; /* was 400px */
  }

  .pattern-4 img {
    height: 180px; /* was 300px */
  }

  /* Improve spacing on smaller screens */
  .category-gallery {
    padding: 20px 10px;
  }
}


/* =============================
   LIGHTBOX
============================= */
#lightbox {
  display: none;
  position: fixed;
  z-index: 10000;
  top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}
#lightbox .lightbox-img { max-width:90%; max-height:90%; border-radius:10px; }
#lightbox .close, #lightbox .prev, #lightbox .next {
  color: #fff;
  font-size: 2rem;
  position: absolute;
  cursor: pointer;
  user-select: none;
  transition: 0.3s;
}
#lightbox .close { top: 20px; right: 30px; }
#lightbox .prev { top:50%; left:30px; transform:translateY(-50%); }
#lightbox .next { top:50%; right:30px; transform:translateY(-50%); }
#lightbox .prev:hover, #lightbox .next:hover, #lightbox .close:hover { color: #c5a46d; }