/* ============================================================
   system118 — карточка экспоната (новый брендбук, канон = музей)
   Использует токены из tokens.css. Реализация — vanilla, без jQuery.
   Раскладка: ПК — две зоны (изображение + панель 386px),
              < 960px — вертикаль (изображение сверху, метаданные ниже).
   ============================================================ */

/* --- подложка модалки поверх krpano --- */
.rmcard-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 50% 38%, rgba(40,34,28,.45), rgba(28,24,19,.72));
  padding: 3vh 3vw;
  font-family: var(--font-ui);
}

/* --- модалка --- */
.rmcard {
  position: relative;
  display: flex; flex-direction: column;
  width: min(1080px, 96vw); height: min(684px, 94vh);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 34px 90px rgba(28,24,19,.4);
}

/* --- шапка --- */
.rmcard__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; padding: 0 14px 0 22px;
  border-bottom: 1px solid var(--hairline);
}
.rmcard__hall { font: 400 13px/1 var(--font-ui); letter-spacing: .02em; color: var(--text-2); }
.rmcard__tools { display: flex; align-items: center; gap: 8px; }
.rmcard__fontgrp { display: flex; align-items: center; gap: 6px; margin-right: 2px; }
.rmcard__sep { width: 1px; height: 24px; background: var(--hairline); margin: 0 4px; }

