/* Справочник, отзывы, мастера. Дополнение к site.css в системе «Шоурум»:
   линейка 1 px вместо рамок и теней, радиус 3 px, шрифты и токены общие,
   моноширинных начертаний и капслочных надзаголовков нет. */

/* ============================================================
   лента справочника
   ============================================================ */
/* строка-якоря на полки: обычный текст с разделителями */
.bl-nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin-top:22px;font-size:16px}
.bl-nav a{border-bottom:1px solid var(--line);padding-bottom:2px;color:var(--muted)}
.bl-nav a:hover{color:var(--ink);border-color:var(--ink)}
.bl-nav__sep{color:var(--line)}
.bl-shelf + .bl-shelf .sechead{border-top:1px solid var(--line);padding-top:36px}
.bl-shelf h2{font-size:clamp(25px,2.6vw,32px)}

/* карточки справочника - типографские, без картинок: лента статей не должна повторять каталог */
.bcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.bcard{display:block;border-top:1px solid var(--line);padding-top:16px}
.bcard__t{
  display:block;font-family:var(--display);font-weight:600;font-size:20px;
  line-height:1.25;letter-spacing:-0.018em;
}
.bcard:hover .bcard__t{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.bcard__s{display:block;font-size:15.5px;line-height:1.5;color:var(--muted);margin-top:9px;max-width:46ch}
.bcard__m{display:block;font-size:14.5px;color:var(--muted);margin-top:11px}
/* первая статья полки - крупная карточка на тёплом фоне */
.bcard--lead{
  border-top:0;background:var(--warm);border-radius:3px;
  padding:32px 34px;margin-bottom:38px;transition:opacity .15s;
}
.bcard--lead:hover{opacity:.9}
.bcard--lead .bcard__t{font-size:clamp(24px,2.6vw,30px);line-height:1.15;max-width:26ch}
.bcard--lead .bcard__s{font-size:17px;line-height:1.55;max-width:70ch;margin-top:12px}
.bcard--lead .bcard__m{margin-top:14px}

/* ============================================================
   статья: текст и оглавление
   ============================================================ */
.art-page .page-head h1{max-width:24ch}
.art-page .page-head .lede{font-size:clamp(18px,1.6vw,20.5px);max-width:60ch;margin-top:20px}
.art{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:64px;align-items:start;padding:34px 0 0}
.art__main{min-width:0}
.art__side{position:sticky;top:calc(var(--head) + 30px)}
.toc{border-left:1px solid var(--line);padding-left:20px}
.toc__t{font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li+li{margin-top:10px}
.toc a{display:block;font-size:15px;line-height:1.35;color:var(--muted)}
.toc a:hover{color:var(--ink)}
/* активный пункт при прокрутке ставит blog.js */
.toc a.is-on{color:var(--ink);font-weight:500}
.toc-m{display:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:28px}
.toc-m > summary{
  list-style:none;cursor:pointer;position:relative;padding:16px 36px 16px 0;
  font-family:var(--display);font-weight:500;font-size:17px;
}
.toc-m > summary::-webkit-details-marker{display:none}
.toc-m > summary::after{
  content:"";position:absolute;right:8px;top:22px;width:9px;height:9px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);
}
.toc-m[open] > summary::after{transform:rotate(225deg);top:26px}
.toc-m .toc{border-left:0;padding:0 0 18px}

.art-meta{font-size:15px;color:var(--muted);margin-top:18px}
/* быстрые факты - пары «ключ - значение», не чипы */
.facts{display:flex;flex-wrap:wrap;gap:22px 44px;margin:30px 0 0;max-width:940px}
.facts > div{flex:1 1 170px;max-width:290px;border-top:1px solid var(--line);padding-top:13px}
.facts dt{font-size:14.5px;line-height:1.35;color:var(--muted)}
.facts dd{
  margin:7px 0 0;font-family:var(--display);font-weight:600;font-size:23px;
  letter-spacing:-0.025em;line-height:1.2;color:var(--ink);
}

/* ---------- тело статьи: редакционная колонка ---------- */
/* колонку по 67 знаков держит текст, а таблицы и плитки занимают всю ширину статьи */
.art .prose{max-width:none;font-size:18px;line-height:1.65}
.art .prose p,.art .prose ul,.art .prose ol,.art .prose dl,
.art .prose blockquote,.art .prose h3,.art .prose figure,
.art .prose .brief,.art .prose .notice{max-width:67ch}
.art .prose h2{
  font-size:clamp(26px,2.6vw,32px);line-height:1.12;
  margin:56px 0 16px;padding-top:24px;border-top:1px solid var(--line);
}
.art .prose > h2:first-child,
.art .prose > section:first-child > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.art .prose h3{font-size:22px;margin:36px 0 10px}
.art .prose p{margin:0 0 20px}
.art .prose ul{list-style:none;margin:0 0 22px;padding-left:0}
.art .prose ul > li{position:relative;padding-left:22px;margin-bottom:10px}
.art .prose ul > li::before{content:"";position:absolute;left:0;top:.78em;width:9px;height:1px;background:var(--muted)}
.art .prose ol{margin:0 0 22px;padding-left:24px}
.art .prose ol > li{margin-bottom:10px;padding-left:4px}
.art .prose ol > li::marker{color:var(--muted)}
.art .prose ul ul,.art .prose ol ol,.art .prose ul ol,.art .prose ol ul{margin:10px 0 0}
.art .prose strong{font-weight:600}
.art .prose a{border-bottom:1px solid var(--line)}
.art .prose a:hover{border-color:var(--ink)}
/* ссылка в ответе FAQ (spravochnik.cjs faqAnswer) - как в тексте статьи, иначе её не отличить от текста */
.art-page .qa p a{color:var(--ink);border-bottom:1px solid var(--line)}
.art-page .qa p a:hover{border-color:var(--ink)}

/* врезка-вывод: «Коротко» в начале, «Запомнить» в конце */
.art .brief{background:var(--warm);border-radius:3px;padding:26px 30px;margin:34px 0}
.art .prose > .brief:first-child,.art .prose > section.brief:first-child{margin-top:0}
.art .brief__t{
  font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:-0.02em;line-height:1.2;margin-bottom:12px;
}
.art .brief h2,.art .brief h3{
  font-size:20px;line-height:1.2;letter-spacing:-0.02em;
  margin:0 0 12px;padding-top:0;border-top:0;
}
.art .brief p,.art .brief li{font-size:17px;line-height:1.6}
.art .brief p{margin:0 0 12px}
.art .brief > *:last-child,.art .brief ul:last-child,.art .brief p:last-child{margin-bottom:0}
.art .prose section.brief > * + *{margin-top:0}

/* сравнительные таблицы: шапка чернилами, первая колонка полужирная, строки через одну */
.art .prose .table-wrap{margin:28px 0 30px -14px}
.art .prose table.t{font-size:16px}
.art .prose table.t th{
  font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink);
  padding:0 20px 12px 14px;border-bottom:1px solid var(--ink);white-space:normal;
}
.art .prose table.t td{padding:14px 20px 14px 14px;border-bottom:0;line-height:1.5}
.art .prose table.t tbody tr:nth-child(2n){background:var(--warm)}
.art .prose table.t tbody td:first-child,.art .prose table.t tbody th:first-child{font-weight:600;color:var(--ink)}

