/* Раздел «Мебель» — bento-сетка поверх сетки пергол. С 21.09.2026 — своя страница `/mebel`
   (до этого секция внизу `/catalog`; правила отбивки «второй категории» линией сняты вместе
   с ней — заголовок теперь h1 страницы под переключателем).

   Подключается ПОСЛЕ catalog.css и outexp-catalog.css и опирается на их правила: плитка
   `.card` здесь та же, что у пергол, отличаются только сцены `.fscene` и полоса под кадром,
   где у мебели нет признаков — только остаток. Своих `.card`-правил тут нет намеренно:
   правка вида плитки должна делаться один раз, в общем листе, и доезжать до обеих категорий.

   Размеры сетки, на которые всё рассчитано (замер 16.09): контент 1152 px при 1280,
   колонка 368, зазор 24, плитка ≈ 400 px высотой; сцена на два столбца — 760 × 400,
   то есть ≈ 1.9:1. Файлы сцен режутся под эту пропорцию (`tools/mebel/build_assets.py`),
   на телефоне подставляется кроп 3:2 через `<picture>`. */

/* ── сцена на два столбца ──────────────────────────────────────────────────── */

.fgrid .fscene {
  grid-column: span 2;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: var(--surface);
  /* Высоту задаёт РЯД — сцена растягивается до плиток рядом (`align-self: stretch`).
     `aspect-ratio` здесь нельзя: замер 16.09 на 1440 — с ним сцена стояла 400 px при
     плитках 442, низ не сходился. Пропорция появляется только там, где сцена в ряду одна
     (два столбца и меньше, см. ниже), иначе блок без содержимого в потоке схлопнулся бы. */
  min-height: 0;
  transition: transform .3s, box-shadow .3s;
}

/* Столбцы поровну. `repeat(3, 1fr)` из catalog.css — это `minmax(auto, 1fr)`: столбец
   растёт под min-content своего содержимого, и на 1200 px плитки мебели вышли 349/331/358
   (длинные имена в строке цены). `minmax(0, 1fr)` держит их равными при любом содержимом. */
.fgrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Строка плитки — ВСЕГДА в два ряда: имя сверху во всю ширину, под ним цена и стрелка.

   У пергол имя — «3×4», три знака, и строка держится в один ряд. У мебели имя — слова.
   Внутри `.cbar` на плитке 368 px остаётся 300 px (паддинг карточки 14 + бордюр + паддинг
   строки), а «Журнальный столик» + «70 000 ₽» + стрелка = 318: три плитки из пяти
   переносились, две нет, и ряд был рваный (снимок 1440, 16.09). Уменьшать шрифт не
   спасает — на 1200 px внутри уже 278. Поэтому не «когда не влезает», а всегда: пять
   одинаковых плиток важнее одного ряда, сэкономленного на широких экранах. Раскладка та же,
   что у пергол на телефоне (правило ≤420 в outexp-catalog.css). */
.fcard .cbar {
  flex-wrap: wrap;
  row-gap: 6px;
}

.fcard .cname {
  flex: 1 1 100%;
  font-size: 1.1rem;
  line-height: 1.2;
}

.fcard .cprice {
  margin-left: 0;
  font-size: 1.3rem;
}

.fcard .go {
  margin-left: auto;
}

.fgrid .fscene picture,
.fgrid .fscene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s;
}

.fgrid .fscene:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -34px rgba(var(--ink-rgb), 0.5);
}

.fgrid .fscene:hover img {
  transform: scale(1.025);
}

.fgrid .fscene:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Подпись — в языке чипов плитки, но НЕ капителью: подписи длинные («Диван из четырёх
   модулей, журнальный столик и шезлонг»), а капитель с разрядкой переносится на телефоне
   в три строки и перестаёт читаться. Стрелка — та же, что в строке плитки: сцена нажимается,
   и это должно быть видно без наведения. */
.fscene-cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
}

.fscene-cap svg {
  flex: 0 0 auto;
}

/* ── полоса под кадром: только остаток ─────────────────────────────────────── */

/* У пергол полоса делится на столбик признаков слева и остаток справа. У мебели признаков
   нет (решение владельца 16.09), и остаток остаётся один — справа, на том же месте, что и
   у пергольных плиток, чтобы глаз находил его там же. */
.cfoot-stock {
  justify-content: flex-end;
}

/* ── фильтр и пустой результат ─────────────────────────────────────────────── */

.fscene.hide {
  display: none;
}

.fempty {
  grid-column: auto;
}

/* ── два столбца: сцена занимает весь ряд ──────────────────────────────────── */

@media (max-width: 1000px) {
  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Порядок для двух и одного столбца — из `--o` ячейки (см. раскладку в
     FurnitureSection.astro): сцена занимает ряд целиком, и порядок трёх столбцов дал бы
     две сцены подряд и столик в одиночестве. */
  .fgrid > * {
    order: var(--o, 0);
  }

  .fgrid .fscene {
    aspect-ratio: 16 / 9;
  }
}

/* ── один столбец: сцены — полосы 3:2 между плитками ───────────────────────── */

@media (max-width: 620px) {
  /* `span 2` в одностолбцовой сетке создал бы вторую, неявную колонку и вынес сцену за
     край экрана — сетка стала бы шире экрана. Поэтому здесь span снимается. */
  .fgrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fgrid .fscene {
    grid-column: auto;
    aspect-ratio: 3 / 2;
    border-radius: 18px;
  }

  .fscene-cap {
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    font-size: 0.76rem;
    padding: 9px 12px 9px 14px;
  }
}