/* ============================================================
   Журнал — venue (theatre / studio) page
   ============================================================ */

.venue { padding-bottom: 2rem; }

.venue__back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); cursor: pointer; white-space: nowrap;
  padding: clamp(1.2rem, 2.4vw, 2rem) 0 0;
}
.venue__back:hover { color: var(--accent-deep); }

/* full-bleed cover */
.venue__cover {
  margin-inline: calc(-1 * var(--bleed));
  margin-top: clamp(1rem, 2vw, 1.6rem);
  aspect-ratio: 21 / 6; min-height: 220px;
}

.venue__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--col); flex-wrap: wrap;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0 clamp(1.2rem, 2vw, 1.6rem);
  border-bottom: var(--rule) solid var(--line-strong);
}
.venue__id { display: flex; flex-direction: column; gap: 0.6rem; }
.venue__name { font-family: var(--serif); font-weight: 500; font-size: var(--t-hero); line-height: 1; }
.venue__where { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.venue__where > .meta,
.venue__where > .cashback { min-width: 0; }
.venue__cb {
  padding: 0.55rem 0 clamp(0.9rem, 1.8vw, 1.15rem);
  border-bottom: var(--rule) solid var(--line);
}
/* мобила: в слоте кэшбэка — баннер владельца; десктоп — баннер под кнопками */
.own-entry--mob { display: none; }
.venue__follow {
  font-family: var(--mono); font-size: var(--t-small);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-raise); background: var(--accent); border: 1px solid var(--accent);
  padding: 0.6rem 1.3rem; white-space: nowrap; transition: background 0.2s var(--ease);
}
.venue__follow:hover { background: var(--accent-deep); }
.venue__follow.is-on { color: var(--accent); background: transparent; }

.venue__about { max-width: 60ch; font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); padding: clamp(1.4rem, 2.4vw, 2rem) 0; text-wrap: pretty; }

/* анонс · главное событие театра (свой слот, не adslot журнала) */
.vspot {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  margin-inline: calc(-1 * var(--bleed));
  padding: clamp(1.4rem, 2.6vw, 2.2rem) var(--bleed) clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-sink); border-block: 1px solid var(--line-strong);
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--col) var(--col); align-items: center;
}
.vspot__label { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.vspot__media { aspect-ratio: 16 / 9; min-width: 0; }
.vspot__body { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.vspot__title { font-family: var(--serif); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; }
.vspot__dek { font-size: 1rem; color: var(--ink-soft); line-height: 1.5; max-width: 42ch; text-wrap: pretty; }
.vspot__foot { display: flex; align-items: center; gap: 1rem 1.2rem; flex-wrap: wrap; margin-top: 0.3rem; }
.vspot__cta { display: inline-block; }
@media (max-width: 760px) { .vspot { grid-template-columns: 1fr; } }
.blkflow .vspot { margin-top: 0; }
.blk--edit .vspot { margin-inline: 0; border-block: 0; padding: clamp(1.2rem, 2.2vw, 1.8rem); }
.vspot__ev {
  align-self: flex-start;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.04em;
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line);
  padding: 0.28rem 0.55rem; max-width: min(280px, 42vw); cursor: pointer;
}
.vspot__ev:hover { border-color: var(--ink); color: var(--ink); }

/* афиша площадки · горизонтальная лента (своя vaf-*, не blk-announce) */
.vaf-head__right { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; justify-content: flex-end; }
.vaf-aside { display: flex; align-items: center; gap: 0.9rem; }
.vaf-aside__n { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-faint); white-space: nowrap; }
.vaf-nav { display: flex; gap: 0.35rem; }
.vaf-nav__b {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft);
  cursor: pointer; transition: border-color 0.16s var(--ease), color 0.16s var(--ease), opacity 0.16s var(--ease);
}
.vaf-nav__b:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.vaf-nav__b:disabled { opacity: 0.3; cursor: default; }
.vaf-strip {
  display: flex; gap: clamp(0.8rem, 1.6vw, 1.2rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 0.4rem;
}
.vaf-strip::-webkit-scrollbar { display: none; }
.vaf-card {
  position: relative; flex: 0 0 clamp(260px, 28vw, 320px); min-width: 0;
  scroll-snap-align: start;
}
.vaf-card .ticket { height: 100%; }
.vaf-card__x {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.235 0.012 60 / 0.78); color: var(--paper); cursor: pointer;
  opacity: 0; transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
}
.vaf-card:hover .vaf-card__x { opacity: 1; }
.vaf-card__x:hover { background: var(--accent); }
.vaf-add {
  flex: 0 0 clamp(260px, 28vw, 320px); min-height: 320px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  border: 1px dashed var(--line-strong); background: var(--paper-sink); color: var(--ink-soft);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.vaf-add:hover { border-color: var(--accent); color: var(--accent); }

/* upcoming events */
.venue__events { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }

/* press */
.venue__press { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col); row-gap: clamp(2rem, 3vw, 2.6rem); }
.venue__press > .story { min-width: 0; grid-column: span 4; }

