/* ============================================================
   Библиотека блоков.

   Это общие кирпичи, а не стили конкретной страницы: карточки,
   врезка-вывод, таблица сравнения, призыв под блоком. Любая страница
   может их использовать, ничего не перерисовывая заново. Появится
   новый вид блока — добавляем сюда, а не в стили страницы.

   Значения — только из tokens.css.
   ============================================================ */

/* --- Сетка карточек --- */
.b-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .b-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Карточка --- */
.b-card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.b-card:hover { box-shadow: var(--shadow-price); }
/* карточка-ссылка: цвет текста не меняем, при наведении рамка фирменная */
a.b-card--link { color: inherit; text-decoration: none; }
a.b-card--link:hover { border-color: var(--c-primary); }
a.b-card--link h3 { color: var(--c-ink); }
.b-card--sm { padding: 20px; }
/* выделенная карточка — та, на которой держится мысль блока */
.b-card--accent { border: 2px solid rgba(41, 130, 255, .25); background: rgba(41, 130, 255, .05); }

.b-card__num {
  font-size: 36px; font-weight: 800; line-height: 1;
  color: var(--c-primary); margin-bottom: var(--space-2);
}
.b-card h3 {
  font-size: var(--text-large); line-height: 1.3; font-weight: 700;
  margin-bottom: var(--space-3);
}
.b-card--sm h3 { font-size: var(--text-base); line-height: var(--text-base-lh); font-weight: 600; margin-bottom: var(--space-2); }
/* карточки-цифры (блок с stat: true): число крупно, первое — оранжевым (14.10.2026) */
.b-card--stat h3 { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: var(--c-primary-deep); margin-bottom: var(--space-3); }
.b-card--stat:first-child h3 { color: var(--c-hot); }
.b-card p {
  font-size: var(--text-base); line-height: 1.6; color: var(--c-ink-muted);
}
.b-card--sm p { font-size: var(--text-sm); line-height: var(--text-sm-lh); }
.b-card__note { font-size: var(--text-sm); font-style: italic; color: var(--c-price-off); margin-top: var(--space-2); }
.b-card__tip {
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--text-sm); line-height: var(--text-sm-lh);
  font-weight: 600; color: var(--c-primary);
}
.b-card ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-2); }
.b-card li { position: relative; padding-left: 16px; font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--c-ink-muted); }
.b-card li::before { content: "•"; position: absolute; left: 0; color: var(--c-primary); }


/* иконка в карточке — как на сайте: квадрат 48 с мягкой подложкой */
.b-card__icon {
  width: 48px; height: 48px; margin-bottom: var(--space-4);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--c-primary-soft); color: var(--c-primary);
}
.b-card__icon svg { width: 24px; height: 24px; }

/* заголовок блока сравнения на сайте мельче обычного */
.h2-sm { font-size: 36px; line-height: 40px; }
@media (max-width: 768px) { .h2-sm { font-size: 28px; line-height: 32px; } }

/* точки под каруселью */
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-6); }
.carousel-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #d1d5db; cursor: pointer; transition: var(--transition);
}
.carousel-dot.active { width: 24px; border-radius: 4px; background: var(--c-primary); }

/* --- Врезка «Вывод» --- */
.b-note {
  max-width: 896px; margin: var(--space-8) auto 0;
  padding: var(--space-8);
  /* сводка под каруселью на сайте во всю ширину и с меньшими полями */
  text-align: center;
  background: linear-gradient(135deg, rgba(41, 130, 255, .06), rgba(41, 130, 255, .02));
  border: 2px solid rgba(41, 130, 255, .2);
  border-radius: var(--radius-card);
}
.b-note h3 { font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: 700; margin-bottom: var(--space-3); }
.b-note p { font-size: var(--text-base); line-height: 1.6; color: var(--c-ink-muted); max-width: 672px; margin: 0 auto; }

.b-note--wide { max-width: none; padding: 20px; background: rgba(41, 130, 255, .05); }

/* мини-плитки и список внутри врезки */
.b-note-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-6); text-align: left; }
.b-note-stat { background: var(--c-surface); border-left: 4px solid var(--c-primary); border-radius: var(--radius-sm); padding: var(--space-4); }
.b-note-stat b { display: block; font-size: var(--text-large); color: var(--c-primary); margin-bottom: 4px; }
.b-note-stat h4 { font-size: var(--text-sm); font-weight: 700; margin-bottom: 4px; }
.b-note-stat p { font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--c-ink-muted); }
.b-note-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); text-align: left; }
.b-note-list li { position: relative; padding-left: 18px; font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--c-ink-muted); }
.b-note-list li::before { content: "✓"; position: absolute; left: 0; color: var(--c-green); font-weight: 700; }
.b-note .b-note-total {
  max-width: none; width: 100%;
  margin-top: var(--space-4);
  background: var(--c-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-xs); line-height: var(--text-xs-lh);
  color: var(--c-ink); text-align: center;
}
.b-note-total strong { color: var(--c-primary); }
@media (max-width: 768px) { .b-note-stats, .b-note-list { grid-template-columns: 1fr; } }