/* ---------- унаследованная разметка внутри .prose ---------- */
.prose .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px;margin:30px 0}
.prose .tiles .tile__pk{display:none}
.prose .jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0;padding:0;list-style:none}
.prose .jump a{display:block;border:0}
.prose .jump img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:3px}
.prose .jump span{display:block;margin-top:8px;font-size:15.5px;font-weight:500}
.prose .jump__t{font-size:15.5px;color:var(--muted);margin-bottom:12px}
.prose .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px;margin:30px 0;padding:0;list-style:none}
.prose .stats > div,.prose .stats > li{border-top:1px solid var(--line);padding-top:14px;margin:0}
.prose .stats b{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-0.03em;line-height:1;display:block}
.prose .stats span{display:block;font-size:15px;color:var(--muted);margin-top:8px}
.prose .spec{margin:32px 0}
.prose .spec__t{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-0.02em;margin-bottom:14px}
.prose .spec__note{font-size:15px;color:var(--muted);margin-top:14px;max-width:67ch}
/* коллекции карточками, а не таблицей (правило «без таблиц вне прайса»): имя, цена, пары .kv */
.prose .spec__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px}
.prose .spec__c{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:14px}
.prose .spec__c .spec__n{
  align-self:flex-start;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-0.02em;
  border-bottom:1px solid var(--line);
}
.prose .spec__p{font-family:var(--display);font-weight:600;font-size:17px;margin-top:4px}
.prose .spec__c .kv{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:14px;padding-top:14px;max-width:none}
.prose .spec__c .kv dd{font-size:16px}
/* пары «ключ - значение» внутри текста статьи (бывшие таблицы из двух столбцов) */
.art .prose > .kv,.art .prose section > .kv{margin:26px 0 28px}

