/* autoremonty.ru — оформление по макету.
   Порядок: шрифты, переменные, сброс, шапка, главная, статья, подвал, телефон. */

/* ---------------------------------------------------------------- шрифты */
/* Файлы лежат у нас: Google Fonts в России отдаёт медленно, а иногда никак. */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/montserrat-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/montserrat-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
/* Рукописная строка на баннерах — как в образце владельца (надписи.jpg).
   Caveat, шрифт с кириллицей, лежит у нас же, а не грузится со стороны. */
@font-face{
  font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/caveat-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/caveat-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/opensans-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/opensans-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* ------------------------------------------------------------ переменные */
:root{
  /* Синий взят пипеткой из макета 1.png (кнопки и ссылки там #2D60F4). */
  --blue:#2B5CF6;
  --blue-dark:#1B44C8;
  --blue-soft:#EAF0FE;
  --btn-green:#2DB68E;    /* вторая кнопка в шапке-полосе, тоже из макета */
  --btn-green-dark:#219772;

  --ink:#101828;          /* заголовки */
  --text:#475467;         /* основной текст */
  --muted:#8A94A6;        /* даты, подписи */
  --line:#E7EAEF;
  --bg:#FFFFFF;
  --bg-soft:#F5F7FA;      /* фон секций */
  --card:#FFFFFF;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-lift:0 4px 8px rgba(16,24,40,.06), 0 16px 40px rgba(16,24,40,.10);

  --green:#12915A;  --green-soft:#DFF6E7;
  --purple:#6B3FC4; --purple-soft:#EFE7FC;
  --orange:#E07B1A; --orange-soft:#FFECD9;
  --red:#D6483F;    --red-soft:#FBE4E2;
  --teal:#0E8E8E;   --teal-soft:#DEF3F3;
  --amber:#B98900;  --amber-soft:#FAF0D0;
  --wine:#8A1538;   --wine-soft:#F7E1E7;

  --radius:14px;
  --gap:24px;
  /* Ширина колонки замерена по макету: содержимое 1289 px при окне 1440 px,
     поля по 75 px. 1289 + 2×48 = 1385. */
  --wrap:1385px;
}

/* Тёмная тема в трёх состояниях: системная, и две принудительные.
   Цвета задаются только здесь, компоненты берут их через переменные. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue:#5C9BFF; --blue-dark:#8FBAFF; --blue-soft:#152741;
    --btn-green:#2FBE93; --btn-green-dark:#4FD5AC;
    --ink:#F2F4F7; --text:#B6BECD; --muted:#7C879B;
    --line:#2A3140; --bg:#12161F; --bg-soft:#161B26; --card:#1A202C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift:0 4px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
    --green:#4ED08D; --green-soft:#12301F;
    --purple:#A98BEE; --purple-soft:#241A3A;
    --orange:#F0A050; --orange-soft:#3A2410;
    --red:#F2766D;   --red-soft:#3A1613;
    --teal:#4FD1D1;  --teal-soft:#12302E;
    --amber:#DABE4E; --amber-soft:#332B0E;
    --wine:#E88AA3;  --wine-soft:#3A1420;
  }
}
:root[data-theme="dark"]{
  --blue:#5C9BFF; --blue-dark:#8FBAFF; --blue-soft:#152741;
  --ink:#F2F4F7; --text:#B6BECD; --muted:#7C879B;
  --line:#2A3140; --bg:#12161F; --bg-soft:#161B26; --card:#1A202C;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 4px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
  --green:#4ED08D; --green-soft:#12301F;
  --purple:#A98BEE; --purple-soft:#241A3A;
  --orange:#F0A050; --orange-soft:#3A2410;
  --red:#F2766D;   --red-soft:#3A1613;
  --teal:#4FD1D1;  --teal-soft:#12302E;
  --amber:#DABE4E; --amber-soft:#332B0E;
  --wine:#E88AA3;  --wine-soft:#3A1420;
}

/* ------------------------------------------------------------------ сброс */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 16px/1.62 'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow-x:hidden;           /* горизонтальной прокрутки быть не должно */
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark)}
h1,h2,h3,h4{
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.01em;
}
h1{font-weight:800}
h2,h3,h4{font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3vw,48px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ шапка */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
/* Шапка в макете идёт почти во всю ширину окна: логотип в 43 px от левого
   края, кнопка — в 49 px от правого. Поэтому у неё своя, широкая колонка. */
.hdr .wrap{max-width:none;padding:0 clamp(16px,3.2vw,46px)}
.hdr-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,44px);height:88px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-mark{width:38px;height:38px;flex:none}
.logo-txt{font-family:'Montserrat',sans-serif;font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.02em}
.logo-txt i{font-style:normal;color:var(--blue)}
.logo-sub{display:block;font-family:'Open Sans',sans-serif;font-weight:400;font-size:10px;color:var(--muted);letter-spacing:.02em;margin-top:-2px}

.nav{display:flex;gap:clamp(18px,2.6vw,46px);margin:0 auto 0 clamp(20px,4vw,84px)}
.nav a{
  color:var(--ink);font-weight:600;font-size:16px;padding:8px 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  white-space:nowrap;
}
.nav a:hover,.nav a[aria-current]{color:var(--blue);border-bottom-color:var(--blue)}
/* Разделы сверх четырёх — в выпадашке "Ещё" рядом с основным меню (десктоп);
   на мобильном она просто разворачивается в общий список бутерброда. */
.nav-more{position:relative}
.nav-more-btn{
  display:flex;align-items:center;gap:6px;height:100%;padding:8px 0;
  background:none;border:0;cursor:pointer;font:inherit;
  color:var(--ink);font-weight:600;font-size:16px;white-space:nowrap;
}
.nav-more-btn svg{transition:transform .15s;flex:none}
.nav-more-btn:hover{color:var(--blue)}
.nav-more.open .nav-more-btn{color:var(--blue)}
.nav-more.open .nav-more-btn svg{transform:rotate(180deg)}
.nav-more-menu{
  display:none;position:absolute;top:100%;left:0;margin-top:14px;min-width:210px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(20,30,50,.14);padding:8px;z-index:30;
}
.nav-more.open .nav-more-menu{display:block}
.nav-more-menu a{
  display:block;padding:10px 12px;border-radius:8px;
  font-weight:600;font-size:15px;color:var(--ink);border-bottom:0;
}
.nav-more-menu a:hover,.nav-more-menu a[aria-current]{background:var(--bg);color:var(--blue)}

.search{position:relative;flex:0 1 330px;max-width:330px}
.hdr-cta{flex:none;height:48px;padding:0 26px;border-radius:10px;font-size:15.5px}
.nav-search-link{display:none}
.search input{
  width:100%;height:44px;padding:0 16px 0 44px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);
}
.search input::placeholder{color:var(--muted)}
.search input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
.search svg{position:absolute;left:14px;top:12px;width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2}
/* В макете лупа стоит справа от поля, а само поле выше обычного. */
.hdr-search input{height:48px;padding:0 46px 0 18px;border-radius:10px}
.hdr-search svg{left:auto;right:16px;top:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:44px;padding:0 22px;border-radius:10px;border:1px solid transparent;
  font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark);color:#fff}
