/* ══════════════════════════════════════════════════════════════
   УСЛУГИ v2 — карточка «Сделки M&A» + сетка под 4 услуги
   Файл: assets/css/services-v2-ma.css
   Подключается ПОСЛЕ services-v2.css (это делает services-v2.php).
   Токены темы не меняются. Откат: удалить файл + карточку из
   services-v2.php.
   ══════════════════════════════════════════════════════════════ */

/* ── превью: заголовок и счётчики ── */
.pv-ma{position:relative;height:100%}
.pv-ma-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.pv-ma-stats{display:flex;gap:18px}
.pv-ma-stat{display:flex;flex-direction:column;line-height:1}
.pv-ma-stat b{font-family:'Unbounded','Inter',sans-serif;font-weight:500;font-size:19px;
  color:var(--sv2-navy);letter-spacing:-.02em}
.pv-ma-stat label{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sv2-muted);margin-top:5px}
.pv-ma-stat.is-red b{color:var(--sv2-red)}

/* ── диаграмма «поток сделок» ── */
.pv-ma-chart{width:100%;height:132px;display:block;overflow:visible}

/* сетка проявляется мягко */
.pv-ma-chart .grid line{opacity:0;transition:opacity .5s ease}
.in-view .pv-ma-chart .grid line{opacity:1}
.in-view .pv-ma-chart .grid line:nth-child(2){transition-delay:.06s}
.in-view .pv-ma-chart .grid line:nth-child(3){transition-delay:.12s}
.in-view .pv-ma-chart .grid line:nth-child(4){transition-delay:.18s}

/* столбцы вырастают снизу */
.pv-ma-chart .bar{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box;
  opacity:.9}
.in-view .pv-ma-chart .bar{animation:maGrow .85s cubic-bezier(.22,1,.36,1) forwards}
.in-view .pv-ma-chart .bar:nth-of-type(1){animation-delay:.05s}
.in-view .pv-ma-chart .bar:nth-of-type(2){animation-delay:.13s}
.in-view .pv-ma-chart .bar:nth-of-type(3){animation-delay:.21s}
.in-view .pv-ma-chart .bar:nth-of-type(4){animation-delay:.29s}
.in-view .pv-ma-chart .bar:nth-of-type(5){animation-delay:.37s}
.in-view .pv-ma-chart .bar:nth-of-type(6){animation-delay:.45s}
@keyframes maGrow{to{transform:scaleY(1)}}

/* сорвавшаяся сделка — пунктир, «дышит» */
.pv-ma-chart .bar--failed{fill:none;stroke:var(--sv2-red);stroke-width:1.6;
  stroke-dasharray:4 3}
.in-view .pv-ma-chart .bar--failed{animation:maGrow .85s cubic-bezier(.22,1,.36,1) .45s forwards,
  maPulse 2.6s ease-in-out 1.4s infinite}
@keyframes maPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* линия тренда концентрации — эффект «рисования» */
.pv-ma-chart .trend{fill:none;stroke:var(--sv2-blue);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340}
.in-view .pv-ma-chart .trend{animation:maDraw 1.5s .5s ease forwards}
@keyframes maDraw{to{stroke-dashoffset:0}}

.pv-ma-chart .tdot{opacity:0}
.in-view .pv-ma-chart .tdot{animation:maDot .3s forwards}
.in-view .pv-ma-chart .tdot:nth-of-type(1){animation-delay:.9s}
.in-view .pv-ma-chart .tdot:nth-of-type(2){animation-delay:1.15s}
.in-view .pv-ma-chart .tdot:nth-of-type(3){animation-delay:1.4s}
@keyframes maDot{to{opacity:1}}

.pv-ma-chart .xlab{font-family:'Inter',sans-serif;font-size:7px;fill:var(--sv2-muted)}

/* всплывающая подсказка над сорвавшейся сделкой */
.pv-ma-tip{position:absolute;right:16px;top:64px;background:var(--sv2-navy);color:#fff;
  border-radius:10px;padding:8px 11px;opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease;pointer-events:none;
  box-shadow:0 10px 24px -12px rgba(21,29,63,.5)}
