/* === LAYOUT.CSS === */
/* assets/css/layout.css */
/* НАЗНАЧЕНИЕ: Каркас - контейнеры, шапка, меню, подвал, липкий призыв */
/* СВЯЗИ: tokens.css, views/partials/*.php */
/* РАЗМЕР: ~430 строк */

/* ==========================================================
   КОНТЕЙНЕР И ПОЛОСЫ
   ========================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.wrap-narrow {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding-inline: var(--pad);
}

.band { padding-block: var(--band); }
.band-tight { padding-block: clamp(56px, 6.5vw, 96px); }

/* Светлая полоса. Класс on-light переключает всю палитру текста -
   он же стоит на секции, поэтому дочерние правила берут нужный цвет. */
.band-light {
  background: var(--ivory);
  color: var(--ink-80);
}

.band-light-2 { background: var(--ivory-2); }

.band-raised { background: var(--void-2); }

/* Заголовок секции: слева заголовок, справа лид. Не по центру -
   центрированные шапки секций читаются как шаблон. */
.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 80px);
}

/* Ограничение строки живет на самом заголовке: ch на обертке считался бы
   от базового кегля (~10px на символ) и резал бы крупный заголовок
   до двух слов в столбик. */
.band-head-solo { display: block; }
.band-head-solo h2 { max-width: 16ch; }

.band-head .kicker { margin-bottom: var(--s4); }

.band-head h2 + .lede { margin-top: var(--s4); }

/* ==========================================================
   ШАПКА
   Стекло поверх фотографии. По умолчанию текст светлый,
   потому что фон страницы темный.
   ========================================================== */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background-color .45s ease, box-shadow .45s ease;
}

.site-head .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s5);
  height: 88px;
  transition: height .45s var(--out-quart);
}

/* Прокрутили первый экран - шапка получает стеклянную подложку.
   Непрозрачность высокая намеренно: если браузер не поддерживает
   backdrop-filter, контент не должен просвечивать сквозь шапку. */
.site-head.stuck {
  background: rgba(8, 6, 2, .82);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 1px 0 var(--rule-void2);
}

.site-head.stuck .wrap { height: 68px; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head.stuck { background: rgba(8, 6, 2, .96); }
}

/* -- Шапка над светлой секцией --
   Темная полоса поверх ivory читается как ошибка верстки,
   поэтому шапка перекрашивается под то, что под ней.
   Класс over-light ставит app.js. При открытом меню не применяем:
   там фон панели всегда темный. */
body:not(.menu-open) .site-head.over-light.stuck {
  background: rgba(254, 252, 250, .88);
  box-shadow: 0 1px 0 var(--rule-soft);
}

body:not(.menu-open) .site-head.over-light .brand,
body:not(.menu-open) .site-head.over-light .nav a { color: var(--ink); }

body:not(.menu-open) .site-head.over-light .brand b { color: var(--terracotta); }
body:not(.menu-open) .site-head.over-light .nav a::after { background: var(--terracotta); }

body:not(.menu-open) .site-head.over-light .head-cta {
  background: var(--void);
  color: var(--ivory);
}

body:not(.menu-open) .site-head.over-light .burger {
  box-shadow: inset 0 0 0 1px var(--rule);
}

body:not(.menu-open) .site-head.over-light .burger span,
body:not(.menu-open) .site-head.over-light .burger span::before,
body:not(.menu-open) .site-head.over-light .burger span::after {
  background: var(--ink);
}

.site-head .brand,
.site-head .nav a,
.site-head .burger span,
.site-head .burger span::before,
.site-head .burger span::after {
  transition: color .35s ease, background-color .35s ease, box-shadow .35s ease;
}

/* -- Марка -- */

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: .02em;
  color: var(--ivory);
  white-space: nowrap;
}

.brand b {
  font-weight: 400;
  color: var(--champagne);
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
}

/* -- Навигация по центру -- */

.nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--on-void);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 11px;
  width: 0;
  height: 1px;
  background: var(--champagne);
  transition: width .4s var(--out-quart);
}

.nav a:hover { color: var(--ivory); }
.nav a:hover::after { width: 100%; }

