/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN 2.0 — ФОТО-ПОКРЫТИЕ КАТАЛОГА: полоса фото на плитках рубрик
   (design2-rubricphotos.css, 16.09 AI-2)
   Пара к design2-rubricphotos.js: полоса .d2-rubph из 4 квадратов между
   заголовком плитки и метриками. Токены — общие с design2-catalog.css
   (:root), тёмная тема подхватывается сама через design2-dark.css
   (html[data-theme=dark] переопределяет --paper-2 и т.д. — var()
   резолвится в computed-value время, порядок загрузки не важен).
   Откат: убрать <link> из catalog.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* полоса: 4 квадрата во всю ширину плитки (плитка 265-332px → фото ~62-72px) */
.d2-rubph{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  animation:d2-rubph-in .35s ease backwards;
}
.d2-rubph i{
  display:block;
  aspect-ratio:1/1;
  border-radius:9px;
  overflow:hidden;
  background:var(--paper-2,#F7F8FA);   /* плейсхолдер, пока грузится lazy-фото */
}
.d2-rubph img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .22s ease;
}

/* ховер плитки: мягкий зум фото — «живой» отклик слоя сканирования */
.cat-rub:hover .d2-rubph img{transform:scale(1.07)}

@keyframes d2-rubph-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* мобильная плотность (плитки в 1 колонку, ~350px): чуть плотнее зазор */
@media (max-width:640px){
  .d2-rubph{gap:4px}
}

/* ═══ v2 (18.09.2026) — ФОТО-ФОН С ОВЕРЛЕЕМ (hero-плитки рубрик) ═══
   Пара к inject() v2: .d2-rubbg — full-bleed hero до краёв плитки
   (negative margin = padding плитки), фото cover + градиент-оверлей,
   заголовок белым; мини-стек фото — правый верхний угол. Тёмная тема
   не требует правил: фото+оверлей работают в обеих. Откат: v1-стили
   .d2-rubph остаются в этом файле (legacy, безвредны). ═══ */
.d2-rubbg{
  position:relative;display:flex;align-items:flex-end;
  margin:-16px -18px 0;
  min-height:158px;
  border-radius:14.5px 14.5px 0 0;
  overflow:hidden;
  background:#2A2622;
}
.d2-rubbg__img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .25s ease;
}
.d2-rubbg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,18,14,.14) 0%,rgba(22,18,14,.30) 55%,rgba(22,18,14,.74) 100%);
}
.d2-rubbg .cat-rub__top{position:relative;z-index:1;padding:14px 16px 13px;width:100%;box-sizing:border-box}
.d2-rubbg .cat-rub__top .cat-rub__b b{color:#FFFFFF}
.d2-rubbg .cat-rub__top .cat-rub__b i{color:rgba(255,255,255,.85)}
.d2-rubbg .cat-rub__ic{
  background:rgba(255,255,255,.93);box-shadow:0 4px 14px rgba(0,0,0,.24);
  width:52px;height:52px;font-size:25px;border-radius:13px;
}
.d2-rubbg__th{position:absolute;top:10px;right:12px;z-index:1;display:flex;gap:5px}
.d2-rubbg__th i{
  width:34px;height:34px;border-radius:8px;
  background-size:cover;background-position:center;
  border:2px solid rgba(255,255,255,.78);
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.cat-rub:hover .d2-rubbg__img{transform:scale(1.06)}
@media(max-width:640px){
  .d2-rubbg{min-height:132px;margin:-14px -16px 0}
  .d2-rubbg .cat-rub__top{padding:11px 13px 10px}
  .d2-rubbg .cat-rub__ic{width:46px;height:46px;font-size:22px}
  .d2-rubbg__th{top:8px;right:10px}
  .d2-rubbg__th i{width:28px;height:28px;border-radius:7px}
}