.btn-ghost{background:var(--bg);color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover{background:var(--blue-soft)}
.btn-green{background:var(--btn-green);color:#fff}
.btn-green:hover{background:var(--btn-green-dark);color:#fff}
.btn-lg{height:56px;padding:0 30px;font-size:16.5px;border-radius:12px}
/* Размер иконке в кнопке нужен обязательно: у svg без width браузер берёт
   размер по умолчанию 300×150 и стрелка раздувается на пол-кнопки. */
.btn svg{width:16px;height:16px;flex:none;stroke-width:2.2}
.btn-lg svg{width:17px;height:17px}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--bg);align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ------------------------------------------------------------------ герой */
/* Как в макете главная.png (П29 от 19.08.2026): фото не документальное, а
   изолированная предметная съёмка — машина «парит» в мягком белом облаке
   на светлом градиентном фоне (см. BANNER_STYLE в pics.php), само облако
   уже смещено вправо в самой картинке. Тёмной плёнки поверх фото больше
   нет — фон и так достаточно светлый слева под текст, поэтому текст тут
   тёмный (см. .ht ниже), а не белый, как было при тёмном фото. Пропорции
   полосы 2,577:1 сняты с макета (1440×559 CSS). */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(430px,38.8vw,620px);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--blue-soft);
  /* Полосу листают пальцем и мышкой (см. main.js). pan-y отдаёт браузеру
     только вертикальную прокрутку, горизонтальный жест остаётся нам. */
  touch-action:pan-y;
}
.hero-media{position:absolute;inset:0;z-index:-1}
.hb{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.hb.is-active{opacity:1}
.hb img{width:100%;height:100%;object-fit:cover;object-position:right center}
/* Без этого мышь на слайде начинает не жест, а перетаскивание картинки или
   выделение текста, и до конца жеста дело не доходит. */
.hero img,.hcard{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

.hero-in{width:100%;padding-top:clamp(22px,3vw,40px)}
.hero-foot{width:100%;padding-bottom:clamp(22px,3vw,40px)}
.hero-plate,.hero-btns{max-width:min(620px,54%)}
/* Слайды лежат друг на друге в одной ячейке — при перелистывании ничего не
   прыгает по высоте. Каждый слайд целиком ссылка; у неактивных клики
   выключены, иначе невидимый слайд перехватывал бы нажатия. */
.hero-plate{display:grid}
.hcard{
  grid-area:1/1;display:block;color:inherit;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.hcard.is-active{opacity:1;pointer-events:auto}
/* Надпись собрана по образцу главная.png: рукописная строка золотая, крупные
   строки — первое слово тёмное, второе синее, подзаголовок приглушённый
   тёмный. Цвета не через var(--ink)/var(--muted): фото баннера — статичная
   картинка, не подстраивается под тёмную тему сайта, поэтому текст тоже
   держим фиксированным тёмным (тот же приём, что и в .expert-txt ниже).
   Первый заголовок <h1>, остальные <p>. */
.ht{
  font-family:'Montserrat',sans-serif;font-weight:800;
  line-height:1.16;color:#0F1527;
}
.ht-pre{
  display:inline-block;position:relative;font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(26px,2.6vw,38px);line-height:1;color:#F5B700;
  margin-bottom:16px;
}
/* Волнистое подчёркивание из промпта владельца: тонкая золотая линия с
   лёгким изгибом вверх, ширина всегда равна ширине слова над ней. */
.ht-pre::after{
  content:'';position:absolute;left:2px;right:2px;bottom:-12px;height:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M2,12 Q50,20 98,4' stroke='%23F5B700' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat;
  background-size:100% 100%;
}
/* Крупные строки: заглавные, плотный трекинг — как на фото 2.png. Первое
   слово (b1) белое, второе (b2) синее — .ht-pre всегда первый ребёнок
   .ht, поэтому b1/b2 ловятся строго по позиции: 2-й и 3-й child. */
.ht-big{
  display:block;text-transform:uppercase;
  font-size:clamp(34px,4.4vw,63px);line-height:1.02;letter-spacing:.5px;
}
.ht-big:nth-child(2){color:#0F1527}
.ht-big:nth-child(3){color:var(--blue)}
.ht-sub{
  display:block;margin-top:9px;font-weight:500;color:#3A4459;
  font-size:clamp(14.5px,1.35vw,19px);line-height:1.35;
}
/* Таблетка с золотой обводкой — акцент остался тот же, только текст внутри
   теперь тёмный (фон под ней светлый, а не тёмное фото, как раньше). */
.hl{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  padding:13px 22px;border:1.5px solid #F5B700;border-radius:999px;
  font-weight:700;font-size:clamp(15px,1.2vw,17.5px);color:#0F1527;
  transition:background .15s;
}
.hcard:hover .hl{background:rgba(245,183,0,.12)}
.hl svg{width:18px;height:18px;stroke:#F5B700;fill:none;stroke-width:2.2;transition:transform .2s}
.hcard:hover .hl svg{transform:translateX(4px)}
.hero-btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
/* Кнопки под баннером — по фото 2.png: первая залита синим (обычный
   .btn-primary), вторая белая с синей обводкой (.btn-ghost задаётся в
   разметке home.php вместо .btn-green). Своих цветов тут не задаём. */
/* Переливание: раз в несколько секунд по кнопке проходит светлый блик.
   Это отдельный слой ::after с отрицательным z-index — он ложится поверх
   заливки, но под текстом, поэтому надпись не мигает и остаётся чёткой.
   isolation создаёт кнопке свой контекст, иначе слой ушёл бы за баннер. */
.hero-btns .btn{position:relative;overflow:hidden;isolation:isolate}
.hero-btns .btn::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:55%;z-index:-1;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:btn-shine 4s ease-in-out infinite;
}
/* Вторая кнопка переливается со сдвигом — вместе они бы мигали как гирлянда. */
.hero-btns .btn+.btn::after{animation-delay:.7s}
@keyframes btn-shine{
  0%{left:-60%}
  50%,100%{left:125%}
}
/* Кому анимация мешает — блик просто не показываем. */
@media (prefers-reduced-motion:reduce){
  .hero-btns .btn::after{display:none}
}
.hero-dots{display:flex;gap:9px;margin-top:24px}
.hc-dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(16,24,40,.22);transition:background .2s,width .2s;
}
.hc-dot.is-active{width:26px;border-radius:99px;background:var(--blue)}

/* ------------------------------------------------------- карточки разделов */
/* Фон секции в макете чуть темнее белого — #FDFDFD, полосой во всю ширину. */
.sections{padding:clamp(34px,4.2vw,58px) 0;background:#FDFDFD}
/* Сетка 4×2: карточка 305 px, промежуток 24 px — 4×305 + 3×24 = 1292 ≈ 1289. */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.sec-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:24px 22px;text-align:left;
  display:flex;flex-direction:row;align-items:center;gap:16px;
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.sec-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px);border-color:transparent}
/* Как в макете: иконка крупная, по высоте примерно вровень с блоком из трёх
   строк (заголовок + подпись + «Читать статьи»), а не только с заголовком —
   поэтому и вся строка (align-items:center) собрана по центру, а не сверху. */
.sec-ico{width:64px;height:64px;flex:none}
/* Без flex:1 + min-width:0 у текстового блока — колонка текста тянется по
   min-content слов заголовка (умолчание флекс-айтема). У однословных
   заголовков («Обслуживание») min-content большой — колонка остаётся
   широкой; у составных («Кузов и салон») min-content равен ширине САМОГО
   короткого слова — колонка проседает, и заголовок разваливается по
   одному слову на строку. Карточки одной и той же ширины из-за этого
   выглядели у владельца «разного размера» (П30). Фиксируем ширину колонки
   одинаковой для всех карточек, независимо от текста. */
.sec-card>span+span{flex:1 1 auto;min-width:0}
/* Каждый раздел закреплён за своим цветом (cat_tone() в render.php) — как в
   макете, где у «Шин» синяя иконка, у «Ремонта» зелёная, у «Диагностики»
   фиолетовая и т.д. PNG сами по себе одноцветные (см. fix_icons.py), поэтому
   красим их через mask-image заливкой background-color, а не через <img>:
   так один и тот же файл перекрашивается в любой var(--<тон>) без 8 копий
   картинки. --ic со ссылкой на конкретный PNG приходит инлайн из home.php.
   Вписываем через mask-size:contain, а не max-width/max-height на <img> —
   раньше вытянутая по высоте ic-to («Обслуживание») вылезала за коробку. */
.sec-ico{
  -webkit-mask-image:var(--ic);mask-image:var(--ic);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  background-color:var(--blue);
}
/* line-clamp:2 — заголовок ВСЕГДА резервирует ровно 2 строки, сколько бы
   слов в нём ни было (у «Обслуживание» — 1 слово, у «Кузов и салон» — 3):
   раньше при broken column-width (см. flex:1 выше) короткие многословные
   заголовки съезжали в 3 строки по одному слову, а длинные однословные —
   норовили вылезти за карточку. break-word — чтобы длинное слово при
   нехватке места переносилось внутри себя, а не вываливалось наружу. */
.sec-card h3{
  font-size:17.5px;margin-bottom:5px;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-wrap:initial;
}
/* Владелец 19.08.2026: «в десктоп то в категориях слово обслуживание не
   влезло в одну строку, буква е перешла на следующую, такого быть не должно
   нигде». Самое длинное название раздела — «Обслуживание», 144,5 px при
   700 17.5px Montserrat. В карусели категорий колонка текста = ширина
   плитки − 44 (паддинги) − 64 (иконка) − 16 (зазор), поэтому слово рвалось
   на всех ширинах окна, где плитка уже ~269 px. Освобождаем колонке ~18 px
   (иконка 56 вместо 64, паддинги и зазор чуть меньше) и заодно поднимаем
   границу перехода на 3 плитки до 1180 px (см. медиа-запрос ниже): вместе
   это даёт запас даже при зуме браузера 110 %. Метрики правим у ВСЕХ
   .sec-card, а не только в карусели: те же плитки стоят сеткой в «Все
   разделы», и там слово рвалось ровно так же. */
.sec-card{padding:22px 18px;gap:14px}
.sec-ico{width:56px;height:56px}
.sec-card p{
  font-size:13.5px;line-height:1.5;color:var(--muted);overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.sec-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-weight:600;font-size:13.5px;color:var(--blue);
}
.sec-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s}
.sec-card:hover .sec-cta svg{transform:translateX(3px)}
.sec-card.t-green .sec-ico{background-color:var(--green)}
.sec-card.t-green .sec-cta{color:var(--green)}
.sec-card.t-purple .sec-ico{background-color:var(--purple)}
.sec-card.t-purple .sec-cta{color:var(--purple)}
.sec-card.t-orange .sec-ico{background-color:var(--orange)}
.sec-card.t-orange .sec-cta{color:var(--orange)}
.sec-card.t-red .sec-ico{background-color:var(--red)}
.sec-card.t-red .sec-cta{color:var(--red)}
.sec-card.t-teal .sec-ico{background-color:var(--teal)}
.sec-card.t-teal .sec-cta{color:var(--teal)}
.sec-card.t-amber .sec-ico{background-color:var(--amber)}
.sec-card.t-amber .sec-cta{color:var(--amber)}
.sec-card.t-wine .sec-ico{background-color:var(--wine)}
.sec-card.t-wine .sec-cta{color:var(--wine)}
:root[data-theme="dark"] .sections{background:var(--bg-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sections{background:var(--bg-soft)}}

/* --------------------------------------------------------- лента статей */
/* ВАЖНО: только padding-block. Секции на главной — это <section class="wrap
   block">, а сокращённое `padding: X 0` обнуляло боковые отступы .wrap, и
   блок «Популярные статьи» вылезал на 48 px левее «Популярных категорий».
   Именно это владелец видел как «съехало влево, ушло за рамки сайта». */
.block{padding-block:clamp(32px,4vw,56px)}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:26px}
.block-head h2{font-size:clamp(23px,2.15vw,30px)}
.block-head a{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--blue)}
.block-head a:hover{color:var(--blue-dark)}
.block-head a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}

