/* Kompozisiya düzülüşləri — YALNIZ blokların bir-birinə görə yerləşməsi.
 *
 * Sərhəd: blokun DAXİLİ strukturu kitabxanaya aiddir (`section.css`), blokların
 * bir-birinə görə DÜZÜLÜŞÜ isə template-ə. Bu fayl ikincisidir və heç bir
 * blokun içinə girmir - yalnız onları saran sətir konteynerlərini təyin edir.
 *
 * İstifadə: `template.json`-da `rows` açarı. Hər sətir bir və ya bir neçə blok:
 *   "rows": [["filters-bar"], ["data-table", "detail-view"]]
 *
 * Masaüstü template-lərinin mövcud olma səbəbi məhz budur: bloklar app dəsti
 * ilə eynidir, DÜZÜLÜŞ fərqlidir - siyahı və detal yan-yana durur, çünki
 * geniş ekranda şaquli yığmaq eni boş qoyur və gözü aşağı-yuxarı qaçırdır.
 */

.tpl-row {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

/* `min-width: 0` olmadan grid sütunu içindəki geniş cədvəl sütunu daraltmır,
   onu daşırır - bu, çoxpanelli düzülüşün ən tez-tez rast gəlinən qüsurudur. */
.tpl-col {
  min-width: 0;
}

.tpl-row + .tpl-row {
  margin-block-start: var(--space-6);
}

/* Bir blok - tam en. */
.tpl-row--1 {
  grid-template-columns: minmax(0, 1fr);
}

/* İki blok - BƏRABƏR sütunlar.
   Əvvəl `1fr 1.35fr` idi ("detala oxumaq üçün daha çox en lazımdır"), amma
   ekranda əksi çıxdı: `data-table` 6 sütunludur və sıxılanda sətirləri qırır,
   `detail-view` isə açar-dəyər siyahısıdır və dar endə rahat oxunur. Hansı
   panelin daha geniş olması BLOKDAN asılıdır, ona görə düzülüş neytral qalır -
   yanlış fərziyyə etməkdənsə bərabər bölmək daha az zərərlidir. */
.tpl-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Üç blok - bərabər sütunlar. */
.tpl-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Dar ekranda çoxpanelli düzülüş mənasızdır: sütunlar oxunmaz dərəcədə
   daralır. 64rem-dən aşağı hər sətir tək sütuna yığılır. */
@media (max-width: 64rem) {
  .tpl-row--2,
  .tpl-row--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}