/* =============================================================
 * layout.css — каркас страницы: sidebar + content + mobile shells.
 *
 * Зависит от: tokens.css, reset.css
 *
 * Структура:
 *   .app-shell ── grid: [sidebar] [main] (только ≥769px)
 *     ├── .app-sidebar       (≥769px: fixed left, на mobile: hidden)
 *     ├── .app-header        (только mobile <769px: sticky top)
 *     ├── main#main          (контент, ID для skip-link)
 *     └── .app-bottom-nav    (только mobile <769px: sticky bottom)
 * ============================================================= */

/* ──────── ROOT SHELL ──────── */

.app-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "header"
    "main"
    "footer"
    "bottom";
}

/* Десктоп — sidebar + content + footer (footer обязательно размещаем явно,
   иначе grid авто-раскладывает его в колонку sidebar и он наезжает на контент). */
@media (min-width: 769px) {
  .app-shell {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "sidebar main"
      "sidebar footer";
  }
}

/* ──────── SIDEBAR (≥769px) ──────── */

.app-sidebar {
  display: none;
  grid-area: sidebar;
}

@media (min-width: 769px) {
  .app-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    height: 100svh;
    padding: var(--sp-6) var(--sp-5);
    /* Над full-bleed-героем — ПРОЗРАЧНАЯ матовая тёмная панель. Подложка
       достаточно плотная и РАВНОМЕРНАЯ, чтобы выглядеть одинаково (тёмное стекло,
       читаемый белый текст) над любым фото — и над тёмной кухней, и над светлыми
       фасадами/цехом. При скролле в светлый контент JS вешает .is-solid. */
    background: linear-gradient(90deg, rgba(20,18,16,0.50) 0%, rgba(20,18,16,0.38) 60%, rgba(20,18,16,0.32) 100%);
    border-right: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: saturate(118%) blur(7px);
    -webkit-backdrop-filter: saturate(118%) blur(7px);
    z-index: var(--z-sidebar);
    overflow-y: auto;
    transition: background var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out);
  }
  /* Solid-состояние — при переходе с hero на нижнюю часть: матовый светлый фрост (серый),
     не плоская заливка. backdrop-blur даёт «матовость». */
  .app-sidebar.is-solid {
    background:
      linear-gradient(118deg, rgba(248,248,246,0.94) 0%, rgba(243,242,238,0.92) 55%, rgba(238,237,233,0.90) 100%);
    border-right-color: var(--color-grey-200);
    backdrop-filter: saturate(135%) blur(18px);
    -webkit-backdrop-filter: saturate(135%) blur(18px);
    box-shadow: 1px 0 0 rgba(255,255,255,0.5) inset;   /* тонкий матовый блик на правом крае */
  }
  /* Текст: над hero — белый; на матовом светлом (.is-solid) — графит */
  .app-sidebar.is-solid .app-sidebar__brand { color: var(--color-text); }
  .app-sidebar.is-solid .app-sidebar__link { color: var(--color-text-on-grey); }
  .app-sidebar.is-solid .app-sidebar__link:hover { background: rgba(20,18,16,0.06); color: var(--color-text); }
  .app-sidebar.is-solid .app-sidebar__link[aria-current="page"] { color: var(--color-text); }
  .app-sidebar.is-solid .app-sidebar__footer { border-top-color: var(--color-grey-200); }
  .app-sidebar.is-solid .app-sidebar__phone { color: var(--color-text); }
  .app-sidebar.is-solid .app-sidebar__lk { color: var(--color-text-on-grey); }
  .app-sidebar.is-solid .app-sidebar__lk:hover { color: var(--color-text); }

  /* Резервируем место под фиксированный sidebar */
  main, .app-bottom-nav {
    margin-left: 0;     /* main уже в grid-area "main" */
  }

}

/* Sidebar header — SVG-лого (вектор, адаптивный вордмарк через currentColor) */
.app-sidebar__brand {
  display: flex;
  align-items: center;
  padding-bottom: var(--sp-6);
  color: #fff;                 /* вордмарк белый над тёмным героем (.is-solid → графит) */
}
.app-sidebar__logo {
  height: 30px;
  width: auto;
  display: block;
}
/* Лого «ВЕК Экспресс» в мобильной шапке */
.app-header__logo {
  height: 30px;
  width: auto;
  display: block;
}

.app-sidebar__brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: var(--ls-wide);
}

/* Sidebar nav — список */
.app-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-2);
}

