/* OE card preview v2.1 — подключается только на страницах с предпросмотром.
   Без JS остаются обычная обложка, ссылка на работу и ссылка на мастера. */
.portfolio-card-image.oe-card-preview {
  isolation: isolate;
  --oe-card-preview-version: hover-label-v2.1;
}
.portfolio-card-image.oe-card-preview [hidden] { display: none !important; }
.portfolio-card-image.oe-card-preview > [data-oe-card-image] {
  display: block;
  object-fit: contain; /* не обрезаем щиты, кабели и потолочные трассы */
  transform: none;
}
.portfolio-card-image.oe-card-preview.is-preview-ready {
  touch-action: pan-y pinch-zoom;
}
.portfolio-card-image.oe-card-preview.is-preview-ready > .portfolio-card-type {
  /* Обычный top берём из основных стилей, как у карточки с одним фото.
     Место под полоски освобождаем только когда они показаны. */
  z-index: 3;
  pointer-events: none;
  transition: top 120ms ease;
}
.oe-card-preview__segments {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  display: flex;
  gap: 5px;
  padding: 12px 12px 18px;
  background: linear-gradient(to bottom, rgba(8, 26, 42, .36), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity 120ms ease;
}
.oe-card-preview__segment {
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 1px 3px rgba(6, 23, 39, .22);
}
.oe-card-preview__segment.is-current { background: #fff; }
.oe-card-preview__count,
.oe-card-preview__loading,
.oe-card-preview__error {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(13, 39, 60, .82);
  color: #fff;
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
}
.oe-card-preview__loading,
.oe-card-preview__error {
  right: auto;
  left: 10px;
  max-width: calc(100% - 96px);
  font-size: .68rem;
}
.oe-card-preview__more {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 50px 14px 24px;
  text-align: center;
  background: rgba(7, 24, 39, .68);
  color: #fff;
  pointer-events: none; /* кликается исходная ссылка карточки */
}
.oe-card-preview__more svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.oe-card-preview__more strong {
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  font-weight: 850;
}
.oe-card-preview__more > span { font-size: .8rem; }
.oe-card-preview__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 360px) {
  .oe-card-preview__segments { gap: 4px; padding-inline: 10px; }
  .oe-card-preview__more svg { width: 36px; height: 36px; }
}

/* Новый кадр появляется поверх прежнего только после загрузки и decode().
   Фон непрозрачный: узкий портрет не оставляет старый широкий кадр по бокам. */
.portfolio-card-image.oe-card-preview > .oe-card-preview__frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  background: inherit;
  pointer-events: none;
}

/* Мышь: полоски только над фотографией, не при наведении на текст карточки.
   Клавиатура: доступность сохраняется при фокусе ссылки.
   На touch-экране полоски видны постоянно — это подсказка о свайпе. */
@media (hover: hover) and (pointer: fine) {
  .oe-card-preview.is-preview-ready > .oe-card-preview__segments { opacity: 0; }
  .oe-card-preview.is-preview-ready.is-pointer-preview > .oe-card-preview__segments,
  .portfolio-card-link:focus-visible .oe-card-preview.is-preview-ready > .oe-card-preview__segments {
    opacity: 1;
  }
  .portfolio-card-image.oe-card-preview.is-preview-ready.is-pointer-preview > .portfolio-card-type,
  .portfolio-card-link:focus-visible .portfolio-card-image.oe-card-preview.is-preview-ready > .portfolio-card-type {
    top: 31px;
  }
}

/* Без наведения полоски остаются видимыми, как в v2.
   Поэтому на touch плашка сразу размещена под ними, но только при >1 фото. */
@media (hover: none), (pointer: coarse), (pointer: none) {
  .portfolio-card-image.oe-card-preview.is-preview-ready > .portfolio-card-type {
    top: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oe-card-preview__segments,
  .portfolio-card-image.oe-card-preview.is-preview-ready > .portfolio-card-type {
    transition: none;
  }
}

/* OE touch carousel 1.0: transient visual layer, no change to the page grid. */
.oe-touch-surface { touch-action: pan-y pinch-zoom; }
.oe-touch-surface > .oe-touch-rail {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;
  will-change: transform;
}
.oe-touch-rail > .oe-touch-pane {
  position: absolute;
  top: 0; bottom: 0;
  display: block;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--oe-touch-fill, #edf3f8);
}
.oe-touch-surface .oe-touch-pane > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%; max-width: 100%;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  object-fit: contain;
  object-position: center;
  transform: none !important;
  transition: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-user-select: none; user-select: none;
  pointer-events: none;
}
.oe-touch-pane > .oe-touch-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 20px;
  color: #405e77;
  font-size: .8rem;
  text-align: center;
}
.oe-touch-pane > .oe-touch-message[hidden] { display: none !important; }
.oe-viewer__stage .oe-touch-message { color: #d1e0ec; }
.oe-card-preview.is-oe-swiping > [data-oe-card-image],
.oe-card-preview.is-oe-swiping > .oe-card-preview__frame,
.oe-card-preview.is-oe-swiping > [data-oe-card-more],
.oe-gallery__stage.is-oe-swiping > .oe-gallery__open > img,
.oe-viewer__stage.is-oe-swiping > .oe-viewer__image { visibility: hidden !important; }
/* Controls and labels stay in place above the moving photos. */
.oe-gallery__stage.is-oe-swiping > .oe-gallery__open { z-index: auto; }
.oe-touch-surface.is-oe-swiping { -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .oe-touch-surface > .oe-touch-rail { will-change: auto; }
}

/* OE-SWIPE-FIX-20261108: stable touch targets on scrollable pages. */
.portfolio-card-image.oe-card-preview.is-preview-ready,
.portfolio-card-image.oe-card-preview.is-preview-ready > [data-oe-card-image],
.oe-gallery__stage.oe-touch-surface,
.oe-gallery__stage.oe-touch-surface > .oe-gallery__open,
.oe-gallery__stage.oe-touch-surface > .oe-gallery__open > img {
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.portfolio-card-image.oe-card-preview.is-preview-ready > [data-oe-card-image],
.oe-gallery__stage.oe-touch-surface > .oe-gallery__open > img {
  -webkit-user-drag: none;
}
/* Keep the original TouchEvent target in the hit-test/layout tree while the
   temporary rail is moving. Do not use visibility:hidden on this target. */
.portfolio-card-image.oe-card-preview.is-oe-swiping > [data-oe-card-image],
.portfolio-card-image.oe-card-preview.is-oe-swiping > .oe-card-preview__frame,
.oe-gallery__stage.is-oe-swiping > .oe-gallery__open > img {
  visibility: visible !important;
  opacity: 0 !important;
  transition: none !important;
}
/* A touch must not animate the entire card via a sticky :hover state. */
@media (hover: none), (pointer: coarse) {
  .project-card.project-card--portfolio:hover { transform: none; }
}