/* site.css — ручные правила поверх скомпилированного Tailwind (app.css).
   Правится напрямую, без пересборки Tailwind. */

/* ── Курсор-указатель на кликабельных элементах ──────────────────
   Tailwind v4 больше НЕ ставит cursor:pointer на <button> по умолчанию,
   поэтому возвращаем его для всех интерактивных элементов. */
/* ── Страницы «все картинки на всю ширину, 1 в строку» (body.imgfull, по data-doc из плагина) ── */
body.imgfull .article-body img:not(.shrink-0) {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  margin: 1.5rem 0 !important;
}
/* flex-ряды картинок на этих страницах — разложить в столбик */
body.imgfull .article-body [style*="display: flex"] { display: block !important; }

/* ── Hero-слайдер: на мобиле выше (510px), планшет/десктоп — 480px из app.css ── */
@media (max-width: 767px) {
  [data-hero] { height: 510px; }
}

/* ── a11y: только серые текст-метки читаемее ─────────────────────
   Бренд-акцент #ED6C05 НЕ трогаем (остаётся из app.css). Меняем лишь
   мутно-серый ink400 #999999→#6B6B6B (был 2.43:1, стал 4.55:1 на #ededed) —
   это не бренд-цвет, а нечитаемые подписи. */
:root {
  --color-ink400: #6B6B6B;
}

button:not(:disabled),
[role="button"],
label,
summary {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}

/* ── Мегаменю: ссылки разделов ───────────────────────────────────
   Базовый нейтральный цвет + акцентный hover с подчёркиванием. */
.mega-link {
  color: #545454;
  transition: color 0.15s ease;
}
.mega-link:hover {
  color: #ED6C05;
  text-decoration: underline;
}
/* Активный пункт меню = текущая страница (точное совпадение URL, ставит JS).
   Родитель подсвечивается ТОЛЬКО на своей странице; на подпункте — подпункт. */
.mega-active {
  color: var(--color-accent) !important;
  font-weight: 700 !important;
}

/* ── Сайдбар статьи: «Другие статьи» ── */
.article-related {
  transition: color 0.15s ease;
}
.article-related:hover {
  color: #ED6C05;
}

/* ── WYSIWYG-контент статьи (мастер-класс) ───────────────────────
   Тело статьи вставляется CMS-редактором БЕЗ классов у тегов
   (p, h2, h3, ul, ol, li, blockquote, table…). Все стили —
   наследованием через .article-body. Цвета — из токенов Tailwind
   (var --color-*) с hex-фолбэком. */
