/* ============================================================
   Умный Магазин — Блог и страница статьи/новости. Дополняет styles.css.
   ============================================================ */

.crumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--faint);padding:18px 0 2px;}
.crumbs a{color:var(--muted);} .crumbs a:hover{color:var(--accent);}
.crumbs .sep{opacity:.5;}

/* ---- Заголовок раздела ---- */
.blog-head{padding:10px 0 6px;}
.blog-head h1{margin:0;font-size:32px;font-weight:850;letter-spacing:-.7px;}
.blog-head .bh-sub{font-size:15px;color:var(--muted);margin-top:8px;max-width:680px;line-height:1.5;}

/* переключатель Статьи / Новости + рубрики */
.blog-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 24px;}
.blog-seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:4px;}
.blog-seg button{border:0;background:none;font-family:inherit;font-size:14px;font-weight:650;color:var(--muted);padding:9px 18px;border-radius:8px;cursor:pointer;transition:all var(--dur-fast);}
.blog-seg button.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm);}
.blog-cats{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
.blog-cat{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;cursor:pointer;transition:all var(--dur-fast);}
.blog-cat:hover{border-color:var(--faint);}
.blog-cat.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ---- Раскладка блога ---- */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;padding-bottom:40px;}

/* лента статей */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.post-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--dur-fast),box-shadow var(--dur-fast);}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.post-card .pc-cover{aspect-ratio:16/9;position:relative;}
.post-card .pc-cover .ph{width:100%;height:100%;}
.post-card .pc-type{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:7px;padding:5px 10px;}
.post-card .pc-type.news{background:#15171c;}
[data-theme="dark"] .post-card .pc-type.news{background:#fff;color:#0e1116;}
.post-card .pc-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.post-card .pc-meta{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--faint);margin-bottom:9px;}
.post-card .pc-meta .cat{color:var(--accent);font-weight:700;}
.post-card .pc-title{font-size:18px;font-weight:750;line-height:1.3;letter-spacing:-.3px;margin-bottom:9px;}
.post-card:hover .pc-title{color:var(--accent);}
.post-card .pc-excerpt{font-size:13.5px;color:var(--muted);line-height:1.55;flex:1;}
.post-card .pc-foot{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--faint);font-weight:600;}
.post-card .pc-foot .read{color:var(--accent);margin-left:auto;display:inline-flex;align-items:center;gap:6px;}
.post-card .pc-foot .read svg{width:15px;height:15px;}

/* большая (featured) карточка */
.post-card.feat{grid-column:1 / -1;flex-direction:row;}
.post-card.feat .pc-cover{width:46%;aspect-ratio:auto;flex-shrink:0;}
.post-card.feat .pc-body{padding:30px 32px;justify-content:center;}
.post-card.feat .pc-title{font-size:25px;}
.post-card.feat .pc-excerpt{font-size:15px;}

