/* ============================================================================
   site/pantry.css — «Каталог» на главной: фургон «Рентгена» в середине,
   одиннадцать категорий рамкой вокруг.

   Было: сетка из одиннадцати больших карточек (kitchen.css) — два экрана
   одних фотографий. Стало одной сценой: в середине фургон, который можно
   протереть курсором до груза с ценами (xray.js), по краям — те же
   категории плитками. Связь в обе стороны: наведение на плитку проводит
   «сканер» по её грузу в фургоне; протёртый груз зажигает свою плитку.

   Рамка на мониторе — сетка 5 × 4: три плитки слева, три справа, пять
   снизу; фургон на средних трёх колонках и верхних трёх рядах. Пропорция
   плитки 1.6 держит коробку фургона ~1.57:1 при любой ширине — поэтому
   пластину можно ставить числами, без подгонки скриптом.
   ========================================================================== */

.pantry{
  display:grid; gap:12px;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
/* Пластина шире коробки фургона (края кадра — фон). На мониторе лишнее
   прячется под плитками, на телефоне раздвинуло бы страницу вбок. Режем
   по разделу, а не по .pantry: у той край — поле страницы, и затухание
   кадра оказывалось за обрезом — пластина читалась прямоугольником. */
.provisions{ overflow-x:clip }
.pantry .provisions-grid{ display:contents }

.pantry-van{ position:relative; grid-column:2 / 5; grid-row:1 / 4; min-height:0 }

/* Фургон — 94 % ширины коробки. Кадр второй пары (23.09, вечер, make.py):
   силуэт занимает 0.838 ширины кадра (0.0879…0.9259), значит пластина —
   112.2 % коробки, а середина силуэта (0.5069; 0.5131) ставится в середину
   коробки. По бокам пластина выходит за коробку на ~6 % — там её края уже
   сведены в цвет фона, а сверху их закрывают плитки. */
.pantry .xr{ position:absolute; inset:0; overflow:visible; border-radius:0 }
.pantry .xr-plate{
  position:absolute; left:50%; top:50%;
  width:112.2%; translate:-50.69% -51.31%;
}
/* Маска — на картинку и холст, а не на всю пластину: ценники над верхней
   полкой поднимаются к краю кадра и иначе гасли бы вместе с ним.
   Края кадра сведены в --bg, а фон раздела — полотно (tone.js) с
   топо-линиями: без маски пластина читалась тёмным прямоугольником.
   Фургон занимает 0.088…0.926 по ширине и 0.168…0.858 по высоте кадра
   (с колёсами) — полосы затухания лежат снаружи, под колёсами остаётся
   тень и отблеск пола. */
.pantry .xr-img,
.pantry .xr-canvas{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93.5%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 13%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93.5%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 13%, #000 86%, transparent 100%);
          mask-composite:intersect;
}

/* ── плитка категории ─────────────────────────────────────────────────────
   Та же карточка каталога (kitchen.css), уменьшенная: снимок во всю
   плитку, имя поверх светлого поля снимка, описание — при наведении. */

.pantry .provision{
  position:relative; z-index:1;              /* над краями пластины */
  display:block; min-height:0; padding:0; grid-column:auto;
  aspect-ratio:1.6; border-radius:10px;
  transition:transform .22s var(--e-micro), box-shadow .22s var(--e-micro);
}
.pantry .provision:nth-child(1){ grid-area:1 / 1 }
.pantry .provision:nth-child(2){ grid-area:2 / 1 }
.pantry .provision:nth-child(3){ grid-area:3 / 1 }
.pantry .provision:nth-child(4){ grid-area:1 / 5 }
.pantry .provision:nth-child(5){ grid-area:2 / 5 }
.pantry .provision:nth-child(6){ grid-area:3 / 5 }
.pantry .provision:nth-child(n+7){ grid-row:4 }
/* kitchen.css растягивает две последние карточки на три колонки;
   в рамке все плитки одного размера. */
.pantry .provision:nth-last-child(-n+2){ grid-column:auto }

.pantry .provision-top{ position:absolute; z-index:2; left:12px; right:12px; top:10px }
.pantry .provision h3{ max-width:none;
  font-size:clamp(12px,1vw,14.5px); line-height:1.2; letter-spacing:-.2px }
.pantry .provision p{
  position:absolute; z-index:2; left:12px; right:12px; top:calc(10px + 1.2 * clamp(12px,1vw,14.5px) + 3px);
  margin:0; max-width:none; font-size:11px; line-height:1.35;
  opacity:0; transition:opacity .2s var(--e-micro);
}
.pantry .provision-image{ position:absolute; inset:0; margin:0; min-height:0; overflow:hidden; border-radius:inherit }
.pantry .provision img{
  width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 34%);
}

@media (hover:hover){
  .pantry .provision:hover{ transform:translate3d(0,-3px,0); box-shadow:0 14px 30px -16px rgba(0,0,0,.75) }
  .pantry .provision:hover p{ opacity:1 }
}
/* Плитка, чей груз сейчас виден в фургоне. */
.pantry .provision.is-lit{
  box-shadow:0 0 0 2px var(--blue,#8FE3C4), 0 0 28px -6px rgba(143,227,196,.6);
}

/* ── планшет и телефон: фургон сверху во всю ширину, плитки сеткой ── */
@media (max-width:999px){
  .pantry{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
  .pantry-van{ grid-column:1 / -1; grid-row:auto; aspect-ratio:1.6 }
  .pantry .provision:nth-child(n){ grid-area:auto }
  .pantry .provision:nth-child(10){ grid-column:span 2; aspect-ratio:auto }
}
@media (max-width:640px){
  .pantry{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .pantry .provision:nth-child(10){ grid-column:auto; aspect-ratio:1.6 }
  .pantry .provision:nth-child(11){ grid-column:1 / -1; aspect-ratio:3.3 }
  .pantry .provision-top{ left:10px; top:8px }
}

@media (prefers-reduced-motion:reduce){
  .pantry .provision{ transition:none }
}