/* Image Gallery - Native horizontal scroll with snap points */

/* CSS Variables for Image Framing - Easy customization */
:root {
  /* Border properties */
  --gallery-img-border-width: 1px;
  --gallery-img-border-color: rgba(0, 0, 0, 0.08);
  --gallery-img-border-style: solid;
  --gallery-img-border-radius: 0;
  
  /* Shadow properties (recommended: border + shadow combo) */
  --gallery-img-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  /* Alternative: Layered shadows for more depth */
  --gallery-img-shadow-layered: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* Alternative: Drop shadow only (no border) */
  --gallery-img-shadow-only: 0 4px 12px rgba(0, 0, 0, 0.2);
  
  /* Background mat effect (for mat approach) */
  --gallery-img-mat-bg: rgba(250, 250, 250, 1);
  --gallery-img-mat-padding: 12px;
}

.gallery-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  min-height: 400px; /* Mobile default - keeps gallery large */
  /* Hide scrollbar completely */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .gallery-container {
    min-height: 500px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .gallery-container {
    min-height: 680px; /* Original desktop size */
  }
}

.gallery-container::-webkit-scrollbar {
  display: none;
}

.gallery-item {
  flex: 0 0 100%;
  width: 100%;
  min-height: 400px; /* Mobile default */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .gallery-item {
    min-height: 500px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .gallery-item {
    min-height: 680px; /* Original desktop size */
  }
}

.gallery-item img {
  width: 90%; /* Mobile: responsive width, keeps it large */
  max-width: 315px; /* Prevents it from getting too large */
  height: auto; /* Maintain aspect ratio */
  min-height: 400px; /* Mobile default */
  object-fit: contain;
  display: block;
  border: none;
  box-shadow: none;
}

/* 
 * ALTERNATIVE FRAMING APPROACHES
 * Uncomment one of the blocks below and comment out the border/shadow above to switch approaches
 */

/* 
 * Alternative 1: Drop Shadow Only (no border)
 * Remove border, use shadow-only for a softer floating effect
 */
/*
.gallery-item img {
  border: none;
  box-shadow: var(--gallery-img-shadow-only);
}
*/

/* 
 * Alternative 2: Layered Shadows (more depth, no border)
 * Multiple shadow layers create sophisticated depth
 */
/*
.gallery-item img {
  border: none;
  box-shadow: var(--gallery-img-shadow-layered);
}
*/

/* 
 * Alternative 3: Background Mat Effect
 * Creates a frame-like appearance with padding and background color
 * Note: Requires wrapping img in a container or using padding on .gallery-item
 */
/*
.gallery-item {
  background-color: var(--gallery-img-mat-bg);
  padding: var(--gallery-img-mat-padding);
  border-radius: 4px;
}
.gallery-item img {
  border: none;
  box-shadow: none;
}
*/

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .gallery-item img {
    min-height: 500px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .gallery-item img {
    width: 315px; /* Original desktop size */
    min-height: 680px; /* Original desktop size */
  }
}

/* Gallery wrapper - relative positioning for buttons */
.gallery-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0; /* Remove fixed min-width on mobile */
  width: 100%;
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .gallery-wrapper {
    min-width: 315px; /* Original desktop min-width */
  }
}

/* Hidden radio buttons for CSS-only navigation */
.gallery-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Navigation buttons */
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.2s, opacity 0.2s;
  opacity: 0;
  pointer-events: none;
}

/* Enhanced visibility on gallery hover for visible buttons */
.gallery-wrapper:hover .gallery-btn[style*="opacity: 1"],
.gallery-wrapper:hover #gallery-hero-1:checked ~ .gallery-container ~ .gallery-btn-prev[for="gallery-hero-0"],
.gallery-wrapper:hover #gallery-hero-2:checked ~ .gallery-container ~ .gallery-btn-prev[for="gallery-hero-1"],
.gallery-wrapper:hover #gallery-hero-3:checked ~ .gallery-container ~ .gallery-btn-prev[for="gallery-hero-2"],
.gallery-wrapper:hover #gallery-hero-0:checked ~ .gallery-container ~ .gallery-btn-next[for="gallery-hero-1"],
.gallery-wrapper:hover #gallery-hero-1:checked ~ .gallery-container ~ .gallery-btn-next[for="gallery-hero-2"],
.gallery-wrapper:hover #gallery-hero-2:checked ~ .gallery-container ~ .gallery-btn-next[for="gallery-hero-3"] {
  opacity: 1 !important;
}

.gallery-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}

.gallery-btn:active {
  background-color: rgba(240, 240, 240, 1);
}

.gallery-btn-prev {
  left: 12px;
}

.gallery-btn-next {
  right: 12px;
}

/* Previous button arrow */
.gallery-btn-prev::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #141414;
  margin-left: -2px;
}

/* Next button arrow */
.gallery-btn-next::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #141414;
  margin-right: -2px;
}

/* Show/hide buttons based on checked radio */
/* Hide all buttons by default, then show relevant ones */
.gallery-btn {
  opacity: 0;
  pointer-events: none;
}

/* Show prev button when not on first image */
#gallery-hero-1:checked ~ .gallery-container ~ .gallery-btn-prev[for="gallery-hero-0"],
#gallery-hero-2:checked ~ .gallery-container ~ .gallery-btn-prev[for="gallery-hero-1"],
#gallery-hero-3:checked ~ .gallery-container ~ .gallery-btn-prev[for="gallery-hero-2"] {
  opacity: 1;
  pointer-events: auto;
}

/* Show next button when not on last image */
#gallery-hero-0:checked ~ .gallery-container ~ .gallery-btn-next[for="gallery-hero-1"],
#gallery-hero-1:checked ~ .gallery-container ~ .gallery-btn-next[for="gallery-hero-2"],
#gallery-hero-2:checked ~ .gallery-container ~ .gallery-btn-next[for="gallery-hero-3"] {
  opacity: 1;
  pointer-events: auto;
}

/* Dot indicators */
.gallery-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 16px;
  padding-bottom: 4px;
}

.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #dbdbdb;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0;
  margin: 0;
}

.gallery-dot:hover {
  background-color: rgba(219, 219, 219, 0.3);
}

.gallery-dot-active {
  background-color: #dbdbdb;
  border-color: #dbdbdb;
}