/* --------------------------------------------- популярные статьи (макет) */
/* Три карточки в ряд: фото 2,16:1, белая плашка раздела с синей надписью,
   крупный заголовок и нижняя строка «автор — дата» через светлую линию. */
/* Карусель: обычная горизонтальная прокрутка с прилипанием. Пальцем на
   телефоне листается средствами самого браузера, мышью — перетаскиванием
   (main.js) и стрелками по краям. Полосу прокрутки прячем, но саму
   прокрутку оставляем: без скрипта лента всё равно работает. */
.pcar{position:relative}
.pcar-track{
  display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
}
.pcar-track::-webkit-scrollbar{display:none}
.pcar-track:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:12px}
/* Три карточки в видимой части — ровно как в макете. */
.pcar-track>*{flex:0 0 calc((100% - var(--gap) * 2) / 3);scroll-snap-align:start}
/* Карусель категорий (по просьбе владельца, 19.08.2026): в макете видно
   4 плитки в ряд, а разделов на сайте 9 — вместо переноса на второй
   некрасивый ряд лента сама едет вперёд (см. data-autoplay в main.js) и
   листается вручную точно как «Популярные статьи». */
.pcar-cats .pcar-track>*{flex:0 0 calc((100% - var(--gap) * 3) / 4)}
/* Пока мышь тащит ленту, отключаем прилипание и плавность — иначе лента
   дёргается и «отскакивает» обратно к ближайшей карточке. */
.pcar-track.is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.pcar-track.is-drag a{pointer-events:none}
.pcar-btn{
  position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  display:none;place-items:center;cursor:pointer;z-index:3;
  box-shadow:0 4px 16px rgba(16,24,40,.14);transition:opacity .2s,background .2s;
}
.pcar-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}
.pcar-btn:hover{background:var(--blue);color:#fff;border-color:transparent}
.pcar-btn[disabled]{opacity:.35;cursor:default}
.pcar-btn[disabled]:hover{background:var(--card);color:var(--ink);border-color:var(--line)}
.pcar-prev{left:-18px;transform:scaleX(-1)}
.pcar-next{right:-18px}
.pcar.has-nav .pcar-btn{display:grid}
/* На узком экране стрелки убираем — там листают пальцем. */
@media (max-width:860px){.pcar.has-nav .pcar-btn{display:none}}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.pcard:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.pcard-img{position:relative;display:block;aspect-ratio:2.16;background:var(--bg-soft)}
.pcard-img img{width:100%;height:100%;object-fit:cover}
.ptag{
  position:absolute;left:16px;top:16px;z-index:2;
  padding:7px 14px;border-radius:8px;background:#fff;color:var(--blue);
  font-size:13px;font-weight:700;box-shadow:0 2px 8px rgba(16,24,40,.14);
}
.pcard-body{padding:20px 22px 16px;display:flex;flex-direction:column;flex:1}
.pcard-body h3{font-size:20px;line-height:1.32;margin-bottom:16px}
.pcard-body h3 a{color:inherit}
.pcard-body h3 a:hover{color:var(--blue)}
.pcard-foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--muted);font-size:13px;
}
.pcard-author{display:flex;align-items:center;gap:9px;min-width:0}
.pcard-author img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.pcard-author span{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Лента статей. auto-fill, а не auto-fit: при трёх статьях на широком
   экране auto-fit растягивает карточки на треть монитора, и превью
   выглядит крупнее самой статьи. */
.grid-art{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.card-img{position:relative;aspect-ratio:16/9;background:var(--bg-soft)}
.card-img img{width:100%;height:100%;object-fit:cover}
.tag{
  position:absolute;left:14px;top:14px;z-index:2;overflow:hidden;
  padding:5px 12px;border-radius:7px;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--blue);
}
.tag.g{background:var(--green)} .tag.p{background:var(--purple)} .tag.o{background:var(--orange)}
.tag.r{background:var(--red)} .tag.t{background:var(--teal)} .tag.a{background:var(--amber)}
.tag.w{background:var(--wine)}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:17px;line-height:1.34;margin-bottom:8px}
.card-body h3 a{color:inherit}
.card-body h3 a:hover{color:var(--blue)}
.card-body p{font-size:14px;line-height:1.55;flex:1}
.card-meta{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--muted);font-size:13px}
.card-meta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.card-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
.card-cat{
  position:relative;overflow:hidden;
  align-self:flex-start;margin-bottom:10px;padding:4px 10px;border-radius:6px;
  font-size:12px;font-weight:700;color:#fff;background:var(--blue);
}
.card-cat.g{background:var(--green)} .card-cat.p{background:var(--purple)}
.card-cat.o{background:var(--orange)}
.card-cat.r{background:var(--red)} .card-cat.t{background:var(--teal)} .card-cat.a{background:var(--amber)}
.card-cat.w{background:var(--wine)}

/* Переливающаяся подпись раздела (П17): узкий блик проходит по плашке
   бесконечно, цвет самой плашки при этом не меняется — тон остаётся
   закреплённым за разделом (cat_tone() в render.php). */
.tag::after,.card-cat::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.75) 48%,transparent 70%);
  background-size:250% 100%;
  animation:cat-shine 2.8s ease-in-out infinite;
}
@keyframes cat-shine{
  0%   {background-position:180% 0}
  55%  {background-position:-80% 0}
  100% {background-position:-80% 0}
}
@media (prefers-reduced-motion: reduce){
  .tag::after,.card-cat::after{animation:none;display:none}
}

/* ------------------------------------------------------------- полоса цифр */
/* В макете это не карточка: просто три пары «плитка с иконкой + цифра»,
   разложенные по трети ширины, на белом фоне, без рамки. */
/* Только padding-block — по той же причине, что и у .block выше. */
.stats-wrap{padding-block:clamp(26px,3vw,42px)}
/* В макете (главная.png) цифры — не свободная строка, а ряд карточек той же
   ширины и с тем же зазором, что и карточки «Популярные статьи» выше:
   поэтому та же сетка .grid-3 (repeat(3,1fr), gap:var(--gap)), а не flex. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
/* Каждая цифра — отдельная карточка: белый фон, рамка, скругление, тень —
   как у карточек статей, чтобы полоса выглядела частью той же сетки. */
.stat{
  display:flex;align-items:center;justify-content:flex-start;gap:16px;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;
}
.stat-ico{width:52px;height:52px;border-radius:12px;background:var(--blue-soft);display:grid;place-items:center;flex:none}
/* Селектор именно .stat-txt span, а не .stat span: раньше второй правилом
   `display:block` перебивал `display:grid` у .stat-ico (это тоже <span>),
   и иконка вместо центра прилипала к верхнему левому углу плитки. */
.stat-ico svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stat-txt{min-width:0}
.stat b{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(22px,2.1vw,30px);color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.stat-txt span{font-size:13.5px;line-height:1.4;display:block;margin-top:3px;color:var(--muted)}

/* ------------------------------------------------------- выбор экспертов */
/* Полоса с машиной и её хозяином, текст и кнопка — поверх пустой левой
   части кадра, ровно как в баннере героя.
   История: сначала фото вписывалось object-fit:contain, вокруг него
   оставались поля, и владелец справедливо видел блок «двух цветов» —
   тогда фото убрали совсем. Владелец 19.08.2026: «в выборе экспертов
   пропало фото, там должно быть фото». Возвращаем, но по-другому: кадр
   нарисован сразу под пропорции этой полосы (mkexpert.py — машина мелкая,
   в центральной ленте, слева пусто) и кладётся на ВСЮ площадь блока через
   object-fit:cover. Полей больше нет вообще, подгонять цвет не под что. */
.expert{position:relative;isolation:isolate;border-radius:18px;overflow:hidden;min-height:300px;display:flex;align-items:center;background:var(--blue-soft)}
/* Без отрицательного z-index: у .expert есть собственный фон, и слой с
   z-index:-1 уходит ЗА него — фото просто не видно. Порядок задаём проще:
   фото — первый слой в потоке, текст поверх через position:relative. */
.expert-bg{position:absolute;inset:0;display:block}
.expert-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.expert-in{position:relative;display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);padding:26px clamp(22px,3vw,40px)}
.expert-ico{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 4px 18px rgba(16,24,40,.10)}
.expert-ico svg{width:46px;height:46px;stroke:var(--blue);fill:none;stroke-width:1.8}
.expert-txt{min-width:0;max-width:640px}
/* Фиксированный тёмный цвет, а не var(--ink)/var(--text): текст снова лежит
   на фотографии (см. .expert-bg выше), а фотография светлая при любой теме
   сайта — в тёмной теме переменные дали бы светлый текст на светлом фото.
   Тот же приём, что и у .ht в баннере героя. */