.in-view .pv-ma-tip{opacity:1;transform:translateY(0);transition-delay:1.6s}
.pv-ma-tip b{display:block;font-family:'Unbounded','Inter',sans-serif;font-weight:500;
  font-size:11px;letter-spacing:-.01em}
.pv-ma-tip span{display:block;font-size:9px;color:#9FB0DA;margin-top:3px}
.pv-ma-tip::after{content:'';position:absolute;left:-5px;top:14px;width:10px;height:10px;
  background:var(--sv2-navy);transform:rotate(45deg);border-radius:2px}

/* лента-легенда снизу превью */
.pv-ma-legend{display:flex;gap:14px;margin-top:6px}
.pv-ma-legend span{display:inline-flex;align-items:center;gap:5px;font-size:8.5px;
  color:var(--sv2-muted)}
.pv-ma-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.pv-ma-legend .i-done{background:var(--sv2-navy)}
.pv-ma-legend .i-fail{border:1.4px dashed var(--sv2-red)}
.pv-ma-legend .i-tr{background:var(--sv2-blue)}

/* тег с двумя форматами */
.sv2-tag--duo{background:linear-gradient(90deg,var(--sv2-green) 0%,var(--sv2-green) 50%,
  var(--sv2-blue) 50%,var(--sv2-blue) 100%)}

/* ── комбо: стопка из ЧЕТЫРЁХ документов (переопределяет services-v2.css) ── */
.md-ma h5 i{background:var(--sv2-red)}
.md-pdf {width:172px;top:30px;left:1%;  transform:rotate(-9deg);z-index:1}
.md-docx{width:178px;top:16px;left:23%; transform:rotate(-2deg);z-index:4}
.md-xlsx{width:172px;top:44px;left:45%; transform:rotate(5deg); z-index:3}
.md-ma  {width:172px;top:64px;left:66%; transform:rotate(12deg);z-index:2}
.sv2-combo:hover .md-pdf {transform:rotate(-12deg) translateY(-8px)}
.sv2-combo:hover .md-docx{transform:rotate(-3deg) translateY(-14px)}
.sv2-combo:hover .md-xlsx{transform:rotate(6deg)  translateY(-10px)}
.sv2-combo:hover .md-ma  {transform:rotate(15deg) translateY(-6px)}

/* ══════════════════════════════════════════════════════════════
   СЕТКА ПОД ЧЕТЫРЕ УСЛУГИ
   Было: 3 колонки (3 карточки + комбо). Стало: 2×2 без «сироты».
   ≥1101px — 2×2, 721–1100px — 2 колонки, ≤720px — одна колонка.
   ══════════════════════════════════════════════════════════════ */
@media(min-width:1101px){
  .services-v2 .sv2-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  /* карточки стали шире — превью тянется, не оставляя пустот */
  .services-v2 .sv2-preview{height:264px}
  .services-v2 .pv-radar{width:210px;height:186px}
  .services-v2 .pv-ma-chart{height:142px}
}

/* ── мобильная адаптация ── */
@media(max-width:960px){
  .combo-stack{min-height:300px}
  /* стопка документов на планшете — компактнее и без обрезания */
  .md-pdf {width:150px;left:0}
  .md-docx{width:156px;left:22%}
  .md-xlsx{width:150px;left:44%}
  .md-ma  {width:150px;left:64%}
}
@media(max-width:720px){
  .services-v2 .sv2-preview{height:230px;padding:16px 18px 0}
  .sv2-head{flex-direction:column;gap:6px;align-items:flex-start}
  .sv2-price{text-align:left}
  .pv-ma-stats{gap:12px}
  .pv-ma-stat b{font-size:17px}
  .pv-ma-tip{right:10px;top:56px;padding:6px 9px}
  .pv-ma-tip b{font-size:10px}
  .pv-ma-tip span{font-size:8.5px}
  .pv-ma-legend{gap:9px;flex-wrap:wrap}
  .combo-price{font-size:26px}
  .combo-foot{gap:14px}
  /* стопка на телефоне: документы в две «ступеньки», ничего не вылезает */
  .combo-stack{min-height:250px;margin:0 14px 18px}
  .md-pdf {width:132px;top:24px;left:2%}
  .md-docx{width:138px;top:10px;left:30%}
  .md-xlsx{width:132px;top:110px;left:12%}
  .md-ma  {width:132px;top:96px;left:46%}
}
/* очень узкие экраны: подпись сделки не должна ломать плитку */
@media(max-width:380px){
  .pv-ma-stat label{font-size:7.5px}
  .pv-ma-tip{display:none}
  .md-pdf,.md-xlsx{left:0}
  .md-docx,.md-ma{left:44%}
}

/* уважение к reduce-motion — как в базовом файле */
@media(prefers-reduced-motion:reduce){
  .pv-ma-chart .bar,.pv-ma-chart .bar--failed{animation:none!important;transform:none!important}
  .pv-ma-chart .trend{animation:none!important;stroke-dashoffset:0!important}
  .pv-ma-chart .tdot,.pv-ma-tip,.pv-ma-chart .grid line{animation:none!important;opacity:1!important;transform:none!important}
}

/* ══════════════════════════════════════════════════════════════
   ФИНМОДЕЛЬ — превью «денежный поток»
   Карточка стала шире (сетка 2×2), а SVG растягивался с
   preserveAspectRatio="none": линия и текст внутри SVG «размазывались».
   Решение: в SVG только геометрия + non-scaling-stroke (толщина линии
   не зависит от растяжения), подписи и точка — HTML поверх графика.
   ══════════════════════════════════════════════════════════════ */
.pv-fm-chart{position:relative;margin-top:2px}
.services-v2 .pv-area{width:100%;height:118px;display:block}

/* нулевая линия проявляется первой */
.pv-area .zero{opacity:0;transition:opacity .4s ease}
.in-view .pv-area .zero{opacity:1}

/* KPI-плашки: на широкой карточке не должны разъезжаться */
.services-v2 .pv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-bottom:12px}
.services-v2 .pv-kpi{padding:9px 11px}
.services-v2 .pv-kpi b{font-size:15px;letter-spacing:-.02em}

