/* ============================================================
   Коммерческая страница ниши (src/components/NichePage.astro) — поверх home-v2.css.
   Только токены из tokens.css; ширины перелома — 560 / 720 / 900 / 1240.
   ============================================================ */

/* --- Первый экран: по концепту главной v2, лёгкий — короткий заголовок, одна фраза, кнопки, строка фактов;
   справа карточка «сколько пациентов ищут» в тысячах и две карточки цифр. Колонки по верху. --- */
.niche-hero .hero-2-inner { align-items: start; }
.niche-facts { font-weight: 600; color: var(--c-ink-muted); }
.niche-card { padding: 20px 22px 16px; }
.niche-card .hero-2-card-head { margin-bottom: 14px; }
.niche-card .hero-2-card-site { font-size: 15px; }
.niche-card .niche-bar-row { grid-template-columns: minmax(0, 1fr) 34% 70px; }
.niche-card .niche-bar-name { white-space: normal; font-size: 13px; }   /* названия направлений не обрезаются */
.niche-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 40% 76px; align-items: center; gap: 10px; margin-bottom: 9px; }
.niche-bar-row:last-child { margin-bottom: 0; }
.niche-bar-name { font-size: 13.5px; line-height: 1.25; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.niche-bar { display: block; height: 14px; border-radius: 7px; background: var(--c-mist); overflow: hidden; }
.niche-bar i { display: block; height: 100%; width: var(--w); background: var(--c-bar); border-radius: 7px; transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.niche-bar-row:first-child .niche-bar i { background: var(--c-primary-deep); }
.niche-bar-row b { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; text-align: right; white-space: nowrap; color: var(--c-ink); }
.niche-demand-total { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--c-ink-muted); }
.niche-hero .hero-2-float b { font-size: 28px; letter-spacing: -0.03em; }
@media (max-width: 720px) {
  .niche-facts { order: 2; margin-top: var(--space-4); }
}
@media (max-width: 560px) {
  .niche-card { padding: 16px; }
  .niche-bar-row { grid-template-columns: minmax(0, 1fr) 64px; gap: 2px 10px; margin-bottom: 10px; }
  .niche-bar-name { grid-row: 1; grid-column: 1; white-space: normal; }
  .niche-bar-row b { grid-row: 1; grid-column: 2; }
  .niche-bar-row .niche-bar { grid-row: 2; grid-column: 1 / -1; height: 9px; }
}
/* служебный переключатель внизу на телефоне — компактнее, чтобы не закрывал кнопки */
@media (max-width: 560px) { .home-v2 .style-switch { font-size: 10px; padding: 6px 10px; gap: 6px; bottom: 8px; } }

/* --- Спрос и ответы нейросетей по направлениям: текст и переключатель слева, график справа --- */
.niche-demand-wrap { background: var(--c-surface); }
.niche-demand-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-10); align-items: start; }
.niche-demand-copy .h2 { margin-bottom: var(--space-3); letter-spacing: -0.02em; }
.niche-demand-copy .text-large { font-family: var(--font-read); font-size: 18px; line-height: 1.5; margin-bottom: var(--space-5, 20px); }
.niche-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.niche-toggle-btn, .niche-tab {
  font-family: var(--font-text); font-size: 13px; font-weight: 700; line-height: 1.2;
  padding: 9px 14px; border-radius: var(--radius-pill); border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-ink-muted); cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.niche-toggle-btn:hover, .niche-tab:hover { border-color: var(--c-primary); color: var(--c-primary); }
.niche-toggle-btn.is-on, .niche-tab.is-on { background: var(--c-primary); color: var(--c-surface); border-color: var(--c-primary); }
.niche-demand { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 22px 24px; }
.niche-demand .niche-bar-row:first-child .niche-bar i { background: var(--c-bar); }
@media (max-width: 900px) { .niche-demand-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 560px) { .niche-demand { padding: 16px; } }

/* --- Плашка цифр сразу под логотипами --- */
/* Плашка под первым экраном для гостей из других регионов (Андрей, 22.10.2026): исследование по Москве, метод — везде.
   Данные — regionNote в json ниши; кнопка открывает ту же форму заявки. */
.niche-region { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 16px 22px; border: 1px solid var(--c-border); border-left: 4px solid var(--c-hot); border-radius: var(--radius-lg); background: var(--c-surface); }
.niche-region-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-hot-soft); color: var(--c-hot); }
.niche-region-icon svg { width: 18px; height: 18px; }
.niche-region p { flex: 1 1 380px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-ink-soft); }
.niche-region p b { color: var(--c-ink); }
.niche-region .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .niche-region { padding: 14px 16px; } .niche-region .btn { width: 100%; } }

/* Метод исследования (Андрей, 22.10.2026): четыре шага с номерами, данные — method в json ниши */
.niche-method .who-2-k { font-size: 22px; letter-spacing: 0; color: var(--c-hot); }