.expert-txt h2{font-size:clamp(22px,2.1vw,30px);color:#0F1527;margin-bottom:10px}
.expert-txt p{font-size:15px;line-height:1.55;color:#3A4459}
.expert-txt .btn{margin-top:20px;height:52px;padding:0 28px;border-radius:10px}

/* --------------------------------------------------------------- подписка */
/* Как в макете: очень светлая карточка с тонкой рамкой, слева плитка с
   конвертом и текст, справа поле и синяя кнопка одной группой. */
.sub{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,2.6vw,30px) clamp(22px,3vw,34px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px;align-items:center;
}
.sub-l{display:flex;align-items:center;gap:22px;min-width:0}
.sub-l>div{min-width:0}
.sub-ico{width:64px;height:64px;border-radius:14px;background:var(--blue-soft);display:grid;place-items:center;flex:none}
.sub-ico svg{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.8}
.sub h2{font-size:clamp(21px,1.9vw,26px);margin-bottom:8px}
.sub p{font-size:14.5px;line-height:1.55}
.sub-r{justify-self:end;width:100%;max-width:440px}
/* Поле и кнопка — одна плашка высотой 52 px, как в макете: поле слева,
   синяя кнопка вплотную справа, без внутренних отступов у обёртки.
   Раньше обёртка имела свой padding и рамку, из-за чего поле выглядело
   раздутым, а на телефоне кнопка уезжала на вторую строку. */
.sub-form{
  display:flex;height:52px;background:var(--bg);border:1px solid #C7D7F7;
  border-radius:10px;overflow:hidden;
}
.sub-form input{
  /* flex:1 1 0, а не 1 1 auto: поле не должно требовать себе свою «родную»
     ширину (у input она около 180 px) — иначе на узком экране плашка не
     ужимается и вылезает за карточку. */
  flex:1 1 0;height:100%;padding:0 16px;border:0;
  background:transparent;color:var(--ink);min-width:0;font-size:15px;
}
.sub-form input:focus{outline:none}
.sub-form:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.sub-form .btn{height:100%;flex:none;white-space:nowrap;border-radius:0;padding:0 24px}
.sub-ok{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13px;color:var(--muted)}
.sub-note{padding:14px 18px;border-radius:10px;background:var(--green-soft);color:var(--green);font-size:14.5px;font-weight:600}
.sub-err{margin-top:10px;font-size:13.5px;color:var(--red)}

/* ----------------------------------------------------------------- подвал */
.ftr{background:var(--bg-soft);border-top:1px solid var(--line);margin-top:clamp(40px,5vw,72px);padding:clamp(36px,4vw,56px) 0 0}
.ftr-in{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(150px,1fr));gap:clamp(24px,3vw,48px)}
.ftr-about p{font-size:14px;line-height:1.65;margin-top:16px;max-width:30em}
.ftr h4{font-size:16px;margin-bottom:16px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ftr ul a{color:var(--text);font-size:14.5px}
.ftr ul a:hover{color:var(--blue)}
.ftr-contacts li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5}
.ftr-contacts svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.9;flex:none;margin-top:3px}

/* иконка внутри строки текста (страницы вроде /kontakty/) — без этого
   класса svg из ico() растягивается на всю доступную высоту родителя */
.icon-inline{display:inline-flex;align-items:center;vertical-align:-3px}
.icon-inline svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:1.9}
.soc{display:flex;gap:11px;margin-top:20px}
.soc a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.soc a:hover{background:var(--blue-dark)}
.soc svg{width:19px;height:19px;fill:currentColor}
.ftr-bot{margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--line);padding:22px 0;text-align:center;font-size:13.5px;color:var(--muted)}

/* ------------------------------------------------------- подкластеры раздела */
.cat-clusters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.cat-cluster{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  font-size:13.5px;font-weight:600;white-space:nowrap;transition:border-color .15s,color .15s;
}
.cat-cluster:hover{border-color:var(--blue)}
.cat-cluster span{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.cat-cluster.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.cat-cluster.is-active span{color:rgba(255,255,255,.75)}

/* ============================================================== СТАТЬЯ === */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:22px 0;font-size:13.5px;color:var(--muted)}
.crumbs a{color:var(--blue)}
.crumbs svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2.2}

.art{max-width:1180px;margin:0 auto}
.art h1{font-size:clamp(28px,3.6vw,46px);line-height:1.14}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,44px);margin:26px 0 30px;font-size:14px}
.art-author{display:flex;align-items:center;gap:12px}
.art-author img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.art-author b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}
.art-author span{color:var(--muted);font-size:13px}
.art-meta .mi{display:flex;align-items:center;gap:9px;color:var(--muted)}
.art-meta .mi svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}

