/*
 * Страницы продукта /product/* (Фаза 8: /product/chat, /product/reports).
 * SITE_IMPROVEMENT_PLAN.md §8 / Р3 / Р5 / Р17.
 *
 * Слой поверх site.css/tokens.css. Фейк-экраны на токенах переиспользуют qu-*
 * из site-usage.css (грузится вместе с этим файлом) — не дублируем компонент.
 * Здесь — только раскладка страницы продукта: showcase (копия ↔ экран) и блок
 * связанных модулей (рёбра между модулями, Р3). Грузится только на product-страницах.
 */

/* ── Showcase: копия + фейк-экран рядом ── */
.prod-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem; align-items: center; }
.prod-showcase.reverse .prod-showcase-copy { order: 2; }
.prod-showcase .ql-usage-screen { max-width: 480px; width: 100%; margin-inline: auto; }

/* ── Список «что внутри» (фичи раздела) ── */
.prod-feature {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); height: 100%;
}
.prod-feature .pf-ic {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--accent-subtle); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: .85rem;
}
.prod-feature h4 { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--ink); margin-bottom: .35rem; }
.prod-feature p { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; margin: 0; }

/* ── Связь с другими модулями (рёбра, Р3) ── */
.prod-connect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.prod-connect-card {
  display: block; text-decoration: none;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem; transition: transform var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
}
.prod-connect-card:hover { transform: translateY(-3px); border-color: rgba(13, 148, 136, .3); box-shadow: var(--shadow-md); }
.prod-connect-card .pc-top { display: flex; align-items: center; gap: .6rem; }
.prod-connect-card .pc-ic { color: var(--accent); font-size: 1.2rem; }
.prod-connect-card .pc-name { font-weight: var(--weight-bold); color: var(--ink); font-size: var(--text-sm); }
.prod-connect-card .pc-edge { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: .55rem; line-height: 1.55; }
.prod-connect-card .pc-edge i { color: var(--accent); font-size: .7rem; margin-right: .25rem; }

@media (max-width: 900px) {
  .prod-showcase { grid-template-columns: 1fr; gap: 1.9rem; }
  .prod-showcase.reverse .prod-showcase-copy { order: 0; }
  .prod-showcase .ql-usage-screen { max-width: 520px; }
}