/* Секции сайта MRinBLACK */
.section { padding-block: clamp(72px, 11vw, 140px); }
.section + .section { border-top: 1px solid var(--green-line); }
.h2 {
  font: 400 clamp(32px, 4.6vw, 64px)/1.05 var(--display);
  letter-spacing: -.01em; max-width: 16ch;
}
.sub { margin-top: 18px; max-width: 52ch; color: var(--bone-dim); }

/* ---------- Прайс: доска с точками ---------- */
.prices__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 88px); align-items: start; margin-top: 56px; }
.menu { list-style: none; }
.menu li { padding-block: 18px; border-bottom: 1px solid var(--green-line); }
.menu__row { display: flex; align-items: baseline; gap: 12px; }
.menu__name { font: 600 clamp(17px, 1.7vw, 21px)/1.3 var(--display); }
.menu__dots { flex: 1; border-bottom: 2px dotted var(--graphite); transform: translateY(-5px); min-width: 24px; }
.menu__price { font-weight: 600; color: var(--oak); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu__note { margin-top: 4px; font-size: 15px; color: var(--bone-dim); }
.prices__aside figure { position: sticky; top: 100px; }
.prices__aside img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
figcaption { margin-top: 12px; font-size: 14px; color: var(--bone-dim); }

/* ---------- Пространство ---------- */
.space__layout { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 10px; margin-top: 48px; }
.space__layout figure { position: relative; }
.space__layout img { width: 100%; height: 100%; object-fit: cover; }
/* сверху зал + высокая витрина (2:3 – ровно высота зала), снизу зона ожидания и рабочее место */
.space__hall { grid-column: 1 / 9; aspect-ratio: 4 / 3; }
.space__cabinet { grid-column: 9 / 13; }
.space__lounge { grid-column: 1 / 7; aspect-ratio: 3 / 2; }
.space__shelf { grid-column: 7 / 13; aspect-ratio: 3 / 2; }
.space__layout figcaption {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 8px 12px;
  background: rgba(14, 26, 21, .85); color: var(--bone);
}
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.perks h3 { font: 600 19px/1.3 var(--display); }
.perks p { margin-top: 8px; color: var(--bone-dim); font-size: 16px; }
.perks div { padding-top: 20px; border-top: 1px solid var(--graphite); }

/* ---------- Адреса ---------- */
.branches { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.branch { background: var(--green); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; }
.branch h3 { font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--display); }
.branch dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 16px; }
.branch dt { color: var(--bone-dim); }
.branch dd a { text-decoration: none; font-weight: 500; }
.branch dd a:hover { color: var(--red); }
.branch dl { min-height: 5.6em; align-content: start; }
.branch__map {
  aspect-ratio: 16 / 10; border: 1px solid var(--green-line);
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, var(--green-line) 46px 48px),
    repeating-linear-gradient(90deg, transparent 0 70px, var(--green-line) 70px 72px),
    linear-gradient(32deg, transparent 49.2%, #2E463A 49.2% 50.8%, transparent 50.8%),
    var(--green-deep);
}
.branch__map button::before {
  content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 12px;
  background: var(--red); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 0 0 6px rgba(225, 38, 45, .2);
}
.branch__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.4) contrast(1.05); }
.branch__map button { width: 100%; height: 100%; border: 0; background: transparent; color: var(--bone-dim); font: 500 15px var(--text); cursor: pointer; }
.branch__map button:hover { color: var(--bone); }
.branch__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Подвал ---------- */
.foot { border-top: 1px solid var(--green-line); padding-block: 48px 120px; color: var(--bone-dim); font-size: 15px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.foot img { height: 56px; width: auto; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- Просмотр фото ---------- */
.viewer { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; margin: auto; }
.viewer::backdrop { background: rgba(5, 10, 8, .92); }
.viewer img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.viewer p { margin-top: 10px; color: var(--bone-dim); text-align: center; }
.viewer__close {
  position: fixed; top: 16px; right: 16px; width: 48px; height: 48px;
  background: var(--green); border: 1px solid var(--graphite); color: var(--bone); font-size: 24px; cursor: pointer;
}

/* ---------- Нижняя панель на телефоне ---------- */
.dock { display: none; }