/* OpenCard — демо раздела «Гиды и экскурсоводы».
   База: tokens.css + chrome.css + excursii.css (карточки .ex-*, фильтры .ex-fg, FAQ .ex-faq).
   Здесь — только то, чего нет в шаблонах: шапка каталога (.cat-top), карточка гида (.gd-*). */

/* ---------- top (как в tpl_catalog) ---------- */
html { overflow-x: hidden; }
body { background: var(--surface-1); }

.cat-top { background: #fff; border-bottom: 1px solid var(--border); padding: 22px 0 26px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-500); flex-wrap: wrap; margin-bottom: 16px; }
.crumbs a { color: var(--ink-500); } .crumbs a:hover { color: var(--brand-primary); }
.crumbs .sep { color: var(--ink-300); } .crumbs .here { color: var(--ink-900); font-weight: 500; }
.cat-top h1 { font-size: clamp(28px, 3vw, 40px); }
.cat-stats { display: flex; gap: 18px; margin-top: 12px; color: var(--ink-500); font-size: 15px; flex-wrap: wrap; align-items: center; }
.cat-stats .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-300); }
.cat-stats b { color: var(--ink-900); }

.gd-body { padding: 28px 0 90px; }

/* ---------- карточка гида (.ex-card + .gd-*) ---------- */
.gd-card { cursor: pointer; }
.gd-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#5B5BF5,#7C5CFB 50%,#0FB9B1); }
.gd-ava {
  width: 84px; height: 84px; border-radius: 50%; align-self: center;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); color: #3833a4;
  font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(14,17,22,.25); border: 3px solid rgba(255,255,255,.75);
  margin: auto;
}
.gd-name { display: flex; align-items: center; gap: 7px; }
.gd-verified { width: 16px; height: 16px; flex: none; color: var(--brand-primary); }
.ex-guide .gd-verified { align-self: center; }
.gd-cities { font-size: .87rem; color: var(--ink-500,#5b636e); line-height: 1.35; }
.gd-price { font-weight: 700; font-size: 1.02rem; margin-top: 2px; }
.gd-price span { font-weight: 500; font-size: .82rem; color: var(--ink-500,#5b636e); }
.gd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-tag {
  font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2, #EDEFF5); color: var(--ink-700, #2A2F3A);
}
.gd-langs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.gd-lang {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 6px;
  background: var(--info-soft, #EEF0FF); color: var(--brand-primary, #5B5BF5);
  border: 1px solid rgba(91,91,245,.25);
}

/* ---------- фильтры: подписи групп ---------- */
.gd-filter-label { font-size: .82rem; font-weight: 700; color: var(--ink-300, #9AA3B2); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }

/* ---------- CTA-баннер партнёра (по мотивам .ex-xlink) ---------- */
.gd-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0;
  padding: 18px 22px; border-radius: 14px;
  background: linear-gradient(120deg,#EEF0FF 0%,#EAFBFA 100%);
  border: 1px solid rgba(91,91,245,.25);
  color: var(--ink-700); font-size: 15px; line-height: 1.55;
}
.gd-cta b { color: var(--ink-900); }
.gd-cta a.gd-cta-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  background: var(--brand-primary); color: #fff; text-decoration: none; font-weight: 700;
  padding: 11px 20px; border-radius: 12px; white-space: nowrap; font-size: 14px;
}
.gd-cta a.gd-cta-btn:hover { background: var(--brand-primary-hover); }
.gd-cta .gd-cta-note { width: 100%; font-size: .78rem; color: var(--ink-300); }

/* ---------- перелинковка: карточки направлений ---------- */
.ex-cardgrid .ex-city-card .gd-count { display: inline-block; margin-top: 5px; font-size: .78rem; font-weight: 600; background: rgba(255,255,255,.22); padding: 2px 9px; border-radius: 999px; }

@media (max-width: 767px) {
  .gd-cta a.gd-cta-btn { margin-left: 0; width: 100%; justify-content: center; }
  .ex-filter { gap: 8px; }
  /* После закрытия поп-апа не закрываем кнопку экскурсии угловой карточкой. */
  #ocPpmCreative.ocpc-compact { display: none; }
}

/* ---------- статистика спроса (генерируемые страницы) ---------- */
.gd-demand { margin: 0 0 18px; padding: 12px 16px; background: var(--success-soft, #E8F6EE);
  border: 1px solid rgba(22,163,74,.25); border-radius: 12px; color: var(--ink-700); font-size: 14px; line-height: 1.6; }
.gd-demand b { color: var(--ink-900); }

/* ---------- перелинковка: колонки городов ---------- */
.gd-linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 28px; margin: 18px 0 26px; padding: 0; list-style: none; }
.gd-linkgrid .gd-linkcol { display: contents; }
.gd-linkgrid li { margin: 0; padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: 14.5px; }
.gd-linkgrid a { color: var(--brand-primary); text-decoration: none; font-weight: 600; }
.gd-linkgrid a:hover { text-decoration: underline; }
@media (max-width: 767px) { .gd-linkgrid { grid-template-columns: 1fr 1fr; } }

/* фасетные ссылки-пилюли (SEO-навигация каталога /gidy/) */
.ex-fg a.ex-fpill{display:inline-block;text-decoration:none;padding:7px 15px;border-radius:999px;font:inherit;font-size:.9rem;color:var(--muted,#5b636e)}
.ex-fg a.ex-fpill:hover{background:rgba(91,91,245,.08);color:var(--brand-primary,#5B5BF5)}