/* ---- Сайдбар блога ---- */
.blog-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:92px;}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;}
.side-card h3{margin:0 0 15px;font-size:15px;}
.side-cats{display:flex;flex-direction:column;gap:2px;}
.side-cats a{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:all var(--dur-fast);}
.side-cats a:hover{background:var(--bg-2);color:var(--accent);}
.side-cats a .c{font-size:12px;color:var(--faint);font-weight:600;}
.side-pop a{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);}
.side-pop a:last-child{border-bottom:0;}
.side-pop .sp-img{width:62px;height:48px;border-radius:9px;background:var(--bg-2);color:var(--faint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.side-pop .sp-img svg{width:22px;height:22px;}
.side-pop .sp-t{font-size:13px;font-weight:650;line-height:1.35;}
.side-pop a:hover .sp-t{color:var(--accent);}
.side-pop .sp-d{font-size:11.5px;color:var(--faint);margin-top:3px;}
.side-cta{background:var(--dark);color:#fff;}
.side-cta h3{color:#fff;}
.side-cta p{font-size:13px;color:var(--dark-muted);line-height:1.5;margin:0 0 14px;}
.side-cta .si{display:flex;border:1px solid var(--dark-line);border-radius:10px;overflow:hidden;}
.side-cta .si input{flex:1;min-width:0;border:0;background:rgba(255,255,255,.06);color:#fff;padding:0 13px;font-size:13px;outline:0;}
.side-cta .si input::placeholder{color:var(--dark-muted);}
.side-cta .si button{border:0;background:var(--accent);color:#fff;padding:0 16px;font-weight:700;font-size:13px;height:44px;}

.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;}
.pager button{min-width:44px;height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);font-size:14px;font-weight:700;}
.pager button:hover{border-color:var(--accent);color:var(--accent);}
.pager button.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ============================================================
   СТРАНИЦА СТАТЬИ / НОВОСТИ
   ============================================================ */
.article-hero{padding:14px 0 0;}
.article-hero .a-type{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.article-hero h1{margin:0;font-size:38px;line-height:1.12;font-weight:850;letter-spacing:-1px;max-width:840px;}
.article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:13.5px;color:var(--muted);}
.article-meta .am-author{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink-2);}
.article-meta .am-author .av{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:750;display:flex;align-items:center;justify-content:center;}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--faint);}
.article-cover{position:relative;margin:26px 0 0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--bg-2);}
.article-cover .ph{width:100%;height:100%;}
/* Обложка приходит из бэкенда в момент показа; до неё держим одно спокойное
   состояние загрузки и проявляем картинку только когда она полностью готова —
   без промежуточных «заглушка → тёмное пятно → обложка». */
.article-cover .a-cover-img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity var(--dur-slow) cubic-bezier(.22,.61,.36,1);}
.article-cover.is-ready .a-cover-img{opacity:1;}
.article-cover.is-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 18%,var(--line) 50%,transparent 82%);background-size:220% 100%;animation:coverShimmer 1.4s linear infinite;}
.article-cover.is-ready::after{animation:none;opacity:0;}
@keyframes coverShimmer{from{background-position:180% 0;}to{background-position:-80% 0;}}
@media (prefers-reduced-motion:reduce){
  .article-cover.is-loading::after{animation:none;}
  .article-cover .a-cover-img{transition:none;}
}

/* ---- Спокойное состояние до данных ----
   Тип, рубрика, автор, дата, время чтения, просмотры и тело статьи приходят
   из бэкенда в момент показа страницы. Пока значение не подставлено, поле
   держит ровный нейтральный скелет в ритме обложки — без демо-текста. Как
   только приходит реальное значение, :empty перестаёт срабатывать и скелет
   исчезает сам. */
.article-hero #aType:empty,
.article-hero #aCat:empty,
.crumbs #crumbCat:empty,
.article-meta #aAuthor:empty,
.article-meta #aDate:empty,
.article-meta #aRead:empty,
.article-meta #aViews:empty,
.author-card #aAuthor2:empty,
.author-card .ac-r:empty{
  display:inline-block;
  height:.8em;
  border-radius:var(--r-pill);
  background-color:var(--bg-2);
  background-image:linear-gradient(100deg,transparent 18%,var(--line) 50%,transparent 82%);
  background-size:220% 100%;
  animation:coverShimmer 1.4s linear infinite;
  vertical-align:middle;
}
.article-hero #aType:empty{width:56px;}
.article-hero #aCat:empty{width:44px;}
.crumbs #crumbCat:empty{width:78px;}
.article-meta #aAuthor:empty{width:122px;}
.article-meta #aDate:empty{width:92px;}
.article-meta #aRead:empty{width:88px;}
.article-meta #aViews:empty{width:104px;}
.author-card #aAuthor2:empty{width:132px;border-radius:var(--r-sm);}
.author-card .ac-r:empty{display:block;width:150px;margin-top:7px;border-radius:var(--r-sm);}

/* аватар автора: пустой кружок держим тем же спокойным скелетом */
.article-meta .am-author .av:empty,
.author-card .av:empty{
  color:transparent;
  background-color:var(--bg-2);
  background-image:linear-gradient(100deg,transparent 18%,var(--line) 50%,transparent 82%);
  background-size:220% 100%;
  animation:coverShimmer 1.4s linear infinite;
}