/* кнопки шапки */
.rmcard__btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; box-sizing: border-box;
  background: transparent; border: 1px solid rgba(40,34,28,.18);
  color: #5a5249; cursor: pointer; border-radius: var(--radius);
}
.rmcard__btn--font { width: 42px; font: 700 14px/1 var(--font-ui); color: #4a443c; }
.rmcard__btn--font.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rmcard__btn:hover { border-color: rgba(40,34,28,.4); }
.rmcard__btn:focus-visible { outline: var(--focus); outline-offset: 2px; }
.rmcard__btn svg { width: 20px; height: 20px; fill: currentColor; }

/* --- тело: изображение + панель --- */
.rmcard__body { flex: 1 1 auto; display: flex; min-height: 0; }

/* зона изображения */
.rmcard__image {
  position: relative; flex: 1.55 1 0; margin: 0;
  background: var(--image-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.rmcard__image img {
  max-width: 78%; max-height: 82%;
  box-shadow: 0 0 0 12px var(--surface), 0 0 0 14px #cfc8bb, 0 22px 50px rgba(40,34,28,.3);
}
.rmcard__image.is-zooming { cursor: grab; }
/* deep-zoom (OpenSeadragon) — те же DZI-плитки музея, без iframe/jQuery */
.rmcard__osd { width: 100%; height: 100%; background: var(--image-bg); }
.rmcard__osd .openseadragon-canvas { outline: none; }

/* контролы зума */
.rmcard__zoom {
  position: absolute; left: 18px; bottom: 18px;
  display: flex; border: 1px solid var(--hairline);
  background: rgba(255,255,255,.9);
}
.rmcard__zoom button {
  height: 38px; min-width: 40px; padding: 0 12px;
  background: transparent; border: none; border-right: 1px solid var(--hairline);
  color: #4a443c; font: 400 20px/1 var(--font-ui); cursor: pointer;
}
.rmcard__zoom button:last-child { border-right: none; }
.rmcard__zoom .rmcard__zoom-val { font: 700 13px/1 var(--font-ui); cursor: default; }
.rmcard__zoom .rmcard__zoom-val.is-zoomed { color: var(--accent); }
.rmcard__full {
  position: absolute; right: 18px; bottom: 18px;
  width: 40px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); border: 1px solid var(--hairline);
  color: #4a443c; cursor: pointer;
}
.rmcard__full svg { width: 19px; height: 19px; fill: currentColor; }

/* панель метаданных */
.rmcard__panel {
  flex: 0 0 386px; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border-left: 1px solid var(--hairline);
}
.rmcard__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 28px 28px 16px; }

/* заголовок + автор */
.rmcard__title { margin: 0; font: 500 33px/1.14 var(--font-display); color: var(--text); letter-spacing: .002em; }
.rmcard__author { margin: 10px 0 0; font: 400 14.5px/1.4 var(--font-ui); color: var(--text-2); }

.rmcard__rule { height: 1px; background: var(--hairline); margin: 22px 0; }

/* таблица метаданных */
.rmcard__meta { display: grid; grid-template-columns: 120px 1fr; row-gap: 14px; column-gap: 14px; }
.rmcard__label { font: 700 11px/1.5 var(--font-ui); letter-spacing: .10em; text-transform: uppercase; color: var(--label); }
.rmcard__value { font: 400 14.5px/1.45 var(--font-ui); color: #3a342c; }

/* секции (описание/провенанс) */
.rmcard__sec-label { font: 700 11px/1.5 var(--font-ui); letter-spacing: .10em; text-transform: uppercase; color: var(--label); margin-bottom: 9px; }
.rmcard__text { margin: 0; font: 400 14.5px/1.72 var(--font-ui); color: #4a443c; }
.rmcard__prov { margin: 0; font: 400 13.5px/1.6 var(--font-ui); color: var(--text-2); }

/* связанный экспонат */
.rmcard__related {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; cursor: pointer; text-decoration: none;
}
.rmcard__related span { font: italic 500 17px/1.2 var(--font-display); color: var(--text); }
.rmcard__related svg { width: 20px; height: 20px; fill: var(--text-2); }
.rmcard__related:hover span { text-decoration: underline; }

/* биография автора — кнопка-попап / раскрытая */
.rmcard__bio-btn {
  display: inline-block; margin-top: 18px; padding: 0;
  background: none; border: none; cursor: pointer;
  font: italic 500 16px/1.3 var(--font-display); color: var(--text);
  text-decoration: underline; text-underline-offset: 3px;
}
.rmcard__bio-btn:hover { color: var(--accent); }
.rmcard__bio-btn:focus-visible { outline: var(--focus); outline-offset: 2px; }
.rmcard__bioinline { font: 400 14px/1.62 var(--font-ui); color: var(--text-2); }
.rmcard__bioinline p { margin: 0 0 9px; }
.rmcard__bioinline i { color: var(--text-2); }

/* попап биографии — поверх карточки */
.rmcard__bio {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28,24,19,.34); padding: 4%;
}
.rmcard__bio[hidden] { display: none; }
.rmcard__bio-box {
  display: flex; flex-direction: column; width: 560px; max-width: 100%; max-height: 88%;
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(28,24,19,.42);
}
.rmcard__bio-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 14px 14px 24px; border-bottom: 1px solid var(--hairline);
}
.rmcard__bio-body {
  flex: 1 1 auto; overflow-y: auto; padding: 20px 24px 24px;
  font: 400 14.5px/1.65 var(--font-ui); color: var(--text);
}
.rmcard__bio-body p { margin: 0 0 10px; }
.rmcard__bio-body i { color: var(--text-2); }

/* футер */
.rmcard__footer { flex: 0 0 auto; padding: 14px 28px 20px; border-top: 1px solid var(--hairline); }
.rmcard__cta {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
  font: 700 14.5px/1 var(--font-ui); letter-spacing: .02em; cursor: pointer;
}
.rmcard__cta svg { width: 19px; height: 19px; fill: currentColor; }
.rmcard__cta:hover { filter: brightness(.92); }
.rmcard__cta:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* состояние A+ (увеличенный шрифт) */
.rmcard.is-bigfont .rmcard__title { font-size: 39px; }
.rmcard.is-bigfont .rmcard__author,
.rmcard.is-bigfont .rmcard__value,
.rmcard.is-bigfont .rmcard__text { font-size: 16.5px; }
.rmcard.is-bigfont .rmcard__meta { grid-template-columns: 130px 1fr; }

/* условные блоки скрыты, если данных нет (JS добавляет .is-empty) */
.rmcard__optional.is-empty { display: none; }

/* ============================================================
   Мобилка / узкие экраны (< 960px) — вертикальная раскладка
   ============================================================ */
@media (max-width: 960px) {
  .rmcard-overlay { padding: 0; }
  /* height: динамическая единица dvh учитывает адресную строку/панель браузера
     на мобильных (иначе 100vh выше видимой области → шапка и футер обрезаются).
     Первая строка — фолбэк для браузеров без поддержки dvh. */
  .rmcard { width: 100vw; height: 100vh; height: 100dvh; border: none; }
  .rmcard__body { flex-direction: column; }
  .rmcard__image { flex: 0 0 56%; }
  .rmcard__image img { max-width: 60%; }
  .rmcard__panel { flex: 1 1 auto; border-left: none; border-top: 1px solid var(--hairline); }
  .rmcard__meta { grid-template-columns: 108px 1fr; }
  .rmcard__btn, .rmcard__btn--font { height: var(--touch); }
}