/* ════════════════════════════════════════════════════════════════════════
   v3.48 — Gallery: the "Columns (desktop)" setting is now the single source
   of truth for how many columns the wall renders.

   Why this file exists
   --------------------
   Three generations of gallery CSS each declared their own column rules:

     • v330 — uniform grid: `.hl-gallery-page .hl-gallery-grid--cols-4`
       (0,2,0) plus a `max-width: 1024px` gate that collapsed 4 → 2.
     • v331 — masonry: `column-count` rules that never defined cols-3, plus
       another `max-width: 1024px` gate that collapsed the wall to 2.
     • v347 — masonry rebuild whose "step down one column" tablet gate
       turned a chosen 4 into 3 from 900px down.

   The net effect was that picking 4 in Hotel Settings frequently still
   painted 3 (or 2) columns, because whichever older gate matched the current
   viewport won. Everything below is loaded last, matches the same or higher
   specificity than every earlier rule, and covers BOTH layout engines
   (CSS grid for Uniform/Mosaic, CSS multi-column for the Masonry wall) so
   the chosen count is what actually renders.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop: honour the chosen count exactly ──────────────────────────── */
.hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-2:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-3:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-4:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-2 { column-count: 2; }
.hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-3 { column-count: 3; }
.hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-4 { column-count: 4; }

/* ── Laptop (≤1200px): 4 stays 4 — the tiles just get narrower ─────────── */
@media (max-width: 1200px) {
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-4:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-4 { column-count: 4; }
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-3:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-3 { column-count: 3; }
}

/* ── Small tablet / large phone (≤900px): step down one column ─────────── */
@media (max-width: 900px) {
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-4:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-4 { column-count: 3; }
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-3:not(.hl-gallery-grid--masonry),
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-2:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-3,
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-2 { column-count: 2; }
}

/* ── Phone (≤700px): two columns max ──────────────────────────────────── */
@media (max-width: 700px) {
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-2:not(.hl-gallery-grid--masonry),
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-3:not(.hl-gallery-grid--masonry),
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-4:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-2,
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-3,
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-4 { column-count: 2; }
}

/* ── Narrow phone (≤520px): single column ─────────────────────────────── */
@media (max-width: 520px) {
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-2:not(.hl-gallery-grid--masonry),
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-3:not(.hl-gallery-grid--masonry),
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--cols-4:not(.hl-gallery-grid--masonry) { grid-template-columns: 1fr; }
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-2,
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-3,
  .hl-gallery-page .hl-gallery-grid.hl-gallery-grid--masonry.hl-gallery-grid--cols-4 { column-count: 1; }
}