/* маркер точки безубыточности */
.pv-fm-marker{position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  opacity:0;transition:opacity .4s ease}
.in-view .pv-fm-marker{opacity:1;transition-delay:1.5s}

.pv-fm-chip{position:relative;background:var(--sv2-navy);color:#fff;
  border-radius:9px;padding:5px 9px 6px;white-space:nowrap;
  font-family:'Unbounded','Inter',sans-serif;font-weight:500;font-size:9.5px;
  letter-spacing:-.01em;line-height:1.1;
  box-shadow:0 8px 18px -10px rgba(21,29,63,.55)}
.pv-fm-chip i{display:block;font-family:'Inter',sans-serif;font-style:normal;
  font-weight:400;font-size:8px;color:#9FB0DA;margin-top:2px}
.pv-fm-chip::after{content:'';position:absolute;left:50%;bottom:-3px;
  width:7px;height:7px;margin-left:-3.5px;background:var(--sv2-navy);
  transform:rotate(45deg);border-radius:1px}

.pv-fm-dot{width:9px;height:9px;border-radius:50%;background:#fff;
  border:2.5px solid var(--sv2-blue);
  box-shadow:0 0 0 4px rgba(85,134,231,.16)}

/* ось месяцев */
.pv-fm-axis{display:flex;justify-content:space-between;margin-top:4px;
  padding:0 2px;font-size:7.5px;color:var(--sv2-muted);
  opacity:0;transition:opacity .4s ease}
.in-view .pv-fm-axis{opacity:1;transition-delay:1.2s}

@media(min-width:1101px){
  .services-v2 .pv-area{height:132px}
  .services-v2 .pv-kpi b{font-size:16px}
}
@media(max-width:720px){
  .services-v2 .pv-area{height:104px}
  .services-v2 .pv-kpis{gap:6px}
  .services-v2 .pv-kpi{padding:8px 9px}
  .services-v2 .pv-kpi b{font-size:14px}
  .pv-fm-chip{font-size:9px;padding:4px 8px 5px}
  .pv-fm-chip i{font-size:7.5px}
}
/* очень узкие экраны: подпись не должна упираться в края */
@media(max-width:380px){
  .pv-fm-chip i{display:none}
  .pv-fm-axis span:nth-child(even){visibility:hidden}
}
@media(prefers-reduced-motion:reduce){
  .pv-fm-marker,.pv-fm-axis,.pv-area .zero{opacity:1!important;transition:none!important}
}