.app-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.64);   /* белый над hero (.is-solid → графит) */
  font-size: 1rem;                 /* 16px — как Zetta */
  font-weight: var(--fw-medium);
  letter-spacing: -0.04em;         /* плотный трекинг меню (Zetta −0.64px@16px) */
  line-height: 1.2;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  min-height: var(--tap-target-min);
}
.app-sidebar__link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}
/* Active маркер — цвет + полоса + weight (3 сигнала, не только цвет — SC 1.4.1) */
.app-sidebar__link[aria-current="page"] {
  color: #fff;
  font-weight: var(--fw-semibold);
}
.app-sidebar__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -1px;            /* чтобы попасть в правый border sidebar */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Первый пункт меню: на ДЕСКТОПЕ показываем «Кухни», в мобильном drawer (≤768px)
   оставляем «Главная» (мобильную версию не меняем). Два span'а в _ZettaLayout. */
.app-sidebar__link .nav-label--mobile { display: none; }
@media (max-width: 768px) {
  .app-sidebar__link .nav-label--desktop { display: none; }
  .app-sidebar__link .nav-label--mobile { display: inline; }
}

/* ──────── Sidebar группа «Каталог материалов» (<details>) ──────── */
.app-sidebar__group { margin-top: var(--sp-1); }
.app-sidebar__group summary {
  list-style: none;                       /* убираем дефолтный triangle */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.app-sidebar__group summary::-webkit-details-marker { display: none; }
/* Сами добавляем chevron, чтобы он крутился при open */
.app-sidebar__group summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) var(--ease-out);
  opacity: 0.6;
  margin-right: 4px;
}
.app-sidebar__group[open] summary::after { transform: rotate(45deg); opacity: 0.9; }
/* Summary подсвечивается когда юзер где-то внутри секции (но не точно на этой странице) */
.app-sidebar__group-summary.is-section-active {
  color: #fff;
  font-weight: var(--fw-medium);
}
.app-sidebar.is-solid .app-sidebar__group-summary.is-section-active {
  color: var(--color-text);
}
/* Sub-links — чуть мельче и с лёгким сдвигом, чтобы визуально отличались */
.app-sidebar__sublinks {
  padding-left: var(--sp-3);
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.app-sidebar__sublink { font-size: var(--fs-sm); padding-block: 6px; }

/* Sidebar footer — телефон / соц-кнопки */
.app-sidebar__footer {
  margin-top: auto;
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;          /* по центру, не прижато к левому краю */
  gap: var(--sp-3);
  text-align: center;
}
/* Телефон — крупнее, акцент строки. ЛК — текст-ссылка как навигация (не кнопка).
   nowrap — номер одной строкой.

   ФИКС ЯНДЕКС.БРАУЗЕРА (номер «таял», последняя цифра появлялась только на hover):
   sidebar промотирован в композитный слой через backdrop-filter:blur. Яндекс
   растеризует строку в текстуру слоя и округляет ШИРИНУ вниз → правый край
   последнего глифа срезается; hover форсит re-measure/repaint и цифра возвращается.
   Лечение БЕЗ нового слоя (translateZ сам глючит так же): даём строке
   display:inline-block + ощутимый запас справа (padding-right) — измеренная
   ширина бокса заведомо больше текста, округление не задевает глиф. */
.app-sidebar__phone {
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
  padding-right: 0.45em;   /* запас справа от последней цифры — гарантия от среза */
  padding-left: 0.45em;    /* симметрия для центрирования */
}
.app-sidebar__lk {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.7);
  transition: color var(--duration-fast) var(--ease-out);
}
.app-sidebar__lk:hover { color: #fff; }
/* «Контакты» в подвале сайдбара — крупнее и заметнее (десктоп, над тёмным hero).
   Только размер/вес + яркость; цвет в мобильном drawer и solid-режиме перекрывают
   правила ниже/выше с большей специфичностью. */
.app-sidebar__lk--lg {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.92);
}

/* Мобильный drawer (<769px) — белый фон (см. sidebar.js), поэтому текст графитовый,
   а не белый, как над тёмным hero на десктопе. */
@media (max-width: 768px) {
  .app-sidebar__brand,
  .app-sidebar__phone { color: var(--color-text); }
  .app-sidebar__link { color: var(--color-text-on-grey); }
  .app-sidebar__link:hover { background: rgba(20,18,16,0.06); color: var(--color-text); }
  .app-sidebar__link[aria-current="page"] { color: var(--color-text); }
  .app-sidebar__footer { border-top-color: var(--color-grey-200); }
  .app-sidebar__lk { color: var(--color-text-on-grey); }
  .app-sidebar__lk:hover { color: var(--color-text); }
}