.art-share{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  clear:both;margin:42px 0 0;padding:22px 24px;border:1px solid #b9d7ff;
  border-radius:var(--radius);background:linear-gradient(135deg,#edf6ff 0%,#f7fbff 100%);
}
.art-share>strong{color:var(--ink);font-size:16px;line-height:1.4}
.art-share-links{display:flex;flex-flow:row nowrap;align-items:center;gap:10px}
.art-share a,.art-share button{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;border:0;cursor:pointer;padding:0;
  box-shadow:0 5px 14px rgba(11,79,176,.22);font:inherit;position:relative;
  transition:transform .15s,background .15s,box-shadow .15s;
}
.art-share a:hover,.art-share button:hover{
  background:var(--blue-dark);color:#fff;transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(11,79,176,.3);
}
.art-share svg{width:20px;height:20px}
.art-share button.copied{background:var(--green);color:#fff}
.art-share .copy-note{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:12px;padding:5px 10px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;
}
.art-share button.copied .copy-note{opacity:1}
:root[data-theme="dark"] .art-share{
  border-color:#294c7a;background:linear-gradient(135deg,#17283f 0%,#161f2d 100%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .art-share{
    border-color:#294c7a;background:linear-gradient(135deg,#17283f 0%,#161f2d 100%);
  }
}

/* Сайдбар статьи (макет статьи.png, П29): оглавление + мини-похожие
   справа, sticky под шапкой. На узком экране .art-grid схлопывается в одну
   колонку, а .art-side ложится под текст обычными блоками в ряд. */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.art-main{min-width:0}
/* Раньше sticky висел на всей .art-side целиком: у длинной статьи (десятки
   тысяч px) закреплённый блок оказывался выше высоты экрана, и «Похожие
   статьи» — нижняя часть колонки — были ниже видимой области почти всё
   время чтения, пока не долистаешь статью до конца (жалоба владельца —
   «не видно их в десктоп версии»). Теперь sticky — только на .side-toc
   (ей это и нужно, для навигации по статье), а .side-related — обычный
   блок в потоке, идёт сразу за оглавлением и виден с самого начала. */
/* 19.08.2026: владелец уточнил — «Похожие статьи» должны быть закреплены
   и не уезжать под содержание при прокрутке. Разделять sticky по разным
   блокам (как было) не выходит: если закрепить оба независимо, второй блок
   на обычной высоте экрана вылезает за нижний край и часть карточек
   становится недостижима. Поэтому закрепляем .art-side целиком одним
   блоком (содержание + похожие едут вместе, порядок не меняется), а если
   их суммарная высота не влезает в экран — весь сайдбар прокручивается
   внутри себя (overflow-y:auto), а не выезжает за пределы вьюпорта. */
.art-side{
  display:flex;flex-direction:column;gap:22px;
  position:sticky;top:calc(88px + 24px);
  max-height:calc(100vh - 88px - 48px);overflow-y:auto;
}
.side-toc{position:static}
.side-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.side-box h4{font-size:15px;margin-bottom:14px}
.side-toc ul{list-style:none;display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow-y:auto}
.side-toc a{display:block;padding:8px 10px;margin:0 -10px;border-radius:8px;font-size:14px;line-height:1.4;color:var(--text);border-left:2px solid transparent;transition:background .15s,color .15s}
.side-toc a:hover{color:var(--blue);background:var(--bg-soft)}
.side-toc a.is-active{color:var(--blue);font-weight:600;background:var(--blue-soft);border-left-color:var(--blue)}
.side-related{display:flex;flex-direction:column;gap:14px}
/* min-width:0 на текстовой обёртке обязателен: без него flex-элемент не
   ужимается меньше ширины своего контента, и длинный заголовок статьи
   («Шаровая опора: как распознать подделку под оригинал — реальный разбор
   с фото» и т.п.) распирал .side-card шире колонки сайдбара — жалоба
   владельца «в статье там, где похожие статьи, не влазит блок». */
.side-card{display:flex;gap:12px;align-items:flex-start}
.side-card img{width:76px;height:58px;border-radius:8px;object-fit:cover;flex:none}
.side-card>span{min-width:0}
.side-card b{display:block;font-size:13.5px;line-height:1.4;color:var(--ink);font-weight:600}
.side-card em{display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--muted)}
.side-card:hover b{color:var(--blue)}
.side-all{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-size:13.5px;font-weight:600;color:var(--blue)}
.side-all svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
/* Владелец 19.08.2026: «в мобильной версии в статьях содержание перенеси
   наверх, сейчас почему-то после статьи стоит». В разметке оглавление и
   «Похожие статьи» лежат в одном сайдбаре (.art-side) — а поднять наверх
   нужно только оглавление. Поэтому на узком экране сайдбар растворяем
   через display:contents: его дети становятся прямыми элементами колонки,
   и порядок можно задать каждому отдельно — оглавление перед текстом
   (order:-1), похожие статьи остаются под ним. Так обходимся без второй
   копии оглавления в HTML (копия ломала бы якоря и подсветку активного
   пункта в main.js). */
@media (max-width:980px){
  .art-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .art-side{display:contents}
  .side-toc{order:-1;position:static;margin-bottom:26px}
  .side-related{margin-top:36px}
  /* overflow:visible, а не только max-height:none: у пунктов отрицательные
     поля (margin:0 -10px), из-за них scrollWidth на 10 px больше ширины
     списка, и оставшийся overflow-y:auto подставлял внизу оглавления
     ненужную горизонтальную полосу прокрутки. */
  .side-toc ul{max-height:none;overflow:visible}
}

.art-cover{border-radius:var(--radius);overflow:hidden;margin-bottom:34px;background:var(--bg-soft)}
.art-cover img{width:100%;aspect-ratio:21/9;object-fit:cover}
.art-cover figcaption{padding:12px 18px;font-size:13.5px;color:var(--muted);background:var(--bg-soft)}

/* Тело статьи. Строка держится около 70 знаков — дальше глаз теряет строку. */
.art-body{font-size:17px;line-height:1.75}
.art-body > *{max-width:78ch}
.art-body p{margin:0 0 20px}
.art-body h2{font-size:clamp(22px,2.2vw,29px);margin:42px 0 16px}
.art-body h3{font-size:clamp(18px,1.6vw,22px);margin:32px 0 12px}
.art-body h4{font-size:clamp(15.5px,1.2vw,17.5px);margin:22px 0 10px;color:var(--ink)}
.art-body strong{color:var(--ink);font-weight:700}
.art-body ul,.art-body ol{margin:0 0 22px;padding-left:0;list-style:none}
.art-body li{position:relative;padding-left:26px;margin-bottom:11px}
.art-body ul li::before{content:'';position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.art-body ol{counter-reset:n}
.art-body ol li{counter-increment:n}
.art-body ol li::before{content:counter(n);position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:700;display:grid;place-items:center}
.art-body a{border-bottom:1px solid color-mix(in srgb,var(--blue) 35%,transparent)}

.art-body figure{margin:30px 0;max-width:100%}
.art-body figure img{width:100%;border-radius:12px}
.art-body figcaption{margin-top:11px;font-size:14px;color:var(--muted);line-height:1.55}

/* Фото крупно — открывается по клику (см. main.js). */
.lb-zoom{cursor:zoom-in}
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  padding:min(6vh,60px) min(6vw,60px);
  background:rgba(16,24,40,.86);
  align-items:center;justify-content:center;flex-direction:column;
}
.lb.open{display:flex}
body.lb-lock{overflow:hidden}
.lb-img{max-width:100%;max-height:80vh;border-radius:12px;box-shadow:var(--shadow-lift);cursor:default}
.lb-cap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lb-x{
  position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
}
.lb-x:hover{background:rgba(255,255,255,.24)}
/* position:sticky у шапки получает собственный composite-слой и у
   Chromium иногда всплывает поверх фикс-оверлея несмотря на меньший
   z-index — на время лайтбокса просто убираем sticky, тогда шапка
   возвращается в обычный поток и слой не создаётся. */
body.lb-lock .hdr{visibility:hidden}

/* Врезка с цитатой — в макете уходит вправо от текста. */
.pull{
  float:right;width:min(340px,42%);margin:6px 0 24px 34px;
  background:var(--blue-soft);border-radius:12px;padding:24px 26px;
  font-size:15.5px;line-height:1.6;font-style:italic;color:var(--ink);
}
.pull::before{content:'“';display:block;font-family:'Montserrat',serif;font-size:44px;line-height:.6;color:var(--blue);margin-bottom:10px}
.pull cite{display:block;margin-top:14px;font-style:normal;font-size:14px;color:var(--muted);text-align:right}

.art-body table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px}
.art-body .tbl{overflow-x:auto;margin:26px 0;max-width:100%}
.art-body .tbl table{margin:0}
.art-body caption{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:0 16px 8px;caption-side:top}
.art-body th{background:var(--bg-soft);color:var(--ink);font-weight:700;text-align:left;padding:13px 16px;border-bottom:2px solid var(--line)}
.art-body td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.art-body tr:last-child td{border-bottom:0}

/* Схема-пояснение: рисуем сами, стоковых картинок с подписями не бывает. */
.scheme{background:var(--blue-soft);border-radius:var(--radius);padding:26px 28px;margin:30px 0;max-width:100%}
.scheme h4{font-size:17px;margin-bottom:18px}
.scheme svg{width:100%;height:auto;overflow:visible}

.note{border-left:3px solid var(--blue);background:var(--bg-soft);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0;font-size:15.5px}
.note.warn{border-left-color:var(--orange)}

.author-box{
  display:flex;gap:26px;align-items:center;clear:both;
  background:var(--bg-soft);border-radius:var(--radius);padding:26px 30px;margin:44px 0 0;
}
.author-box img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.author-box h4{font-size:18px;margin-bottom:4px}
.author-box h4 a{color:inherit}
.author-box .author-role{color:var(--muted);font-size:13px;margin-bottom:10px}
.author-box p{font-size:14.5px;line-height:1.6}
.author-box .author-note{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ----------------------------------------------------------------- авторы */
.avt-hero{max-width:720px;padding:12px 0 40px}
.avt-hero h1{font-size:clamp(30px,4vw,44px);margin-bottom:16px}
.avt-hero p{font-size:16px;line-height:1.65;color:var(--text)}

.grid-authors{
  /* min() не даёт минимальной ширине карточки вытолкнуть документ за
     viewport на старых телефонах и при увеличенном системном масштабе. */
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:22px;padding-bottom:56px;
}
.author-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:90px;
}
.author-card img{
  width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;
  border:3px solid var(--blue-soft);
}
.author-card-body h2{font-size:19px;margin-bottom:4px}
.author-card .author-role{color:var(--blue);font-weight:600;font-size:13.5px;margin-bottom:10px}
.author-card .author-place{
  display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;margin-bottom:14px;
}
.author-card .author-place svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.author-card .author-bio{font-size:14.5px;line-height:1.6}
.author-timeline{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.author-timeline li{display:flex;gap:10px;font-size:13px;line-height:1.5;margin-bottom:7px}
.author-timeline li:last-child{margin-bottom:0}
.author-timeline b{flex:none;color:var(--blue);font-weight:700;width:42px}
.author-timeline span{color:var(--muted)}

/* ------------------------------------------------------------ комментарии */
.comments{margin-top:52px}
.comments h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:24px}
.cmt{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.cmt-av{width:38px;height:38px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.cmt-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:7px}
.cmt-head b{color:var(--ink);font-size:14.5px;font-weight:600}
.cmt-head time{color:var(--muted);font-size:13px}
.badge-author{background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:700;padding:2px 8px;border-radius:5px}
.cmt p{font-size:15px;line-height:1.6}
.cmt-reply{margin-left:52px;border-left:2px solid var(--line);padding-left:20px}
.cmt-form{background:var(--bg-soft);border-radius:var(--radius);padding:22px;margin-top:26px;display:grid;gap:12px}
.cmt-form .r2{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:12px}
.cmt-form input,.cmt-form textarea{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);resize:vertical;
}
.cmt-form textarea{min-height:96px}
.cmt-form input:focus,.cmt-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.cmt-form .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cmt-form small{color:var(--muted);font-size:13px}
.cmt-note{padding:14px 18px;border-radius:10px;background:var(--green-soft);color:var(--green);font-size:14.5px;font-weight:600}

/* --------------------------------------------------------------- телефон */
/* Блоки идут строго от широкого к узкому: правило из более узкого запроса
   должно перекрывать более широкое, а не наоборот. */
/* 1220, а не 1100: между этими ширинами плитка раздела в четыре столбца
   становится уже 269 px, и в колонке текста (плитка − 106 px на паддинги,
   иконку и зазор) уже не помещается «Обслуживание» — 144,5 px. Переходим на
   три плитки раньше, чем текст начнёт рваться. Порог взят с запасом: на
   самой границе колонка получается 171 px против 144,5 px слова, так что
   перенос не вернётся ни при зуме браузера, ни если Montserrat не
   загрузится и подставится системный шрифт пошире. */
@media (max-width:1220px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .pcar-cats .pcar-track>*{flex-basis:calc((100% - var(--gap) * 2) / 3)}
}
@media (max-width:1100px){
  .hero-plate,.hero-btns{max-width:min(560px,60%)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .pcar-track>*{flex-basis:calc((100% - var(--gap)) / 2)}
  /* minmax(0,1fr), а не 1fr: у обычного 1fr минимум равен min-content, и
     колонка раздувалась до ширины поля с кнопкой (358 px). Из-за этого поле
     вылезало за карточку и вся страница начинала ездить пальцем вбок. */
  .sub{grid-template-columns:minmax(0,1fr);gap:22px}
  .sub-r{justify-self:stretch;max-width:none;min-width:0}
  .ftr-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .ftr-about{grid-column:1/-1}
  .pull{float:none;width:auto;margin:26px 0}
  .expert-in{gap:20px}
  .expert-ico{width:76px;height:76px}
  .expert-ico svg{width:38px;height:38px}
}

@media (max-width:860px){
  .hdr-in{height:64px;gap:14px}
  .nav,.hdr-search{display:none}
  /* Меню и поиск в шапке спрятаны, а отступ вправо держал именно .nav — без
     этого кнопка меню оказывается вплотную к логотипу, посреди экрана.
     Класс именно .hdr-search (не общий .search) — тот же .search стоит и на
     форме страницы /poisk/, и общее правило гасило поле поиска даже там,
     куда мобильный переход как раз и ведёт. */
  .burger{display:flex;margin-left:auto}
  .hdr-in .btn-primary{display:none}
  /* Плитки категорий на телефоне (владелец, 19.08.2026: «все блоки должны
     быть одинакового размера, как Обслуживание»). Половина ширины экрана
     на карточку — это меньше, чем min-content её содержимого (иконка 64 px
     + текст), а flex-shrink у ленты нулевой, поэтому каждая плитка
     раздувалась до своего текста: 184 px у «Шины и диски», 253 px у
     «Обслуживание» — при формально одинаковом flex-basis. Даём плитке
     ширину, в которую содержимое реально влезает, и min-width:0, чтобы
     min-content больше не мог её растянуть: теперь все девять ровно
     одинаковые (проверено на ширине 390 px — 268x155 у всех). */
  .pcar-cats .pcar-track>*{flex-basis:min(78%,320px);min-width:0}
  .nav.open{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:64px;
    background:var(--bg);border-bottom:1px solid var(--line);padding:12px 20px 20px;gap:0;
    z-index:20;
  }
  .nav.open a{padding:14px 0;border-bottom:1px solid var(--line);border-left:0}
  .nav.open .nav-search-link{display:flex;align-items:center;gap:10px;color:var(--blue);font-weight:700}
  .nav.open .nav-search-link svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:2;flex:none}
  /* На мобильном "Ещё" не нужна отдельной кнопкой - весь список и так
     разворачивается в столбик внутри общего бутерброда. */
  .nav-more-btn{display:none}
  .nav-more-menu{
    display:block;position:static;margin:0;padding:0;border:0;
    border-radius:0;box-shadow:none;background:none;
  }
  .nav-more-menu a{padding:14px 0;border-bottom:1px solid var(--line);border-radius:0;font-size:16px}
  .author-box{flex-direction:column;text-align:center;padding:26px 20px}
  .cmt-form .r2{grid-template-columns:1fr}
  .cmt-reply{margin-left:0;padding-left:14px}
}