@media (max-width: 760px) {
  .venue__press > .story { grid-column: span 12; }
}

/* ============================================================
   Медиа-блоки площадки: фотоальбомы · видеотека
   Лента карточек → альбом / плеер → лайтбокс. Все иконки — SVG.
   ============================================================ */

/* шапка блока: счётчик + стрелки промотки (справа от eyebrow) */
.vme-aside { display: flex; align-items: center; gap: 0.9rem; }
.vme-aside__n { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-faint); white-space: nowrap; }
.vme-nav { display: flex; gap: 0.35rem; }
.vme-nav__b {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft);
  cursor: pointer; transition: border-color 0.16s var(--ease), color 0.16s var(--ease), opacity 0.16s var(--ease);
}
.vme-nav__b:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.vme-nav__b:disabled { opacity: 0.3; cursor: default; }

/* — лента: 5–7 карточек в ряд, промотка стрелками и свайпом — */
.vme-strip {
  display: flex; gap: clamp(0.8rem, 1.6vw, 1.2rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 0.4rem;
}
.vme-strip::-webkit-scrollbar { display: none; }

.vme-card {
  position: relative; flex: 0 0 clamp(138px, 15.5vw, 185px); min-width: 0;
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.55rem;
}
/* миниатюры всех трёх лент — квадрат; родной формат раскрывается внутри */
.vme-card__cover {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  padding: 0; border: none; background: var(--paper-sink); cursor: pointer; overflow: hidden;
}
.vme-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  aspect-ratio: unset !important; transition: opacity 0.2s var(--ease);
}
.vme-card__img .ph-slot, .vme-card__img image-slot { width: 100%; height: 100%; display: block; }
.vme-card__vidprev {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; background: var(--paper-sink);
}
.vme-card__cover:hover .vme-card__img { opacity: 0.92; }
.vme-card__n {
  position: absolute; right: 8px; bottom: 8px; left: auto; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em;
  text-transform: capitalize;
  color: oklch(var(--accent-deep-ch));
  background: var(--grad-wash);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill-wash);
  padding: 0.12rem 0.38rem;
}
.vme-card__n--r { right: 8px; left: auto; }
.vme-card__play {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: auto; height: auto;
  margin: 0; border-radius: 0;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  color: var(--accent-deep);
  background: none;
  opacity: 0;
  transition: opacity 0.15s var(--ease), color 0.15s var(--ease);
  box-shadow: none;
}
.vme-card__play .u-ic,
.vme-card__play svg {
  width: 22px;
  height: 22px;
}
.vme-card__cover:hover .vme-card__play {
  opacity: 1;
  color: var(--accent);
  background: none;
  transform: translate(-50%, -50%);
}
.vme-card__title { font-family: var(--serif); font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--ink); margin: 0; }
/* метка «главный» на обложке */
.vme-card__feat {
  position: absolute; top: 8px; left: 8px; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-raise); background: var(--accent); padding: 0.18rem 0.45rem;
}
/* угловые кнопки карточки (owner): «главный» + удалить */
.vme-ctools { position: absolute; top: 6px; right: 6px; z-index: 3; display: flex; gap: 4px; }
.vme-cbtn {
  width: 24px; height: 24px; padding: 0;
  border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: oklch(0.235 0.012 60 / 0.78); color: var(--paper); cursor: pointer;
  opacity: 0; transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
}
.vme-card:hover .vme-cbtn, .vme-cell:hover .vme-cbtn { opacity: 1; }
.vme-cbtn:hover { background: var(--accent); }
.vme-cbtn.is-on { background: var(--accent); opacity: 1; }

