/* ============================================================
   firmbaza top-pages.css — фирменные стили кнопок для страниц
   баз (top/*.html). Копия стилей Studio-JQ с главной страницы,
   чтобы кнопки «Купить» / «Примеры выгрузок» / CTA выглядели
   как в карточках маркетплейсов.
   ============================================================ */

/* ===== Firma Studio-JQ: переменные ===== */
:root {
  --jq-coral: #ff5b2e;
  --jq-violet: #7b5cff;
  --jq-lime: #c8f04b;
  --jq-yellow: #ffc531;
  --jq-pink: #ff5fa2;
  --jq-blue: #2e5bff;
  --jq-ink: #0f172a;
  --jq-grad: linear-gradient(120deg, #ff5b2e 0%, #ff5fa2 32%, #7b5cff 65%, #2e5bff 100%);
}

/* ===== Базовая jq-кнопка (как на главной и в карточках MP) ===== */
.jq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 800;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .9rem 1.8rem;
  border-radius: 9999px;
  background: #0f172a;
  color: #fff;
  border: 2px solid #0f172a;
  box-shadow: 5px 5px 0 #0f172a;
  transition: all 180ms ease-out;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.jq-btn:hover {
  background: var(--jq-coral);
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 #0f172a;
}
.jq-btn:active {
  transform: translate(2px,2px);
  box-shadow: 0 0 0 #0f172a;
}
.jq-btn-light {
  background: #fff;
  color: #0f172a;
}
.jq-btn-light:hover { background: var(--jq-lime); }
.jq-btn-coral {
  background: var(--jq-coral);
  color: #fff;
}
.jq-btn-coral:hover { background: var(--jq-pink); }
.jq-btn-primary { background: var(--jq-coral); color: #fff; }
.jq-btn-primary:hover { background: var(--jq-pink); }
.jq-btn-lime { background: var(--jq-lime); color: #0f172a; }
.jq-btn-lime:hover { background: var(--jq-yellow); }

/* ===== Чип (бейдж в hero «Популярное (ТОП) · 1 000 ₽») ===== */
.jq-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 9999px;
  font-weight: 800;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #fff;
  color: #0f172a;
  border: 2px solid #0f172a;
  box-shadow: 3px 3px 0 #0f172a;
}

/* ===== Дата-пилюля «Обновлено …» на карточках ===== */
.card-date {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 9999px;
  padding: .25rem .65rem;
  margin-top: .75rem;
}
.card-date i { color: #059669; font-size: .8rem; }
.card-date--maps { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.card-date--maps i { color: #d97706; }

/* ===== Мобильные тап-таргеты ===== */
@media (max-width: 640px) {
  .jq-btn {
    min-height: 44px;
    width: 100%;
    justify-content: center;
    padding: .9rem 1.2rem;
    font-size: .8rem;
  }
  .jq-chip { font-size: .7rem; }
}

/* ============================================================
   Related-bases v2 — научная перелинковка (тематические кластеры)
   ============================================================ */
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 900px) { .rel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .rel-grid { grid-template-columns: 1fr; } }

.rel-card {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  text-decoration: none;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
  min-height: 44px;
}
.rel-card:hover {
  border-color: var(--jq-coral, #ff5b2e);
  box-shadow: 4px 4px 0 rgba(15,23,42,.06);
  transform: translateY(-2px);
}
.rel-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  background: #f1f5f9;
  color: #475569;
  transition: background 160ms ease-out, color 160ms ease-out;
}
.rel-card:hover .rel-icon { background: var(--jq-coral, #ff5b2e); color: #fff; }
.rel-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.rel-title {
  font-weight: 700; font-size: .92rem; line-height: 1.3; color: #0f172a;
  text-decoration: none;
}
.rel-card:hover .rel-title { color: var(--jq-coral, #ff5b2e); text-decoration: none; }
.rel-hint { font-size: .78rem; line-height: 1.35; color: #64748b; }
.rel-price {
  margin-top: .3rem;
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  color: #059669; background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px; padding: .12rem .55rem;
  align-self: flex-start;
}
.rel-footer {
  display: flex; flex-wrap: wrap; gap: .5rem .5rem; align-items: center;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px dashed #cbd5e1;
}
.rel-footer a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: #334155; background: #fff;
  border: 1.5px solid #e2e8f0;
  text-decoration: none;
  transition: all 150ms ease-out;
  min-height: 44px;
}
.rel-footer a:hover { background: #0f172a; color: #fff; border-color: #0f172a; text-decoration: none; }