/* ═══════════════════════════════════════════════════════════════
   Меню «Сервисы» Trely — стили пакета
   ═══════════════════════════════════════════════════════════════

   У каждой переменной есть значение по умолчанию: на странице,
   где токенов Trely нет, меню возьмёт запасное и будет выглядеть
   так же. Где токены есть — подхватит их.

   Все правила начинаются с .svc — за пределы меню пакет не лезет
   и чужие button/a/ul не трогает.

   Собственный сброс тут не прихоть: на нашем сайте есть глобальный
   `* { margin:0; padding:0 }`, а на чужой странице его может не быть,
   и список меню приехал бы с браузерными отступами и маркерами. */

.svc, .svc *, .svc-scrim, .svc-panel, .svc-panel * { box-sizing: border-box; }

.svc {
  position: relative;
  display: inline-flex;
  font-family: var(--ff, 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  letter-spacing: -0.01em;
}

/* ─────────── кнопка ─────────── */
/* Область нажатия 44 px набрана высотой и отступами, а не кеглем. */
.svc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--line, #E5E2DC);
  border-radius: var(--r-pill, 999px);
  background: var(--white, #FFFFFF);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: inherit;
  color: var(--black, #0F1014);
  cursor: pointer;
}
.svc-btn:hover { border-color: var(--gold, #C6A064); color: var(--gold, #C6A064); }
.svc-dots { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gold, #C6A064); }
.svc-chev { width: 16px; height: 16px; flex: 0 0 16px; opacity: .5; transition: transform .18s; }
.svc-btn[aria-expanded="true"] .svc-chev { transform: rotate(180deg); }
.svc-btn:focus-visible,
.svc-list a:focus-visible {
  outline: 2px solid var(--gold, #C6A064);
  outline-offset: 3px;
  border-radius: var(--r-sm, 8px);
}

/* ─────────── прозрачный слой ─────────── */
/* Без него клик «мимо, чтобы закрыть» проваливается в то, что лежит
   под меню, и уводит человека со страницы: он хотел закрыть. */
.svc-scrim { position: fixed; inset: 0; z-index: 55; }
.svc-scrim[hidden] { display: none; }

/* ─────────── панель ─────────── */
/* Во всю ширину окна с одинаковым зазором по краям и вплотную к шапке:
   панель продолжает шапку вниз, поэтому сверху углов нет, а снизу есть.
   Позиция от окна, а не от кнопки — на 1280 и на 1920 ведёт себя одинаково.
   Высота шапки и зазор — переменные: у другого продукта шапка своя. */
.svc-panel {
  position: fixed;
  top: var(--svc-top, 72px);
  left: var(--svc-gap, 20px);
  right: var(--svc-gap, 20px);
  z-index: 60;
  /* Узор лежит под содержимым и прижат к краям панели. cover, а не
     растяжение: пропорции завитка сохраняются, лишнее просто обрезается. */
  background: var(--white, #FFFFFF) url("panel-bg.7ba6f23a.webp") right center / cover no-repeat;
  border: 1px solid var(--line, #E5E2DC);
  border-top: none;
  border-radius: 0 0 var(--r-xl, 32px) var(--r-xl, 32px);
  box-shadow: var(--sh-soft, 0 4px 24px rgba(39, 60, 63, .06));
  /* Сверху воздуха больше, чем снизу, — как на макете: панель растёт
     от шапки, и верхний отступ отделяет её от неё. */
  padding: 48px var(--s-4, 32px) 36px;
  text-align: left;
  overflow: hidden;
}
.svc-panel[hidden] { display: none; }

/* ─────────── колонки ─────────── */
/* По верхнему краю и по содержимому: у одного продукта пункт один,
   у другого пять — растянуть короткие значит добить их пустотой.
   Не сжимаются: иначе короткий пункт ломается на две строки
   из-за длинного соседа по колонке. */
/* Зазор между колонками — padding, а не gap: линия под названиями
   продуктов должна идти сплошной, а gap разорвал бы её на промежутках.
   Список выходит в этот зазор отрицательным полем и возвращает его себе
   своим padding — сама линия смыкается, пункты остаются в колонке.
   Последняя колонка растянута, чтобы линия дошла до края содержимого. */
.svc-grid { display: flex; align-items: flex-start; gap: 0; }
.svc-col { flex: none; min-width: 0; padding-right: 36px; }
.svc-col:last-child { flex: 1; padding-right: 0; }
.svc-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--black, #0F1014);
  white-space: nowrap;
}
.svc-note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray, #6B6F71);
  margin: 2px 0 0;
  white-space: nowrap;
}
/* Линия отделяет названия продуктов от пунктов, воздух вокруг неё
   тот же сверху и снизу. */
.svc-list {
  list-style: none;
  margin: var(--s-3, 24px) -36px 0 0;
  padding: 48px 36px 0 0;
  border-top: 1px solid var(--line, #E5E2DC);
  display: flex;
  flex-direction: column;
}
.svc-list li { margin: 0; padding: 0; list-style: none; }
/* Строка нажимается пальцем: 36 px высоты плюс отступы. */
.svc-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 36px;
  max-width: 300px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--gray, #6B6F71);
  text-decoration: none;
}
.svc-list a:hover { color: var(--gold, #C6A064); }
/* Значок держится первой строки: у длинной подписи выравнивание
   по центру увело бы его на середину блока. */
.svc-ico { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: var(--gold, #C6A064); }

/* ─────────── узкие экраны ─────────── */
/* Кнопка остаётся на любой ширине: это навигация по продуктам,
   на телефоне она нужнее всего. А панель перестаёт быть выпадашкой
   у края и разворачивается во всю ширину — пять колонок в 375 px
   не живут. */
@media (max-width: 900px) {
  .svc-panel {
    max-height: calc(100vh - var(--svc-top, 72px) - 24px);
    overflow-y: auto;
    padding: var(--s-3, 24px);
    border-radius: 0 0 var(--r-lg, 24px) var(--r-lg, 24px);
  }
  .svc-grid { flex-direction: column; gap: var(--s-3, 24px); }
  .svc-col, .svc-col:last-child { flex: none; width: 100%; padding-right: 0; }
  .svc-list { margin: 12px 0 0; padding: 16px 0 0; }
  .svc-name, .svc-note { white-space: normal; }
}
/* Ниже 600 px подпись кнопки не помещается рядом с логотипом
   и «Профилем» — остаётся решётка. Имя для экранного диктора
   держится на aria-label в разметке. */
@media (max-width: 600px) {
  .svc-btn span { display: none; }
  .svc-btn { padding: 0 12px; }
}