/* ============================================================
   ht-set-grid-special.css  —  Hidden Temple special / wide grid
   ------------------------------------------------------------
   For checklist pages whose items genuinely need wider columns:
   multi-print sets (fp-cols with 3-4 photo slots per item) and
   other oversized-photo sets.

   Apply by adding class `sets-grid--wide` to the checklist grid:
       <div class="sets-grid sets-grid--wide"> ... </div>
   and linking this file AFTER ht-set-grid.css.

   The page-wide + Photo reserve lives in ht-set-grid.css and
   covers the multi-print photo columns too; this file only
   overrides column density for the wide case.
   ============================================================ */

/* --- Wide desktop: fit the 3-4 photo slots across the row --- */
.sets-wrap .sets-grid--wide { grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); }

/* --- Narrow / mobile: 1 item per row so all print slots fit
       across the phone width (multi-print items are wide). --- */
@media (max-width: 600px) {
  /* Keep special/wide multi-photo pages 1-up on phones. mobile.css sets
     `.sets-wrap .sets-grid:not(.hf-grid){1fr 1fr!important}` = specificity
     (0,3,0). We must match that specificity AND use !important; chaining both
     classes `.sets-grid.sets-grid--wide` = (0,3,0), and because this file loads
     last it wins the tie. (Plain `.sets-wrap .sets-grid--wide` is only (0,2,0)
     and would lose to mobile.css regardless of !important.) */
  .sets-wrap .sets-grid.sets-grid--wide { grid-template-columns: 1fr !important; }
}