/* ==========================================================================
   DEE MAK — LAYOUT
   Scroll architecture, Folio Rail, buttons, shared components.
   ========================================================================== */

/* ------------------------------------------------------ SCROLL & SNAP */
/* Новая механика прокрутки (правка клиента):
   - каждый экран занимает РОВНО высоту viewport, без внутренней прокрутки;
   - предыдущий экран НЕ двигается — стоит на месте (position: sticky);
   - следующий экран, будучи позже в DOM, просто идёт своим чередом в
     обычном потоке документа и при скролле наезжает СВЕРХУ на предыдущий
     (later-in-DOM всегда перекрывает earlier при перекрытии — это базовое
     поведение браузера, z-index не нужен);
   - snap: y mandatory гарантирует, что палец/колесо всегда докручивает
     ровно до следующего экрана целиком, без промежуточных положений.

   Это НЕ JavaScript-анимация. Вся механика — на чистом CSS
   (position:sticky + scroll-snap), поэтому она гарантированно плавная
   (нет JS в цикле кадров, которое могло бы "дёргаться") и не мешает
   нативному инерционному скроллу iOS, клавиатурной прокрутке, VoiceOver
   и поиску на странице. */
.shell {
  display: block;
  /* ВРЕМЕННАЯ блокировка десктопной адаптации — правка клиента. Сайт
     намеренно ограничен мобильной шириной на любом экране, пока десктоп-
     версия не спроектирована отдельно — иначе на широких экранах viewport
     будет виден растянутый мобильный макет, создающий ложное впечатление
     законченной desktop-версии. Убрать max-width/margin/box-shadow здесь,
     когда работа над десктопом официально начнётся. */
  max-width: 480px;
  margin-inline: auto;
  box-shadow: 0 0 0 1px rgba(244, 244, 242, 0.08);
}

.section {
  position: sticky;
  top: 0;
  /* dvh вместо svh — правка клиента: страница растягивается на всю
     видимую область, когда адресная строка Safari сворачивается, а не
     оставляет пустую полосу фона снизу. Компромисс: в отличие от svh
     (стабильная минимальная высота), dvh пересчитывается ПРЯМО во время
     жеста скролла по мере сворачивания панели — теоретически это может
     слегка сдвигать точку привязки (scroll-snap) под пальцем в момент
     самого сворачивания. Требует проверки на реальном iPhone — в
     тестовой headless-среде это поведение не воспроизводится. Если на
     устройстве заметны рывки при первом скролле — откатить на 100svh
     (см. историю правок) откатом одной строки ниже.
     Жёсткая высота (не min-height) — экран должен быть ограничен размером
     viewport, весь контент обязан помещаться без внутренней прокрутки. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* Под уменьшенную анимацию sticky-эффект ("наезжание") отключается —
   секции возвращаются в обычный поток документа, экраны просто сменяют
   друг друга обычной прокруткой без наложения. */
@media (prefers-reduced-motion: reduce) {
  .section {
    position: relative;
    top: auto;
  }
}

.section__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x) var(--pad-x-end);
  padding-block: var(--section-pt) var(--section-pb);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section__inner--flush-top {
  padding-top: 0;
}

/* Full-bleed media ignores the gutter entirely (Section 6.2). */
.bleed {
  width: 100%;
  max-width: var(--bleed-max);
  margin-inline: auto;
}

/* ---------------------------------------------------- CHAPTER-OPENING BEAT */
/* Section 3.3 — identical in every section. This repetition IS the rhythm. */
.chapter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(16px, 3vh, var(--space-6));
}

.chapter__folio {
  color: var(--accent);
  margin-bottom: clamp(8px, 1.6vh, var(--space-3));
}

.chapter--on-light .chapter__folio {
  color: var(--accent-ink);
}

.chapter__rule {
  margin: 0 0 clamp(12px, 2.4vh, var(--space-5));
}

.chapter__title {
  color: var(--text-primary-dark);
}

.chapter--on-light .chapter__title {
  color: var(--text-primary-light);
}

/* ----------------------------------------------------------- BUTTON SYSTEM */
/* Section 8. Primary must dominate on three axes simultaneously:
   fill vs outline, 56px vs 52px, full-width vs full-width-with-4px-inset. */
.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--btn-h-min);
  padding-inline: clamp(16px, 5vw, var(--btn-padding-x));
  border-radius: 0; /* скругление убрано у всех кнопок по правке клиента */
  font-size: clamp(0.75rem, 3.4vw, var(--fs-button));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn__arrow {
  flex: none;
  font-size: 16px;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-standard);
}