.article-body {
  font-size: 0.875rem;   /* text-sm */
  line-height: 2;        /* leading-loose */
  color: var(--color-ink600, #525252);
}
.article-body > * + * { margin-top: 1.25rem; }   /* space-y-5 */

/* ── Отступы между абзацами на ЛЮБОЙ глубине ──────────────────────────
   Правило выше (`> * + *`) бьёт только ПРЯМЫХ детей .article-body, а текст
   лежит внутри обёрток TV (#tvcatalogItemInfo.catalog-item__introtext,
   #tvcatalogItemPrice, #tvadditionalInfoCatalogItem и т.п.) — до них оно не
   достаёт, и Tailwind preflight обнуляет p{margin:0} → абзацы слипались.
   Используем margin-TOP у соседних элементов: первый абзац без верхнего
   отступа, последний — без нижнего (лишнего хвоста в блоке не будет). */
.article-body p + p,
.article-body p + ul,  .article-body ul + p,
.article-body p + ol,  .article-body ol + p,
.article-body ul + ul, .article-body ol + ol,
.article-body p + blockquote, .article-body blockquote + p,
.article-body p + table, .article-body table + p { margin-top: 1.25rem; }

/* Внутри боксов первый/последний элемент не должны давать лишних отступов */
.article-body .catalog-item__introtext > :first-child,
.article-body .catalog-item__textprice > :first-child,
.article-body .catalog-item__textadditionalinfo > :first-child { margin-top: 0; }
.article-body .catalog-item__introtext > :last-child,
.article-body .catalog-item__textprice > :last-child,
.article-body .catalog-item__textadditionalinfo > :last-child { margin-bottom: 0; }

.article-body h2 {
  font-size: 1.25rem;    /* text-xl */
  line-height: 1.75rem;
  font-weight: 700;
  padding-top: 1rem;     /* pt-4 */
  color: var(--color-ink800, #333333);
}
.article-body h3 {
  font-size: 1.125rem;   /* text-lg */
  line-height: 1.75rem;
  font-weight: 700;
  padding-top: 0.75rem;
  color: var(--color-ink800, #333333);
}
.article-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink800, #333333);
}
.article-body a {
  color: var(--color-accent, #ED6C05);
  text-decoration: underline;   /* a11y: контент-ссылки различимы не только цветом */
}
.article-body a:hover { text-decoration: none; }
.article-body strong,
.article-body b { font-weight: 700; color: var(--color-ink800, #333333); }
.article-body ul,
.article-body ol { padding-left: 1.5rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-top: 0.25rem; }
.article-body li::marker { color: var(--color-accent, #ED6C05); }
.article-body blockquote {
  border-left: 4px solid var(--color-accent, #ED6C05);
  padding: 0.25rem 0 0.25rem 1.25rem;   /* py-1 pl-5 */
  font-style: italic;
  color: var(--color-ink800, #333333);
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.article-body table {
  width: 100% !important;       /* во всю ширину, перебивая старый инлайн width=Npx */
  height: auto !important;      /* сбрасываем старый инлайн height=Npx */
  clear: both;                  /* таблица начинается ПОД плавающей картинкой, без наложения */
  border-collapse: collapse;
  font-size: 0.875rem;
}
/* на мобиле таблица становится горизонтально-скроллируемой */
@media (max-width: 767px) {
  .article-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* горизонтальная лента без видимого скроллбара (крошки, чипы подкатегорий) */
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar { display: none; }

/* ── Грид-шим для контента старого сайта внутри .article-body ─────
   Воспроизводит колоночную вёрстку (bootstrap row/col, flex-карточки,
   встроенные видео 16:9) без подключения bootstrap. */
.article-body .equipment-list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.25rem 0; }
@media (min-width: 768px) { .article-body .equipment-list { grid-template-columns: 1fr 1fr; } }

.article-body .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: start; margin: 1rem 0; }
.article-body [class*="col-"] { grid-column: span 12; }
@media (min-width: 768px) {
  .article-body .col-md-6 { grid-column: span 6; }
  .article-body .col-md-4 { grid-column: span 4; }
  .article-body .col-md-3 { grid-column: span 3; }
  .article-body .col-md-12 { grid-column: span 12; }
}

.article-body .embed-responsive { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; background: var(--color-line, #F1F1F1); }
.article-body .embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* картинка в 16:9-обёртке заполняет её (как iframe); перебивает imgfull-правило */
.article-body .embed-responsive img,
body.imgfull .article-body .embed-responsive img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
}

/* equipment-hero (как на главной) внутри .article-body — не даём типографике
   .article-body ломать белый крупный заголовок героя */
.article-body .equipment-hero h2 {
  color: #fff;
  font-size: 1.875rem;
  line-height: 1.2;
  padding-top: 0;
}
/* скруглённые края секции (в разметке rounded нет) */
.article-body .equipment-hero {
  border-radius: 0.75rem;
}
/* базовые .article-body img{height:auto} ломают Tailwind h-full/h-24 — возвращаем */
.article-body .equipment-hero .h-full { height: 100% !important; }
.article-body .equipment-hero .h-24  { height: 6rem !important; }

/* выделенный блок «Преимущества…» — карточка на фоне surface */
.article-body .benefits { margin: 1.5rem 0; background: var(--color-surface, #ededed); border-radius: 0.5rem; padding: 1.25rem 1.5rem; }
.article-body .benefits > :first-child { margin-top: 0; }
.article-body .benefits > :last-child { margin-bottom: 0; }
.article-body .text-center { text-align: center; }
.article-body .list-unstyled { list-style: none; padding-left: 0; }
.article-body .list-unstyled li::marker { content: ""; }

/* одиночная НЕплавающая картинка в абзаце — по центру (напр. фото под видео) */
.article-body p > img:only-child:not([style*="float"]) { display: block; margin: 0.5rem auto; }
/* встроенные картинки с width=... : уважаем указанную ширину (не тянуть на всю колонку),
   аспект сохраняем, на узком экране ужимаем по max-width из базового правила. */
.article-body img[width] { height: auto; }
/* плавающие (float:right/left) встроенные картинки: небольшие отступы; на мобиле не плавают */
.article-body img[style*="float"] { max-width: 50%; }
@media (max-width: 767px) {
  .article-body img[style*="float"] { float: none !important; max-width: 100%; display: block; margin: 0.75rem auto !important; }
}
.article-body th,
.article-body td {
  border: 1px solid var(--color-line, #F1F1F1);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.article-body th {
  font-weight: 600;
  background: var(--color-line, #F1F1F1);
  color: var(--color-ink800, #333333);
}
/* зебра + подсветка строки при наведении (только строки данных в tbody) */
.article-body tbody tr:nth-child(even) { background: #f7f6f5; }
.article-body tbody tr:hover { background: #fbe9d8; }   /* лёгкий акцентный тон */
/* мелкие фото товара внутри ячейки таблицы + центрирование числовых колонок */
.article-body td img {
  max-width: 72px;
  height: auto;
  margin: 0;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
}
.article-body table td:not(:first-child),
.article-body table th:not(:first-child) {
  text-align: center;
}

/* ── Вставка карты (Яндекс.Конструктор отдаёт фикс. размер) ──────
   Растягиваем встроенный iframe на всю ширину контейнера. */
.ymap { min-height: 360px; }
.ymap iframe,
.ymap ymaps {
  width: 100% !important;
  min-width: 100%;
  height: 360px !important;
  border: 0;
  display: block;
}

/* ── Хлебные крошки (сниппет Breadcrumbs) ── */
.breadcrumbs-nav a { color: var(--color-accent, #ED6C05); }
.breadcrumbs-nav a:hover { text-decoration: underline; }
.breadcrumbs-nav { color: var(--color-ink400, #999999); }

/* ── Категорийные блоки товара (бывш. цветные боксы) под новый дизайн ──
   catalogCategoryServices (был зелёный) — акцентная карточка;
   additionalInfoCatalogItem (был голубой) — нейтральная карточка. */
.article-body .cat-box { background: var(--color-surface, #ededed); border-radius: 0.5rem; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.article-body .cat-box-accent { border-left: 4px solid var(--color-accent, #ED6C05); }
.article-body .cat-box:empty { display: none; }          /* пустой блок (у товара нет этого TV) — скрыть */
.article-body .cat-box > :first-child { margin-top: 0; }
.article-body .cat-box > :last-child { margin-bottom: 0; }

/* ── YouTube на всю ширину (16:9), только если внутри есть iframe ── */
.article-body .video-embed:has(iframe) { position: relative; width: 100%; padding-top: 56.25%; border-radius: 0.5rem; overflow: hidden; margin: 2rem 0; background: var(--color-line, #F1F1F1); }
.article-body .video-embed:has(iframe) iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Короткое инфо в карточке «новостного» каталога (TV catalogItemInfoShort) ── */
.card-info ul { list-style: disc; padding-left: 1.1rem; }
.card-info ol { list-style: decimal; padding-left: 1.1rem; }
.card-info li { margin-top: 0.15rem; }
.card-info p { margin: 0; }
.card-info p + p, .card-info ul + p, .card-info p + ul { margin-top: 0.4rem; }

/* ── Скрытый визуально, но доступный экранным читалкам/поисковикам (семантический H1) ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }