/* Gallery page extras: a before/after slider tile inside .gallery-grid
   and the per-theme description shown under the photos.
   Loads after style.css and before-after.css. */

/* Slider tile: twice the size of a photo tile, same 4:3 shape */
.gallery-item.gallery-item--ba {
  grid-column: span 2; grid-row: span 2;
  aspect-ratio: 4 / 3; align-self: stretch; width: 100%;
  cursor: default;
}
.gallery-item.gallery-item--ba img,
.gallery-item.gallery-item--ba:hover img { transform: none; transition: none; }
.gallery-item--ba .ba-label {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 4px;
  background: rgba(10,10,12,.82); color: #fff; pointer-events: none;
  font-family: var(--font-head, 'Barlow Condensed', system-ui, sans-serif);
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; line-height: 1.2;
}

/* Theme description: only the block matching the active filter is shown */
.gallery-desc { max-width: 720px; margin: 40px auto 0; text-align: center; }
.gallery-desc[hidden] { display: none; }
.gallery-desc h2 {
  margin: 0 0 10px;
  font-family: var(--font-head, 'Barlow Condensed', system-ui, sans-serif);
  font-size: 1.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
  color: var(--white, #fff);
}
.gallery-desc h2 span { color: var(--orange, #ff5a1f); }
.gallery-desc p { margin: 0; color: var(--muted, #9b9ea6); font-size: 1.05rem; line-height: 1.6; }

/* Collage with its "before / after" captions near the top edge: keep them inside the 4:3 tile crop */
.gallery-item img[src$="tint-rv-before-after.jpg"] { object-position: 50% 12%; }

/* Several double-size slider tiles can leave gaps in the grid: let single tiles fill them */
.gallery-grid { grid-auto-flow: dense; }