/* -- Правая часть -- */

.head-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.head-cta {
  min-height: 44px;
  padding: 0 var(--s5);
  font-size: 14px;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--rule-void);
}

.burger span {
  position: relative;
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ivory);
  transition: background-color .2s ease;
}

.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: var(--ivory);
  transition: transform .4s var(--out-quart);
}

.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================
   ВЫДВИЖНОЕ МЕНЮ
   ========================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  padding: 104px var(--pad) var(--s8);
  background: var(--void);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .6s var(--out-expo), visibility .6s;
}

.menu-open .drawer { transform: none; visibility: visible; }

/* Только пункты меню. Кнопку и ссылки в контактах это правило задевать
   не должно: у кнопки светлая заливка, и текст цвета ivory на ней
   становится невидимым, а контакты - не заголовки. */
.drawer > a:not(.btn) {
  font-family: var(--display);
  font-size: clamp(28px, 7.5vw, 42px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ivory);
}

.drawer .btn {
  margin-top: var(--s5);
  justify-content: center;
}

.drawer-foot a { color: var(--on-void); }
.drawer-foot a:hover { color: var(--ivory); }

.drawer-foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-void2);
  font-size: 14px;
  color: var(--on-void-soft);
}

body.menu-open { overflow: hidden; }

/* ==========================================================
   ЛИПКИЙ ПРИЗЫВ НА МОБИЛЬНОМ
   ========================================================== */

.sticky-cta {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  z-index: var(--z-sticky);
  display: none;
  transform: translateY(160%);
  transition: transform .6s var(--out-expo);
}

.sticky-cta.show { transform: none; }

.sticky-cta .btn {
  width: 100%;
  box-shadow: 0 14px 36px rgba(8, 6, 2, .5);
}

/* ==========================================================
   ПОДВАЛ
   ========================================================== */

.site-foot {
  background: var(--void-2);
  color: var(--on-void);
  padding-block: clamp(64px, 7vw, 108px) var(--s8);
  border-top: 1px solid var(--rule-void2);
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--rule-void2);
}

.foot-brand .brand { font-size: 24px; }

.foot-brand p {
  margin-top: var(--s4);
  max-width: 32ch;
  font-size: 15px;
  color: var(--on-void-soft);
}

.foot-col h4 {
  margin-bottom: var(--s5);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
}

.foot-col li + li { margin-top: var(--s3); }

.foot-col a,
.foot-col span {
  display: inline-block;
  font-size: 15px;
  color: var(--on-void-soft);
  transition: color .3s ease;
}

.foot-col a:hover { color: var(--ivory); }

/* Контакт, который еще не заполнен. Показываем честно,
   а не прячем и не выдумываем номер. */
.foot-col .pending {
  color: var(--stone);
  font-size: 14px;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s6);
  font-size: 13.5px;
  color: var(--on-void-soft);
}

.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s5); }
.foot-legal a:hover { color: var(--ivory); }

/* Дисклеймер инвестиционного проекта - обязателен по смыслу */
/* Своей линии сверху здесь нет: у абзаца ограничена длина строки,
   и правило обрывалось бы на середине экрана. Разделитель уже дает
   нижняя граница колонок подвала. */
.foot-disclaimer {
  margin-top: var(--s7);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--on-void-soft);
  max-width: 94ch;
}

/* ==========================================================
   ЛАЙТБОКС
   ========================================================== */

.lightbox {
  /* Браузер центрирует модальное окно через margin: auto, но общий сброс
     обнуляет отступы у всех элементов и окно прилипает к левому верхнему
     углу. Возвращаем центровку явно. */
  margin: auto;
  width: auto;
  max-width: 94vw;
  max-height: 92vh;
  padding: 0;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(8, 6, 2, .94);
  backdrop-filter: blur(8px);
}

.lightbox img {
  max-width: 94vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--r-md);
}

.lb-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--glass-hi);
  color: var(--ivory);
  font-size: 22px;
  line-height: 1;
  transition: background-color .3s ease;
}

.lb-close:hover { background: rgba(254, 252, 250, .26); }