/* ===========================================================================
   РЕШЕТКАТА НА /galeriya — 06.09.2026

   Колони, които вървят с различна скорост при търкаляне. Заменя въртежката
   на тази страница; началната си остава с кръговия ефект.

   ⚠️ ЕФЕКТЪТ Е САМО В ДВЕ СВОЙСТВА: translate3d по Y на колоните и лек
   наклон на сцената. Всичко друго е обикновена решетка, която работи и
   без JavaScript.
   =========================================================================== */

.grid-galeriya {
  padding: clamp(28px, 4vw, 56px) var(--landing-pole, 20px)
           clamp(44px, 5vw, 76px);
  background-color: var(--white);
  /* Наклонените колони излизат извън секцията — режат се тук, не на body. */
  overflow: hidden;
}

/*
 * ⚠️ КОЛОНИТЕ СА ЧЕТИРИ В РАЗМЕТКАТА, НО НЕ ВИНАГИ ЧЕТИРИ НА ЕКРАН.
 *
 * ЗАЩО НЕ Е ОБИКНОВЕН GRID С repeat(2, 1fr) НА ТЕЛЕФОН:
 *
 * Разметката е четири отделни <div>-а. Сместени в две колони, третият и
 * четвъртият падат ПОД първите два — тоест стават два дълги стълба един
 * след друг, с празнина по средата, където по-късата колона свършва.
 * Видяно на снимка на 06.09.2026, не изчислено.
 *
 * Затова под 600px колоните се разтварят (`display: contents`) и снимките
 * влизат направо в решетката на родителя. Тогава те се редят една по една в
 * две колони, както се очаква.
 *
 * ⚠️ ЦЕНАТА: разтворената колона не може да се мести. Затова паралаксът на
 * телефон отпада — скриптът проверява същия праг. Приемливо е: на телефон
 * колоните са две и разликата в скоростта и без това почти не се вижда,
 * а по-малко движение при търкаляне с пръст е предимство.
 */
/*
 * ⚠️ ПОД 980px ПОДРЕДБАТА Е С КОЛОНИ, НЕ С GRID.
 *
 * Grid подравнява по РЕДОВЕ: всеки ред е висок колкото най-високата снимка
 * в него, а под по-ниските зее празно. Снимките тук са с различна
 * височина и това си личеше веднага — видяно на снимка на 06.09.2026.
 *
 * `columns` пълни колоните отгоре надолу и следващата снимка тръгва
 * веднага под предишната. Тоест зидария без нито ред JavaScript.
 *
 * От 980px нагоре се връща grid: там колоните са четири истински <div>-а,
 * които трябва да могат да се местят поотделно за паралакса.
 */
.grid-galeriya-scena {
  /* Две колони на телефон. При 390px четири колони дават 78px на колона —
     мерено, не на око. Три дават 109px, което пак е малко. */
  columns: 2;
  column-gap: 12px;
  max-width: 1560px;
  margin: 0 auto;
}

/* Снимката не бива да се пречупва между две колони. */
.grid-galeriya-scena .grid-galeriya-kadar {
  break-inside: avoid;
  margin-bottom: 12px;
}

/*
 * ⚠️ РАЗТВОРЕНА Е ПО ПОДРАЗБИРАНЕ, НЕ В МЕДИА ЗАЯВКА.
 *
 * Дотук базовото `display: flex` стоеше ПО-ДОЛУ във файла от заявката за
 * телефон. При еднаква тежест печели последното правило — тоест колоните
 * никога не се разтваряха и на 390px пак бяха четири стълба.
 * Мерено: `display` върна „flex" при ширина 390.
 *
 * Затова редът сега е: разтворено навсякъде, а истински колони само от
 * 980px нагоре — единственият праг, на който те се събират на един ред.
 */
.grid-galeriya-kolona {
  display: contents;
}

@media (min-width: 600px) {
  .grid-galeriya-scena {
    columns: 3;
    column-gap: 16px;
  }

  .grid-galeriya-scena .grid-galeriya-kadar {
    margin-bottom: 16px;
  }
}

@media (min-width: 980px) {
  .grid-galeriya-scena {
    /* Обратно на grid: колоните вече са истински и се местят поотделно. */
    columns: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
  }

  .grid-galeriya-scena .grid-galeriya-kadar {
    margin-bottom: 0;
  }

  /*
   * Тук колоните са истински и могат да се местят. `will-change` се дава
   * само на този праг: под него нищо не се мести и обещанието към браузъра
   * е излишна памет за видеослой, който не се ползва.
   */
  .grid-galeriya-kolona {
    display: flex;
    will-change: transform;
  }
}

/*
 * ⚠️ БЕЗ `display` ТУК. То се задава по-горе и НЕ БИВА да се повтаря:
 * това правило стои по-надолу във файла и при еднаква тежест би победило
 * разтварянето. Точно това счупи телефона веднъж — виж бележката горе.
 *
 * Разстоянието между снимките в разтворено състояние идва от решетката на
 * родителя (`gap` на .grid-galeriya-scena); тукашният важи само когато
 * колоната е истинска, от 980px нагоре.
 */
.grid-galeriya-kolona {
  flex-direction: column;
  gap: 20px;
}

.grid-galeriya-kadar {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--beige-02, #f0eee9);
  /* Снимките са различни по височина — решетката ги подрежда както дойдат.
     Това е нарочно: еднаква височина значи рязане на всяка втора. */
}

.grid-galeriya-kadar img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.grid-galeriya-kadar:is(:hover, :focus-within) img {
  transform: scale(1.03);
}

/*
 * ⚠️ ПРИ „БЕЗ ДВИЖЕНИЕ" ОСТАВА ОБИКНОВЕНА РЕШЕТКА.
 *
 * Скриптът проверява същото и не мести нищо, но стилът трябва да го каже
 * сам: човек с изключени анимации не бива да разчита на JavaScript, за да
 * получи спокойна страница.
 */
@media (prefers-reduced-motion: reduce) {
  .grid-galeriya-kolona {
    transform: none !important;
    will-change: auto;
  }

  .grid-galeriya-kadar img {
    transition: none;
  }

  .grid-galeriya-kadar:is(:hover, :focus-within) img {
    transform: none;
  }
}