/**
 * @file
 * Tattoo gallery: balanced masonry layout, black & white by default,
 * colour on hover, full colour in the lightbox.
 */

.tattoo-gallery {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* ── Header ──────────────────────────────────────────────── */
.gallery-header {
  text-align: center;
  margin-bottom: 3rem;
}

.gallery-header h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold, #c9a227);
  margin: 0 0 0.75rem;
}

.gallery-header p {
  max-width: 46rem;
  margin: 0 auto;
  color: var(--text-dim, #9a9a9a);
  font-size: 1rem;
  line-height: 1.6;
}

/* ── Balanced masonry grid ───────────────────────────────────
   CSS columns keep every photo at its natural aspect ratio and
   spread them evenly across the columns, so tall and wide shots
   stay visually balanced instead of being cropped to a grid.

   Two markup sources are supported:
   - .gallery-grid  → the module's own tattoo-gallery template
   - .view-content  → a View carrying the "tattoo-gallery" CSS class
     (Views UI → Advanced → CSS class), whose rows are .views-row */
.gallery-grid,
.tattoo-gallery .view-content {
  column-count: 4;
  /* Column gap matched to the row gap below (item margin-bottom) so the
     spacing looks balanced in both directions. */
  column-gap: 1.5rem;
}

@media (max-width: 1199px) {
  .gallery-grid,
  .tattoo-gallery .view-content { column-count: 3; }
}
@media (max-width: 767px) {
  .gallery-grid,
  .tattoo-gallery .view-content { column-count: 2; column-gap: 1rem; }
}
@media (max-width: 479px) {
  .gallery-grid,
  .tattoo-gallery .view-content { column-count: 1; }
}

.gallery-item,
.tattoo-gallery .views-row {
  /* Prevent an item from being split across two columns. */
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 1.5rem; /* row gap == column-gap above */
}

@media (max-width: 767px) {
  .gallery-item,
  .tattoo-gallery .views-row { margin-bottom: 1rem; }
}

/* ── Views rows behave like the module's tiles ───────────── */
.tattoo-gallery .views-row {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  background: var(--dark-surface, #14100c);
  cursor: pointer;
}

.tattoo-gallery .views-row img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.05);
  transition: filter 0.5s ease, transform 0.6s ease;
}

.tattoo-gallery .views-row:hover img,
.tattoo-gallery .views-row:focus-within img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.04);
}

/* Views field markup as a caption overlay. */
.tattoo-gallery .views-row .views-field-title,
.tattoo-gallery .views-row .views-field-field-artist {
  position: relative;
  z-index: 1;
}

.tattoo-gallery .views-row .views-field-title {
  padding: 0.75rem 1rem 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold, #c9a227);
}

.tattoo-gallery .views-row .views-field-field-artist {
  padding: 0.25rem 1rem 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim, #9a9a9a);
}

.tattoo-gallery .views-row a { text-decoration: none; }

/* ── Image tile ──────────────────────────────────────────── */
.gallery-item .image-container {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 4px;
  overflow: hidden;
  background: var(--dark-surface, #14100c);
  cursor: pointer;
  /* Reset, since the container is a <button> for keyboard access. */
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
}

/* Views wraps each field in extra divs; neutralise them inside a tile so the
   image still fills the container edge to edge. */
.gallery-item .image-container .views-field,
.gallery-item .image-container .field-content,
.gallery-item .image-container .views-field > *,
.gallery-item .image-container a {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  /* Black & white until hovered/focused. */
  filter: grayscale(100%) contrast(1.05);
  transform: scale(1.001);
  transition:
    filter 0.5s ease,
    transform 0.6s ease;
}

.gallery-item .image-container:hover img,
.gallery-item .image-container:focus-visible img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.04);
}

/* ── Caption overlay ─────────────────────────────────────── */
.gallery-item .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gallery-item .image-container:hover .overlay,
.gallery-item .image-container:focus-visible .overlay {
  opacity: 1;
}

.gallery-item .overlay-content { width: 100%; }

.gallery-item .overlay-content h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold, #c9a227);
  margin: 0 0 0.35rem;
}

.gallery-item .overlay-content p {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #e8e8e8;
  margin: 0 0 0.5rem;
}

.gallery-item .overlay-content .artist {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim, #b0b0b0);
}

/* Touch devices have no hover: show colour and caption right away. */
@media (hover: none) {
  .gallery-item img { filter: grayscale(0%); }
  .gallery-item .overlay { opacity: 1; }
}

/* ── Lightbox ────────────────────────────────────────────── */
.lotus-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lotus-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lotus-lightbox__figure {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Always full colour in the lightbox. */
.lotus-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  border-radius: 3px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.lotus-lightbox__caption {
  max-width: 46rem;
  text-align: center;
  color: #e8e8e8;
}

.lotus-lightbox__title {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold, #c9a227);
  margin-bottom: 0.35rem;
}

.lotus-lightbox__desc {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.35rem;
}

.lotus-lightbox__artist {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim, #9a9a9a);
}

/* Controls */
.lotus-lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lotus-lightbox__btn:hover,
.lotus-lightbox__btn:focus-visible {
  background: var(--gold, #c9a227);
  border-color: var(--gold, #c9a227);
  color: #000;
}

.lotus-lightbox__close { top: 1.25rem; right: 1.25rem; }
.lotus-lightbox__prev  { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lotus-lightbox__next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 767px) {
  .lotus-lightbox { padding: 1rem; }
  .lotus-lightbox__img { max-height: 68vh; }
  .lotus-lightbox__prev { left: 0.5rem; }
  .lotus-lightbox__next { right: 0.5rem; }
}

/* Stop the page scrolling behind an open lightbox. */
body.lotus-lightbox-open { overflow: hidden; }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gallery-item img,
  .gallery-item .overlay,
  .lotus-lightbox {
    transition-duration: 0.01ms;
  }
  .gallery-item .image-container:hover img { transform: none; }
}