/* схема в статье: рисунок inline (подписи шрифтом сайта), легенда - обычным текстом */
.prose .scheme{margin:30px 0 32px;max-width:none}
.prose .scheme__pic svg{display:block;width:100%;height:auto}
.prose .scheme--layers{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:18px 36px;align-items:center}
.prose .scheme--layers figcaption{grid-column:1 / -1}
.prose .scheme--tree .scheme__pic{max-width:440px}
.prose .scheme svg text{font-family:var(--text)}
.art .prose .scheme__legend{margin:0;padding-left:22px;font-size:16px;line-height:1.5;max-width:none}
.art .prose .scheme__legend li{margin-bottom:8px}
.art .prose .scheme__legend li::marker{font-family:var(--display);font-weight:600;color:var(--ink)}
.prose .scheme figcaption{font-size:15px;color:var(--muted);margin-top:14px}

/* кнопки внутри текста статьи: у ссылок .prose своё подчёркивание, у кнопки его быть не должно */
.art .prose .art-acts{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 26px}
.art .prose .art-acts .btn,.art .prose .art-acts .btn:hover{border-bottom:1px solid var(--line)}
.art .prose .art-acts .btn:hover{border-color:var(--ink)}
.prose .eyebrow{font-size:15px;color:var(--muted);margin-bottom:4px}
.prose .gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:30px 0}
.prose .gal img{border-radius:3px;background:var(--warm)}
/* тела статей приходят секциями: интервалы site.css заданы прямым детям .prose */
.prose section > * + *{margin-top:1em}
.prose section > h2 + *,.prose section > h3 + *{margin-top:.5em}
.prose > section:first-child > h2:first-child{margin-top:0}
/* заметка набирается как врезка-вывод: те же отступы и кегль */
.prose .notice{background:var(--warm);border-radius:3px;padding:26px 30px;margin:34px 0;font-size:17px}
.prose .notice p{margin:0}
.prose .notice p + p,.prose .notice ul{margin-top:10px}
.prose .notice ul{margin-bottom:0}

/* ---------- полоса сотрудничества ---------- */
.offer{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:46px 0 0;
}
.offer p{font-size:16.5px;color:var(--muted);max-width:66ch}
.offer b{color:var(--ink);font-weight:500}
/* «Укладка»: полоса для покупателя - замер, телефон Казани и «Написать» */
.offer--client p{max-width:52ch}
.offer--client b{font-weight:600}
.offer__acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- врезка «Посмотреть вживую» ---------- */
.live__hubs{
  display:flex;flex-wrap:wrap;gap:26px 56px;align-items:flex-start;
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line);
}
.live__hub{display:flex;flex-direction:column;gap:3px;font-size:15.5px;color:var(--muted);flex:1 1 260px;max-width:380px}
.live__hub b{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:3px}
.live__tel{align-self:flex-start;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);margin-top:5px}
.live__tel:hover{border-bottom:1px solid var(--ink)}
/* что склад обещает на месте: у каждого склада своя строка (в Москве пока всё под заказ) */
.live__note{margin-top:8px;color:var(--ink);font-size:15.5px;line-height:1.45}

