/* ===== Hilbert Cascade Gallery — Safari Grid Masonry Fallback (2025-10-02) =====
   • В Safari вместо columns включаем CSS Grid + авто-спаны по JS.
   • В остальных браузерах — прежний columns-мейсонри.
   ============================================================================= */

.hcg{
  --hcg-gap:24px;
  --hcg-row-px:4px;                 /* базовая высота строки для грида в Safari */
  position:relative; width:100%;
  isolation:isolate; contain:paint;
}

/* ====== РЕЖИМ ПО УМОЛЧАНИЮ: columns (Chrome/Firefox/и т.д.) ====== */
.hcg-grid{
  column-count:var(--hcg-cols,4);
  -webkit-column-count:var(--hcg-cols,4);
  column-gap:var(--hcg-gap);
  -webkit-column-gap:var(--hcg-gap);
  column-fill:balance;
  line-height:0;                    /* убираем “строчный воздух” сверху */
  padding-top:.02px; margin-top:-.02px;
}
.hcg-grid > *{ line-height:normal; }

.hcg-item{
  display:block;
  break-inside:avoid-column; -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 var(--hcg-gap) !important; /* сверху ВСЕГДА 0 */
  padding:0; border:0; vertical-align:top;
}

/* Обёртки без верхних маргинов */
.hcg-item > *, .hcg-item > a, .hcg-item > figure, .hcg-item > picture, .hcg-item > div{ margin-top:0 !important; }

.hcg picture, .hcg figure{ display:block; margin:0; padding:0; }
.hcg .hcg-img, .hcg picture > img{
  display:block; width:100%; height:auto; vertical-align:top; border:0; margin-top:0 !important;border-radius: 10px;
}

.hcg-item.is-hidden{ display:none !important; }

.a:hover, a:focus {color:none;}

/* ====== РЕЖИМ SAFARI: грид-masonry ======
   Включается добавлением класса .is-grid на .hcg (делает JS для Safari) */
.hcg.is-grid .hcg-grid{
  display:grid;
  grid-template-columns:repeat(var(--hcg-cols,4), 1fr);
  grid-column-gap:var(--hcg-gap);
  grid-row-gap:var(--hcg-gap);
  grid-auto-rows:var(--hcg-row-px);   /* JS высчитывает spан для каждой карточки */
  line-height:normal;                 /* в гриде line-height=0 не нужен */
  padding-top:0; margin-top:0;
}
.hcg.is-grid .hcg-item{
  margin:0 !important;               /* в гриде используем row/column-gap вместо margin */
  break-inside:auto;                 /* не критично, но на будущее */
}

/* Footer / кнопка */
.hcg-footer{ position:relative; display:flex; justify-content:center; align-items:center; gap:16px; padding:24px 0 18px; }
.hcg-footer.is-empty{ padding:0; }
.hcg-more{ appearance:none; background:transparent; font-weight: 500; border:1px solid rgba(175, 11, 11); color:#000; padding:10px 18px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.2s border-color,.2s background-color,.2s color,.2s opacity; }

/* Адаптив: кол-во колонок/столбцов */
@media (max-width:1200px){
  .hcg-grid{ column-count:var(--hcg-cols-tab,3); -webkit-column-count:var(--hcg-cols-tab,3); }
  .hcg.is-grid .hcg-grid{ grid-template-columns:repeat(var(--hcg-cols-tab,3), 1fr); }
}
@media (max-width:768px){
  .hcg-grid{ column-count:var(--hcg-cols-mob,2); -webkit-column-count:var(--hcg-cols-mob,2); }
  .hcg.is-grid .hcg-grid{ grid-template-columns:repeat(var(--hcg-cols-mob,2), 1fr); }
}

/* Fancybox стрелки на мобиле */
@media (hover:none), (max-width:768px){
  .fancybox-button--arrow_left, .fancybox-button--arrow_right{ display:none !important; }
}