/* ============================================================================
   layout.css — контейнер, ритм секций, шапка, фоновая сетка, служебный хром
   ========================================================================== */

@layer layout {
  /* --- контейнер --------------------------------------------------------- */
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* --- вертикальный ритм ------------------------------------------------- */
  .section {
    margin-top: var(--section-gap);
  }

  .section--dark {
    position: relative;
    padding-block: clamp(56px, 7vw, 110px);
    background: var(--ink);
    color: #fff;
  }

  .section--video {
    position: relative;
    isolation: isolate;
    /* clip, а не hidden: hidden создаёт скролл-контейнер, и view()-таймлайны
       вложенных блоков начинают считаться от него, а не от страницы —
       появление карточек внутри такой секции просто не срабатывает */
    overflow: clip;
    padding-block: clamp(56px, 7vw, 110px);
    background: var(--sky);
  }

  /* --- шапка секции ------------------------------------------------------ */
  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 56px);
  }

  /* Вариант, где заголовок слева, а лейбл с лидом — справа */
  .section-head--split > * {
    min-width: min(100%, 300px);
  }

  .section-head--split > :first-child {
    flex: 1 1 560px;
  }

  .section-head--split > :last-child {
    flex: 0 1 340px;
  }

  .section-label {
    font: 400 var(--fs-label) / 1 var(--font-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .section-label span {
    color: var(--accent-deep);
  }

  .section--dark .section-label {
    color: rgb(255 255 255 / 0.5);
  }

  .section--dark .section-label span {
    color: var(--accent);
  }

  .section-title {
    margin: 0;
    font: 400 var(--fs-h2) / 1.04 var(--font-display);
    letter-spacing: -0.025em;
  }

  .section-label + .section-title {
    margin-top: 14px;
  }

  .section-lead {
    max-width: 46ch;
    font: 400 var(--fs-lead) / 1.55 var(--font-sans);
    color: var(--ink-muted);
  }

  .section--dark .section-lead {
    color: rgb(255 255 255 / 0.62);
  }

  /* --- сквозная вертикальная сетка --------------------------------------- */
  /* Четыре колонки шириной в контейнер, нарисованные фиксированным слоем */
  .bg-grid {
    position: fixed;
    inset: 0;
    z-index: var(--z-grid);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .bg-grid::before {
    content: "";
    width: min(var(--container), 100% - 2 * var(--gutter));
    height: 100%;
    border-inline: 1px solid rgb(0 0 0 / 0.05);
    background-image: linear-gradient(90deg, rgb(0 0 0 / 0.05) 1px, transparent 1px);
    background-size: 25% 100%;
  }

  /* --- шапка -------------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    padding: 18px calc(var(--frame) + var(--gutter));
    transition:
      background var(--dur) ease,
      box-shadow var(--dur) ease,
      padding var(--dur) ease;
  }

  /* Состояние «шапка оторвалась от первого экрана» ставит скрипт */
  .site-header.is-stuck {
    padding-block: 12px;
    background: rgb(244 244 244 / 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--container);
    margin-inline: auto;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
  }

  .logo:hover {
    color: inherit;
  }

  .logo__name {
    font: 400 21px / 1 var(--font-sans);
    letter-spacing: -0.01em;
  }

  /* Ромб из четырёх лепестков */
  .logo__mark {
    position: relative;
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
    rotate: 45deg;
  }

  .logo__mark::before,
  .logo__mark::after,
  .logo__mark span:first-child,
  .logo__mark span:last-child {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: currentColor;
  }

  .logo__mark::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    border-radius: 10px 10px 2px 10px;
  }

  .logo__mark::after {
    inset-block-start: 0;
    inset-inline-end: 0;
    border-radius: 10px 10px 10px 2px;
  }

  .logo__mark span:first-child {
    inset-block-end: 0;
    inset-inline-start: 0;
    border-radius: 10px 2px 10px 10px;
  }

  .logo__mark span:last-child {
    inset-block-end: 0;
    inset-inline-end: 0;
    border-radius: 2px 10px 10px 10px;
  }

  /* --- навигация ---------------------------------------------------------- */
  .nav {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .nav__link {
    padding: 11px 18px;
    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: var(--r-pill);
    background: var(--glass-nav);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font: 400 var(--fs-body) / 1 var(--font-sans);
    white-space: nowrap;
    transition:
      background var(--dur-fast) ease,
      color var(--dur-fast) ease;
  }

  .nav__link:hover {
    background: #fff;
    color: var(--ink);
  }

  /* Подсветку активного пункта ставит скрипт по видимой секции */
  .nav__link[aria-current="true"] {
    background: var(--ink);
    color: #fff;
  }

  .nav-toggle {
    display: none;
    flex: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
  }

  .nav-toggle svg {
    width: 20px;
    height: 20px;
    margin-inline: auto;
  }

  .nav-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    /* Браузерные стили <dialog> — width/height: fit-content и margin: auto.
       Без сброса меню схлопывается в коробку по центру, а не на весь экран. */
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 28px;
    background: rgb(244 244 244 / 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0;
    color: var(--ink);
  }

  .nav-sheet:not([open]) {
    display: none;
  }

  .nav-sheet::backdrop {
    background: transparent;
  }

  .nav-sheet__link {
    padding: 16px 4px;
    border-bottom: 1px solid rgb(0 0 0 / 0.09);
    font: 400 clamp(26px, 7vw, 36px) / 1.15 var(--font-display);
    letter-spacing: -0.02em;
  }

  .nav-sheet__close {
    align-self: flex-start;
    margin-top: 26px;
  }

  /* --- хром: прогресс, плавающие кнопки ---------------------------------- */
  .scroll-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-progress);
    height: 3px;
    width: 100%;
    background: var(--accent);
    transform-origin: 0 50%;
    scale: var(--progress, 0) 1;
    pointer-events: none;
  }

  /* Там, где есть scroll-таймлайны, ширину ведёт сам браузер — без JS */
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      scale: 0 1;
      animation: progress-grow linear both;
      animation-timeline: scroll(root block);
    }
  }

  @keyframes progress-grow {
    to {
      scale: 1 1;
    }
  }

  .float-cta,
  .to-top {
    position: fixed;
    inset-block-end: 20px;
    z-index: var(--z-float);
    opacity: 0;
    translate: 0 18px;
    pointer-events: none;
    transition:
      opacity var(--dur) ease,
      translate var(--dur) ease;
  }

  .float-cta.is-visible,
  .to-top.is-visible {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }

  .float-cta {
    inset-inline-end: 20px;
    height: 52px;
    padding-inline: 24px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: #fff;
    font: 400 var(--fs-body) / 1 var(--font-sans);
    cursor: pointer;
    box-shadow: var(--shadow-float);
  }

  .float-cta:hover {
    background: #2a2a2a;
  }

  .to-top {
    inset-inline-start: 20px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
  }

  .to-top svg {
    width: 18px;
    height: 18px;
  }

  @media (width < 560px) {
    .float-cta {
      inset-inline-end: 16px;
      inset-block-end: 16px;
      height: 48px;
      padding-inline: 20px;
      font-size: var(--fs-caption);
    }
  }
}

/* ============================================================================
   Видимость по ширине. Лежит в utils — последнем слое, — потому что должна
   перебивать display компонентов, а не спорить с ними специфичностью.
   Порог 900px: ниже строка шапки перестаёт помещаться.
   ========================================================================== */
@layer utils {
  @media (width < 900px) {
    .site-header .nav,
    .site-header__cta {
      display: none;
    }

    .nav-toggle {
      display: block;
    }
  }

  /* Кнопка «наверх» на узком экране только мешает контенту */
  @media (width < 560px) {
    .to-top {
      display: none;
    }
  }
}