/* ──────── MOBILE HEADER (<769px) ──────── */

.app-header {
  display: none;
  grid-area: header;
}

@media (max-width: 768px) {
  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    height: var(--header-h);
    padding: 0 var(--sp-5);
    /* Матовая ТЁМНАЯ прозрачная плашка (frosted dark glass) — белое лого.
       Плотность достаточна, чтобы лого читалось и над светлыми баннерами. */
    background: rgba(20, 18, 16, 0.58);
    backdrop-filter: saturate(125%) blur(16px);
    -webkit-backdrop-filter: saturate(125%) blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: var(--z-header);
    transition: transform var(--duration-fast) var(--ease-out),
                background var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out);
  }
  /* На контенте — плотнее, но тот же тёмный матовый тон (не светло-серый) */
  .app-header.is-solid {
    background: rgba(20, 18, 16, 0.64);
    border-bottom-color: rgba(255, 255, 255, 0.10);
    backdrop-filter: saturate(130%) blur(18px);
    -webkit-backdrop-filter: saturate(130%) blur(18px);
  }
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  min-height: var(--tap-target-min);     /* WCAG 2.2 на mobile */
  padding-block: 4px;
  color: #fff;                            /* «Век» белым — плашка тёмная матовая в любом состоянии */
}

/* ──────── КНОПКА «ЗАПИСАТЬСЯ» — белый pill + вращающееся серебристое свечение ──────── */
@property --signup-r {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.signup-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  text-decoration: none;
  isolation: isolate;
  /* вращающийся серебристо-металлический conic-gradient как «бордер-свечение» */
  background: conic-gradient(from var(--signup-r),
    #d8d8dd, #ffffff, #aeaeb4, #ffffff, #c6c6cc, #ffffff, #d8d8dd);
  box-shadow: 0 2px 10px rgba(20, 18, 16, 0.14),
              0 0 14px rgba(220, 220, 228, 0.55);
  animation: signup-rotate 4s linear infinite;
  transition: box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.signup-btn::after {           /* белая заливка внутри — остаётся тонкий вращающийся серебряный кант */
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--color-white);
  z-index: 1;
}
.signup-btn__label {
  position: relative;
  z-index: 2;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--color-text);
  white-space: nowrap;
}
.signup-btn__logo {
  position: relative;
  z-index: 2;                 /* над белой заливкой ::after */
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 7px;
}
.signup-btn:hover {
  box-shadow: 0 3px 14px rgba(20, 18, 16, 0.18),
              0 0 22px rgba(214, 214, 224, 0.75);
}
.signup-btn:active { transform: scale(0.97); }
.signup-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@keyframes signup-rotate {
  to { --signup-r: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .signup-btn { animation: none; }
}

/* ──────── ВЕРХНЯЯ МАТОВАЯ ПОЛОСА (десктоп ≥769px) ──────── */
/* Зеркалит сайдбар: прозрачная тёмная над hero → матовая светлая при скролле
   (.is-solid вешает sidebar.js). Идёт от правого края сайдбара до края экрана,
   образуя с сайдбаром L-рамку. На мобиле скрыта. */
.app-topbar { display: none; }
@media (min-width: 769px) {
  .app-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    height: var(--header-h);
    padding-inline: var(--sp-6);
    z-index: var(--z-header);
    /* тот же прозрачный матовый тон, что у сайдбара — единая L-рамка */
    background: rgba(20, 18, 16, 0.46);
    backdrop-filter: saturate(118%) blur(7px);
    -webkit-backdrop-filter: saturate(118%) blur(7px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out);
  }
  .app-topbar.is-solid {
    background:
      linear-gradient(180deg, rgba(248, 248, 246, 0.94) 0%, rgba(243, 242, 238, 0.9) 100%);
    border-bottom-color: var(--color-grey-200);
    backdrop-filter: saturate(135%) blur(18px);
    -webkit-backdrop-filter: saturate(135%) blur(18px);
  }
  .app-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .app-topbar .signup-btn { height: 40px; }

  /* Резервируем верх под полосу; геро full-bleed подтягивается под неё */
  main { padding-top: var(--header-h); }
}

/* ──────── MAIN CONTENT ──────── */

main {
  grid-area: main;
  min-width: 0;             /* предотвращаем grid overflow */
}

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-page);
}