/* об авторе: пара нейтральных строк вместо демо-текста */
.author-card p:empty{
  display:block;
  height:2.8em;
  margin-top:13px;
  border-radius:var(--r-sm);
  background-color:var(--bg-2);
  background-image:linear-gradient(100deg,transparent 18%,var(--line) 50%,transparent 82%);
  background-size:220% 100%;
  animation:coverShimmer 1.4s linear infinite;
}

/* тело статьи: ровные строки-заглушки, пока не пришёл реальный текст */
#articleProse:empty{
  display:block;
  min-height:216px;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--bg-2),var(--bg-2)),
    linear-gradient(var(--bg-2),var(--bg-2)),
    linear-gradient(var(--bg-2),var(--bg-2)),
    linear-gradient(var(--bg-2),var(--bg-2)),
    linear-gradient(var(--bg-2),var(--bg-2)),
    linear-gradient(var(--bg-2),var(--bg-2));
  background-size:100% 14px,94% 14px,98% 14px,88% 14px,96% 14px,52% 14px;
  background-position:0 6px,0 44px,0 82px,0 120px,0 158px,0 196px;
}

/* содержание строится из заголовков статьи — пустой блок не показываем */
.a-side .toc:empty{display:none;}

@media (prefers-reduced-motion:reduce){
  .article-hero #aType:empty,.article-hero #aCat:empty,.crumbs #crumbCat:empty,
  .article-meta #aAuthor:empty,.article-meta #aDate:empty,.article-meta #aRead:empty,
  .article-meta #aViews:empty,.author-card #aAuthor2:empty,.author-card .ac-r:empty,
  .article-meta .am-author .av:empty,.author-card .av:empty,.author-card p:empty{animation:none;}
}

.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;padding:34px 0 50px;}
.article-body{min-width:0;font-size:16.5px;line-height:1.72;color:var(--ink-2);}
.article-body > *:first-child{margin-top:0;}
.article-body p{margin:0 0 20px;}
.article-body h2{font-size:25px;color:var(--ink);margin:36px 0 14px;}
.article-body h3{font-size:19px;color:var(--ink);margin:28px 0 12px;}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:22px;}
.article-body li{margin-bottom:9px;}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.article-body blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);font-size:18px;line-height:1.6;color:var(--ink);font-weight:500;}
.article-body img,.article-body .img-ph{display:block;width:100%;border-radius:var(--r-lg);margin:26px 0;}
.article-body .img-ph{aspect-ratio:16/9;background:var(--bg-2);color:var(--faint);display:flex;align-items:center;justify-content:center;}
/* Если в слоте есть реальная картинка — обёртка подстраивается под её пропорции, а не режет под 16:9 */
.article-body .img-ph:has(img){aspect-ratio:auto;background:transparent;display:block;}
.article-body .callout{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:var(--r-lg);padding:18px 20px;margin:24px 0;font-size:15px;color:var(--ink-2);display:flex;gap:13px;}
.article-body .callout svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;margin-top:1px;}
/* ---- Таблицы в теле статьи: карточка в стиле сайта, свет/тьма, скролл на мобильных ---- */
/* Голая <table> из редактора сама работает как контейнер горизонтального скролла,
   поэтому широкая таблица не даёт горизонтального скролла страницы на телефоне. */
