/* Стили, уникальные для Project Page — перенесены из локального <style>
   блока project-page.html (без системы аннотаций). Общий костяк
   (toolbar/tabbar/.page/spec-таблица/скелет карусели) уже даёт
   detail-page.css — здесь только то, что реально отличается: full-width
   карусель (не в гриде с таблицей), hotpoint-точки на фото, широкий format
   фото (16:9 вместо 1:1), теги для spec-таблицы проекта. */

/* Карусель на всю ширину блока (не .ov-grid бок о бок с таблицей, как на
   Material/Sample/Pattern) — нужен свой отступ снизу перед таблицей.
   Высота увеличена на ~30% относительно исходных 16:9 (16/9 → 16/11.7).
   Фото вписывается целиком (object-fit:contain), а не обрезается по кадру
   (object-fit:cover, как на квадратных текстурах Material/Sample/Pattern) —
   для интерьерных фото объекта обрезка кадра часто теряет важные детали. */
.carousel-wrap{margin-bottom:32px}
.main-viewer{aspect-ratio:16/11.7;cursor:zoom-in}
.main-viewer img{object-fit:contain}
.mv-badge{z-index:3}
.mv-cap{z-index:2}
.mv-nav{z-index:3}

/* На мобильном широкий формат (16/11.7) даёт слишком низкую галерею —
   возвращаем ту же высоту, что у Material/Sample (aspect-ratio:3/4 из
   detail-page.css), только на узких экранах; на десктопе широкий формат
   остаётся, он там уместен для интерьерных фото. */
@media(max-width:560px){.main-viewer{aspect-ratio:3/4}}

/* Hotpoints — точка на фото со ссылкой на материал/образец/паттерн, видимая
   в этом месте кадра. Админ расставляет их в admin/projects.php, координаты
   x/y в процентах от размера фото. .hotspot/.hspop — canonical в shared.css
   (общие с homepage.php). */

/* ── spec-таблица: теги для Samples/Materials used ── */
.series-cell{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pjtags{display:flex;gap:4px;flex-wrap:wrap}
.pjtag{padding:2px 7px;border-radius:99px;font-size:11px;border:1px solid}
.pjtag.code{border-color:var(--badge-sample-border);color:var(--accent)}
.pjtag.material{border-color:color-mix(in srgb,var(--teal) 28%,transparent);color:var(--teal)}

/* ── "Samples Used" (BLOCK 3) — карточки-планшеты MDF вместо плоской
   .card. Сетка (не flex-wrap) — 3/2/1 колонки по ширине страницы, gap
   фиксированный 20px, ширина/высота карточки НЕ пиксельные — --mdf-w
   считается через container query units (cqw) от фактической ширины
   .mdf-row (container-type:inline-size), см. точно тот же приём и
   комментарий в detail-page.css у #matSampleRow (material.php). */
#pjSampleRow.mdf-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0;
  container-type: inline-size;
}
#pjSampleRow.mdf-row .mdf-card{
  width: 100%;
  --mdf-tilt: 0deg;
  --mdf-w: calc((100cqw - 40px) / 3);
}
@media (min-width: 641px){
  /* -4px (2026-08-19) — тот же единый подъём, что и у остальных карточек
     сайта (см. .card в shared.css, базовое правило .mdf-card в
     mdf-card.css), раньше здесь было отдельно заданное -8px. */
  #pjSampleRow.mdf-row .mdf-card:hover, #pjSampleRow.mdf-row .mdf-card:focus-visible{
    transform: rotate(0deg) translateY(-4px);
  }
}
@media (max-width: 640px){
  #pjSampleRow.mdf-row .mdf-card:hover, #pjSampleRow.mdf-row .mdf-card:focus-visible{
    transform: none;
  }
}
@media (max-width: 980px){
  #pjSampleRow.mdf-row{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
  #pjSampleRow.mdf-row .mdf-card{ --mdf-w: calc((100cqw - 20px) / 2); }
}
@media (max-width: 560px){
  #pjSampleRow.mdf-row{ grid-template-columns: 1fr; }
  #pjSampleRow.mdf-row .mdf-card{ --mdf-w: 100cqw; }
}