/* ОЛИМП ЭЛЕКТРО — публичная галерея v1. Только страница /projects/{slug}. */
.oe-gallery [hidden], .oe-viewer [hidden] { display: none !important; }
.oe-gallery { min-width: 0; }
.detail-hero--project h1 { overflow-wrap: anywhere; }
.oe-gallery__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 560px;
  overflow: hidden;
  border: 1px solid #d8e5ef;
  border-radius: 20px;
  background: #edf3f8;
  isolation: isolate;
}
.oe-gallery__stage, .oe-viewer__stage { touch-action: pan-y pinch-zoom; }
.oe-gallery__open { position: absolute; inset: 0; display: block; cursor: zoom-in; }
.oe-gallery__open > img {
  display: block;
  width: 100%; height: 100%; max-width: 100%;
  object-fit: contain; /* Не обрезаем проводку и детали щитов. */
  -webkit-user-select: none; user-select: none;
}
.oe-gallery__hint, .oe-gallery__counter {
  position: absolute; z-index: 2; bottom: 14px;
  padding: 7px 11px; border-radius: 10px;
  font-size: .76rem; font-weight: 700; line-height: 1.4;
  pointer-events: none;
}
.oe-gallery__hint { right: 14px; color: #143a59; background: rgba(255,255,255,.95); box-shadow: 0 3px 18px #143a5917; }
.oe-gallery__counter { left: 14px; color: #fff; background: rgba(9,31,50,.8); font-variant-numeric: tabular-nums; }
.oe-gallery__arrow, .oe-viewer__arrow, .oe-viewer__close {
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid #d2dfeb; border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.oe-gallery__arrow {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  color: #123e60; background: rgba(255,255,255,.97);
  box-shadow: 0 5px 22px rgba(13,39,61,.14);
}
.oe-gallery__arrow--prev { left: 14px; }
.oe-gallery__arrow--next { right: 14px; }
.oe-gallery__arrow svg, .oe-viewer__arrow svg, .oe-viewer__close svg {
  display: block; width: 23px; height: 23px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.oe-gallery__thumbs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.oe-gallery__thumb {
  position: relative; display: block; width: 100%; min-width: 0; min-height: 44px;
  aspect-ratio: 4 / 3; overflow: hidden;
  padding: 3px; border: 2px solid transparent; border-radius: 13px;
  background: #e8f0f6; cursor: pointer;
}
.oe-gallery__thumb img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.oe-gallery__thumb[aria-current="true"] { border-color: var(--color-primary,#0f5eaa); background: #fff; }
.oe-gallery__more {
  position: absolute; inset: 3px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(8,31,52,.72); color: #fff;
  pointer-events: none; line-height: 1.15;
}
.oe-gallery__more strong { font-size: clamp(1.2rem,2vw,1.85rem); font-weight: 800; }
.oe-gallery__more > span { font-size: .73rem; margin-top: 4px; }
.oe-gallery__help { margin: 12px 0 0; color: var(--color-text-muted,#5d7084); font-size: .77rem; line-height: 1.6; }
.oe-gallery__help-touch { display: none; }
.oe-gallery__empty { padding: 50px 24px; background: #edf3f8; border: 1px solid #d8e5ef; border-radius: 18px; color: #526d83; text-align: center; }
.oe-gallery__fallback { margin-top: 16px; }
.oe-gallery__fallback summary { cursor: pointer; color: var(--color-primary,#0f5eaa); }
.oe-gallery__fallback ol { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-left: 22px; }
.oe-gallery__fallback a { text-decoration: underline; }
.oe-gallery__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.oe-gallery__error, .oe-viewer__error {
  position: absolute; z-index: 2; top: 50%; left: 64px; right: 64px;
  transform: translateY(-50%); margin: 0; text-align: center; font-size: .88rem;
  pointer-events: none;
}
.oe-gallery__error { color: #405e77; }
.oe-gallery__stage.is-broken .oe-gallery__open img,
.oe-viewer__stage.is-broken > img { visibility: hidden; }
.oe-gallery__stage.is-loading .oe-gallery__open img,
.oe-viewer__stage.is-loading > img { opacity: .35; }
.oe-gallery__stage.is-loading::after, .oe-viewer__stage.is-loading::after {
  content: "Загрузка…"; position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%,-50%); padding: 8px 14px; border-radius: 20px;
  background: rgba(9,31,50,.85); color: #fff; font-size: .8rem; pointer-events: none;
}
.oe-gallery a:focus-visible, .oe-gallery button:focus-visible { outline: 3px solid var(--color-primary,#0f5eaa); outline-offset: 3px; }
.oe-gallery__open:focus-visible { outline-offset: -5px !important; border-radius: 18px; }

/* Нативное модальное окно: отдельные классы, не .lightbox из site.js. */
.oe-viewer:not([open]) { display: none !important; }
dialog.oe-viewer {
  position: fixed; inset: 0; margin: 0;
  width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  padding: 18px 24px; border: 0; overflow: hidden;
  background: rgba(7,18,29,.98); color: #f5f9fc;
  overscroll-behavior: contain;
}
.oe-viewer::backdrop { background: #07121d; }
.oe-viewer__panel {
  display: grid; grid-template-rows: auto minmax(0,1fr) auto auto;
  width: 100%; max-width: 1500px; height: 100%; min-width: 0; margin-inline: auto;
}
.oe-viewer__header { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 0 0 14px; }
.oe-viewer__heading { flex: 1; min-width: 0; }
.oe-viewer__heading > p { color: #f5f9fc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.5; }
.oe-viewer__heading > span { display: block; color: #b2c9da; font-size: .78rem; font-variant-numeric: tabular-nums; }
.oe-viewer__original { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 10px; color: #d1e6f6; font-size: .8rem; white-space: nowrap; border-radius: 8px; }
.oe-viewer__close { flex: 0 0 46px; border-color: #52677a; background: #1b2f41; color: #fff; }
.oe-viewer__stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; }
.oe-viewer__image { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; }
.oe-viewer__arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  border-color: #62798d; color: #fff; background: rgba(27,47,65,.9);
}
.oe-viewer__arrow--prev { left: 8px; }
.oe-viewer__arrow--next { right: 8px; }
.oe-viewer__error { color: #d1e0ec; }
.oe-viewer__thumbs {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden;
  min-width: 0; max-width: 100%; padding: 12px 4px 6px;
  overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #58738a transparent;
}
.oe-viewer__thumb {
  position: relative; flex: 0 0 82px; width: 82px; height: 64px;
  padding: 3px; border: 2px solid transparent; border-radius: 10px; cursor: pointer; background: #1b2f41;
}
.oe-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.oe-viewer__thumb[aria-current="true"] { border-color: #8bcaff; background: #244d6f; }
.oe-viewer__help { margin: 6px 0 0; color: #a3bdd1; font-size: .72rem; line-height: 1.5; text-align: center; }
.oe-viewer button:focus-visible, .oe-viewer a:focus-visible { outline: 3px solid #8bcaff; outline-offset: 2px; }
html.oe-viewer-lock { overflow: hidden; }

@media (hover:hover) and (pointer:fine) {
  .oe-gallery__arrow:hover { background: #e5f2fc; border-color: #9fc8e5; }
  .oe-gallery__thumb:hover { background: #d5e8f6; }
  .oe-viewer__arrow:hover, .oe-viewer__close:hover { background: #31516b; }
  .oe-viewer__original:hover { background: #1b2f41; color: #fff; }
}
@media (max-width:900px) {
  /* Раньше portfolio-release.css поднимал факты выше фото. Только на этой странице меняем порядок. */
  .portfolio-detail-grid--viewer > .portfolio-facts { order: 0; }
}
@media (max-width:640px) {
  .oe-gallery__stage { border-radius: 15px; }
  .oe-gallery__thumbs { gap: 6px; margin-top: 9px; }
  .oe-gallery__thumb { padding: 2px; border-radius: 10px; }
  .oe-gallery__thumb img, .oe-gallery__more { border-radius: 5px; }
  .oe-gallery__more { inset: 2px; }
  .oe-gallery__more > span { font-size: .62rem; margin-top: 2px; }
  .oe-gallery__arrow { width: 44px; height: 44px; }
  .oe-gallery__arrow--prev { left: 8px; }
  .oe-gallery__arrow--next { right: 8px; }
  .oe-gallery__hint { right: 8px; bottom: 8px; font-size: .65rem; padding: 5px 8px; }
  .oe-gallery__counter { left: 8px; bottom: 8px; font-size: .68rem; padding: 5px 8px; }
  .oe-gallery__help-desktop { display: none; }
  .oe-gallery__help-touch { display: inline; }
  dialog.oe-viewer {
    padding: max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .oe-viewer__header { gap: 6px; padding-bottom: 10px; }
  .oe-viewer__heading > p { font-size: .82rem; }
  .oe-viewer__original { font-size: .7rem; padding-inline: 5px; }
  .oe-viewer__close { width: 44px; height: 44px; flex-basis: 44px; }
  .oe-viewer__arrow { width: 44px; height: 44px; }
  .oe-viewer__arrow--prev { left: 0; }
  .oe-viewer__arrow--next { right: 0; }
  .oe-viewer__thumb { flex-basis: 64px; width: 64px; height: 52px; }
  .oe-viewer__help { font-size: .65rem; }
}
@media (max-height:500px) and (orientation:landscape) {
  dialog.oe-viewer { padding-block: 6px; }
  .oe-viewer__header { padding-bottom: 4px; }
  .oe-viewer__help { display: none; }
  .oe-viewer__thumbs { padding-block: 5px; }
  .oe-viewer__thumb { flex-basis: 56px; width: 56px; height: 44px; }
}
@media print {
  .oe-viewer, .oe-gallery__arrow, .oe-gallery__hint, .oe-gallery__help { display: none !important; }
}

/* Выравнивание публичной галереи. Только #project-content. */
#project-content > .portfolio-detail-grid--aligned {
  --oe-gallery-layout: aligned-v2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  grid-template-rows: auto auto;
  grid-template-areas:
    "photos-heading ."
    "photos facts";
  column-gap: 28px;
  row-gap: 15px;
  align-items: start;
}

#project-content > .portfolio-detail-grid--aligned > .portfolio-gallery-heading {
  grid-area: photos-heading;
  min-width: 0;
  margin: 0;
}

#project-content > .portfolio-detail-grid--aligned > .oe-gallery {
  grid-area: photos;
  min-width: 0;
  margin: 0;
  align-self: start;
}

#project-content > .portfolio-detail-grid--aligned > .portfolio-facts {
  grid-area: facts;
  margin: 0;
  align-self: start;
  order: 0;
}

@media (max-width: 900px) {
  #project-content > .portfolio-detail-grid--aligned {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "photos-heading"
      "photos"
      "facts";
  }

  #project-content > .portfolio-detail-grid--aligned > .portfolio-facts {
    margin-top: 7px; /* 15px row-gap + 7px = прежние 22px после галереи. */
  }
}

/* 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-VIEWER-THUMBS-CENTER-V1
   Короткая лента миниатюр — по центру.
   При переполнении auto-отступы становятся нулевыми: все кадры доступны прокруткой.
   Свайпы, размеры миниатюр и исходный порядок фотографий не меняем. */
.oe-viewer__thumbs {
  justify-content: flex-start;
}

.oe-viewer__thumbs > .oe-viewer__thumb:first-child {
  margin-inline-start: auto;
}

.oe-viewer__thumbs > .oe-viewer__thumb:last-child {
  margin-inline-end: 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; }
}