/* ---------- «Читать дальше» ---------- */
.bl-rel .wrap{border-top:1px solid var(--line);padding-top:42px}

/* ---------- заметка вне .prose ---------- */
.notice{background:var(--warm);border-radius:3px;padding:22px 24px;font-size:16.5px;color:var(--muted);max-width:74ch}
.notice b{color:var(--ink);font-weight:500}

/* ============================================================
   отзывы
   ============================================================ */
.rv-sum{
  display:flex;flex-wrap:wrap;gap:22px 56px;align-items:baseline;
  margin-top:34px;padding-top:24px;border-top:1px solid var(--line);
}
.rv-sum__i{font-size:16px;color:var(--muted)}
.rv-sum__i b{
  font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-0.03em;
  color:var(--ink);margin-right:12px;
}
.rv-grid{columns:3;column-gap:46px}
.rv{break-inside:avoid;display:inline-block;width:100%;margin:0 0 32px;padding-top:22px;border-top:1px solid var(--line)}
.rv p{font-size:16.5px;line-height:1.6}
.rv__who{display:block;margin-top:14px;font-size:14.5px;color:var(--muted)}
.rv__src{border-bottom:1px solid var(--line)}
.rv__src:hover{border-color:var(--ink)}

/* ============================================================
   мастера
   ============================================================ */
.mcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 44px}
.mcard{display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:start}
.mcard__ph{display:block;aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--warm)}
.mcard__ph img{width:100%;height:100%;object-fit:cover}
.mcard__n{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-0.02em}
.mcard__c{font-size:15px;color:var(--muted);margin-top:5px}
.mcard__a{font-size:16px;color:var(--muted);line-height:1.55;margin-top:12px;max-width:46ch}
.mcard__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.mhead{display:grid;grid-template-columns:320px minmax(0,1fr);gap:52px;align-items:start;padding:32px 0 0}
/* главная картинка страницы мастера - фото уложенного пола, портретов на сайте нет */
.mhead__ph{margin:0}
.mhead__ph picture{display:block;aspect-ratio:3/4;border-radius:3px;overflow:hidden;background:var(--warm)}
.mhead__ph img{width:100%;height:100%;object-fit:cover}
.mhead__ph figcaption{font-size:14.5px;color:var(--muted);margin-top:10px}
.mhead p{font-size:17px;line-height:1.6;color:var(--muted);max-width:58ch;margin-bottom:14px}
.mrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.lay h3{margin-bottom:4px;min-height:2.4em}   /* ряды пар выстраиваются в линию при длинном названии */
.lay .kv{margin-top:6px}
.lay p{font-size:15.5px;color:var(--muted);margin-top:12px;max-width:34ch}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px}
.gallery figure{margin:0}
.gallery figure > span{display:block;aspect-ratio:3/4;border-radius:3px;overflow:hidden;background:var(--warm)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{font-size:14.5px;color:var(--muted);margin-top:10px}

.mvids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px}
.mvids figure{margin:0}
/* атрибуты width/height у <video> (720×1280) без height:auto давали столбы высотой 1280 px (аудит 25.09.2026) */
.mvids video{
  display:block;width:100%;height:auto;aspect-ratio:9/16;max-height:560px;
  object-fit:cover;border-radius:3px;background:var(--ink);
}
.mvids figcaption{font-size:14.5px;color:var(--muted);margin-top:10px}

/* ============================================================
   адаптив
   ============================================================ */
@media (max-width:1100px){
  .bcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
  .art{grid-template-columns:1fr;gap:0}
  .art__side{display:none}
  .toc-m{display:block}
  .rv-grid{columns:2;column-gap:36px}
  .mhead{grid-template-columns:240px minmax(0,1fr);gap:36px}
}

