/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* GALLERY */

/* ============================================================
   12. GALLERY
   Ported from Luxury Cuts 1. Uniform 4:3 tiles, two per row.
   Hovering scales the photo, darkens it and floats an expand
   icon; clicking opens the lightbox below instead of leaving
   the site.
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-col); }

.gallery-item { position: relative; cursor: pointer; }

.gallery-thumbnail { position: relative; overflow: hidden; border-radius: 3px; }

.gallery-thumbnail .thumbnail {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #ededed;
}

.gallery-thumbnail .thumbnail::before {
  content: "";
  display: block;
  padding-top: 75%; /* 4:3 aspect ratio */
}

.gallery-thumbnail .thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, 1.33, .25, 1);
  transform: scale(1) rotate(0.001deg);
}

.gallery-thumbnail .overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.gallery-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.gallery-hover .icon {
  width: 3em;
  height: 3em;
  background-color: var(--c-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8) rotate(0.001deg);
  transition: transform .8s cubic-bezier(.2, 1.33, .25, 1);
}

.gallery-hover .icon svg {
  width: 50%;
  height: 50%;
  color: var(--c-dark);
}

@media (hover: hover) {
  .gallery-item:hover .thumbnail img { transform: scale(1.05) rotate(0.001deg); }
  .gallery-item:hover .overlay-dark { opacity: 0.3; }
  .gallery-item:hover .gallery-hover { opacity: 1; }
  .gallery-item:hover .gallery-hover .icon { transform: scale(1) rotate(0.001deg); }
}

@media (max-width: 540px) {
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   LIGHTBOX
   Full-screen viewer for the gallery, ported from Luxury Cuts 1.
   Opened and populated by js/lightbox.js.
   ============================================================ */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s cubic-bezier(.2, 1.33, .25, 1), visibility .8s cubic-bezier(.2, 1.33, .25, 1);
}

.lightbox[data-lightbox-status="open"] {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .95);
  cursor: zoom-out;
}

.lightbox-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lightbox-content {
  position: relative;
  width: 90vw;
  height: 90vh;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

.lightbox-slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9) rotate(0.001deg);
  transition: opacity .8s cubic-bezier(.2, 1.33, .25, 1), transform .8s cubic-bezier(.2, 1.33, .25, 1);
}

.lightbox-slide[data-slide-active="true"] {
  opacity: 1;
  transform: scale(1) rotate(0.001deg);
}

.lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

/* Lightbox controls */
.lightbox-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lightbox-controls button {
  position: absolute;
  background-color: var(--c-light);
  border: none;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0.9;
}

.lightbox-controls button:hover {
  transform: scale(1.1) rotate(0.001deg);
  opacity: 1;
}

.lightbox-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}

.lightbox-controls button svg {
  width: 1.5em;
  height: 1.5em;
  color: var(--c-dark);
}

.lightbox-prev {
  top: 50%;
  left: 2em;
  transform: translateY(-50%);
}

.lightbox-next {
  top: 50%;
  right: 2em;
  transform: translateY(-50%);
}

.lightbox-close {
  top: 2em;
  right: 2em;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  transform: translateY(-50%) scale(1.1) rotate(0.001deg);
}

.lightbox-close:hover {
  transform: scale(1.1) rotate(0.001deg);
}

/* Lightbox info */
.lightbox-info {
  position: absolute;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.lightbox-counter {
  font-family: var(--font-body);
  font-size: var(--t-tag);
  text-transform: uppercase;
  color: var(--c-light);
  margin-bottom: 0.5em;
  letter-spacing: 0.025em;
}

.lightbox-caption {
  font-family: var(--font-body);
  font-size: var(--t-tag);
  color: rgba(255, 255, 255, .8);
  max-width: 600px;
  margin: 0 auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .lightbox-content { width: 100vw; height: 100vh; }
  .lightbox-controls button { width: 2.5em; height: 2.5em; }
  .lightbox-prev { left: 1em; }
  .lightbox-next { right: 1em; }
  .lightbox-close { top: 1em; right: 1em; }
}