/* --------------------------------------------------------- герой на телефоне */
/* Кадр стоит отдельной полосой, на нём лежит полупрозрачная плашка с
   заголовком и абзацем (в мобильном кадре сверху специально достроено чистое
   место под неё — см. cut_photos.py), а под фотографией идут точки и две
   кнопки в ряд. Порядок «точки, потом кнопки» — по просьбе владельца. */
@media (max-width:700px){
  .hero{
    display:grid;grid-template-rows:auto auto;
    min-height:0;padding:0;background:var(--bg);
  }
  /* 0,854 — соотношение мобильного кадра 755x884 (см. cut_banners.py): верх
     кадра там специально засвечен под надпись, машина остаётся ниже. */
  .hero-media{position:relative;grid-area:1/1;aspect-ratio:.854;z-index:0}
  .hb img{object-position:center}
  .hero-in{grid-area:1/1;align-self:start;z-index:1;padding-top:10px}
  .hero-foot{grid-area:2/1;padding:14px 0 22px;display:flex;flex-direction:column}
  .hero-plate,.hero-btns{max-width:none}
  /* Подложка под надписью (владелец, 19.08.2026): на телефоне текст лежит
     прямо на фото и сливается с ним — светлый капот под тёмными буквами,
     машина под подзаголовком. Даём почти прозрачную белую плашку: буквы
     получают ровный светлый фон, а машина сквозь неё по-прежнему видна.
     Именно фон, без backdrop-filter: размывать фото под текстом на этом
     сайте нельзя — претензия владельца ровно про размытость картинок. */
  .hcard{
    background:rgba(255,255,255,.5);border-radius:16px;
    padding:14px 16px 16px;box-shadow:0 6px 22px rgba(15,21,39,.10);
  }
  .ht-pre{font-size:24px}
  .ht-big{font-size:33px}
  .ht-sub{margin-top:7px;font-size:14.5px}
  .hl{margin-top:10px;font-size:15px}
  /* Две кнопки в один ряд — слева и справа, как просил владелец. */
  .hero-btns{gap:10px;margin-top:0;order:2;flex-wrap:nowrap}
  .hero-btns .btn{flex:1 1 0;min-width:0;padding:0 8px;font-size:14.5px}
  .hero-dots{margin-top:0;margin-bottom:14px;order:1;justify-content:center}

  /* Цифры остаются в один ряд слева направо — все три помещаются, если
     поставить иконку над числом и ужать подписи. Столбиком, как было,
     полоса занимала пол-экрана. */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{flex-direction:column;align-items:center;gap:7px;text-align:center;padding:16px 8px}
  .stat-ico{width:42px;height:42px;border-radius:10px}
  .stat-ico svg{width:22px;height:22px}
  .stat b{font-size:21px}
  .stat-txt span{font-size:12px;margin-top:2px}

  .expert-txt p br,.sub p br{display:none}
}

/* ------------------------------------------------ выбор экспертов на телефоне */
/* Раньше текст лежал прямо на фотографии и не читался, а в кадр попадала
   только задняя половина машины. Теперь баннер раскладывается столбиком:
   сверху полоска с машиной целиком, под ней — текст на светлом градиенте. */
/* Фото вернулось (владелец, 19.08.2026), но на телефоне текст поверх него
   не помещается — кладём фото полосой сверху, текст под ней на сплошном
   var(--blue-soft). Полоса не absolute, а обычным блоком в потоке, иначе
   текст лёг бы на машину. */
@media (max-width:700px){
  .expert{display:block;min-height:0}
  .expert-bg{position:static;z-index:auto}
  .expert-bg img{height:168px;object-position:center right}
  .expert-in{display:block;padding:22px 18px}
  /* Здесь текст лежит уже не на фотографии, а на фоне блока
     (var(--blue-soft)), который в тёмной теме тёмный — фиксированный тёмный
     цвет с десктопа давал тёмное по тёмному. Владелец: «в мобильной версии
     у кого включается ночной режим на телефоне в блоке выбор экспертов
     слова не видны, они сливаются». Возвращаем цвета темы. */
  .expert-txt h2{color:var(--ink)}
  .expert-txt p{color:var(--text)}
  .expert-ico{width:60px;height:60px;margin-bottom:14px}
  .expert-ico svg{width:30px;height:30px}
  .expert-txt{max-width:none}
  .expert-txt h2{font-size:23px}
  .expert-txt .btn{margin-top:16px;height:48px;width:100%;justify-content:center}
}

@media (max-width:560px){
  body{font-size:15.5px}
  .ht-pre{font-size:22px}
  .ht-big{font-size:30px}
  .ht-sub{font-size:14px}
  .grid-4{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  /* В карусели карточка занимает почти весь экран, край следующей видно —
     так сразу понятно, что ленту можно листать. */
  .pcar-track>*{flex-basis:88%}
  .pcard-body h3{font-size:18.5px}
  .art-body{font-size:16.5px}
  .art-cover img{aspect-ratio:16/10}
  .art-share{align-items:flex-start;padding:20px}
  .art-share-links{width:100%;justify-content:flex-start;flex-flow:row nowrap}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Печать: убираем всё, что не текст статьи. */
@media print{
  .hdr,.ftr,.comments,.sub,.block-head a,.crumbs{display:none}
  body{background:#fff;color:#000}
}