/*
 * Контентные страницы Фазы 9: /solutions/*, /resources/compare, /guides, /customers.
 * SITE_IMPROVEMENT_PLAN.md §8. Слой поверх site.css/tokens.css; грузится только на
 * этих страницах. Максимально переиспределяем существующие классы (.module-card,
 * .scaffold-grid, .cmp-table) — здесь только то, чего в site.css нет.
 */

/* ── Решения: боли сегмента ── */
.sol-pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.sol-pain {
  display: flex; gap: .85rem; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
}
.sol-pain .sp-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--accent-subtle); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.sol-pain p { font-size: var(--text-sm); color: var(--body); line-height: 1.6; margin: 0; }

/* ── Решения: честная оговорка «кому подходит» ── */
.sol-fit {
  max-width: 760px; margin: 1.5rem auto 0;
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--accent-subtle); border: 1px solid var(--accent-glow);
  border-radius: var(--radius-lg); padding: 1.2rem 1.4rem;
}
.sol-fit i { color: var(--accent); font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; }
.sol-fit p { font-size: var(--text-sm); color: var(--body); line-height: 1.65; margin: 0; }

/* ── Сравнение: подсветка колонки Qualims + обёртка скролла ── */
.cmp-scroll { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cmp-scroll > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table .cmp-hl { background: var(--accent-subtle); color: var(--accent); }
.cmp-table thead .cmp-hl { color: var(--accent); }
.cmp-table td.cmp-hl, .cmp-table th.cmp-hl { border-left: 1px solid var(--accent-glow); border-right: 1px solid var(--accent-glow); }
.cmp-note { font-size: var(--text-xs); color: var(--muted); text-align: center; margin-top: .9rem; }

/* ── Клиенты: честный тёмный блок «будьте среди первых» ── */
.cust-band { position: relative; overflow: hidden; background: var(--dark-bg); color: #fff; padding: 72px 0; }
.cust-band::after {
  content: ''; position: absolute; inset: -30%; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(13, 148, 136, .38) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 95%, rgba(59, 130, 246, .24) 0%, transparent 55%);
  animation: aurora-float 27s ease-in-out infinite alternate;
}
.cust-band > .container { position: relative; z-index: 1; }
.cust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-top: 1.75rem; }
.cust-item { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-lg); padding: 1.2rem 1.3rem; }
.cust-item i { font-size: 1.4rem; color: var(--accent-light); }
.cust-item h4 { font-size: var(--text-base); font-weight: var(--weight-bold); color: #fff; margin: .6rem 0 .35rem; }
.cust-item p { font-size: var(--text-sm); color: rgba(255, 255, 255, .62); line-height: 1.6; margin: 0; }

/* ── Руководства: метка «доступно / готовится» на карточке ── */
.guide-meta {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.guide-meta.ready { color: var(--accent); }
.guide-meta.soon { color: var(--muted); }
.guide-meta i { font-size: .8rem; }

@media (prefers-reduced-motion: reduce) { .cust-band::after { animation: none !important; } }