.niche-band { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.niche-band .results-2-band { margin-bottom: 0; }

/* --- Лидеры: вкладки и таблица с полосами --- */
.niche-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: var(--space-6); }
.niche-tab { font-size: 14px; padding: 10px 18px; }
.niche-table { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-card); overflow: hidden; }
.niche-table[hidden] { display: none; }
.niche-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 70px 70px 80px 50px 70px;
  gap: 12px; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--c-border); font-size: 14px;
}
.niche-row:last-child { border-bottom: 0; }
.niche-row--head { background: var(--c-bg); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-muted); }
.niche-row .nm { font-family: var(--r-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 13px; font-weight: 700; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.niche-row .bar { display: block; height: 10px; border-radius: 5px; background: var(--c-mist); overflow: hidden; }
.niche-row .bar i { display: block; height: 100%; width: var(--w); background: var(--c-bar-soft); border-radius: 5px; }
.niche-row:nth-child(2) .bar i { background: var(--c-primary-deep); }   /* первая строка данных — лидер */
.niche-row .num { font-weight: 800; text-align: right; color: var(--c-ink); }
.niche-row .mut { text-align: right; font-size: 13px; color: var(--c-ink-muted); }
.niche-row--head .num, .niche-row--head .mut { font-weight: 800; color: var(--c-ink-muted); font-size: 11px; }
.niche-note { max-width: 820px; margin: var(--space-6) auto 0; text-align: center; font-family: var(--font-read); font-size: 16px; line-height: 1.55; color: var(--c-ink-muted); }
@media (max-width: 900px) {
  .niche-row { grid-template-columns: minmax(0, 1fr) 60px; gap: 4px 10px; padding: 12px 16px; }
  .niche-row .bar { grid-column: 1 / -1; }
  .niche-row .mut, .niche-row--head { display: none; }
}

/* --- Барьер входа: карточки направлений --- */
.niche-pills { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.niche-pills li { font-size: 13.5px; line-height: 1.35; color: var(--c-ink-muted); padding-left: 14px; position: relative; }
.niche-pills li::before { content: "•"; position: absolute; left: 0; color: var(--c-primary); font-weight: 700; }
.niche-pills li b { color: var(--c-ink); font-weight: 700; }

/* --- Статьи клиник приводят пациентов --- */
.niche-art { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-card); overflow: hidden; }
.niche-art-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--c-border); }
.niche-art-row:last-child { border-bottom: 0; }
.niche-art-row--head { background: var(--c-bg); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-muted); }
.niche-art-row .nm { font-weight: 800; font-size: 14px; }
.niche-art-row .tp { font-family: var(--font-read); font-size: 16px; line-height: 1.4; color: var(--c-ink); }
.niche-art-row .tp i { display: block; font-style: normal; font-family: var(--font-text); font-size: 12.5px; color: var(--c-ink-muted); margin-top: 2px; }
.niche-art-row .num { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--c-primary); text-align: right; }
.niche-art-row--head .num { font-size: 11px; color: var(--c-ink-muted); }
.niche-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.niche-total { background: var(--b-blue-light); border: 1px solid var(--c-primary); border-radius: var(--radius-card); padding: 20px 22px; }
.niche-total b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--c-primary-deep); line-height: 1.05; }
.niche-total span { display: block; font-size: 14px; line-height: 1.4; color: var(--c-ink-muted); margin-top: 6px; }
@media (max-width: 900px) {
  .niche-art-row { grid-template-columns: minmax(0, 1fr) 90px; }
  .niche-art-row .nm { grid-column: 1 / -1; }
  .niche-art-row--head { display: none; }
  .niche-art-row .num { font-size: 20px; }
  .niche-totals { grid-template-columns: 1fr; }
}

/* --- Чат-ассистенты --- */
.niche-chat-chart { max-width: 820px; margin: 0 auto; }
.niche-chat-chart .r2-row { grid-template-columns: 110px 1fr 64px; margin-bottom: 4px; }
.niche-chat-note { font-size: 12.5px; line-height: 1.4; color: var(--c-ink-muted); margin: 0 0 12px 120px; }
@media (max-width: 560px) { .niche-chat-note { margin-left: 0; } }

/* --- План для клиники: шаги списком, номер слева, текст справа --- */
.niche-plan { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; gap: var(--space-3); }
.niche-plan .process-2-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 18px; align-items: start; padding: 22px 26px; background: var(--c-surface); }
.niche-plan .process-2-step .process-2-num { grid-row: 1 / span 2; }
.niche-plan .process-2-step h3 { font-size: 19px; margin: 6px 0 0; }
.niche-plan .process-2-step > p { font-size: 16px; line-height: 1.5; }
@media (max-width: 560px) { .niche-plan .process-2-step { padding: 18px; grid-template-columns: 36px minmax(0, 1fr); } }