/* пунктирная карточка «создать» в конце ленты */
.vme-add {
  flex: 0 0 clamp(138px, 15.5vw, 185px); aspect-ratio: 1 / 1; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  border: 1px dashed var(--line-strong); background: var(--paper-sink); color: var(--ink-soft);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.vme-add:hover { border-color: var(--accent); color: var(--accent); }

/* перетаскивание карточек / миниатюр (owner) */
.vme.is-edit .vme-card, .vme.is-edit .vme-cell { cursor: grab; touch-action: none; }
.vme-card.is-drag, .vme-cell.is-drag { opacity: 0.45; }
.vme-card.is-drop::after, .vme-cell.is-drop::after {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--accent);
  pointer-events: none; z-index: 4; box-sizing: border-box;
}
body.is-vmedrag, body.is-vmedrag * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing !important; }

/* — внутренний вид: назад · заголовок · содержимое — */
.vme-view__bar { margin-bottom: 0.6rem; }
.vme-back {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: none; background: transparent;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer; transition: color 0.16s var(--ease);
}
.vme-back:hover { color: var(--accent-deep); }
.vme-view__title {
  font-family: var(--serif); font-weight: 500; font-size: var(--t-h2); line-height: 1.1;
  margin: 0 0 1.1rem;
}

/* сетка миниатюр альбома */
.vme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 14vw, 168px), 1fr)); gap: 0.5rem; align-items: start; }
.vme-cell { position: relative; aspect-ratio: 1 / 1; min-width: 0; overflow: hidden; }
.vme-cell[data-or="h"] { aspect-ratio: 3 / 2; }
.vme-cell[data-or="v"] { aspect-ratio: 2 / 3; }
.vme-cell__or { position: absolute; top: 6px; right: 6px; z-index: 4; display: flex; gap: 4px; }
.vme-cell__btn { display: block; width: 100%; height: 100%; padding: 0; border: none; background: var(--paper-sink); cursor: pointer; }
.vme-cell__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: unset !important; transition: opacity 0.2s var(--ease); }
.vme-cell__img .ph-slot, .vme-cell__img image-slot { width: 100%; height: 100%; display: block; }
.vme-cell__btn:hover .vme-cell__img { opacity: 0.92; }
.vme-cell__x { position: absolute; top: auto; bottom: 6px; right: 6px; z-index: 3; }
.vme-cell__cov { position: absolute; top: 6px; left: 6px; z-index: 3; }
.vme-cell--add {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  border: 1px dashed var(--line-strong); background: var(--paper-sink); color: var(--ink-soft);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.vme-cell--add:hover { border-color: var(--accent); color: var(--accent); }

/* — плеер: авто-развёртка горизонталь / вертикаль — */
.vme-player { position: relative; aspect-ratio: 16 / 9; background: var(--paper-sink); overflow: hidden; }
.vme-player--v { aspect-ratio: 9 / 16; max-width: min(420px, 78vw); margin-inline: auto; }
.vme-player__frame { display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.vme-player__poster { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: unset !important; }
.vme-player__poster .ph-slot, .vme-player__poster image-slot { width: 100%; height: 100%; display: block; }
.vme-player__badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vme-player__badge-c {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--paper-raise);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.vme-player:hover .vme-player__badge-c { transform: scale(1.06); background: var(--accent-deep); }
.vme-tools { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 6px; }
.vme-tool {
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.235 0.012 60 / 0.62); color: var(--paper); cursor: pointer;
  transition: background 0.15s var(--ease);
}
.vme-tool:hover { background: var(--accent); }
.vme-player__cap { display: flex; justify-content: flex-end; margin-top: 0.6rem; }
.vme-player__dur { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-faint); }

/* — отзыв: вертикальное медиа + текст рядом — */
.vme-rev { display: flex; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: flex-start; }
.vme-rev__media {
  position: relative; flex: 0 0 min(360px, 42vw); aspect-ratio: 3 / 4;
  background: var(--paper-sink); overflow: hidden;
}
.vme-rev__media--video { aspect-ratio: 9 / 16; }
.vme-rev__media--h { flex-basis: min(560px, 52vw); aspect-ratio: 16 / 9; }
.vme-rev__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: unset !important; }
.vme-rev__img .ph-slot, .vme-rev__img image-slot { width: 100%; height: 100%; display: block; }
.vme-rev__media .vme-cell__btn { position: absolute; inset: 0; width: 100%; height: 100%; }
.vme-rev__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.4rem; }
.vme-rev__kind { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.vme-rev__name { font-family: var(--serif); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; margin: 0; }
.vme-rev__text {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.4; color: var(--ink);
  margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--accent); text-wrap: pretty;
}
@media (max-width: 720px) {
  .venue__cover { aspect-ratio: auto; height: clamp(140px, 40vw, 220px); min-height: 0; }
  .venue__where { gap: 0.4rem 0.85rem; line-height: 1.35; }
  .venue__cb { padding-top: 0.35rem; padding-bottom: 0.75rem; }
  .vme-rev { flex-direction: column; }
  .vme-rev__media, .vme-rev__media--h { flex-basis: auto; width: 100%; max-width: 420px; }
}

