/* Places: Archive — верхняя вставка (эйбраù + заголовок + подзаголовок), Site/v2/arch-place.html.
   Один HTML-виджет внутри контейнера, как cta1.css/manifesto.css. */

.elementor-element-vgpahroot1 {
  border-bottom: var(--vg-border-width) solid var(--vg-ink);
  background-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(12px);
  padding: 0 16px;
}
@media (min-width: 768px) { .elementor-element-vgpahroot1 { padding: 0 24px; } }
@media (min-width: 1025px) { .elementor-element-vgpahroot1 { padding: 0 30px; } }

.vgpah__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px 0;
}
@media (min-width: 1025px) {
  .vgpah__inner { flex-direction: row; align-items: flex-end; padding: 40px 0; }
}

.vgpah__eyebrow {
  margin: 0 0 12px;
  font-family: var(--vg-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--vg-primary);
}

.vgpah__h1 {
  margin: 0;
  font-family: var(--vg-font-body);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
  color: var(--vg-ink);
}
@media (min-width: 640px) { .vgpah__h1 { font-size: 60px; } }

.vgpah__accent {
  font-family: var(--vg-font-serif);
  font-style: italic;
}

.vgpah__lead {
  margin: 0;
  max-width: 28rem;
  font-family: var(--vg-font-body);
  font-size: 16px;
  line-height: 1.625;
  color: rgba(22, 32, 50, .65);
}

/* Обёртка колонок (фильтр / результаты / карта) — Elementor даёт этому контейнеру сплошной
   непрозрачный белый background, который сидит МЕЖДУ фиксированным mesh-градиентом страницы
   (.vg-hero-bg, position:fixed, z-index:-20) и полупрозрачными фонами сайдбара/карточек ниже
   по дереву. Сайдбар (places-sidebar.css) и карточки (places-cards.css) сами по себе уже
   полупрозрачны 1:1 с arch-place.html — но просвечивали сквозь этот белый слой, а не сквозь
   градиент. Убираем фон контейнера, чтобы градиент был виден сквозь центральный контент, как
   в исходном дизайне (arch-place.html) — цвет постепенно гаснет с прокруткой/дальше от шапки. */
.elementor-element-286d87ec {
  background-color: transparent !important;
}


/* --- Меню разделов каталога — прикреплено вплотную к шапке сайта (второй полосой, отдельный контейнер vgcatmenu1
   перед vgpahroot1 в _elementor_data), НАД hero-панелью, не внутри неё — замена первой версии
   (была внутри .vgpah__inner, отдельные цветные кнопки с рамкой — отклонено после итераций
   на локальном макете Site/v2/places-archive-switcher.html, 2026-08-29). Обычный текстовый список
   через тонкую черту-разделитель вместо формата кнопок (было визуально тяжело, тянуло взгляд
   от карточек ниже — отзыв пользователя). Наведение/выбор заливают пункт градиентом
   СВОЕГО цвета рубрики (--c инлайн на элементе, палитра 1:1 с цвет↔категория по всему сайту):
   hover — полупрозрачный, клик — стойкая тёмная заливка (is-active) + белый текст одинаково для всех
   пунктов (заливка мешается с --vg-ink, а не с белым — поэтому белый текст читаем даже на
   самых светлых цветах рубрик — жёлтый/голубой). Один активный пункт за раз — JS в самом
   HTML-виджете (vgcatmenuhtml1), не здесь. */
.vgcatmenu {
  position: relative;
  overflow: hidden;
  border-bottom: var(--vg-border-width) solid var(--vg-ink);
  background: linear-gradient(90deg,rgba(0,148,255,.18) 0%,rgba(187,235,255,.22) 25%,rgba(255,239,40,.24) 50%,rgba(255,158,15,.2) 75%,rgba(255,24,90,.16) 100%),#FFF8DF;
}
.vgcatmenu__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 16px;
}
@media (min-width: 768px) { .vgcatmenu__nav { padding: 12px 24px; } }
@media (min-width: 1025px) { .vgcatmenu__nav { padding: 12px 30px; } }
.vgcatmenu__item {
  white-space: nowrap;
  padding: 4px 16px;
  font-family: var(--vg-font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(22, 32, 50, .6);
  text-decoration: none;
  border-radius: 8px;
  transition: background .2s ease, color .2s ease;
}
.vgcatmenu__item + .vgcatmenu__item {
  margin-left: 4px;
  border-left: 1px solid rgba(22, 32, 50, .2);
}
.vgcatmenu__item:hover {
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 45%, transparent), color-mix(in srgb, var(--c) 15%, transparent));
  color: var(--vg-ink);
}
.vgcatmenu__item.is-active {
  background: color-mix(in srgb, var(--c) 55%, var(--vg-ink));
  color: #fff;
  font-weight: 700;
}
@media (max-width: 640px) {
  .vgcatmenu__nav { padding: 10px 14px; }
  .vgcatmenu__item { padding: 4px 10px; font-size: 13px; }
}

/* --- vgcatmenu1 — дефолтный padding Elementor-контейнера оставлял зазор по краям, сквозь который
   просвечивал фиксированный аврора-градиент всей страницы (.vg-hero-bg) — внутренний
   .vgcatmenu растягивался только на оставшуюся после padding ширину, края оставались непокрытыми. */
.elementor-element-vgcatmenu1 {
  padding: 0 !important;
}