/* Крупная врезка-переход: большие цифры на тёмной плашке — граница между разбором рынка и предложением */
body .b-note.b-note--big { background: var(--c-dark); color: #fff; border: 0; padding: 36px 40px; }
body .b-note.b-note--big h3 { color: #fff; }
body .b-note.b-note--big .b-note-stats { gap: var(--space-4); margin-top: var(--space-4); }
body .b-note.b-note--big .b-note-stat { background: rgba(255, 255, 255, .06); border-left-color: var(--c-dark-accent); padding: 22px 24px; }
body .b-note.b-note--big .b-note-stat b { font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: var(--c-dark-accent); margin-bottom: 8px; }
body .b-note.b-note--big .b-note-stat h4 { font-size: var(--text-base); color: #fff; margin-bottom: 6px; }
body .b-note.b-note--big .b-note-stat p { font-size: var(--text-sm); line-height: 1.45; color: var(--c-dark-muted); }
body .b-note.b-note--big .b-note-total { color: #fff; background: transparent; border: 0; padding: 0; font-size: var(--text-lg); line-height: 1.5; max-width: 900px; margin: var(--space-6) auto 0; }
body .b-note.b-note--big .b-note-total strong { color: var(--c-dark-accent); }
@media (max-width: 768px) { body .b-note.b-note--big { padding: 24px 20px; } body .b-note.b-note--big .b-note-stat b { font-size: 32px; } }

/* --- Сравнение «как обычно / как у нас» ---
   Размеры сняты с живой страницы: колонки по 320px с зазором 16,
   шапка-карточка радиусом 20, ячейки белые с рамкой и радиусом 16. */
.b-compare { overflow-x: auto; }
.b-compare__inner { min-width: 900px; }
.b-compare__head, .b-compare__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
.b-compare__head { margin-bottom: var(--space-6); }
.b-compare__row { margin-bottom: var(--space-4); align-items: stretch; }
.b-compare__side {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-large); font-weight: 700;
}
.b-compare__side--us {
  background: rgba(41, 130, 255, .05);
  border: 2px solid var(--c-primary);
  color: var(--c-primary);
}
.b-compare__label {
  display: flex; align-items: center;
  font-size: var(--text-base); font-weight: 600; color: var(--c-ink);
}
.b-compare__cell {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.b-compare__cell p { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--c-ink-muted); }
.b-badge {
  display: inline-block; margin-bottom: var(--space-2);
  padding: 4px 12px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600;
}
.b-badge--old { background: rgba(239, 67, 67, .1); color: #ef4343; }
.b-badge--new { background: #dcfce7; color: #14532d; }

@media (max-width: 900px) {
  .b-compare__inner { min-width: 0; }
  .b-compare__head { display: none; }
  .b-compare__row { grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-6); }
  .b-compare__label { font-size: var(--text-large); font-weight: 700; }
  /* без шапки нужно подписать, где чья колонка */
  .b-compare__cell::before {
    content: attr(data-side);
    display: block; font-size: var(--text-xs); font-weight: 700;
    color: var(--c-ink-muted); margin-bottom: var(--space-2);
  }
}

/* --- Призыв под блоком --- */
.b-cta { text-align: center; margin-top: var(--space-8); }
.b-cta p {
  font-size: var(--text-base); line-height: 1.6; color: var(--c-ink-muted);
  max-width: var(--measure-text); margin: 0 auto var(--space-4);
}

/* --- перенесено из темы-заплатки 21.09.2026: действующий вид сайта --- */
/* «:root» в селекторе сохраняет прежний вес правила (раньше его давал класс темы на body) */
:root .b-card--accent { border-color: rgba(15, 110, 110, .25); background: rgba(15, 110, 110, .05); }
:root .b-note { background: linear-gradient(135deg, rgba(15, 110, 110, .06), rgba(15, 110, 110, .02)); border-color: rgba(15, 110, 110, .2); }
:root .b-note--wide { background: rgba(15, 110, 110, .05); }

/* Кнопка-ссылка под блоком (Section → link) */
.b-link-row { display: flex; justify-content: center; margin-top: var(--space-8); }

/* Страница контактов (CompanyPage.astro) */
.hero--compact .inner { padding-bottom: var(--space-8); }
.contact-card .contact-value { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--c-primary); margin: 0 0 4px; overflow-wrap: break-word; }
.contact-legal { margin-top: var(--space-6); }
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-list li { font-size: var(--text-base); line-height: 1.5; color: var(--c-ink-muted); }
.contact-list a { color: var(--c-ink); text-decoration: none; }
.contact-list a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }