/* pricing-matrix — дизайн референса (Rubik, зелёный/жёлтый/крем).
   Все селекторы скоупнуты под [data-block="pricing-matrix"], классы pmx-*,
   чтобы не конфликтовать с глобальными .grid/.title/.c сайта.
   Тогл «показать всё» — чистый CSS через :target, без JS. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

[data-block="pricing-matrix"]{
  --green:#66BB6A; --green-deep:#3F9B52; --green-lane:#F1F8F2;
  --yellow:#FFD166; --ink:#1F3329; --muted:#6E8175; --line:#E1EBE3; --paper:#FAFCF9;
  font-family:'Rubik',system-ui,sans-serif; background:#fff; color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
[data-block="pricing-matrix"] *,[data-block="pricing-matrix"] *::before,[data-block="pricing-matrix"] *::after{box-sizing:border-box;}

[data-block="pricing-matrix"] .pmx-head{text-align:center;max-width:720px;margin:0 auto 56px;}
[data-block="pricing-matrix"] .pmx-title{font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;}
[data-block="pricing-matrix"] .pmx-sub{font-size:16px;line-height:1.55;color:var(--muted);margin:0;}

[data-block="pricing-matrix"] .pmx-shell{position:relative;max-height:880px;overflow:hidden;transition:max-height 320ms ease;}
[data-block="pricing-matrix"] .pmx-fade{position:absolute;left:0;right:0;bottom:0;height:220px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 75%);pointer-events:none;}

[data-block="pricing-matrix"] .pmx-grid{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr 1fr 1fr;column-gap:14px;}

[data-block="pricing-matrix"] .pmx-h-t{background:var(--green);color:#fff;padding:24px 22px 22px;border-radius:18px 18px 0 0;display:flex;flex-direction:column;gap:6px;}
[data-block="pricing-matrix"] .pmx-h-name-big{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1;}
[data-block="pricing-matrix"] .pmx-h-price{display:flex;align-items:baseline;gap:6px;margin-top:6px;}
[data-block="pricing-matrix"] .pmx-h-num{font-size:24px;font-weight:600;color:var(--yellow);line-height:1.05;}
[data-block="pricing-matrix"] .pmx-h-unit{font-size:13px;color:rgba(255,255,255,.85);}
[data-block="pricing-matrix"] .pmx-h-time{font-size:18px;color:rgba(255,255,255,.9);}

[data-block="pricing-matrix"] .pmx-c{padding:14px 22px;background:#fff;display:flex;align-items:center;min-height:28px;font-size:14px;line-height:1.45;}
[data-block="pricing-matrix"] .pmx-c-name{font-weight:400;background:transparent;padding-left:0;padding-right:18px;border-bottom:1px solid var(--line);}
[data-block="pricing-matrix"] .pmx-c-lane{justify-content:center;text-align:center;}
[data-block="pricing-matrix"] .pmx-c-0{background:var(--green-lane);}
[data-block="pricing-matrix"] .pmx-c-1{background:#fff;}
[data-block="pricing-matrix"] .pmx-c-2{background:var(--green-lane);}
/* Фокусная колонка — поднята и выделена цветом, перекрывает .pmx-c-N background */
[data-block="pricing-matrix"] .pmx-h-t.pmx-focus{position:relative;background:var(--green-deep);box-shadow:0 10px 26px -10px rgba(63,155,82,.55);border-radius:18px 18px 0 0;padding-top:30px;}
[data-block="pricing-matrix"] .pmx-h-t.pmx-focus .pmx-h-num{color:#FFF59A;font-size:26px;}
[data-block="pricing-matrix"] .pmx-h-t.pmx-focus .pmx-h-name-big{font-size:23px;}
[data-block="pricing-matrix"] .pmx-focus-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#2A1E00;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:0 0 8px 8px;line-height:1;white-space:nowrap;}
[data-block="pricing-matrix"] .pmx-c.pmx-c-focus{background:#E8F5EA !important;border-left:2px solid var(--green-deep);border-right:2px solid var(--green-deep);}
[data-block="pricing-matrix"] .pmx-grid > .pmx-c-focus:nth-last-child(-n+3){border-radius:0 0 16px 16px;border-bottom:2px solid var(--green-deep);}
[data-block="pricing-matrix"] .pmx-1col .pmx-c-lane{background:var(--green-lane);}
[data-block="pricing-matrix"] .pmx-h-empty-titled{display:flex;flex-direction:column;justify-content:center;padding:20px 36px 20px 0;}
/* В одностолбцовом режиме имя тарифа («Генеральная»/«После ремонта»)
   дублирует title слева — прячем, чтобы не было повтора. */
[data-block="pricing-matrix"] .pmx-1col .pmx-h-name-big{display:none;}
[data-block="pricing-matrix"] .pmx-head-left{text-align:left;}
[data-block="pricing-matrix"] .pmx-head-left .pmx-title{font-size:clamp(24px,2.4vw,34px);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:0 0 10px;}
[data-block="pricing-matrix"] .pmx-head-left .pmx-sub{font-size:14px;line-height:1.5;color:var(--muted);margin:0;}
[data-block="pricing-matrix"] .pmx-row{display:contents;}
[data-block="pricing-matrix"] .pmx-c{transition:background-color .12s ease;}
[data-block="pricing-matrix"] .pmx-row:hover .pmx-c{background:#E8F5EA;}
/* По умолчанию top-head с классом .pmx-head-mobile-only скрыт — он только для узких экранов. */
[data-block="pricing-matrix"] .pmx-head-mobile-only{display:none;}

/* Mobile-tabs по умолчанию скрыты на десктопе (показываются ≤640px). */
[data-block="pricing-matrix"] .pmx-tabs-host{display:none;}

[data-block="pricing-matrix"] .pmx-cat-row{grid-column:1/-1;padding:14px 24px 12px 0;display:flex;align-items:baseline;gap:16px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);}
[data-block="pricing-matrix"] .pmx-cat-name{font-size:18px;font-weight:600;letter-spacing:-.005em;}

[data-block="pricing-matrix"] .pmx-grid > .pmx-c-lane:nth-last-child(-n+3){border-radius:0 0 18px 18px;}

[data-block="pricing-matrix"] .pmx-yes{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:var(--yellow);}
[data-block="pricing-matrix"] .pmx-no{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#ECEDEA;color:#9AA3A0;}
[data-block="pricing-matrix"] .pmx-no svg{display:block;}
[data-block="pricing-matrix"] .pmx-val{font-size:13px;font-weight:500;color:#2A4A35;font-variant-numeric:tabular-nums;line-height:1.3;text-align:center;}

[data-block="pricing-matrix"] .pmx-toggle{max-width:1200px;margin:0 auto;display:flex;justify-content:center;padding-top:0;}
[data-block="pricing-matrix"] .pmx-toggle-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;background:var(--green);color:#fff;border:none;text-decoration:none;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:.18s;box-shadow:0 6px 18px -8px rgba(63,155,82,.55);}
[data-block="pricing-matrix"] .pmx-toggle-btn:hover{background:var(--green-deep);transform:translateY(-1px);}

/* Тогл по классу .is-open (ставит внешний script.js).
   :target не используем — на сайте глобальный перехват кликов по якорям. */
[data-block="pricing-matrix"] .pmx-toggle-btn.pmx-close{display:none;}
[data-block="pricing-matrix"] .pmx-shell.is-open{max-height:20000px;}
[data-block="pricing-matrix"] .pmx-shell.is-open .pmx-fade{display:none;}
[data-block="pricing-matrix"] .pmx-shell.is-open ~ .pmx-toggle{display:none;}

/* ============ TABLET (≤900px) — компакт без structural изменений ============ */
@media (max-width:900px){
  [data-block="pricing-matrix"] .pmx-title{font-size:28px;}
  [data-block="pricing-matrix"] .pmx-grid{column-gap:6px;}
  [data-block="pricing-matrix"] .pmx-h-t{padding:14px 10px;border-radius:12px 12px 0 0;}
  [data-block="pricing-matrix"] .pmx-h-name-big{font-size:14px;}
  [data-block="pricing-matrix"] .pmx-h-num{font-size:17px;}
  [data-block="pricing-matrix"] .pmx-h-unit,[data-block="pricing-matrix"] .pmx-h-time{font-size:11px;}
  [data-block="pricing-matrix"] .pmx-c{padding:10px 8px;font-size:12.5px;}
  [data-block="pricing-matrix"] .pmx-c-name{padding-right:8px;}
  [data-block="pricing-matrix"] .pmx-val{font-size:11.5px;}
  [data-block="pricing-matrix"] .pmx-cat-row{padding:12px 8px 10px 0;}
  [data-block="pricing-matrix"] .pmx-cat-name{font-size:15px;}
}

/* ================= MOBILE (≤640px) — ОДНА ТАБЛИЦА + ГОРИЗОНТ. СКРОЛЛ ====
   SEO-first: ни одной дублирующейся строки в HTML. На узком экране
   .pmx-shell превращается в горизонтально-скроллящийся контейнер;
   первая колонка (имена услуг) — sticky:left, остаётся видна при свайпе
   тарифов. Кнопка «Показать все» прячется — все строки видны через скролл.
======================================================================== */
@media (max-width:640px){
  /* H2 наверху (вне таблицы) — как было */
  [data-block="pricing-matrix"] .pmx-head:not(.pmx-head-mobile-only){display:none !important;}
  [data-block="pricing-matrix"] .pmx-head-mobile-only{
    display:block; text-align:left; max-width:100%;
    margin:0 0 14px; padding:0 16px;
  }
  [data-block="pricing-matrix"] .pmx-head-mobile-only .pmx-title{
    font-size:22px; line-height:1.2; margin:0 0 6px;
    letter-spacing:-.02em; font-weight:600; color:var(--ink);
  }
  [data-block="pricing-matrix"] .pmx-head-mobile-only .pmx-sub{
    font-size:13px; line-height:1.5; color:var(--muted); max-width:340px;
  }

  /* ========== SHELL → горизонтальный скролл ========== */
  [data-block="pricing-matrix"] .pmx-shell{
    max-height:none; overflow:visible;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-left:0; padding-right:0;
    scroll-snap-type:x proximity;
    /* scroll-hint справа: правая тень даёт сигнал «можно крутить вбок» */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(31,51,41,.08), rgba(31,51,41,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(31,51,41,.08), rgba(31,51,41,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  /* Скрываем бывший fade-снизу и toggle-кнопку (вертикального clamp больше нет) */
  [data-block="pricing-matrix"] .pmx-fade{display:none;}
  [data-block="pricing-matrix"] .pmx-toggle{display:none;}

  /* ========== GRID — фиксированная ширина под скролл ========== */
  /* min-width гарантирует, что колонки не сожмутся до нечитаемых */
  /* column-gap:8px — заметная щель между тарифами (карточки не слипаются) */
  [data-block="pricing-matrix"] .pmx-grid{
    min-width:580px; column-gap:8px;
    padding-left:12px; padding-right:12px;
  }
  /* На 2 колонках чуть-чуть шире min-width под gap */
  [data-block="pricing-matrix"] .pmx-grid.pmx-cols-2{min-width:500px;}
  [data-block="pricing-matrix"] .pmx-grid.pmx-cols-1{min-width:340px;}

  /* ========== STICKY первая колонка (имя услуги) ========== */
  [data-block="pricing-matrix"] .pmx-c-name,
  [data-block="pricing-matrix"] .pmx-h-empty{
    position:sticky; left:0; z-index:2;
    background:#fff;
    /* мягкая тень-разделитель справа — отделяет sticky-колонку от скроллящихся */
    box-shadow:6px 0 8px -6px rgba(31,51,41,.10);
  }
  /* Категория-строка: фон-полоска для контраста, имя категории — sticky:left */
  [data-block="pricing-matrix"] .pmx-cat-row{
    background:#F1F8F2;
    padding-left:0; padding-right:8px;
  }
  [data-block="pricing-matrix"] .pmx-cat-name{
    position:sticky; left:4px; z-index:1;
    background:#F1F8F2;
    padding:0 8px 0 4px;
  }

  /* ========== Header-карточки тарифов (компакт + аккуратно) ========== */
  [data-block="pricing-matrix"] .pmx-h-t{
    min-width:130px; /* гарантированный минимум для читаемости */
    padding:12px 8px 11px; border-radius:12px 12px 0 0;
    gap:4px; /* убираем "просторное" 6px от desktop */
    box-shadow:0 4px 14px -8px rgba(31,51,41,.18);
    position:relative; z-index:1; /* тень над body-ячейками */
  }
  [data-block="pricing-matrix"] .pmx-h-name-big{
    font-size:13px; line-height:1.15; letter-spacing:-.005em;
  }
  [data-block="pricing-matrix"] .pmx-h-price{
    display:flex; align-items:baseline; gap:3px;
  }
  [data-block="pricing-matrix"] .pmx-h-num{
    font-size:17px; line-height:1; letter-spacing:-.015em;
  }
  [data-block="pricing-matrix"] .pmx-h-unit,
  [data-block="pricing-matrix"] .pmx-h-time{font-size:10.5px;}
  [data-block="pricing-matrix"] .pmx-h-time{
    line-height:1.25; opacity:.85;
  }

  /* ========== Focus-карточка на мобиле ========== */
  /* Бэйдж "Рекомендуем" сидит на верху → нужен запас padding-top */
  [data-block="pricing-matrix"] .pmx-h-t.pmx-focus{
    padding:20px 8px 11px;            /* было 30px на desktop — много */
    border-radius:12px 12px 0 0;
    box-shadow:0 6px 18px -8px rgba(63,155,82,.55);
  }
  [data-block="pricing-matrix"] .pmx-h-t.pmx-focus .pmx-h-name-big{
    font-size:13.5px;                 /* чуть крупнее обычного для акцента */
  }
  [data-block="pricing-matrix"] .pmx-h-t.pmx-focus .pmx-h-num{
    font-size:18px;
  }
  [data-block="pricing-matrix"] .pmx-focus-badge{
    font-size:9.5px; padding:3px 8px;
    letter-spacing:.05em; border-radius:0 0 6px 6px;
  }
  [data-block="pricing-matrix"] .pmx-c{
    padding:10px 6px; font-size:12px; min-height:38px;
  }
  [data-block="pricing-matrix"] .pmx-c-name{
    padding-left:4px; padding-right:10px;
    font-size:12.5px; line-height:1.35;
  }
  [data-block="pricing-matrix"] .pmx-val{font-size:11px;}
  [data-block="pricing-matrix"] .pmx-yes{width:22px; height:22px;}
  [data-block="pricing-matrix"] .pmx-yes svg{width:12px; height:12px;}
  [data-block="pricing-matrix"] .pmx-no{width:20px; height:20px;}
  [data-block="pricing-matrix"] .pmx-no svg{width:9px; height:9px;}

  /* H2 внутри пустой ячейки шапки (когда headInLeft) — прячем,
     версия для мобилы уже отрисована выше через .pmx-head-mobile-only */
  [data-block="pricing-matrix"] .pmx-h-empty .pmx-head-left{display:none;}
  [data-block="pricing-matrix"] .pmx-h-empty{min-height:0;}
}

/* ============ ULTRA-NARROW (≤400px) — узкие телефоны ============ */
@media (max-width:400px){
  [data-block="pricing-matrix"] .pmx-head-mobile-only .pmx-title{font-size:20px;}
  [data-block="pricing-matrix"] .pmx-c{padding:9px 5px; font-size:11.5px;}
  [data-block="pricing-matrix"] .pmx-c-name{font-size:12px; padding-right:8px;}
  [data-block="pricing-matrix"] .pmx-h-name-big{font-size:12.5px;}
  [data-block="pricing-matrix"] .pmx-h-num{font-size:15px;}
}