/* =====================================================================
   КАТАЛОГ КАЗАХСТАН — только то, чего нет в общей системе (site.css).
   Всё на тех же переменных: подложка одна, линии волосяные, фото без скруглений.

   Чем страница отличается от каталога России и зачем здесь свои стили:
   1. разделов тринадцать, а не семь — навигация .cnav не помещается в строку;
   2. картинки категорий на живой странице квадратные (1024×1024) и показаны квадратом —
      общая рамка 3:2 срезала бы бутылку, банки и стопку форм;
   3. под карточками идут разделы с описанием, картинкой категории и списком позиций
      (название, уточнение мелким шрифтом, «Подробнее →») — этого в каталоге России нет.
   Позиции — готовый список .rows; здесь только его раскладка в колонки и уточнение под названием.
   ===================================================================== */

/* навигация: 13 ссылок — две плотные строки на широком экране */
.kz-nav { row-gap: 0; }
.kz-nav a, .kz-nav .cnav-h { padding: 6px 0; }

/* карточки категорий — квадратом, как на живой странице */
.kz-grid .lot-pic { aspect-ratio: 1 / 1; }
.kz-grid .lot-name { overflow-wrap: break-word; }

/* раздел: картинка категории колонкой сбоку, справа — «назад», заголовок, описание и позиции.
   scroll-margin-top больше общего: после перехода по якорю линия раздела встаёт под двухстрочную навигацию, а не прячется за ней. */
.kz-sec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 84px); row-gap: clamp(18px, 3vh, 30px); scroll-margin-top: clamp(130px, 17.2vh, 160px); }
.kz-sec > .kz-pic { grid-column: 1; grid-row: 1 / span 2; align-self: start; aspect-ratio: 1 / 1; object-fit: cover; }
.kz-sec > .kz-top { grid-column: 2; grid-row: 1; }
.kz-sec > .kz-body { grid-column: 2; grid-row: 2; }
/* через раздел картинка встаёт с другой стороны — длинная страница не читается как таблица */
.kz-sec.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.kz-sec.flip > .kz-pic { grid-column: 2; }
.kz-sec.flip > .kz-top, .kz-sec.flip > .kz-body { grid-column: 1; }

/* в длинном разделе картинка едет рядом со списком, а не оставляет под собой пустое место */
@media (min-width: 981px) and (min-height: 700px) {
  .kz-sec > .kz-pic { position: sticky; top: clamp(28px, 6vh, 60px); }
}

.kz-back { display: inline-flex; align-items: center; min-height: 32px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; color: var(--accent); transition: color .2s var(--ease-out), transform .3s var(--ease-out); }
.kz-back:hover { color: var(--brown); transform: translateX(-4px); }
.kz-top .h2 { margin-top: 10px; }

/* позиции раздела: список ссылок-строк в две колонки; снизу список закрывает одна общая линия */
.kz-rows { margin-top: clamp(24px, 4vh, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 44px); border-bottom: 1px solid var(--line); }
.kz-rows .row { font-size: clamp(0.84rem, 1.02vw, 0.98rem); }
.kz-rows .row:last-child { border-bottom: 0; }
.kz-n { min-width: 0; font: inherit; letter-spacing: inherit; color: inherit; text-wrap: balance; }
/* уточнение под названием — строчными, обычным текстом */
.kz-n small { display: block; margin-top: 5px; font-size: 0.82rem; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--ink-2); text-wrap: pretty; }

/* средний экран: навигация — лентой, как на телефоне; позиции — в одну колонку (колонка текста уже узкая) */
@media (max-width: 1180px) {
  .kz-nav { flex-wrap: nowrap; overflow-x: auto; column-gap: 20px; scrollbar-width: none; }
  .kz-nav::-webkit-scrollbar { display: none; }
  .kz-rows { grid-template-columns: minmax(0, 1fr); }
}

/* планшет: раздел в одну колонку — заголовок, картинка, описание, позиции */
@media (max-width: 980px) {
  .kz-sec, .kz-sec.flip { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; scroll-margin-top: clamp(110px, 16vh, 150px); }
  .kz-sec > .kz-pic, .kz-sec > .kz-top, .kz-sec > .kz-body,
  .kz-sec.flip > .kz-pic, .kz-sec.flip > .kz-top, .kz-sec.flip > .kz-body { grid-column: 1; grid-row: auto; }
  .kz-sec > .kz-pic { max-width: 560px; }
  .kz-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* телефон */
@media (max-width: 760px) {
  .kz-nav a, .kz-nav .cnav-h { padding: 12px 0; }
  .kz-sec, .kz-sec.flip { row-gap: 18px; padding-top: 44px; padding-bottom: 52px; }
  .kz-sec > .kz-pic { max-width: none; }
  .kz-back { min-height: 44px; font-size: 0.68rem; }
  .kz-top .h2 { margin-top: 4px; }
  .kz-rows { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  /* строка остаётся строкой: название слева, «Подробнее →» справа — 68 позиций не должны растягивать страницу втрое */
  .kz-rows .row { flex-direction: row; align-items: baseline; gap: 14px; min-height: 52px; padding: 15px 0; font-size: 0.9rem; }
  .kz-rows .row span { text-align: right; font-size: 0.64rem; }
  .kz-n small { font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kz-back { transition: none; }
}