/* Экран работы (js/work-view.js). Макет 1920×1080: слева картина с размерными линиями и линзой
   (портрет художника на вкладке ARTIST), справа подпись, заголовок, вкладки, прокручиваемый текст
   и ряд кнопок BUY NOW / WhatsApp / Share. Размеры заданы в vw от макета 1920 с ограничителями.
   Шапка и фон — общие с галереей; капсула — та же, что у карточек (css/card-hint.css). */

/* экран работы — на всю ширину окна, как и экран галереи, чтобы при переходе они ехали встык */
.work {
  --frame: clamp(260px, min(35.4vw, calc(100vh - 300px)), 820px);
  --panel-bg: rgba(255, 255, 255, 0.5);
  --track: rgba(36, 36, 36, 0.55);
  --soft: rgba(36, 36, 36, 0.55);
  width: 100%;
  color: var(--color-text);
  font-family: "Questrial", sans-serif;
}
[data-theme="dark"] .work {
  --panel-bg: rgba(0, 0, 0, 0.58);
  --track: #fff;
  --soft: rgba(255, 255, 255, 0.5);
}

/* на время анимации экран работы лежит поверх страницы (top задаёт скрипт), по её окончании
   встаёт в обычный поток */
.work.is-overlay {
  position: fixed;
  left: 0;
  z-index: 60;
}
/* экран на финише чуть перелетает точку и возвращается: за край окна выходит лишнее — полосы прокрутки быть не должно */
html.view-busy { overflow-x: clip; }
html.view-busy .view-list,
html.view-busy .work { pointer-events: none; }

.work__inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 168px var(--page-gutter) 56px; /* шапка занимает ~140px: «назад» стоит под ней, а не под её кнопками */
}

/* «назад» над фото: возвращает на экран, с которого пришли (список работ) */
.work__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  opacity: 0.6;
  text-decoration: none;
  font-size: clamp(12px, 0.9vw, 16px);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.work__back svg { transition: transform 0.35s ease; }
.work__back:hover { opacity: 1; color: var(--color-accent); }
.work__back:hover svg { transform: translateX(-5px); }

.work__layout {
  flex: 1 1 auto;
  align-content: center;
  margin-top: clamp(40px, 3vw, 58px); /* место под верхнюю размерную линию */
  width: 100%;
  display: grid;
  grid-template-columns: var(--frame) minmax(0, 1fr);
  column-gap: 6.4vw;
  align-items: stretch;
}

/* ---------- картина / портрет ---------- */
.work__frame {
  position: relative;
  width: var(--frame);
  height: var(--frame);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* левый край картины — на одной линии с шапкой и кнопкой «назад» */
}
.work__stage {
  position: relative;
  width: fit-content;
  transition: opacity 0.6s ease, filter 0.6s ease;
}
.work__stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--frame);
  max-height: var(--frame);
}

/* размерные линии: на странице работы всегда на месте, дорисовываются, когда экран осел */
.work__stage .gallery-card__dim { opacity: 0; transition: opacity 0.5s ease 0.15s; }
.work__stage .gallery-card__dim--top { height: clamp(40px, 3vw, 58px); }
.work__stage .gallery-card__dim--left { width: clamp(40px, 3vw, 58px); }
.work__stage .gallery-card__dim-label { font-size: clamp(13px, 1.15vw, 22px); letter-spacing: 0.3px; }
.work__stage .gallery-card__dim-line { clip-path: inset(0 50% 0 50%); }
.work__stage .gallery-card__dim--left .gallery-card__dim-line { clip-path: inset(50% 0 50% 0); }
.work.is-settled .work__stage .gallery-card__dim { opacity: 1; }
.work.is-settled .work__stage .gallery-card__dim-line { clip-path: inset(0 0 0 0); transition-duration: 0.9s; }

/* портрет художника занимает тот же квадрат, что и картина; вкладка ARTIST меняет их местами */
.work__portrait {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.work__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* пока портрета нет — монограмма на тёмной плашке */
.work__portrait-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(237, 111, 18, 0.22), rgba(0, 0, 0, 0.78) 72%), #0b0f10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.work__portrait-ph span {
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-size: calc(var(--frame) * 0.3);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}
.work.is-artist .work__portrait {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}
.work.is-artist .work__stage { opacity: 0; pointer-events: none; }
.work:not(.is-artist) .work__portrait { pointer-events: none; }

