/* ============================================================
   PassBy — PAGES (контентные страницы: новости, use cases)
   Лёгкий общий слой поверх shared.css:
     - .page-hero      — компактный герой вторичной страницы
     - .page-hero-px   — статичный пиксельный фон (рисует pages.js,
                         лёгкая замена PixelBlast: без WebGL, без анимации)
     - .crumbs         — mono-breadcrumb (единый для новостей и use cases)
     - .page-empty     — общий empty-state (бывший .articles-empty)
     - активный пункт навигации через aria-current="page"

   .price-pay и .final-cta живут в shared.css (общие с лендингом).

   Принципы (см. REDESIGN.md): контентная страница — тихая,
   максимум лёгких hover-микроанимаций, один декоративный слой.
   ============================================================ */

/* ── АКТИВНЫЙ ПУНКТ НАВИГАЦИИ ────────────────────────────── */
.nav-links a[aria-current="page"] { color: var(--text-primary); }
.nav-links a[aria-current="page"]::after { width: 100%; }

/* ── PAGE HERO ───────────────────────────────────────────── */
/* Компактнее лендингового hero: не 100vh, а контентная шапка
   с заголовком раздела. Центрирование — как на лендинге. */
.page-hero {
  position: relative;
  padding: 168px 0 var(--sp-6);
  text-align: center;
  isolation: isolate;
}
.page-hero .crumbs { margin-bottom: var(--sp-3); }

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--sp-3);
}
/* emoji из контента (hero_emoji кейса) перед заголовком */
.page-hero h1 .hero-emoji {
  font-size: 0.7em;
  vertical-align: middle;
  margin-right: 12px;
}
.page-hero .page-sub {
  margin-top: var(--sp-3);
  margin-inline: auto;
  max-width: 560px;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
}
.page-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .page-hero { padding: 148px 0 var(--sp-5); }
  .page-hero .page-sub { font-size: 16px; }
}

/* ── СТАТИЧНЫЙ ПИКСЕЛЬНЫЙ ФОН ──────────────────────────────
   Тот же смысл, что .hero-blast на лендинге (фирменная
   «пиксельная» эстетика), но: без 980КБ pixel-fx.js, без WebGL,
   без анимации — canvas рисуется один раз (pages.js) и просто
   стоит фоном. Маска повторяет маску .hero-blast, чтобы силуэт
   пятна совпадал с лендингом. */
.page-hero-px {
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: radial-gradient(64% 68% at 50% 30%, black, transparent 76%);
  mask-image: radial-gradient(64% 68% at 50% 30%, black, transparent 76%);
  pointer-events: none;
}

/* ── CRUMBS — единый breadcrumb контентных страниц ───────── */
.crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}
.crumbs a { color: var(--text-secondary); transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--accent-2); }
.crumbs .sep { opacity: 0.6; }
.crumbs .current { color: var(--text-primary); }

/* ── PAGE EMPTY — общий empty-state ─────────────────────────
   Используется и в новостях, и в use cases. */
.page-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-secondary);
}
.page-empty svg {
  width: 48px; height: 48px;
  margin: 0 auto var(--sp-3);
  opacity: 0.4;
}
.page-empty h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.page-empty p {
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 14.5px;
}