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

/* ==========================================================
   КОНТЕЙНЕР И СЕКЦИИ
   ========================================================== */

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

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

.band { padding-block: var(--band); }

.band-tight { padding-block: clamp(56px, 6vw, 88px); }

.band-dark {
  background: var(--graphite);
  color: var(--paper);
}

.band-alt { background: var(--paper-2); }

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

.band-head-solo { display: block; max-width: 20ch; }

.band-head .kicker { display: block; margin-bottom: 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, backdrop-filter .45s ease;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  height: 84px;
}

/* Непрозрачность высокая намеренно: если браузер не поддерживает
   backdrop-filter, контент не должен просвечивать сквозь шапку. */
.site-head.stuck {
  background: rgba(246, 246, 244, .94);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--rule-soft);
}

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

/* ==========================================================
   ШАПКА НАД ТЕМНОЙ СЕКЦИЕЙ
   Светлая полоса поверх графитовой секции читается как ошибка верстки,
   поэтому шапка перекрашивается под то, что under ней.
   Класс over-dark ставит app.js. При открытом меню не применяем -
   там фон панели всегда светлый.
   ========================================================== */

body:not(.menu-open) .site-head.over-dark.stuck {
  background: rgba(17, 21, 26, .94);
  box-shadow: 0 1px 0 rgba(246, 246, 244, .12);
}

body:not(.menu-open) .site-head.over-dark .brand { color: var(--paper); }
body:not(.menu-open) .site-head.over-dark .brand i { color: var(--champagne); }

body:not(.menu-open) .site-head.over-dark .nav a { color: var(--on-dark); }
body:not(.menu-open) .site-head.over-dark .nav a:hover { color: var(--paper); }
body:not(.menu-open) .site-head.over-dark .nav a::after { background: var(--champagne); }

body:not(.menu-open) .site-head.over-dark .head-cta {
  background: var(--champagne);
  color: var(--graphite);
}

body:not(.menu-open) .site-head.over-dark .burger {
  box-shadow: inset 0 0 0 1px rgba(246, 246, 244, .26);
}

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

.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 {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.brand i {
  font-style: italic;
  color: var(--champagne-deep);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.nav a {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-70);
  transition: color .3s ease;
}

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

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

.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);
}

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

.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  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(--s5);
  padding: 96px var(--pad) var(--s8);
  background: var(--paper);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .6s var(--out-expo), visibility .6s;
}

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

.drawer a {
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

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

body.menu-open { overflow: hidden; }

/* ==========================================================
   ЛИПКИЙ CTA НА МОБИЛЬНОМ
   ========================================================== */

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

.sticky-cta.show { transform: none; }
.sticky-cta .btn { width: 100%; box-shadow: 0 12px 32px rgba(9, 8, 12, .22); }

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

.site-foot {
  background: var(--graphite);
  color: var(--paper);
  padding-block: clamp(64px, 7vw, 104px) var(--s8);
}

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

.foot-brand .brand { font-size: 26px; color: var(--paper); }
.foot-brand .brand i { color: var(--champagne); }

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

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

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

.foot-col a {
  font-size: 15px;
  color: var(--on-dark);
  transition: color .3s ease;
}

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

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

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

/* Дисклеймер инвестиционного проекта - обязателен по смыслу */
.foot-disclaimer {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule-dark);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--on-dark-soft);
  max-width: 92ch;
}

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

.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(9, 8, 12, .92);
  backdrop-filter: blur(6px);
}

.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: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(246, 246, 244, .12);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  transition: background-color .3s ease;
}

.lb-close:hover { background: rgba(246, 246, 244, .24); }