/* ==========================================================
   product-inline.css
   Дополнительные стили для продуктовых страниц.
   Подключать ПОСЛЕ product.css.
   ========================================================== */

/* ── Анимация «распределённая морская сеть» (морские платформы) ── */
.msp-guard.msp-guard {
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.msp-guard svg { width: 100%; height: auto; display: block; }

/* Сдвиг схемы чуть ниже относительно текстовой колонки —
   визуально уравновешивает более длинный список пунктов слева */
.prd-twocol__aside--shift.prd-twocol__aside--shift {
  margin-top: 28px;
}

/* ── Плашка перелинковки на продуктовых страницах ── */
.prd-linkbox {
  margin-top: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #eef2ff, #dbeafe);
  border: 1px solid #c7d2fe;
  border-left: 4px solid var(--accent);
  border-radius: var(--r-xl);
}
.prd-linkbox p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}
.prd-linkbox p:last-child { margin-bottom: 0; }
.prd-linkbox a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.prd-linkbox a:hover { text-decoration: underline; }

/* Синий вариант плашки-примечания (autonomy note) */
.prd-cost-note.prd-cost-note--info {
  background: #eef2ff;
  border-color: #c7d2fe;
  border-left-color: var(--accent);
  color: var(--text);
}

/* Картинка в двухколоночном блоке (prd-twocol) */
.prd-twocol-img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  display: block;
}

/* ══════════════════════════════════════════════════
   REF-INLINE — значок «i» рядом с термином
   Тот же стиль, что и в статьях блога (article.css /
   inline-extracted.css), продублирован здесь, так как
   продуктовые страницы подключают product.css, а не article.css.
   ══════════════════════════════════════════════════ */
.ref-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin: 0 2px;
  vertical-align: middle;
  background: rgba(79,70,229,.10);
  border: 1px solid rgba(79,70,229,.30);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #4f46e5);
  font-style: normal;
  line-height: 1;
  cursor: help;
  transition: background .15s, border-color .15s;
}
.ref-inline:hover {
  background: rgba(79,70,229,.18);
  border-color: rgba(79,70,229,.5);
}
/* Инверсия для тёмного фона (если ref-inline попадёт в hero/тёмную секцию) */
.prd-hero .ref-inline,
.prd-twocol__aside--dark .ref-inline {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.30);
  color: #c7d2fe;
}
.prd-hero .ref-inline:hover,
.prd-twocol__aside--dark .ref-inline:hover {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

/* ── Тултип, который создаёт product.js (единый для .ref-inline и старого data-tooltip) ── */
.ref-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: Inter, system-ui, sans-serif;
  color: #e2e8f0;
  line-height: 1.55;
  white-space: normal;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.ref-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Список ключевых характеристик оборудования (RF-сканер и т.п.) ── */
.hw-feats {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.hw-feats li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.hw-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 560px) {
  .hw-feats { grid-template-columns: 1fr; }
}

/* ── Иконка + заголовок в аккордеоне «Оборудование» (единая группа слева от шеврона) ── */
.hw-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hw-ic {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.hw-ic svg { width: 100%; height: 100%; }

/* ── Секция с уменьшенным верхним отступом (сокращает промежуток
     между соседними секциями с одинаковым фоном) ── */
.prd-section--tight-top.prd-section--tight-top {
  padding-top: 20px;
}

/* ── «Что обеспечивает система защиты»: 2 главные карточки слева
     от анимации (обтекание) + 4 второстепенные отдельным рядом ── */
.prd-objects--main {
  margin-top: 0;
  gap: 16px;
}
.prd-objects--main .prd-object {
  flex: 1 1 100%;
  padding: 24px 24px 22px;
}
.prd-objects--main .prd-object__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}
.prd-objects--main h3 {
  font-size: 16px;
}
.prd-objects--main p {
  font-size: 15px;
}
.prd-objects--secondary {
  margin-top: 24px;
  gap: 16px;
}
.prd-objects--secondary .prd-object {
  flex: 1 1 250px;
  padding: 18px;
}
.prd-objects--secondary h3 {
  font-size: 14px;
}
.prd-objects--secondary p {
  font-size: 13px;
}
@media (max-width: 720px) {
  .prd-objects--secondary .prd-object { flex: 1 1 100%; }
}

/* Вводный текст без ограничения ширины (на всю ширину блока) */
.prd-section__intro--full.prd-section__intro--full {
  max-width: none;
}

/* ── Утилитарные классы для страницы стадионов ── */
.il-mt-24 { margin-top: 24px; }
.il-mt-20 { margin-top: 20px; }
.il-h3-sub-lg {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin: 36px 0 16px;
}
.il-img-aside {
  width: 100%;
  border-radius: var(--r-lg);
  display: block;
}

/* ── Анимация «идентификация свой/чужой над чашей стадиона» ── */
.stadium-guard.stadium-guard {
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.stadium-guard svg { width: 100%; height: auto; display: block; }

/* ── Точечный сброс обтекания перед блоком, чтобы он не перекрывал float-картинку ── */
.prd-clear.prd-clear {
  clear: both;
}

/* ── Вопросы FAQ как h3 внутри summary — без изменения внешнего вида ── */
.prd-faq summary h3 {
  margin: 0;
  font: inherit;
  color: inherit;
  font-weight: inherit;
}