.article-body table{
  display:block; width:max-content; max-width:100%;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:26px 0;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); box-shadow:var(--shadow-sm);
  border-collapse:separate; border-spacing:0;
  font-size:14.5px; line-height:1.5; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.article-body th,.article-body td{
  text-align:left; padding:12px 16px;
  border-bottom:1px solid var(--line); vertical-align:top;
}
/* Шапка: заливка + жир — чётко отделена от строк данных */
.article-body thead th,
.article-body tr:first-child th{
  background:var(--bg-2); color:var(--ink);
  font-weight:700; letter-spacing:-.1px; white-space:nowrap;
  border-bottom:1.5px solid var(--line);
}
/* Заголовок-строка (th в теле), если он есть */
.article-body tbody th{ color:var(--ink); font-weight:650; }
/* Мягкая зебра для чтения широких таблиц (сравнения/характеристики/тарифы) */
.article-body tbody tr:nth-child(even) td,
.article-body tbody tr:nth-child(even) th{ background:color-mix(in srgb,var(--ink) 3%,transparent); }
/* Подсветка строки под курсором — лёгкий акцент бренда */
.article-body tbody tr:hover td,
.article-body tbody tr:hover th{ background:color-mix(in srgb,var(--accent) 7%,transparent); }
.article-body tbody tr:last-child td,
.article-body tbody tr:last-child th{ border-bottom:0; }
.article-body table caption{
  caption-side:top; text-align:left;
  color:var(--faint); font-size:12.5px; font-weight:600; padding:0 2px 10px;
}
/* Если таблица всё же обёрнута в .table-wrap — скроллит обёртка, таблица тянется на всю ширину */
.article-body .table-wrap{
  margin:26px 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); box-shadow:var(--shadow-sm);
}
.article-body .table-wrap table{
  display:table; width:100%; max-width:none;
  margin:0; border:0; border-radius:0; box-shadow:none;
}
.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);}
.article-tags .tag{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--bg-2);border-radius:var(--r-pill);padding:8px 14px;}
.article-share{display:flex;align-items:center;gap:10px;margin-top:24px;}
.article-share .lab{font-size:13px;color:var(--muted);font-weight:600;}
.article-share a{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);}
.article-share a:hover{border-color:var(--accent);color:var(--accent);}
.article-share a svg{width:18px;height:18px;}

/* оглавление / автор в сайдбаре статьи */
.a-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:92px;}
.toc h3,.author-card h3{margin:0 0 13px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;}
.toc a{display:block;font-size:13.5px;color:var(--ink-2);padding:7px 0 7px 13px;border-left:2px solid var(--line);line-height:1.4;}
.toc a:hover,.toc a.active{color:var(--accent);border-left-color:var(--accent);}
.author-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;}
.author-card .ac-row{display:flex;align-items:center;gap:13px;}
.author-card .av{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;font-size:17px;font-weight:750;display:flex;align-items:center;justify-content:center;}
.author-card .ac-n{font-size:15px;font-weight:750;}
.author-card .ac-r{font-size:12.5px;color:var(--faint);}
.author-card p{font-size:13px;color:var(--muted);line-height:1.5;margin:13px 0 0;}

/* «Поделиться» — карточка под автором. Кнопки — готовые фирменные круглые
   бейджи площадок; собственной рамки и перекраски нет, только лёгкий подъём
   с тенью в цвет площадки на hover. */
.share-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;}
.share-card h3{margin:0 0 14px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);}
.share-row{display:flex;flex-wrap:wrap;gap:9px;}
.sh-btn{--sh:var(--accent);position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-fast),box-shadow var(--dur-fast);}
.sh-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px -4px color-mix(in srgb,var(--sh) 55%,transparent);}
.sh-btn:active{transform:translateY(0);}
/* Слот иконки — фирменный цветной бейдж из img/share/. viewBox каждого SVG обрезан
   плотно по видимому кругу, поэтому цветной круг заполняет свой холст на 100% у всех
   пяти. Отсюда — один общий размер слота (44px) и одно правило на все бейджи, без
   пер-иконочных сдвигов и масштабов. */
.sh-btn .sh-ic{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;}
.sh-btn .sh-ic img,.sh-btn .sh-ic svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sh-btn--vk{--sh:#45668e;} .sh-btn--telegram{--sh:#29a9eb;} .sh-btn--ok{--sh:#ff7700;} .sh-btn--max{--sh:#6e4bff;} .sh-btn--link{--sh:var(--accent);}
/* «Скопировать ссылку» = пятая круглая иконка (.sh-btn--link, data-share="copy").
   Состояние «скопировано» — класс .is-copied (на самой кнопке или на [data-share-widget]):
   поверх иконки проявляется зелёный кружок с галочкой, без подписей. */
.sh-btn--link::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/22px no-repeat;opacity:0;transform:scale(.4);transition:opacity var(--dur-fast) ease,transform var(--dur-fast) ease;pointer-events:none;}
.sh-btn--link.is-copied::after,[data-share-widget].is-copied .sh-btn--link::after{opacity:1;transform:scale(1);}

