/* Rebuilt Section 2 — Gallery (three side-by-side images)
   Minimal gap between images, site-friendly background,
   placed directly under the home section when included.
*/

:root {
  --gallery-max-width: 1600px;
  --gallery-gap: 20px; /* spacing between images */
  --gallery-item-width: 320px; /* base item width */
  --gallery-img-height: 420px; /* base image height (reduced a bit) */
  --gallery-inner-width: calc(var(--gallery-item-width) * 3 + var(--gallery-gap) * 2);
  /* Match hero-section background to make section 2 closer visually */
  --gallery-bg: linear-gradient(135deg, #FFF9E6 0%, #FFE8B3 50%, #FFD88A 100%);
}

.gallery-display-section {
  width: 100%;
  background: var(--gallery-bg);
  padding: 150px 40px 100px 40px; /* match section3 spacing */
  /* include padding in height via border-box and make section fit viewport minus nav */
  box-sizing: border-box;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gallery-display-section .section-title {
  font-size: clamp(32px, 5vw, 60px);
  background: linear-gradient(135deg, #D2691E 0%, #8B4513 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
  font-family: 'Brush Script MT', 'Comic Sans MS', cursive;
  margin: 0 0 40px 0;
  position: relative;
  display: inline-block;
  align-self: center;
  text-align: center;
}

.gallery-display-section .section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 6px;
  background: linear-gradient(90deg, #FF9800, #F57C00);
  border-radius: 3px;
  animation: expandLineGallery 1.5s ease-out 0.3s forwards;
}

@keyframes expandLineGallery {
  to { width: 150px; }
}

@media (max-width: 768px) {
  .gallery-display-section .section-title {
    font-size: clamp(30px, 8vw, 40px);
    align-self: center;
  }
}

.gallery-inner {
  max-width: var(--gallery-max-width);
  margin: 0 auto;
  padding: 0; /* remove inner padding so images align exactly at 0 */
  position: relative;
  width: var(--gallery-inner-width); /* shows exactly 3 items */
  box-sizing: border-box;
  overflow: hidden; /* clip the gallery-grid */
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--gallery-item-width));
  column-gap: var(--gallery-gap);
  -webkit-overflow-scrolling: touch;
  align-items: center;
  width: 100%;
  margin: 0;
}

.gallery-item {
  list-style: none;
  box-sizing: border-box; /* include borders in width calculations */
  position: relative;
  margin: 0; /* reset default figure margin so grid gap is the only spacing */
  padding: 0;
}

.gallery-item img {
  width: 100%;
  height: var(--gallery-img-height);
  object-fit: cover;
  display: block;
  transition: opacity 360ms ease; /* smooth crossfade when src changes */
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(26, 20, 10, 0.08);
  border: 1px solid rgba(0,0,0,0.04);
  box-sizing: border-box;
}

/* Visual niceties: scrollbar styling (optional) */
.gallery-grid::-webkit-scrollbar { height: 8px; }
.gallery-grid::-webkit-scrollbar-track { background: transparent; }
.gallery-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* Note: do not use margin fallback here (it duplicates gap and breaks exact-width layout) */

@media (max-width: 1024px) {
  .gallery-item { flex: 0 0 calc(var(--gallery-item-width) * 0.95); }
  .gallery-item img { height: calc(var(--gallery-img-height) * 0.90); }
}

@media (max-width: 768px) {
  .gallery-item { flex: 0 0 calc(var(--gallery-item-width) * 0.85); }
  .gallery-item img { height: calc(var(--gallery-img-height) * 0.80); }
}

@media (max-width: 480px) {
  .gallery-item { flex: 0 0 calc(var(--gallery-item-width) * 0.7); }
  .gallery-item img { height: calc(var(--gallery-img-height) * 0.7); }
}

/* Mobile: show only one rectangular image and always-visible smaller arrows */
@media (max-width: 600px) {
  :root {
    --gallery-mobile-item-width: min(92vw, 420px);
  }

  /* Make the gallery viewport the width of a single item so only one image shows */
  .gallery-inner {
    width: var(--gallery-mobile-item-width);
    padding: 0;
  }

  /* Keep three columns in the grid (so sliding logic still works) but size each column to mobile item width */
  .gallery-grid {
    grid-template-columns: repeat(3, var(--gallery-mobile-item-width));
    column-gap: 12px;
    transition: transform 260ms cubic-bezier(.22,.9,.2,1);
  }

  /* Force images to be portrait on mobile using aspect-ratio (height > width) */
  .gallery-item img {
    width: 100%;
    height: auto; /* allow aspect-ratio to determine height */
    aspect-ratio: 9 / 16; /* portrait ratio: height > width */
    object-fit: cover;
    border-radius: 6px;
    display: block;
  }

  /* Controls: smaller, visible without hover, fit mobile touch targets */
  .gallery-control {
    opacity: 1;
    width: 56px;
    font-size: 28px;
    background: rgba(255,255,255,0.04);
    color: rgba(0,0,0,0.75);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 8px 0;
  }

  .gallery-control-left { left: 4px; }
  .gallery-control-right { right: 4px; }

  /* Remove hover-only behaviour on mobile */
  .gallery-inner:hover .gallery-control { opacity: 1; }

  /* Reduce padding on the section so gallery fits nicely on small screens */
  .gallery-display-section { padding: 80px 16px 60px 16px; }
}

/* Mobile-only overlay controls (added to .gallery-inner) */
.gallery-control-mobile { display: none; }
@media (max-width: 600px) {
  .gallery-control-mobile {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    background: rgba(255,255,255,0.04);
    box-shadow: none;
    height: 56px;
    width: 56px;
    border-radius: 999px;
    padding: 0;
    font-size: 22px;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .gallery-control-mobile.gallery-control-left { left: 6px; }
  .gallery-control-mobile.gallery-control-right { right: 6px; }
  /* Hide the inline figure controls on small screens so there's only one left/right control */
  .gallery-control:not(.gallery-control-mobile) { display: none; }
}

/* Larger gallery on wide screens: increase image and section height so it doesn't look short */
@media (min-width: 1200px) {
  /* moderate large-screen increase (not too large) */
  .gallery-display-section {
    min-height: calc(100vh - var(--nav-height) + 80px);
  }

  /* Larger portrait items on wide screens */
  .gallery-grid {
    grid-template-columns: repeat(3, 420px);
  }

  .gallery-inner {
    width: calc(420px * 3 + var(--gallery-gap) * 2);
  }

  .gallery-item img {
    height: 540px; /* slightly shorter portrait on wide screens */
  }
}

/* Controls (rectangular overlays placed over first/last visible images) */
.gallery-control {
  position: absolute;
  top: 0;
  transform: none;
  width: 88px;                 /* rectangular width */
  /* occupy full height of the parent figure (image height) */
  height: 100%;
  border-radius: 0;
  border: none;
  background: rgba(255,255,255,0.02); /* mostly transparent */
  color: rgba(0,0,0,0.72);
  font-size: 44px; /* larger arrow glyphs */
  font-weight: 700; /* thicker appearance */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0; /* hidden until hover */
  transition: opacity 180ms ease, background 160ms ease;
  z-index: 10;
}

.gallery-control:hover {
  background: rgba(255,255,255,0.28); /* brighter on hover */
  color: rgba(0,0,0,0.9);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Place controls flush with the image edges and match corner radii */
.gallery-control-left {
  left: 0;
  border-radius: 6px 0 0 6px;
}
.gallery-control-right {
  right: 0;
  border-radius: 0 6px 6px 0;
}

/* Show controls on hover of the gallery inner container */
.gallery-inner:hover .gallery-control { opacity: 1; }

/* Keep gallery-inner as clipping viewport for transform-based sliding */
.gallery-inner { position: relative; overflow: hidden; }
.gallery-grid { transition: transform 260ms cubic-bezier(.22,.9,.2,1); }