/* ════════════════════════════════════════════════════════════════
   ПЛАВНЫЕ ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ (View Transitions)
   Сайт многостраничный (полная перезагрузка при переходе). Cross-document
   View Transitions дают мягкий кроссфейд вместо «скачка». Сайдбар и верхняя
   полоса помечены отдельными именами — анимируются как сквозные элементы,
   поэтому смена прозрачное↔матовое стекло происходит плавно, без рывка.
   Прогрессивное улучшение: где API не поддержан (Firefox) — обычная навигация.
   ════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

@media (min-width: 769px) {
  .app-sidebar { view-transition-name: app-sidebar; }
  .app-topbar  { view-transition-name: app-topbar; }
}

/* Кроссфейд основного контента (root = всё, кроме именованных элементов) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Сайдбар/полоса — мягкий кроссфейд стекла */
::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar),
::view-transition-old(app-topbar),
::view-transition-new(app-topbar) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

.section {
  padding-block: var(--sp-section);
}

.section--white      { background: var(--color-white); }
.section--paper      { background: var(--color-paper); }            /* hero / отзывы */
.section--grey       { background: var(--color-bg-section); }
.section--grey-alt   { background: var(--color-bg-section-alt); }
.section--warm-grey  { background: var(--color-warm-grey); }        /* manifest */
.section--coral-tint { background: var(--color-accent-tint); }      /* контакты */
.section--warm-black {                                              /* footer */
  background: var(--color-warm-black);
  color: var(--color-white);
}
.section--inverse    { background: var(--color-black); color: var(--color-white); }
.section--bleed      {           /* full-bleed, без бокового padding контейнера */
  padding-inline: 0;
}

/* ──────── MOBILE BOTTOM TAB BAR — плавающая пилюля (<769px) ──────── */
/* МОБИЛЬНОЕ. Десктоп не затрагивает: .app-bottom-nav { display:none } вне @media. */

.app-bottom-nav {
  display: none;
  grid-area: bottom;
}

@media (max-width: 768px) {
  /* Плавающая по центру пилюля над низом экрана (не во всю ширину) */
  .app-bottom-nav {
    display: block;
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 24px));
    z-index: var(--z-mobile-bottom-nav);
    transition: transform var(--duration-normal) var(--ease-out-expo);
  }
  /* Скрытие (клавиатура iOS) — классом, чтобы не ломать центрирующий translateX */
  .app-bottom-nav.is-hidden {
    transform: translate(-50%, 180%);
  }
  /* Резервируем место под плавающий бар, чтобы контент не прятался */
  body {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 24px);
  }
}

.app-bottom-nav__list {
  position: relative;
  height: var(--bottom-nav-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-full);
  box-shadow: 0 14px 34px rgba(20, 18, 16, 0.18), 0 3px 10px rgba(20, 18, 16, 0.08);
}

/* Скользящий активный индикатор (мягкий коралловый pill) */
.app-bottom-nav__indicator {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: var(--ind-w, 0px);
  transform: translateX(var(--ind-x, 0px));
  background: rgba(20, 18, 16, 0.07);     /* нейтрально-серая подложка в тон сайта */
  border-radius: var(--radius-full);
  opacity: 0;                              /* JS включает, когда активна вкладка из этого меню */
  pointer-events: none;
  z-index: 0;
  transition: transform 460ms cubic-bezier(0.34, 1.35, 0.5, 1),
              width 460ms cubic-bezier(0.34, 1.35, 0.5, 1),
              opacity 200ms var(--ease-out);
}
.app-bottom-nav__list.is-ready .app-bottom-nav__indicator { opacity: 1; }

.app-bottom-nav__link {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: var(--tap-target-min);     /* WCAG 2.2 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}
.app-bottom-nav__link:hover {
  color: var(--color-text);
  text-decoration: none;
}
/* Active — графит + weight + filled icon + серая подложка (несколько сигналов,
   не только цвет — SC 1.4.1). Без кораллового, чтобы не было красной подсветки. */
.app-bottom-nav__link[aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}
.app-bottom-nav__link[aria-current="page"] .icon--outline { display: none; }
.app-bottom-nav__link:not([aria-current="page"]) .icon--filled { display: none; }

.app-bottom-nav__icon {
  width: 24px;
  height: 24px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .app-bottom-nav__indicator { transition: opacity 200ms var(--ease-out); }
  .app-bottom-nav { transition: none; }
}