/* Center text utility for gallery section */
.center-text {
  margin-left: 10vw;
  margin-right: 10vw;
  text-align: center;
}
/* ============================
   Gallery Wrapper
   ============================ */
.gallery-wrapper {
  position: relative;          /* Allows arrows to overlay */
  width: 100%;
  margin: 2rem 0;
}

/* ============================
   Gallery Container (horizontal scroll)
   ============================ */
.gallery-container {
  overflow-x: auto;            /* Scrollable horizontally */
  scroll-behavior: smooth;     /* Smooth scrolling */
  -ms-overflow-style: none;    /* IE/Edge */
  scrollbar-width: none;       /* Firefox */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

/* Hide scrollbar for Chrome/Safari */
.gallery-container::-webkit-scrollbar {
  display: none;
}

/* =========================
   Custom Scrollbar
   ========================= */

.gallery-scrollbar {
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 100%;
  height: 6px;
  background: rgba(212, 198, 198, 0.822);
  border-radius: 10px;

  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show on hover */
.gallery-wrapper:hover .gallery-scrollbar {
  opacity: 1;
}

/* Scroll thumb */
.gallery-scrollbar-thumb {
  height: 100%;
  width: 20%;
  background: rgba(139, 121, 121, 0.45);
  border-radius: 10px;
  transition: background 0.2s ease;
  position: relative;
  left: 0;
}

.gallery-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.65);
}

/* ============================
   Gallery Items (flex row)
   ============================ */
.gallery.style2 {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  padding-bottom: 0.5rem;
}

.gallery.style2 article {
  flex: 0 0 auto;
}

/* Image wrapper */
.gallery.style2 .image {
  display: block;
}

/* Actual image */
.gallery.style2 .image img {
  display: block;
  height: clamp(280px, 35vw, 450px);
  width: auto;
  pointer-events: none; /* Prevent image drag ghosting */
  user-select: none;
}


/* ============================
   Gallery Arrows
   ============================ */
.gallery-arrow {
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.4); /* slightly transparent */
  color: #fff;
  border: none;
  width: 3rem;
  height: 3rem;
  font-size: 1.75rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  opacity: 1;
}

.gallery-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.1);
}

.gallery-arrow.left {
  left: 0.5rem;
}

.gallery-arrow.right {
  right: 0.5rem;
}

.gallery-arrow:hidden {
  opacity: 0;
  pointer-events: none;
}

/* ============================
   Mobile adjustments
   ============================ */
@media (max-width: 768px) {
  .gallery-arrow {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .gallery-arrow {
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
  }
}

/* ============================
   Optional: Active Drag State
   ============================ */
.gallery-container.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

/* ============================
   Responsive adjustments
   ============================ */
@media (max-width: 768px) {
  .gallery.style2 {
    gap: 1rem;
  }
  
  .gallery.style2 article {
    flex: 0 0 clamp(200px, 70vw, 300px);
  }
  
  .gallery-arrow {
    display: none;
  }
}

@media (max-width: 480px) {
  .gallery.style2 {
    gap: 0.5rem;
    padding-bottom: 0;
  }
  
  .gallery.style2 article {
    flex: 0 0 auto;
    height: 420px;            /* Choose your uniform height */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Image wrapper */
  .gallery.style2 .image {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Actual image */
  .gallery.style2 .image img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;   /* shows full image */
  }
}

/* ============================
   Desktop Hover Effect
   ============================ */
@media (hover: hover) and (pointer: fine) {
  .gallery.style2 .image {
    border: 3px solid transparent;
    border-radius: 12px; /* optional rounded corners */
    transition: border 0.2s ease, transform 0.2s ease;
    cursor: pointer;
  }

  .gallery.style2 .image:hover {
    border: 3px solid rgba(0, 0, 0, 0.6);
    transform: scale(1.05); /* subtle lift effect */
  }
}

@media (hover: none) and (pointer: coarse) {
  .gallery.style2 .image {
    position: relative;
  }

  .gallery.style2 .image::after {
    content: "⛶";
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
  }
}