/* похожие материалы */
.related{padding:36px 0 60px;border-top:1px solid var(--line);}
.related h2{margin:0 0 22px;font-size:24px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

/* ---- Комментарии к статье ---- */
.comments{max-width:768px;padding:36px 0 4px;border-top:1px solid var(--line);}
.comments h2{margin:0 0 4px;font-size:24px;}
.comments .c-sub{font-size:13px;color:var(--faint);margin-bottom:22px;}
.cmt-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:28px;}
.cmt-form .cf-row{display:flex;gap:12px;margin-bottom:12px;}
.cmt-form input{flex:1;height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);padding:0 14px;font-size:14px;font-family:inherit;outline:0;}
.cmt-form textarea{width:100%;min-height:96px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--ink);padding:12px 14px;font-size:14.5px;font-family:inherit;line-height:1.55;outline:0;resize:vertical;}
.cmt-form input:focus,.cmt-form textarea:focus{border-color:var(--accent);}
.cmt-form .cf-foot{display:flex;align-items:center;gap:14px;margin-top:13px;}
.cmt-form .cf-note{font-size:12.5px;color:var(--faint);line-height:1.45;}
.cmt-form .cf-foot .btn{margin-left:auto;flex-shrink:0;}

.cmt-list{display:flex;flex-direction:column;gap:4px;}
.cmt{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line-2);}
.cmt:last-child{border-bottom:0;}
.cmt.reply{margin-left:54px;padding-left:0;}
.cmt .cmt-av{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:750;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cmt .cmt-av.staff{background:var(--accent);color:#fff;}
.cmt .cmt-main{flex:1;min-width:0;}
.cmt .cmt-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.cmt .cmt-name{font-size:14.5px;font-weight:700;}
.cmt .cmt-badge{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:3px 7px;}
.cmt .cmt-badge.mod{color:var(--warn);background:var(--warn-soft);}
.cmt .cmt-date{font-size:12.5px;color:var(--faint);margin-left:auto;}
.cmt .cmt-text{font-size:14.5px;line-height:1.6;color:var(--ink-2);}
.cmt .cmt-acts{display:flex;gap:16px;margin-top:9px;}
.cmt .cmt-acts button{border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0;}
.cmt .cmt-acts button:hover{color:var(--accent);}
.cmt .cmt-acts svg{width:14px;height:14px;}

@media (max-width:767px){
  .cmt-form .cf-row{flex-direction:column;}
  .cmt.reply{margin-left:26px;}
}

@media (max-width:1023px){
  .blog-layout,.article-layout{grid-template-columns:1fr;}
  .blog-side,.a-side{position:static;flex-direction:row;flex-wrap:wrap;}
  .blog-side .side-card,.a-side>div{flex:1;min-width:240px;}
  .article-hero h1{font-size:30px;}
  .related-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
  .posts{grid-template-columns:1fr;}
  .post-card.feat{flex-direction:column;}
  .post-card.feat .pc-cover{width:100%;aspect-ratio:16/9;}
  .blog-cats{margin-left:0;width:100%;}
  .blog-head h1{font-size:25px;} .article-hero h1{font-size:25px;}
  .related-grid{grid-template-columns:1fr;}
  .article-body{font-size:16px;}
}

/* Картинки-заглушки блога/статей (16:9) — заполняют слот с object-fit */
.post-card .pc-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.article-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.article-body .img-ph img{width:100%; height:auto; object-fit:contain; display:block; border-radius:inherit;}
.side-pop .sp-img{overflow:hidden;}
.side-pop .sp-img img{width:100%; height:100%; object-fit:cover; display:block;}