/* ===== Детальная страница проекта — редизайн 08.2026 =====
   Макет: стенд docs/mockups/portfolio_detail_final.html (гибрид V2+V4).
   Две колонки: слева галерея (крупный кадр 16:10, миниатюры лентой под ним,
   активная — с оранжевой обводкой), справа «паспорт»: заголовок, чипы
   отрасль/год, факты тонкими строками, применённые продукты мини-каруселью
   как «Сопутствующие товары» в карточке товара (.jv-product__related--mini).
   Шапку каталога над деталкой прячет #list-head (list.twig + jv_portfolio.js).
   Классы галереи и слайдера продуктов — те же, что раньше: на их ids завязан
   jv_portfolio.js (перелистывание фото, стрелки карусели). Тема jv-product.css
   на страницах портфолио НЕ подключена — все нужные стили живут здесь. */

.jv-project { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 34px; align-items: start; margin-bottom: 40px;
  /* #503: хлебные крошки стояли вплотную к галерее (4px) */
  margin-top: 20px; }

/* ── галерея: кадр сверху, миниатюры лентой под ним ── */
.jv-project__gallery { position: sticky; top: 20px; min-width: 0; }
.jv-project .jv-product__slider { display: flex; flex-direction: column; gap: 8px;
  width: 100%; margin: 0; padding: 0; }
.jv-project .jv-product__slider-main { width: 100%; aspect-ratio: 16 / 10;
  border-radius: 16px; overflow: hidden; background: var(--jv-bg-surface);
  display: flex; align-items: center; justify-content: center; }
.jv-project .jv-product__slider-main-link { display: block; width: 100%; height: 100%; }
/* фото объекта заполняет кадр (в теме contain — под вырезанные товары, тут не надо) */
.jv-project .jv-product__slider-main img { width: 100%; height: 100%;
  max-width: none; max-height: none; object-fit: cover; display: block; }
.jv-project .jv-product__slider-thumbs { width: 100%; }
.jv-project .jv-product__slider-thumbs-viewport { overflow: visible; width: 100%; }
.jv-project .jv-product__slider-thumbs-track { display: flex; flex-direction: row;
  flex-wrap: wrap; gap: 8px; }
.jv-project .jv-product__slider-thumb { flex: 0 0 auto;
  width: calc((100% - 4 * 8px) / 5); aspect-ratio: 4 / 3;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--jv-bg-surface); }
.jv-project .jv-product__slider-thumb.active { border-color: var(--jv-accent); }
.jv-project .jv-product__slider-thumb img { width: 100%; height: 100%;
  object-fit: cover; display: block; }

/* ── паспорт проекта ── */
.jv-project__info { min-width: 0; }
.jv-project__title2 { font-size: var(--jv-font-size-5xl);
  font-weight: var(--jv-font-weight-extrabold); line-height: 1.15; margin: 0 0 14px; }

.jv-project__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.jv-project__chip { display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 99px; background: var(--jv-bg-surface);
  color: var(--jv-text-primary); font-size: 12.5px;
  font-weight: var(--jv-font-weight-semibold); white-space: nowrap; }