@media (max-width:900px){
  .bcard--lead{padding:24px 22px;margin-bottom:30px}
  .bcard--lead .bcard__t{font-size:23px;max-width:none}
  .bcard--lead .bcard__s{font-size:16px;max-width:none}
  .art{padding-top:26px}
  .art-page .page-head .lede{font-size:18px;max-width:none}
  .facts{gap:18px 26px;margin-top:24px}
  .facts > div{flex:1 1 calc(50% - 26px);max-width:none}
  .facts dd{font-size:21px}
  .art .prose{font-size:17px;line-height:1.6;max-width:none}
  .art .prose h2{font-size:26px;margin:40px 0 14px;padding-top:20px}
  .art .prose h3{font-size:20px;margin:28px 0 8px}
  .art .brief{padding:22px 20px;margin:28px 0}
  .art .brief p,.art .brief li{font-size:16.5px}
  .live__hubs{gap:22px 34px;margin-top:30px}
  .prose .spec__cards{grid-template-columns:1fr;gap:22px}
  .prose .scheme--layers{grid-template-columns:1fr}
  .prose .scheme--layers .scheme__pic{max-width:440px}
  .bl-rel .wrap{padding-top:34px}
  .prose .tiles,.prose .jump,.prose .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
  .prose .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lay h3{min-height:0}
  .lay-grid{grid-template-columns:1fr !important;gap:34px}
  .mcards{grid-template-columns:1fr;gap:34px}
  .mhead{grid-template-columns:1fr;gap:22px}
  .mhead__ph{max-width:280px}
  .mhead p{max-width:none}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mvids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer{margin-top:34px}
}

@media (max-width:640px){
  /* сравнительные таблицы статей на телефоне раскладываются карточками:
     шапка скрыта, подпись столбца встаёт перед значением (data-label ставит spravochnik.cjs) */
  .prose .table-wrap{overflow-x:visible}
  .art .prose .table-wrap{margin-left:0}
  .prose table.t{font-size:15px;display:block}
  .prose table.t thead{display:none}
  .prose table.t tbody,.prose table.t tr{display:block}
  .prose table.t tr{border-top:1px solid var(--line);padding:12px 0}
  .prose table.t tr:first-child{border-top:0}
  .prose table.t td,.prose table.t th{display:block;border:0;padding:1px 0;white-space:normal}
  .art .prose table.t tr{padding:14px}
  .art .prose table.t td,.art .prose table.t th{padding:2px 0}
  .prose table.t th[scope="row"],.prose table.t td:first-child,.prose table.t th:first-child{
    font-family:var(--display);font-weight:600;font-size:16.5px;margin-bottom:5px;
  }
  .prose table.t td[data-label]::before{content:attr(data-label) ": ";color:var(--muted)}
  /* пустая ячейка (строка «Итого» без расчёта) карточкой не нужна: подписи у неё нет, лишний отступ не оставляем */
  .prose table.t td:empty{display:none}
  .prose table.t .r{text-align:left}
  .facts > div{flex:1 1 calc(50% - 13px)}

  .bcards{grid-template-columns:1fr;gap:30px}
  .bcard__s{max-width:none}
  .rv-grid{columns:1}
  .rv p{font-size:16px}
  .prose .stats{grid-template-columns:1fr}
  .mcard{grid-template-columns:96px minmax(0,1fr);gap:18px}
  .mcard__n{font-size:20px}
  .mcard__row .btn{height:44px;padding:0 14px;font-size:15px}
  .mrow .btn{flex:1 1 100%}
  .mcard__a{max-width:none}
  .lay p{max-width:none}
  .offer .btn{width:100%}
  .offer__acts{width:100%}
  .offer__acts .btn{flex:1 1 100%}
  .live__hub{max-width:none}
  /* ролики мастеров на телефоне - лентой со снапом, а не двумя узкими столбами */
  .mvids{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;
  }
  .mvids figure{flex:0 0 72%;max-width:280px;scroll-snap-align:start}
  .mvids video{max-height:70vh}
  /* схемы стыков (три картинки в ряд) на телефоне - по одной: подписи в SVG мелкие */
  .prose .gal{grid-template-columns:1fr}
}