/* JazzWay «Применение» — раздел отраслей. Токены и компоненты — из общего дизайна сайта
   (jv-variables.css / jv-components.css / jv-category.css): оранж #E94E1B, border #d9d9d9
   1.5px, radius 20px, hover — оранж-обводка + мягкая тень. */

.jvsol-page { padding-bottom: 56px; }

.jvsol__top { margin: 20px 0 6px; }
.jvsol__title {
  font-size: var(--jv-font-size-4xl, 34px); font-weight: var(--jv-font-weight-extrabold, 700);
  color: var(--jv-text-primary, #171717); margin: 0 0 8px; line-height: var(--jv-line-height-heading, 1.15);
}
.jvsol__intro { color: var(--jv-text-secondary, #303131); font-size: var(--jv-font-size-lg, 16px); margin: 0 0 20px; }

/* ---- Заголовок отрасли + требования справа ---- */
.jvsol__top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; }
.jvsol__top-row .jvsol__title { margin: 0; }

/* Вводный текст (отдельным абзацем под заголовком) */
.jvsol__intro-block { margin: 14px 0 20px; }
.jvsol__intro-text {
  color: var(--jv-text-secondary, #303131); font-size: var(--jv-font-size-md, 15px);
  line-height: 1.6; max-width: 74ch; margin: 0;
}

/* Требования: без «пилюль» — иконка + значение */
.jvsol__reqs {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px 20px; margin: 0; padding: 0;
}
.jvsol__req { display: inline-flex; align-items: center; gap: 7px; font-size: var(--jv-font-size-base, 14px); line-height: 1; }
.jvsol__req-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; line-height: 0; flex-shrink: 0;
  color: var(--jv-primary, #E94E1B);
}
.jvsol__req-ico svg { display: block; width: 18px; height: 18px; }
.jvsol__req-val { font-weight: var(--jv-font-weight-medium, 450); color: var(--jv-text-primary, #171717); white-space: nowrap; }

@media (max-width: 700px) {
  .jvsol__reqs { justify-content: flex-start; }
}

/* ---- Лендинг: плитки отраслей (как .jv-subcategory-card) ---- */
.jvsol__tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.jvsol__tile {
  display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 18px;
  background: var(--jv-bg-card, #fff); border: 1.5px solid var(--jv-border, #d9d9d9); border-radius: 20px;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.jvsol__tile:hover { border-color: var(--jv-accent, #E94E1B); box-shadow: 0 4px 16px rgba(242,91,36,.1); }
.jvsol__tile-ph {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 15px; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.jvsol__tile-ph img { width: 100%; height: 100%; object-fit: contain; }
.jvsol__tile-ph svg { width: 100%; height: 100%; display: block; }
.jvsol__tile-body { padding: 0 4px; }
.jvsol__tile-name {
  display: block; text-align: center; margin-top: 10px;
  font-weight: var(--jv-font-weight-semibold, 500); font-size: var(--jv-font-size-lg, 16px);
  color: var(--jv-text-primary, #171717); line-height: 1.2;
}

/* Анимация «света» (оранжевые элементы SVG) — только при наведении на плитку */
.jv-light { transition: opacity .3s ease; }
@keyframes jvsol-pulse { 0%,100% { opacity: .58; } 50% { opacity: 1; } }
.jvsol__tile:hover .jv-light { animation: jvsol-pulse 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .jv-light { animation: none !important; } }

/* ---- Чипы-отрасли: карточки с иллюстрацией (как jv-subcategory-card) — фидбек #47 ----
   Сетка авто-заполнения; на узких — горизонтальная лента с прокруткой (как разделы категории). */
/* #468 (QA 05.08): блок занимал слишком много места — чипы ужаты
   (160px → 118px, меньше отступы/шрифт), высота ленты ~ на треть меньше. */
.jvsol__chips {
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  gap: 10px; margin: 12px 0 22px; padding-bottom: 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.jvsol__chips::-webkit-scrollbar { height: 6px; }
.jvsol__chips::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.jvsol__chip {
  flex: 0 0 118px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 8px 8px 10px; text-align: center; text-decoration: none;
  background: var(--jv-bg-card, #fff); color: var(--jv-text-secondary, #303131);
  border: 1.5px solid var(--jv-border, #d9d9d9); border-radius: 14px;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.jvsol__chip-ill {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; border-radius: 10px; background: #fff; overflow: hidden;
}
.jvsol__chip-ill svg, .jvsol__chip-ill img { width: 100%; height: 100%; object-fit: contain; display: block; }
.jvsol__chip-name {
  font-weight: var(--jv-font-weight-medium, 450); font-size: 13px; line-height: 1.2;
  color: var(--jv-text-primary, #171717);
}
.jvsol__chip:hover { border-color: var(--jv-accent, #E94E1B); box-shadow: 0 4px 16px rgba(242,91,36,.1); }
.jvsol__chip.is-active {
  border-color: var(--jv-accent, #E94E1B); border-width: 2px;
  box-shadow: 0 0 0 2px rgba(233,78,27,.12);
}
.jvsol__chip.is-active .jvsol__chip-name { color: var(--jv-accent, #E94E1B); font-weight: 600; }
.jvsol__chip--all .jvsol__chip-ill { background: var(--jv-bg-surface, #F2F3F6); padding: 22%; box-sizing: border-box; }

/* Узкие экраны: горизонтальная лента с прокруткой (как разделы категории на мобилке) */
@media (max-width: 700px) {
  .jvsol__chips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    gap: 12px; margin: 14px -16px 26px; padding: 2px 16px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .jvsol__chip { flex: 0 0 118px; scroll-snap-align: start; }
  .jvsol__chips::-webkit-scrollbar { height: 6px; }
  .jvsol__chips::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
}

/* ---- Группы L1 / L2 ---- */
.jvsol__group { margin: 30px 0 8px; }
.jvsol__l1 {
  font-size: var(--jv-font-size-2xl, 22px); font-weight: var(--jv-font-weight-bold, 600);
  color: var(--jv-text-primary, #171717); margin: 0 0 14px;
  border-bottom: 1.5px solid var(--jv-border, #d9d9d9); padding-bottom: 10px;
}
.jvsol__l2 {
  font-size: var(--jv-font-size-lg, 16px); font-weight: var(--jv-font-weight-semibold, 500);
  color: var(--jv-text-secondary, #303131); margin: 20px 0 12px; padding-left: 16px; position: relative;
}
.jvsol__l2::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 8px; height: 11px;
  border-left: 2px solid var(--jv-accent, #E94E1B); border-bottom: 2px solid var(--jv-accent, #E94E1B);
}
.jvsol__cnt { color: var(--jv-text-muted, #999); font-weight: var(--jv-font-weight-normal, 400); font-size: var(--jv-font-size-base, 14px); }

/* ---- Карточки товаров (как .jv-subcategory-card) ---- */
.jvsol__cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 15px;
}
.jvsol__card {
  display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 16px;
  background: var(--jv-bg-card, #fff); border: 1.5px solid var(--jv-border, #d9d9d9); border-radius: 20px;
  text-decoration: none; color: inherit; transition: box-shadow .2s ease, border-color .2s ease;
}
.jvsol__card:hover { border-color: var(--jv-accent, #E94E1B); box-shadow: 0 4px 16px rgba(242,91,36,.1); }
.jvsol__card-thumb {
  width: 100%; aspect-ratio: 1; border-radius: 15px; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.jvsol__card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.jvsol__card-name {
  margin-top: 8px;
  font-weight: var(--jv-font-weight-semibold, 500); font-size: var(--jv-font-size-base, 14px);
  color: var(--jv-text-secondary, #303131); line-height: 1.25; padding: 0 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Карточки категорий (с чипом количества моделей) ---- */
.jvsol__cards--cat { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.jvsol__card--cat { padding-bottom: 16px; }
.jvsol__card--cat .jvsol__card-name {
  font-weight: var(--jv-font-weight-semibold, 500); font-size: var(--jv-font-size-lg, 16px);
  color: var(--jv-text-primary, #171717); -webkit-line-clamp: 2; text-align: center;
}
.jvsol__badge {
  align-self: flex-start; margin: 2px 4px 0; display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--jv-radius-sm, 10px);
  background: var(--jv-primary, #E94E1B); color: #fff;
  font-weight: var(--jv-font-weight-semibold, 500); font-size: var(--jv-font-size-sm, 12px); line-height: 1;
}

.jvsol__empty { padding: 40px 0; color: var(--jv-text-muted, #999); }

/* ---- Заголовок секции (кейсы) ---- */
.jvsol__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 34px 0 16px; }
.jvsol__section-title { font-size: var(--jv-font-size-2xl, 22px); font-weight: var(--jv-font-weight-bold, 600); color: var(--jv-text-primary, #171717); margin: 0; }
.jvsol__section-link { font-size: var(--jv-font-size-base, 14px); font-weight: var(--jv-font-weight-semibold, 500); color: var(--jv-primary, #E94E1B); text-decoration: none; white-space: nowrap; }
.jvsol__section-link:hover { text-decoration: underline; }

/* ---- Кейсы (реализованные проекты) ---- */
.jvsol__cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.jvsol__case {
  display: flex; flex-direction: column; background: var(--jv-bg-card, #fff);
  border: 1.5px solid var(--jv-border, #d9d9d9); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit; transition: box-shadow .2s ease, border-color .2s ease;
}
.jvsol__case:hover { border-color: var(--jv-accent, #E94E1B); box-shadow: 0 4px 16px rgba(233,78,27,.1); }
.jvsol__case-img { width: 100%; aspect-ratio: 16 / 10; background: var(--jv-bg-surface, #f2f3f6); overflow: hidden; }
.jvsol__case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jvsol__case-body { padding: 12px 14px 14px; }
.jvsol__case-title {
  font-weight: var(--jv-font-weight-semibold, 500); font-size: var(--jv-font-size-md, 15px);
  color: var(--jv-text-primary, #171717); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jvsol__case-meta { font-size: var(--jv-font-size-sm, 12px); color: var(--jv-text-muted, #999); margin-top: 6px; }

/* ---- CTA ---- */
.jvsol__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin: 38px 0 8px; padding: 24px 26px; border-radius: 20px;
  background: var(--jv-bg-surface, #f2f3f6); border: 1.5px solid var(--jv-border, #d9d9d9);
}
.jvsol__cta-title { font-size: var(--jv-font-size-xl, 18px); font-weight: var(--jv-font-weight-bold, 600); color: var(--jv-text-primary, #171717); margin: 0 0 4px; }
.jvsol__cta-sub { font-size: var(--jv-font-size-base, 14px); color: var(--jv-text-secondary, #303131); margin: 0; max-width: 560px; }
.jvsol__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.jvsol__btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px;
  border-radius: var(--jv-radius-sm, 10px); font-weight: var(--jv-font-weight-semibold, 500); font-size: var(--jv-font-size-base, 14px);
  line-height: 1; text-decoration: none; cursor: pointer; transition: all .15s ease;
  background: #fff; color: var(--jv-text-primary, #171717); border: 1.5px solid var(--jv-border, #d9d9d9);
}
.jvsol__btn:hover { border-color: var(--jv-primary, #E94E1B); color: var(--jv-primary, #E94E1B); }
.jvsol__btn--primary { background: var(--jv-primary, #E94E1B); color: #fff; border-color: var(--jv-primary, #E94E1B); }
.jvsol__btn--primary:hover { background: var(--jv-primary-hover, #d1410f); border-color: var(--jv-primary-hover, #d1410f); color: #fff; }
.jvsol__btn--ghost { background: transparent; border-color: transparent; color: var(--jv-text-secondary, #303131); }
.jvsol__btn--ghost:hover { color: var(--jv-primary, #E94E1B); border-color: transparent; }

@media (max-width: 600px) {
  .jvsol__cta { flex-direction: column; align-items: flex-start; padding: 18px; }
  .jvsol__cta-actions { width: 100%; }
  .jvsol__btn { flex: 1 1 auto; }
}

@media (max-width: 600px) {
  .jvsol__title { font-size: var(--jv-font-size-3xl, 24px); }
  .jvsol__tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .jvsol__cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* Иллюстрация ещё не подгрузилась (js/jv_primenenie.js): пропорция задана выше
   через aspect-ratio, поэтому вёрстка не поедет — нужен лишь спокойный фон,
   чтобы пустая плитка не выглядела поломкой. */
.jvsol__tile-ph[data-svg],
.jvsol__chip-ill[data-svg] { background: #FAFAFA; }
.jvsol__tile-ph.is-loaded svg,
.jvsol__chip-ill.is-loaded svg { animation: jvsol-fade .25s ease-out; }
@keyframes jvsol-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Требования вопросами (видимая пара к разметке FAQPage) ----
   Блок повторяет значения из .jvsol__reqs, но словами: пиктограмма «500 лк»
   понятна человеку и бесполезна поисковику, пока рядом нет вопроса, ответом
   на который она является. Скрывать блок нельзя — разметка ссылается на него. */
/* #616: требования и призыв — две колонки. 1.5fr/1fr, а не поровну: слева текст,
   которому нужна длина строки, справа карточка с двумя кнопками. */
.jvsol__closing {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 44px; align-items: start; margin: 38px 0 8px;
}

.jvsol__faq { margin: 0; }
.jvsol__faq-title {
  font-size: var(--jv-font-size-xxl, 24px); font-weight: 700; margin: 0 0 14px;
  letter-spacing: -.01em; color: var(--jv-text-primary, #1A1A1A);
}
/* Была сетка в две колонки внутри самого FAQ — теперь колонка одна: вторую
   занимает CTA, а вопросы идут списком-аккордеоном. */
.jvsol__faq-list { display: block; margin: 0; padding: 0; }

.jvsol__faq-item { border-left: 0; border-bottom: 1px solid var(--jv-border-soft, #EEF0F3); padding: 0; }
.jvsol__faq-item:last-child { border-bottom: 0; }

.jvsol__faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 15px 0; margin: 0; font-family: inherit;
  font-size: var(--jv-font-size-lg, 16px); font-weight: 600; line-height: 1.4;
  color: var(--jv-text-primary, #1A1A1A);
}
.jvsol__faq-q svg { flex: 0 0 14px; margin-top: 5px; color: var(--jv-text-muted, #999); transition: transform .2s ease; }
.jvsol__faq-item.is-open .jvsol__faq-q svg { transform: rotate(180deg); }
.jvsol__faq-q:hover { color: var(--jv-primary, #E94E1B); }
.jvsol__faq-q:focus-visible { outline: 2px solid var(--jv-primary, #E94E1B); outline-offset: 3px; border-radius: 4px; }

/* Схлопывание через max-height, а не display:none — ответы короткие, потолка
   с запасом хватает, зато переход плавный и разметка FAQPage остаётся в DOM. */
.jvsol__faq-a { max-height: 0; overflow: hidden; margin: 0; transition: max-height .25s ease; }
.jvsol__faq-item.is-open .jvsol__faq-a { max-height: 240px; }
.jvsol__faq-a p {
  margin: 0 0 15px; font-size: var(--jv-font-size-base, 14px); line-height: 1.6;
  color: var(--jv-text-secondary, #303131);
}

/* CTA в правой колонке: вертикальная карточка, кнопки на всю ширину, липкая —
   чтобы оставаться на виду, пока читают требования. */
.jvsol__cta--aside { display: block; margin: 0; position: sticky; top: 20px; border-width: 0; }
.jvsol__cta--aside .jvsol__cta-title { font-size: var(--jv-font-size-xl, 20px); margin: 0 0 10px; }
.jvsol__cta--aside .jvsol__cta-sub { margin: 0 0 20px; }
.jvsol__cta--aside .jvsol__cta-actions { display: block; }
.jvsol__cta--aside .jvsol__btn { display: flex; width: 100%; margin-bottom: 10px; }
.jvsol__cta--aside .jvsol__btn:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .jvsol__closing { grid-template-columns: 1fr; gap: 26px; }
  .jvsol__cta--aside { position: static; }
}