/* lp-layout-20261112.css
   Общий пакет вёрстки посадочных: фото с обтеканием, читаемые таблицы.
   Подключать на страницах серии. Тему берёт из CSS-переменных сайта (светлая и тёмная).
   Тексты не меняет. */

/* ——— Фото в тексте: 40–45% колонки, обтекание, чередование ——— */
.art figure.lp-fig,
figure.lp-fig{
  float:right;
  width:min(420px,44%);
  max-width:44%;
  margin:6px 0 18px 22px;
  padding:0;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:12px;
  background:var(--card,#181D25);
  border:1px solid var(--line,#262D38);
}
.art figure.lp-fig.lp-l,
figure.lp-fig.lp-l{
  float:left;
  margin:6px 22px 18px 0;
}
.art figure.lp-fig.lp-r,
figure.lp-fig.lp-r{
  float:right;
  margin:6px 0 18px 22px;
}
.art figure.lp-fig img,
figure.lp-fig img{
  width:100%;
  height:auto;
  display:block;
  border-radius:0;
}
.art figure.lp-fig figcaption,
figure.lp-fig figcaption{
  display:block;
  margin:0;
  padding:8px 12px 10px;
  font-size:13px;
  line-height:1.4;
  color:var(--mut,#5f6b7a);
  background:var(--card,#181D25);
  border-top:1px solid var(--line,#262D38);
}

/* сброс обтекания перед заголовками, таблицами и крупными блоками */
.art h2,
.art h3,
.art .lp-tbl-wrap,
.art table.lp-tbl,
.art table.faq,
.art .lp-note,
.art .lp-instr,
.art .rst-cards,
.art .rst-steps,
.art section.lead,
.lp-clear{
  clear:both;
}

/* список без иконок: не сжимать текст в колонку 28px под .gi */
.rst-ilist li:not(:has(.gi,svg,img)){
  grid-template-columns:1fr;
}
/* карточки списка рядом с обтекаемым фото */
.art .rst-ilist li{
  overflow:auto;
}

/* ——— Таблицы ——— */
.lp-tbl-wrap{
  width:100%;
  max-width:100%;
  margin:16px 0 20px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  border:1px solid var(--line,#262D38);
  background:var(--card,#181D25);
  box-sizing:border-box;
}
table.lp-tbl{
  width:100%;
  border-collapse:collapse;
  margin:0;
  font-size:15px;
  color:var(--fg,var(--ink,inherit));
  background:transparent;
}
table.lp-tbl th,
table.lp-tbl td{
  border:1px solid var(--line,#262D38);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
  color:inherit;
}
table.lp-tbl thead th{
  background:var(--thbg,var(--ac,#1e3a5f));
  color:var(--thc,#fff);
  font-weight:700;
  font-size:14px;
  letter-spacing:.2px;
  border-color:transparent;
  border-bottom:1px solid var(--line,#262D38);
}
body.v2 table.lp-tbl thead th{
  background:#243044;
  color:#fff;
  border-bottom-color:#323B49;
}
table.lp-tbl tbody tr:nth-child(even){
  background:rgba(127,140,160,.08);
}
body.v2 table.lp-tbl tbody tr:nth-child(even){
  background:#1a212b;
}
table.lp-tbl tbody th{
  font-weight:600;
  color:var(--fg,#ECEFF4);
}

/* записка под таблицей: те же переменные, без светлого листа на тёмной теме */
.lp-note{
  background:var(--card,#181D25);
  color:var(--fg,#ECEFF4);
  border:1px solid var(--line,#262D38);
  border-left:4px solid var(--ac,#c9a227);
  padding:12px 14px;
  border-radius:10px;
  margin:14px 0;
}

/* приборная сетка — не трогаем обтеканием, только читаемые подписи */
.lp-instr{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:12px 0 18px;
  clear:both;
}
.lp-instr figure{
  margin:0;
  background:#fff;
  border:1px solid var(--line,#e3e8ee);
  border-radius:10px;
  padding:8px;
  text-align:center;
}
.lp-instr img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
}
.lp-instr figcaption{
  font-size:13px;
  color:#4a5562;
  margin-top:4px;
}

/* телефон: фото на всю ширину, без обтекания; широкие таблицы — горизонтальный скролл */
@media (max-width:767px){
  .art figure.lp-fig,
  figure.lp-fig,
  .art figure.lp-fig.lp-l,
  figure.lp-fig.lp-l,
  .art figure.lp-fig.lp-r,
  figure.lp-fig.lp-r{
    float:none;
    width:100%;
    max-width:100%;
    margin:12px 0 16px;
  }
  .lp-instr{grid-template-columns:repeat(2,1fr)}
  table.lp-tbl{font-size:14px}
  table.lp-tbl th,
  table.lp-tbl td{padding:8px 10px}
  /* 3+ колонки: не сжимаем в кашу, даём прокрутку */
  .lp-tbl-wrap:has(thead th:nth-child(3)) table.lp-tbl{
    min-width:620px;
  }
}
@media (max-width:480px){
  .lp-instr{grid-template-columns:1fr 1fr}
}

/* ——— Дополнения для всей серии (светлые темы, другие шаблоны) ——— */

/* запасные цвета шапки: navy/head/акцент сайта, иначе тёмно-синий + белый */
table.lp-tbl thead th,
table.lp-tbl > tr:first-child th,
.lp-tw table thead th,
.lp-tw table > tr:first-child th,
.tbw table.tb thead th,
table.tb thead th{
  background:var(--thbg,var(--navy,var(--head,var(--ac,#1e3a5f))));
  color:var(--thc,#fff);
}

/* обёртка .lp-tw (proverka-smet) и нормы .tb — те же правила, что у .lp-tbl */
.lp-tw,
.tbw{
  width:100%;
  max-width:100%;
  margin:16px 0 20px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  border:1px solid var(--line,#262D38);
  box-sizing:border-box;
}
.lp-tbl-wrap table,
.lp-tw table,
.tbw table.tb{
  display:table;
  width:100%;
  border-collapse:collapse;
}
.lp-tw table th,
.lp-tw table td,
.tbw table.tb th,
.tbw table.tb td{
  border:1px solid var(--line,#dde3ea);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
.lp-tw table tbody tr:nth-child(even),
.tbw table.tb tbody tr:nth-child(even),
table.tb tbody tr:nth-child(even){
  background:rgba(127,140,160,.08);
}
body.v2 .tbw table.tb thead th,
body.v2 table.tb thead th{
  background:#243044;
  color:#fff;
  border-bottom-color:#323B49;
}

/* сброс обтекания и на шаблонах без .art */
h2,h3,.lp-tw,.tbw,.faq-table,.faq-list,.grid-3,.grid.g3,.tagrow{
  clear:both;
}

/* не трогаем сетки, где фото уже рядом с текстом */
.pain figure.lp-fig,
.pain figure.lp-fig.lp-l,
.pain figure.lp-fig.lp-r,
.frame figure,
.frame figure.lp-fig,
.lp-real figure,
.lp-real figure.lp-fig{
  float:none;
  width:100%;
  max-width:100%;
  margin:0;
  border:0;
  background:transparent;
}
.pain figure.lp-fig img,
.frame figure img,
.lp-real figure img{
  border-radius:inherit;
}
.pain figure.lp-fig figcaption,
.frame figure figcaption,
.lp-real figure figcaption{
  border:0;
  background:transparent;
  padding:8px 2px 0;
}

/* tovaroved: класс .split был в вёрстке, но без desktop-сетки — фото шли на всю ширину */
.wrap.split{
  display:grid;
  grid-template-columns:1.15fr .9fr;
  gap:28px 32px;
  align-items:start;
}

@media (max-width:900px){
  .wrap.split{grid-template-columns:1fr}
  .lp-tw:has(th:nth-child(3)) table,
  .tbw:has(th:nth-child(3)) table,
  .lp-tbl-wrap:has(thead th:nth-child(3)) table.lp-tbl{
    min-width:620px;
  }
}
@media (max-width:767px){
  .pain figure.lp-fig,
  .frame figure,
  .lp-real figure{
    float:none;
    width:100%;
    max-width:100%;
    margin:12px 0 16px;
  }
}

/* не даём широкой таблице раздвигать страницу */
.lp-tbl-wrap,
.lp-tw,
.tbw{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media (max-width:900px){
  .lp-tbl-wrap table,
  .lp-tw table,
  .tbw table{
    white-space:normal;
  }
  .lp-tbl-wrap table th,
  .lp-tbl-wrap table td,
  .lp-tw table th,
  .lp-tw table td{
    white-space:normal;
  }
}