/* — медиа-модуль: три секции в одну линию — */
.vme-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2.4rem); align-items: start; }
.vme-hub__sec { min-width: 0; }
.vme-hub__head {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.55rem; margin-bottom: 0.8rem;
  border-bottom: var(--rule) solid var(--line);
}
.vme-hub__t { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.vme-hub__n { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-faint); white-space: nowrap; }
.vme-hub__head .vme-nav { margin-left: auto; }
.vme-hub__head .vme-nav__b { width: 24px; height: 24px; }
.vme-hub .vme-card, .vme-hub .vme-add { flex-basis: clamp(108px, 8.6vw, 148px); }
.vme-hub .vme-card__title { font-size: 0.9rem; }
.vme-hub .vme-card__n { right: 6px; bottom: 6px; padding: 0.14rem 0.35rem; }
.vme-hub .vme-card__feat { top: 6px; left: 6px; font-size: 0.58rem; }
@media (max-width: 920px) {
  .vme-hub { grid-template-columns: 1fr; gap: 1.6rem; }
  .vme-hub .vme-card, .vme-hub .vme-add { flex-basis: clamp(120px, 24vw, 160px); }
}

/* — лайтбокс: тёмный зал, фото по центру — */
.vme-lb {
  position: fixed; inset: 0; z-index: 90;
  background: oklch(0.145 0.008 60 / 0.96);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: vmeFade 0.18s var(--ease);
}
@keyframes vmeFade { from { opacity: 0; } }
.vme-lb__frame {
  display: flex; align-items: center; justify-content: center;
  width: auto; height: auto; max-width: min(96vw, 1160px);
  max-height: min(88vh, calc(100dvh - 7rem));
  background: transparent;
}
.vme-lb__photo,
.vme-lb__frame > image-slot {
  display: block;
  max-width: min(96vw, 1160px);
  max-height: min(88vh, calc(100dvh - 7rem));
}
.vme-lb__x, .vme-lb__nav {
  position: absolute; z-index: 2; padding: 0; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(1 0 0 / 0.09); color: var(--paper); cursor: pointer;
  transition: background 0.15s var(--ease), opacity 0.15s var(--ease);
}
.vme-lb__x:hover, .vme-lb__nav:hover:not(:disabled) { background: var(--accent); }
.vme-lb__x { top: 1.2rem; right: 1.2rem; width: 40px; height: 40px; }
.vme-lb__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.vme-lb__nav--p { left: 1.2rem; }
.vme-lb__nav--n { right: 1.2rem; }
.vme-lb__nav:disabled { opacity: 0.25; cursor: default; }
.vme-lb__share {
  position: fixed; z-index: 2; display: grid; place-items: center;
  left: 1.2rem; bottom: 1.1rem; width: 40px; height: 40px;
  border: none; border-radius: 2px; background: oklch(0.235 0.012 60 / 0.72); color: var(--paper);
  cursor: pointer; transition: background 0.15s var(--ease); opacity: 1;
}
.vme-lb__share:hover:not(:disabled) { background: var(--accent); }
.vme-lb__share-host .media-share.vme-lb__share { opacity: 1; }
.vme-lb__cap {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 1rem; max-width: 80vw;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(0.967 0.006 83 / 0.85); white-space: nowrap;
}
.vme-lb__t { overflow: hidden; text-overflow: ellipsis; }
.vme-lb__n { color: oklch(0.967 0.006 83 / 0.55); }

@media (max-width: 600px) {
  .vme-card, .vme-add { flex-basis: 132px; }
  .vme-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .vme-lb__nav { width: 38px; height: 38px; }
  .vme-lb__nav--p { left: 0.5rem; }
  .vme-lb__nav--n { right: 0.5rem; }
}
