/* =============================================================================
   GORILLA LIQUID GLASS - iOS 26 «стеклянная поверхность» (Этап B)
   -----------------------------------------------------------------------------
   Единый компонент премиум-стекла: backdrop-filter blur()+saturate(),
   полупрозрачный фон, тонкая светлая обводка, крупные радиусы, мягкая тень.
   Применяется через класс .g-glass (+ модификаторы). ОБЯЗАТЕЛЕН фолбэк для
   браузеров без backdrop-filter (@supports not) - там непрозрачный фон.

   Токены стекла вынесены в :root, чтобы перекрашивать под светлую/тёмную сцену
   одной сменой переменных (см. --g-glass-*). Акцент берётся из brand-tokens
   (var(--g-color-green)), поэтому смена палитры бренда доезжает и сюда.
   ============================================================================= */
:root {
  /* Геометрия */
  --g-glass-radius: 20px;
  --g-glass-radius-sm: 14px;
  --g-glass-border-w: 1px;

  /* Светлая сцена (по умолчанию - текущий светлый сайт) */
  --g-glass-bg: rgba(255, 255, 255, .55);
  --g-glass-bg-strong: rgba(255, 255, 255, .72);
  --g-glass-border: rgba(255, 255, 255, .65);
  --g-glass-border-soft: rgba(0, 0, 0, .06);
  --g-glass-shadow: 0 8px 30px rgba(2, 8, 20, .12), 0 1px 0 rgba(255,255,255,.5) inset;
  --g-glass-blur: 18px;
  --g-glass-saturate: 160%;

  /* Фолбэк-фон (когда backdrop-filter недоступен) */
  --g-glass-fallback-bg: rgba(255, 255, 255, .92);
}

/* --- Тёмная сцена: включается на .g-dark контейнере/родителе --------------- */
.g-dark {
  --g-glass-bg: rgba(20, 24, 28, .48);
  --g-glass-bg-strong: rgba(18, 22, 26, .66);
  --g-glass-border: rgba(255, 255, 255, .14);
  --g-glass-border-soft: rgba(255, 255, 255, .08);
  --g-glass-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 1px 0 rgba(255,255,255,.06) inset;
  --g-glass-fallback-bg: rgba(22, 26, 30, .96);
}

/* =============================================================================
   БАЗОВЫЙ КОМПОНЕНТ
   ============================================================================= */
.g-glass {
  position: relative;
  background: var(--g-glass-bg);
  border: var(--g-glass-border-w) solid var(--g-glass-border);
  border-radius: var(--g-glass-radius);
  box-shadow: var(--g-glass-shadow);
  -webkit-backdrop-filter: blur(var(--g-glass-blur)) saturate(var(--g-glass-saturate));
          backdrop-filter: blur(var(--g-glass-blur)) saturate(var(--g-glass-saturate));
  /* плавность hover/появления */
  transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
}

/* Более плотное стекло (модалки, панели, где под ним пёстрый фон) */
.g-glass--strong {
  background: var(--g-glass-bg-strong);
  --g-glass-blur: 26px;
}

/* Компактный радиус (кнопки, чипсы, мелкие плитки) */
.g-glass--sm { border-radius: var(--g-glass-radius-sm); }

/* Едва заметная верхняя блик-линия (liquid-glass highlight) */
.g-glass--sheen::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%);
}

/* Интерактивное стекло (карточка/кнопка-ссылка) */
.g-glass--interactive { cursor: pointer; }
.g-glass--interactive:hover {
  border-color: rgb(var(--g-green-rgb) / .55);
  box-shadow: 0 12px 40px rgba(2, 8, 20, .18), 0 0 0 1px rgb(var(--g-green-rgb) / .25) inset;
  transform: translateY(-2px);
}
.g-glass--interactive:active { transform: translateY(0); }
.g-glass--interactive:focus-visible {
  outline: none;
  border-color: rgb(var(--g-green-rgb) / .8);
  box-shadow: 0 0 0 3px rgb(var(--g-green-rgb) / .35);
}

/* =============================================================================
   ФОЛБЭК - браузеры без backdrop-filter (Firefox old, встроенные вебвью и т.п.)
   Делаем фон непрозрачным, чтобы контент под «стеклом» оставался читаемым.
   ============================================================================= */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .g-glass {
    background: var(--g-glass-fallback-bg);
  }
  .g-glass--strong { background: var(--g-glass-fallback-bg); }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .g-glass, .g-glass--interactive:hover { transition: none; transform: none; }
}

/* На очень узких экранах чуть уменьшаем радиус, чтобы не «съедало» контент */
@media (max-width: 480px) {
  :root { --g-glass-radius: 16px; --g-glass-radius-sm: 12px; }
}

/* =============================================================================
   Глобальный guard от горизонтального скролла (упор на мобилку).
   overflow-x:clip не создаёт scroll-контейнер → не ломает position:sticky.
   ========================================================================== */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; position: relative; }