/* ════════════════════════════════════════════════════════════════════════
   v3.49 — Gallery: "Columns (desktop)" fixed for real.

   What was wrong
   --------------
   v3.48 tried to make the setting authoritative, but every one of its rules
   was class-based and carried no !important, so any earlier gallery rule that
   matched with equal specificity and appeared later in the cascade (or came
   from a cached/minified copy of v330/v331/v347) could still win — which is
   why choosing 2 or 4 kept painting 3 columns.

   How it is fixed
   ---------------
   template-parts/page-gallery.php now prints the chosen count twice:
     • data-cols="N"                  → the hooks used below
     • style="--hl-gallery-cols:N"    → inline, for any custom CSS
   The attribute rules below are marked !important and load last, so nothing
   in the theme (old or new) can override the owner's choice. Both layout
   engines are covered: CSS grid (Uniform / Mosaic) and CSS multi-column
   (Masonry wall).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop: render exactly what was chosen ───────────────────────────── */
.hl-gallery-page .hl-gallery-grid[data-cols="2"]:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.hl-gallery-page .hl-gallery-grid[data-cols="3"]:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.hl-gallery-page .hl-gallery-grid[data-cols="4"]:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.hl-gallery-page .hl-gallery-grid--masonry[data-cols="2"] { column-count: 2 !important; }
.hl-gallery-page .hl-gallery-grid--masonry[data-cols="3"] { column-count: 3 !important; }
.hl-gallery-page .hl-gallery-grid--masonry[data-cols="4"] { column-count: 4 !important; }

/* Laptops (≤1200px) keep the chosen count — tiles simply get narrower. */
@media (max-width: 1200px) {
  .hl-gallery-page .hl-gallery-grid[data-cols="4"]:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .hl-gallery-page .hl-gallery-grid[data-cols="3"]:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hl-gallery-page .hl-gallery-grid--masonry[data-cols="4"] { column-count: 4 !important; }
  .hl-gallery-page .hl-gallery-grid--masonry[data-cols="3"] { column-count: 3 !important; }
}

/* Tablet (≤900px): one column less than chosen, never fewer than 2. */
@media (max-width: 900px) {
  .hl-gallery-page .hl-gallery-grid[data-cols="4"]:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hl-gallery-page .hl-gallery-grid[data-cols="3"]:not(.hl-gallery-grid--masonry),
  .hl-gallery-page .hl-gallery-grid[data-cols="2"]:not(.hl-gallery-grid--masonry) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hl-gallery-page .hl-gallery-grid--masonry[data-cols="4"] { column-count: 3 !important; }
  .hl-gallery-page .hl-gallery-grid--masonry[data-cols="3"],
  .hl-gallery-page .hl-gallery-grid--masonry[data-cols="2"] { column-count: 2 !important; }
}

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

/* Narrow phone (≤520px): single column. */
@media (max-width: 520px) {
  .hl-gallery-page .hl-gallery-grid[data-cols]:not(.hl-gallery-grid--masonry) { grid-template-columns: 1fr !important; }
  .hl-gallery-page .hl-gallery-grid--masonry[data-cols] { column-count: 1 !important; }
}

/* ── Mosaic feature tiles ──────────────────────────────────────────────────
   A feature tile spans two columns. At a 2-column setting that turned the
   mosaic into a stack of full-width images (and read as "the setting did
   nothing"), so feature tiles only span when there are 3+ columns. */
.hl-gallery-page .hl-gallery-grid--mosaic[data-cols="2"] .hl-gallery-item.is-feature {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}
@media (max-width: 900px) {
  .hl-gallery-page .hl-gallery-grid--mosaic[data-cols="3"] .hl-gallery-item.is-feature {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}