/* ════════════════════════════════════════════════════════════════════════
   v3.47 — Gallery: Pinterest-style masonry wall (horizontal tiles)

   The gallery grid now reads like a Pinterest board that never goes tall:
   every tile is either the chosen default shape (wider by default), a
   square crop, or an extra-wide crop, cycled in a 7-step rhythm so the
   columns stagger organically instead of lining up in rigid rows.

   Shape classes (`is-shape-base` / `is-shape-square` / `is-shape-wide`)
   are printed by template-parts/page-gallery.php, so the rhythm survives
   category filtering and "Load More" (unlike nth-child patterns).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The wall ─────────────────────────────────────────────────────────── */
.hl-gallery-page .hl-gallery-grid--masonry {
  display: block;
  column-fill: balance;
  /* Tile ratio tokens, overridable by the Tile Shape setting below. */
  --hl-tile-base: 3 / 2;
  --hl-tile-square: 1 / 1;
  --hl-tile-wide: 16 / 9;
}

/* Tile Shape setting drives the *default* (base) tile ratio. */
.hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--aspect-wide { --hl-tile-base: 16 / 9; }
.hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--aspect-landscape { --hl-tile-base: 4 / 3; }
.hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--aspect-square { --hl-tile-base: 1 / 1; }
.hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--aspect-portrait { --hl-tile-base: 4 / 5; }

/* ── Tiles ────────────────────────────────────────────────────────────── */
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  overflow: visible;
}

.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__inner {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  background: color-mix(in srgb, var(--hl-cream, #f4efe7) 92%, #000 8%);
}

.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  aspect-ratio: var(--hl-tile-base);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}

/* The three crop shapes cycled across the wall. */
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item.is-shape-base .hl-gallery-item__img { aspect-ratio: var(--hl-tile-base); }
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item.is-shape-square .hl-gallery-item__img { aspect-ratio: var(--hl-tile-square); }
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item.is-shape-wide .hl-gallery-item__img { aspect-ratio: var(--hl-tile-wide); }

/* ── Hover: lift the photo, not the tile (keeps the wall calm) ─────────── */
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item:hover {
  transform: none;
  box-shadow: none;
}
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__inner {
  transition: box-shadow .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(36, 28, 22, .6);
}
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__inner:hover .hl-gallery-item__img {
  transform: scale(1.05);
}

/* Caption sits on the photo, Pinterest-style, on hover. */
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24, 18, 13, .66), rgba(24, 18, 13, 0) 58%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__inner:hover .hl-gallery-item__overlay { opacity: 1; }

/* ── Column counts: the Columns setting is honoured on desktop ─────────── */
/* Higher specificity than every older gallery rule (v330/v331), and no
   min-width gate, so picking 4 really renders 4 columns. */
.hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-2 { column-count: 2; }
.hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-3 { column-count: 3; }
.hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-4 { column-count: 4; }

/* Tablet: step down one column from the chosen count. */
@media (max-width: 900px) {
  .hl-gallery-page .hl-gallery-grid--masonry,
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-2,
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-3 { column-count: 2; }
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-4 { column-count: 3; }
}
@media (max-width: 700px) {
  .hl-gallery-page .hl-gallery-grid--masonry,
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-2,
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-3,
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-4 { column-count: 2; }
}
@media (max-width: 520px) {
  .hl-gallery-page .hl-gallery-grid--masonry,
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-2,
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-3,
  .hl-gallery-page .hl-gallery-grid--masonry.hl-gallery-grid--cols-4 {
    column-count: 1;
    column-gap: 0;
  }
  /* One column on phones: keep every photo the same wide crop. */
  .hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__img,
  .hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item.is-shape-square .hl-gallery-item__img,
  .hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item.is-shape-wide .hl-gallery-item__img {
    aspect-ratio: 4 / 3;
  }
}


@media (prefers-reduced-motion: reduce) {
  .hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__img,
  .hl-gallery-page .hl-gallery-grid--masonry .hl-gallery-item__inner { transition: none; }
}