/* метка «In cart» — тот же вид, что на карточках (.gallery-card__tag из card-hint.css) */
.work.is-in-cart .gallery-card__tag {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- правая колонка ---------- */
.work__info {
  height: var(--frame);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.work__head { padding-top: 1.9vw; text-align: center; }
.work__eyebrow {
  font-size: clamp(13px, 1.15vw, 22px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--soft);
}
.work__title {
  margin-top: 0.4vw;
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5.3vw, 100px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.work__title.is-md { font-size: clamp(30px, 4.3vw, 82px); }
.work__title.is-sm { font-size: clamp(26px, 3.6vw, 70px); }
.work__title em { font-style: italic; }

/* вкладки */
.work__tabs {
  position: relative;
  display: flex;
  gap: 2.8vw;
  margin-top: auto;
  padding-top: 1.6vw;
  border-bottom: 1px solid var(--soft);
}
.work__tab {
  position: relative;
  padding: 0 0 0.55vw;
  border: 0;
  background: none;
  color: var(--color-text);
  opacity: 0.45;
  font: inherit;
  font-size: clamp(13px, 1.15vw, 22px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: var(--cursor-pointer, pointer);
  transition: opacity 0.3s ease;
}
.work__tab:hover,
.work__tab.is-active { opacity: 1; }
.work__tabs-ind {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

/* текст на тёмной плашке с собственной полосой прокрутки */
.work__panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 17.2vw;
  background: var(--panel-bg);
}
.work__scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 0.9vw 2.5vw 0.9vw 1.1vw;
}
.work__scroll::-webkit-scrollbar { display: none; }
.work__text {
  font-size: clamp(13px, 1.04vw, 20px);
  line-height: 1.37;
}
.work__text p + p { margin-top: 1.3em; }
/* буквица: абзац замыкает её в себе (flow-root), поэтому короткий первый абзац не ломает следующий */
.work__text p:first-child { display: flow-root; min-height: 3.3em; }
.work__text p:first-child::first-letter {
  float: left;
  margin: 0.04em 0.12em 0 0;
  font-family: "Cormorant Garamond", "Baskerville Display PT", "Baskerville Old Face", Baskerville, Georgia, serif;
  font-size: 4.2em;
  line-height: 0.78;
}

.work__bar {
  position: absolute;
  top: 0.55vw;
  bottom: 0.55vw;
  right: 0.5vw;
  width: 0.52vw;
  min-width: 7px;
  border-radius: 999px;
  background: var(--track);
  transition: opacity 0.3s ease;
}
.work__bar.is-off { opacity: 0; pointer-events: none; }
.work__bar i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  cursor: grab;
}
.work__bar i:active { cursor: grabbing; }

/* кнопки */
.work__buttons {
  display: flex;
  align-items: center;
  gap: 1vw;
  margin-top: 1.7vw;
}
.work__buttons .work__buy {
  flex: 1 1 auto;
  justify-content: center;
  height: clamp(48px, 3.55vw, 68px);
  padding: 0 24px;
  font-size: clamp(15px, 1.25vw, 24px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.work__buttons .navbar__btn-ring-track,
.work__buttons .navbar__btn-ring-progress {
  height: clamp(48px, 3.55vw, 68px);
  rx: clamp(24px, 1.78vw, 34px);
  ry: clamp(24px, 1.78vw, 34px);
}
/* цена внутри капсулы, через тонкий разделитель */
.work__buy-price {
  margin-left: 1.1vw;
  padding-left: 1.1vw;
  border-left: 1px solid currentColor;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  opacity: 0.8;
}
.work__round {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(48px, 3.55vw, 68px);
  height: clamp(48px, 3.55vw, 68px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  cursor: var(--cursor-pointer, pointer);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.work__round svg { width: 46%; height: 46%; }
.work__round:hover { transform: scale(1.1); filter: brightness(1.08); }
.work__round:active { transform: scale(0.95); }

/* «ссылка скопирована» */
.work-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 9600;
  max-width: calc(100vw - 48px);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-family: "Questrial", sans-serif;
  font-size: 14px;
  letter-spacing: 0.4px;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* пока адаптив не переделан: узкое окно — одна колонка */
@media (max-width: 1100px) {
  .work__inner { padding: 110px 6vw 56px; }
  .work__layout { grid-template-columns: 1fr; row-gap: 56px; }
  .work { --frame: min(86vw, 62vh, 640px); }
  .work__frame { margin: 0 auto; }
  .work__info { height: auto; }
  .work__panel { height: 300px; max-height: none; }
  .work__tabs { margin-top: 28px; }
  .work__head { padding-top: 0; }
  .work__text, .work__tab, .work__eyebrow { font-size: 15px; }
  .work__title { font-size: clamp(36px, 9vw, 64px); }
}

/* проданная работа: вместо BUY NOW — SOLD, кнопка не нажимается и в корзину не кладёт */
.work__buy.is-sold { opacity: 0.55; cursor: var(--cursor-not-allowed, not-allowed); }
.work__buy.is-sold .navbar__btn-text { letter-spacing: 0.22em; }