.btn--primary {
  height: var(--btn-h-primary);
  background: var(--accent);
  color: var(--text-primary-dark); /* белый текст по правке клиента */
  border: 0;
}

.btn--secondary {
  height: var(--btn-h-secondary);
  width: 100%; /* ширина = primary, инсет-иерархия убрана по правке клиента */
  background: transparent;
  border: var(--border-width) solid var(--border-dark-strong);
  color: var(--text-primary-dark);
}

.btn--secondary.btn--on-light {
  border-color: var(--border-light-strong);
  color: var(--text-primary-light);
}

.btn:active {
  transform: scale(0.985);
}

.btn--primary:active {
  background: var(--accent-active);
}

.btn--secondary:active {
  background: rgba(244, 244, 242, 0.1);
}

.btn--secondary.btn--on-light:active {
  background: rgba(18, 18, 18, 0.1);
}

/* Section 4.5 — hover only where a real pointer exists. A sticky hover state
   after a tap looks broken. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--accent-hover);
  }

  .btn--primary:hover .btn__arrow {
    transform: translateX(4px);
  }

  .btn--secondary:hover {
    border-color: var(--text-primary-dark);
    background: rgba(244, 244, 242, 0.06);
  }

  .btn--secondary.btn--on-light:hover {
    border-color: var(--text-primary-light);
    background: rgba(18, 18, 18, 0.06);
  }

  .btn--secondary:hover .btn__arrow {
    transform: translateX(4px);
  }
}

.btn[aria-disabled="true"],
.btn:disabled {
  cursor: not-allowed;
  transform: none;
}

.btn--primary[aria-disabled="true"] {
  background: var(--cta-disabled-bg);
  color: var(--cta-disabled-label);
}

.btn--secondary[aria-disabled="true"] {
  border-color: rgba(244, 244, 242, 0.1);
  color: var(--text-muted-dark);
}

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: var(--btn-gap); /* Section 8.3 — secondary sits 12px below, never beside */
}

/* Section 8.5 — text link / tertiary */
.link-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-block: var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  /* Подчёркивание убрано по правке клиента (было: border-bottom). */
  transition: color var(--dur-base) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}

.link-text__icon {
  flex: none;
  width: 14px;
  height: 14px;
}

.link-text:active {
  opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
  .link-text:hover {
    color: var(--accent); /* было: цвет линии-подчёркивания, теперь линии нет */
  }
}

/* A social link whose destination has not been supplied. Section 25 forbids
   inventing URLs, so it renders as non-interactive rather than as a dead link. */
.link-text[data-pending="true"] {
  cursor: default;
  color: var(--text-muted-dark);
}

.social-row {
  display: flex;
  gap: var(--space-7); /* Section 6.4 */
  flex-wrap: wrap;
}

/* ----------------------------------------------------------- STAT ROW (dl) */
/* Section 9.2 — marked up as a <dl>: this is definition data. */
.stats {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-block: var(--space-2) clamp(16px, 3.4vh, var(--space-7));
}

.stats__label,
.stats__value {
  display: flex;
  align-items: center;
  min-height: clamp(35px, 5.6vh, 52px);
  border-bottom: var(--border-width) solid var(--border-dark);
}

.stats__label {
  color: var(--text-secondary-dark);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.stats__value {
  justify-content: flex-end;
  color: var(--text-primary-dark);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-meta);
  font-variant-numeric: var(--fv-numeric);
}

.stats > :nth-last-child(1),
.stats > :nth-last-child(2) {
  border-bottom: 0;
}

/* The 1px rule draws from the left on entry — Section 14.2 */
.stats__label,
.stats__value {
  position: relative;
}

/* ------------------------------------------------------------ MENU TRIGGER */
/* Section 12.1 */
.menu-trigger {
  position: fixed;
  top: max(16px, var(--safe-t));
  right: max(var(--gutter), var(--safe-r));
  z-index: 80;
  width: var(--touch-min);
  height: var(--touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.menu-trigger__bar {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text-primary-dark);
  transition: background-color var(--dur-base) var(--ease-standard);
}

.menu-trigger[data-tone="light"] .menu-trigger__bar {
  background: var(--text-primary-light);
}

/* Section 12.1 — a 4px orange dot appears once the Hero has left the viewport. */
.menu-trigger__dot {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-editorial);
}

.menu-trigger.is-past-hero .menu-trigger__dot {
  opacity: 1;
  transform: scale(1);
}

.menu-trigger:active .menu-trigger__bar {
  opacity: 0.6;
}

/* ------------------------------------------------------------ SCROLL LOCK */
/* Section 13.4 — position-fixed + scrollTop restore. iOS Safari ignores
   overflow:hidden on body in several cases. */
body.is-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}