.jv-project__chip--accent { background: #FDEEE8; color: var(--jv-accent); }

/* факты — тонкие строки с разделителями, без панели-подложки */
.jv-project__facts { list-style: none; margin: 10px 0 0; padding: 0; }
.jv-project__facts li { display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-top: 1px solid var(--jv-border-light); }
.jv-project__facts li:last-child { border-bottom: 1px solid var(--jv-border-light); }
.jv-fact__lbl { color: var(--jv-text-muted); font-size: var(--jv-font-size-base);
  white-space: nowrap; }
.jv-fact__val { color: var(--jv-text-primary); font-weight: var(--jv-font-weight-semibold);
  font-size: var(--jv-font-size-base); text-align: right; }
.jv-project__descr { margin: 14px 0 0; color: var(--jv-text-secondary);
  font-size: var(--jv-font-size-base); line-height: 1.5; }

/* ── применённые продукты: мини-карусель (как «Сопутствующие» в товаре) ── */
.jv-project__applied { min-width: 0; margin-top: 24px; overflow: hidden; }
.jv-project__applied .jv-product__related-header { display: flex;
  justify-content: space-between; align-items: center; margin-bottom: 14px; }
.jv-project__applied .jv-product__related-header h3 { margin: 0;
  font-size: var(--jv-font-size-2xl, 20px); font-weight: var(--jv-font-weight-extrabold);
  color: var(--jv-text-primary); }
.jv-project__applied .jv-product__related-nav { display: flex; gap: 8px; }
.jv-project__applied .jv-product__related-prev,
.jv-project__applied .jv-product__related-next,
.jv-project__section-head .jv-product__related-prev,
.jv-project__section-head .jv-product__related-next { padding: 0; border: none;
  width: 26px; height: 26px; border-radius: 7px; background: var(--jv-bg-surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity var(--jv-transition-fast, .15s); }
.jv-project__applied .jv-product__related-prev svg,
.jv-project__applied .jv-product__related-next svg,
.jv-project__section-head .jv-product__related-prev svg,
.jv-project__section-head .jv-product__related-next svg { width: 22px; height: 22px; display: block; }
.jv-project__applied .jv-product__related-prev:hover,
.jv-project__applied .jv-product__related-next:hover,
.jv-project__section-head .jv-product__related-prev:hover,
.jv-project__section-head .jv-product__related-next:hover { opacity: .7; }
/* листает jv_portfolio.js через translateX — слайдер лентой, лишнее режет overflow блока */
.jv-project__applied .jv-product__related-slider { display: flex; flex-wrap: nowrap;
  gap: 10px; transition: transform .4s ease; }
.jv-project__applied .jv-product__related-item { flex: 0 0 auto; width: 132px;
  min-width: 0; max-width: none; display: flex; flex-direction: column;
  align-items: stretch; gap: 8px; padding: 8px;
  background: var(--jv-bg-surface); border-radius: 12px; }
.jv-project__applied .jv-product__related-image { width: 100%; min-width: 0;
  height: auto; aspect-ratio: 1 / 1; flex: none; border-radius: 10px;
  background: var(--jv-bg-white, #fff); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.jv-project__applied .jv-product__related-image a { display: flex; width: 100%;
  height: 100%; align-items: center; justify-content: center; }
.jv-project__applied .jv-product__related-image img { max-width: 85%; max-height: 85%;
  object-fit: contain; }
.jv-project__applied .jv-product__related-info { display: flex; flex-direction: column;
  gap: 8px; min-width: 0; }
.jv-project__applied .jv-product__related-title { color: var(--jv-text-primary);
  font-size: 12.5px; font-weight: var(--jv-font-weight-semibold); line-height: 1.3;
  min-height: 2.6em; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.jv-project__applied .jv-product__related-title:hover { color: var(--jv-accent); }
/* в мини-карточке артикул и «Подробнее» не показываем — как у «Сопутствующих».
   !important обязателен: custom.css форсит у .jv-product__related-btn
   display:inline-flex !important (та же грабля, что у --mini в jv-product.css) */
.jv-project__applied .jv-product__related-article,
.jv-project__applied .jv-product__related-btn { display: none !important; }

/* ── секция «Другие проекты» ── */
.jv-project__section { margin: 40px 0 50px; }
.jv-project__h2 { font-size: var(--jv-font-size-4xl);
  font-weight: var(--jv-font-weight-bold); margin: 0 0 22px; }

/* #504: секция стала каруселью — заголовок слева, стрелки справа (в ряд,
   визуально под правой колонкой с продуктами). Лента скроллится нативно
   (overflow-x + scroll-snap: на тач-экранах остаётся свайп), кнопки листают
   scrollBy на ширину видимой области (jv_portfolio.js, initDetail). */
.jv-project__section-head { display: flex; justify-content: space-between;
  align-items: center; gap: 16px; margin-bottom: 22px; }
/* #506: у кнопок display:flex (блочные) — без flex-контейнера они вставали
   друг над другом; правило nav в этом файле было заскоуплено только паспортом */
.jv-project__section-head .jv-product__related-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.jv-project__section-head .jv-project__h2 { margin: 0; }
.jv-project__section .jv-portfolio-grid { display: flex; flex-wrap: nowrap;
  gap: 16px; margin-bottom: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; }
.jv-project__section .jv-portfolio-grid::-webkit-scrollbar { display: none; }
/* #508: карточка «Других проектов» — 1в1 стиль новостной карточки главной
   (.jvnews__item в jv_news.css): серая плитка 15px, фото 3:2, заголовок 14px,
   подпись 13px. Открытие по data-slug — jv_portfolio.js (.jv-ocard). */
/* #508 (доработка): на десктопе — 6 карточек в ряд */
.jv-ocard { flex: 0 0 calc((100% - 5 * 16px) / 6); min-width: 0;
  scroll-snap-align: start; display: block; padding: 10px; border-radius: 15px;
  background: #F2F3F6; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.jv-ocard:hover { box-shadow: 0 6px 24px rgba(0,0,0,.10); transform: translateY(-2px); }
.jv-ocard img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  margin-bottom: 14px; border-radius: 10px; display: block; }
.jv-ocard .title { font-weight: 500; font-size: 14px; margin: 0 0 10px;
  line-height: 130%; color: #303131; padding: 0 6px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.jv-ocard .text { font-weight: 400; font-size: 13px; line-height: 140%;
  margin: 0 0 6px; color: #555; padding: 0 6px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; }
@media (max-width: 1400px) {
  .jv-project__section .jv-ocard { flex-basis: calc((100% - 3 * 16px) / 4); }
}
@media (max-width: 1024px) {
  .jv-project__section .jv-ocard { flex-basis: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 820px) {
  .jv-project__section .jv-ocard { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 680px) {
  .jv-project__section .jv-ocard { flex-basis: 72%; }
}

/* ── #507: галерея как на карточке товара ──
   Превью — колонкой слева от кадра (на ≤900 остаётся лента снизу, как и
   мобильная карточка товара); клик по кадру открывает лайтбокс MagnificPopup
   с теми же доработками, что у товара (#495–497): стрелки и крестик у кадра,
   счётчик «N из M» слева сверху, точки-переключатели под фото. */
/* #754: на мобильном превью раскладывались в 2–3 ряда и съедали экран.
   До 900px — одна лента с горизонтальной прокруткой (на ≥901 превью колонкой
   слева, там прокрутка вертикальная и уже была). */
@media (max-width: 900px) {
  .jv-project .jv-product__slider-thumbs-viewport { overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jv-project .jv-product__slider-thumbs-viewport::-webkit-scrollbar { display: none; }
  .jv-project .jv-product__slider-thumbs-track { flex-wrap: nowrap; }
  .jv-project .jv-product__slider-thumb { width: 84px; }
}

@media (min-width: 901px) {
  .jv-project .jv-product__slider { flex-direction: row; gap: 10px; }
  .jv-project .jv-product__slider-thumbs { order: -1; flex: 0 0 88px; width: 88px;
    position: relative; }
  .jv-project .jv-product__slider-thumbs-viewport { position: absolute; inset: 0;
    overflow-y: auto; scrollbar-width: none; }
  .jv-project .jv-product__slider-thumbs-viewport::-webkit-scrollbar { display: none; }
  .jv-project .jv-product__slider-thumbs-track { flex-direction: column;
    flex-wrap: nowrap; gap: 8px; }
  .jv-project .jv-product__slider-thumb { width: 100%; aspect-ratio: 1 / 1; }
  .jv-project .jv-product__slider-main { flex: 1 1 auto; min-width: 0; }
}
.jv-project .jv-product__slider-main-link { cursor: zoom-in; }

/* лайтбокс: копия оформления .jv-mfp с карточки товара (jv-product.css там,
   здесь свой блок — jv-product.css на страницах портфолио не подключён) */
.jv-mfp .mfp-arrow { width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='22' viewBox='0 0 14 22' fill='none'%3E%3Cpath d='M12 2L3 11l9 9' stroke='%23E94E1B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: .95; }
.jv-mfp .mfp-arrow:hover { opacity: 1; }
.jv-mfp .mfp-arrow:before, .jv-mfp .mfp-arrow:after { display: none; }
.jv-mfp .mfp-arrow-right { transform: scaleX(-1); }
.jv-mfp .mfp-close, .jv-mfp .mfp-close:active { width: 44px; height: 44px;
  right: 12px; top: 12px; padding: 0; line-height: 44px; font-size: 0; color: #fff;
  opacity: 1; background: rgba(0,0,0,.45); border-radius: 50%; text-align: center; }
.jv-mfp .mfp-close::before { content: '×'; font-size: 34px; line-height: 44px; color: #fff; }
.jv-mfp .mfp-close:hover { background: var(--jv-accent, #E94E1B); }
.jv-mfp .mfp-figure .mfp-close { display: none !important; }
.jv-mfp .mfp-figure figure { position: relative; background: #fff;
  border-radius: 14px; padding: 18px 18px 48px; }
.jv-mfp .mfp-figure img.mfp-img { background: #fff; border-radius: 8px; }
.jv-mfp .mfp-figure:after { display: none !important; }
.jv-mfp .mfp-bottom-bar { position: static; margin-top: 0; }
.jv-mfp .mfp-counter { position: absolute; top: 28px; left: 28px; right: auto;
  background: rgba(0,0,0,.55); color: #fff; padding: 4px 11px; border-radius: 20px;
  font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
.jv-mfp-dots { position: absolute; left: 18px; right: 18px; bottom: 17px;
  display: flex; justify-content: center; align-items: center; gap: 7px;
  flex-wrap: nowrap; line-height: 0; }
.jv-mfp-dot { flex: 0 1 9px; width: 9px; height: 9px; min-width: 5px; padding: 0;
  border: none; border-radius: 50%; background: #D9DBE0; cursor: pointer;
  transition: background-color .15s ease; }
.jv-mfp-dot:hover { background: #b9bcc4; }
.jv-mfp-dot.is-active { background: var(--jv-accent, #E94E1B); }

/* ── responsive ── */
@media (max-width: 900px) {
  .jv-project { grid-template-columns: 1fr; gap: 24px; }
  .jv-project__gallery { position: static; }
}
@media (max-width: 768px) {
  .jv-project__title2 { font-size: var(--jv-font-size-4xl); }
  .jv-project__h2 { font-size: var(--jv-font-size-3xl); }
}
@media (max-width: 560px) {
  .jv-project__title2 { font-size: var(--jv-font-size-3xl); }
  .jv-project .jv-product__slider-thumb { width: calc((100% - 3 * 8px) / 4); }
}

/* Тот же расчёт высоты, что и в jv-product.css: без него белая карточка
   просмотрщика выше окна на величину своих полей и прокручивается. */
.jv-mfp .mfp-container { padding: 0 56px; }
.jv-mfp .mfp-figure img.mfp-img { padding: 0; max-height: calc(100vh - 130px) !important; }
@media (max-width: 767px) {
  .jv-mfp .mfp-container { padding: 0 10px; }
  .jv-mfp .mfp-figure figure { padding: 14px 14px 42px; }
  .jv-mfp .mfp-figure img.mfp-img { max-height: calc(100vh - 100px) !important; }
}