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

/* ==========================================================
   ШАПКА
   В начале страницы прозрачная поверх кадра, при прокрутке
   становится оливковым стеклом. Это требование брифа и заодно
   единственный способ удержать читаемость навигации над фото.
   ========================================================== */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-block: var(--s5);
  transition: background-color .4s var(--out-quart), padding .4s var(--out-quart),
              box-shadow .4s var(--out-quart), border-color .4s ease;
  border-bottom: 1px solid transparent;
}

.site-head.stuck {
  padding-block: var(--s3);
  background: rgba(12, 11, 2, .78);
  border-bottom-color: var(--rule-void2);
  box-shadow: 0 12px 40px rgba(12, 11, 2, .34);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: var(--s6);
}

/* -- Знак -- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

.brand-mark { width: 40px; height: auto; }

.brand-text { display: grid; gap: 2px; }

.brand-text b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ivory);
  white-space: nowrap;
}

/* Вторая половина знака набрана акцентом: в исходном логотипе
   она золотая, и разделение слов держит эту память. */
.brand-text b i { font-style: normal; color: var(--lime); }

.brand-text small {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-void-soft);
  white-space: nowrap;
}

/* -- Навигация -- */

/* Восемь пунктов, знак и кнопка не помещаются в 1440 при крупном
   кегле: навигация набрана компактно и не переносится. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.15vw, 20px);
  margin-inline: auto;
}

.nav a {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--on-void);
  padding-block: 6px;
  white-space: nowrap;
  transition: color .3s ease;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--out-quart);
}

.nav a:hover { color: var(--ivory); }
.nav a:hover::after { transform: scaleX(1); }

.head-cta { min-height: 46px; padding-inline: var(--s6); font-size: 14px; flex: none; }

/* -- Бургер. На десктопе не нужен. -- */

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--rule-void);
  place-items: center;
  gap: 5px;
  flex: none;
}

.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ivory);
  transition: transform .4s var(--out-quart), opacity .3s ease;
}

body.menu-open .burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
body.menu-open .burger span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ==========================================================
   ВЫДВИЖНОЕ МЕНЮ
   Живет только на узких экранах, на десктопе скрыто целиком.
   ========================================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--s8);
  padding: 120px var(--pad) var(--s8);
  background: var(--void);
  overflow-y: auto;
}

.menu[hidden] { display: none; }
body.menu-open .menu { display: flex; }

.menu-nav { display: grid; gap: var(--s2); }

.menu-nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s3);
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--ivory);
  border-bottom: 1px solid var(--rule-void2);
}

.menu-num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.menu-foot { display: grid; gap: var(--s4); justify-items: start; }
.menu-foot .btn { width: 100%; }

/* ==========================================================
   ЛИПКИЙ ПРИЗЫВ НА ТЕЛЕФОНЕ
   Появляется, когда первый экран позади: показывать его поверх
   героя незачем, там своя кнопка.
   ========================================================== */

.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 .5s var(--out-quart);
}

.sticky-cta .btn { width: 100%; box-shadow: 0 14px 40px rgba(12, 11, 2, .5); }
body.cta-on .sticky-cta { transform: none; }
body.menu-open .sticky-cta { transform: translateY(140%); }

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

.site-foot {
  padding-block: var(--s9) var(--s6);
  background: var(--brown-2);
  border-top: 1px solid var(--rule-void2);
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: var(--s8);
}

.foot-brand { display: grid; gap: var(--s4); justify-items: start; }
.foot-brand .brand-mark { width: 44px; }

.foot-brand b {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ivory);
}

.foot-brand b i { font-style: normal; color: var(--lime); }

.foot-col { display: grid; gap: var(--s3); align-content: start; }

.foot-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--s2);
}

.foot-col a,
.foot-plain,
.foot-muted {
  font-size: 14.5px;
  color: var(--on-void);
  transition: color .3s ease;
}

.foot-col a:hover { color: var(--lime); }
.foot-muted { color: var(--on-void-soft); }

.foot-disclaim {
  padding-block: var(--s6);
  border-top: 1px solid var(--rule-void2);
  font-size: 13px;
  line-height: 1.65;
  color: var(--on-void-soft);
  max-width: 92ch;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-void2);
  font-size: 13px;
  color: var(--on-void-soft);
}

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

.lightbox {
  width: min(92vw, 1200px);
  max-height: 92vh;
  padding: 0;
  border: none;
  border-radius: var(--r-lg);
  background: var(--void-2);
  overflow: hidden;
}

.lightbox::backdrop { background: rgba(12, 11, 2, .88); backdrop-filter: blur(8px); }
.lightbox img { width: 100%; height: auto; max-height: 92vh; object-fit: contain; }

.lb-close {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  background: rgba(12, 11, 2, .6);
  color: var(--ivory);
  font-size: 26px;
  line-height: 1;
  backdrop-filter: blur(10px);
}