/* ============================================================================
   m2-blog.css — блог в дизайне m2 (лента, статья, метки, поиск, «все записи»).
   Подключать после modern.css и m2-doc.css. Использует переменные m2:
   --ink, --muted, --brand, --brand-dark, --line, --card, --maxw.
   ============================================================================ */

/* Сетка: контент + боковая панель. На узких экранах — одна колонка. */
.m2-blog-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 46px; align-items: start; }
@media (max-width: 900px) { .m2-blog-grid { grid-template-columns: 1fr; gap: 30px; } }

/* --- Карточка статьи в ленте --- */
.m2-blog-card { padding: 0 0 30px; margin: 0 0 30px; border-bottom: 1px solid var(--line); }
.m2-blog-card:last-of-type { border-bottom: none; }
.m2-blog-card-title { margin: 0 0 8px; font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.m2-blog-card-title a { color: var(--ink); text-decoration: none; }
.m2-blog-card-title a:hover { color: var(--brand); }

.m2-blog-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.m2-blog-meta time { color: var(--muted); }
.m2-blog-dot { opacity: .5; }
.m2-blog-comm { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); }
.m2-blog-comm:hover { color: var(--brand); border-color: var(--brand); }
.m2-blog-views::before { content: "👁 "; opacity: .6; }

.m2-blog-excerpt { color: #2b3a4d; font-size: 16px; line-height: 1.62; }
.m2-blog-excerpt p { margin: 0 0 12px; }
.m2-blog-card img, .m2-blog-excerpt img { max-width: 100%; height: auto; border-radius: 10px; margin: 6px 0; }
.m2-blog-excerpt a { color: var(--brand); }
.m2-blog-more { display: inline-block; margin-top: 8px; color: var(--brand); font-weight: 700; text-decoration: none; }
.m2-blog-more:hover { text-decoration: underline; }

/* --- Метки-чипы --- */
.m2-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.m2-blog-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
   background: #f2f5fa; color: #52627a; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.m2-blog-tag:hover { background: #fff; border-color: var(--brand); color: var(--brand); }
.m2-blog-tag.cur { background: var(--brand); color: #fff; }
.m2-blog-tag-n { font-size: 11px; opacity: .7; font-weight: 700; }
.m2-blog-tags-post { margin-top: 26px; }
.m2-blog-tags-label { color: var(--muted); font-size: 13px; font-weight: 700; margin-right: 2px; }

/* --- Пагинация --- */
.m2-blog-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 34px; }
.m2-blog-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
   border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
   text-decoration: none; font-weight: 700; font-size: 15px; }
.m2-blog-pg:hover { border-color: var(--brand); color: var(--brand); }
.m2-blog-pg.cur { background: var(--brand); border-color: var(--brand); color: #fff; }
.m2-blog-pg.prev, .m2-blog-pg.next { padding: 0 14px; }
.m2-blog-pg-list { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.m2-blog-pg-dots { color: var(--muted); align-self: flex-end; padding: 0 2px; }

/* --- Статья --- */
.m2-blog-post .m2-blog-meta { margin-bottom: 22px; }
.m2-blog-text { color: #22303f; font-size: 17.5px; line-height: 1.72; }
.m2-blog-text p { margin: 0 0 18px; }
.m2-blog-text h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.015em; margin: 34px 0 14px; color: var(--ink); }
.m2-blog-text h3 { font-size: clamp(19px, 2.4vw, 23px); font-weight: 800; margin: 28px 0 12px; color: var(--ink); }
.m2-blog-article img, .m2-blog-post img, .m2-blog-text img { max-width: 100%; height: auto; border-radius: 12px; margin: 12px 0; }
.m2-blog-text a { color: var(--brand); }
.m2-blog-text ul, .m2-blog-text ol { margin: 0 0 18px; padding-left: 24px; }
.m2-blog-text li { margin: 0 0 8px; }
.m2-blog-text blockquote { margin: 20px 0; padding: 4px 20px; border-left: 4px solid var(--brand); color: #45566b; font-style: italic; }
.m2-blog-text iframe { max-width: 100%; border-radius: 12px; }

/* --- Соседние записи --- */
.m2-blog-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0 10px; }
@media (max-width: 620px) { .m2-blog-prevnext { grid-template-columns: 1fr; } }
.m2-blog-pn { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line);
   border-radius: 14px; background: var(--card); text-decoration: none; transition: border-color .15s; }
.m2-blog-pn:hover { border-color: var(--brand); }
.m2-blog-pn.next { text-align: right; }
.m2-blog-pn-dir { color: var(--muted); font-size: 13px; font-weight: 700; }
.m2-blog-pn-title { color: var(--ink); font-weight: 700; font-size: 15.5px; line-height: 1.35; }

/* --- Боковая панель --- */
.m2-blog-side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .m2-blog-side { position: static; } }
.m2-blog-search { position: relative; }
.m2-blog-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.m2-blog-search input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px 0 42px;
   border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); font-size: 15px; color: var(--ink); }
.m2-blog-search input::placeholder { color: #9aa3b8; }
.m2-blog-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,90,60,.14); outline: none; }
.m2-blog-side-box { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 18px 18px 16px; }
.m2-blog-side-head { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.m2-blog-side-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.m2-blog-side-all { display: inline-block; color: var(--brand); font-weight: 700; text-decoration: none; }
.m2-blog-side-all:hover { text-decoration: underline; }

/* --- «Все записи» по годам --- */
.m2-blog-year { margin: 0 0 34px; }
.m2-blog-year-h { font-size: 22px; font-weight: 800; color: var(--brand); margin: 0 0 14px; }
.m2-blog-all-list { list-style: none; margin: 0; padding: 0; }
.m2-blog-all-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
   padding: 9px 0; border-bottom: 1px solid var(--line); }
.m2-blog-all-list a { color: var(--ink); text-decoration: none; font-weight: 600; }
.m2-blog-all-list a:hover { color: var(--brand); }
.m2-blog-all-date { color: var(--muted); font-size: 13px; white-space: nowrap; flex: none; }

/* --- Облако меток --- */
.m2-blog-tagcloud { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: baseline; }
.m2-blog-cloud-tag { color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.2; }
.m2-blog-cloud-tag:hover { color: var(--brand); }
.m2-blog-cloud-tag .m2-blog-tag-n { font-size: .62em; color: var(--muted); margin-left: 2px; }

.m2-blog-empty { color: var(--muted); font-size: 17px; padding: 20px 0; }
.m2-blog-searchinfo { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
.m2-blog-searchinfo b { color: var(--ink); }

/* ============================================================================
   Комментарии — старый AJAX-движок (js/blog.min.js) в оболочке m2. Разметку
   формирует JS, поэтому здесь только базовое оформление его классов под m2.
   ============================================================================ */
.m2-blog-comments { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }
.post-commentary .comm-head { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 16px; }
.post-commentary .not-reg { background: #f6f8fc; border: 1px solid var(--line); border-radius: 12px;
   padding: 14px 16px; color: #45566b; font-size: 15px; line-height: 1.55; margin: 0 0 16px; }
.post-commentary .not-reg a, .m2-blog-loginlink { color: var(--brand); cursor: pointer; }
.m2-blog-loginlink { border-bottom: 1px dotted var(--brand); }
.post-commentary .btn-block { margin: 0 0 18px; }
.post-commentary .blue-dotted-span { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
   color: #fff; background: var(--brand); padding: 10px 18px; border-radius: 12px; font-weight: 700; }
.post-commentary .blue-dotted-span:hover { background: var(--brand-dark); }
.post-commentary .blue-dotted-span > span { border: none; }
.post-commentary .comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.post-commentary .comment .uname { font-weight: 700; color: var(--ink); }
.post-commentary .comment .msg { color: #22303f; line-height: 1.6; margin-top: 4px; }
.post-commentary .comment-form { background: #f6f8fc; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 12px 0; }
.post-commentary .textarea, .post-commentary .textedit { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line);
   border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; }
.post-commentary .login-button, .post-commentary .small-button { display: inline-block; margin-top: 10px; cursor: pointer;
   background: var(--brand); color: #fff; font-weight: 700; padding: 9px 18px; border-radius: 10px; }
.post-commentary .login-button:hover, .post-commentary .small-button:hover { background: var(--brand-dark); }
.post-commentary .comment-preloader, .post-commentary .load { display: inline-block; }

/* --- Перебиваем глобальное .m2 a (color:brand + underline) у ссылок-кнопок/чипов
   блога: у них специфичность (0,1,0) проигрывала (0,1,1). Селектор a.m2-blog-*
   даёт (0,1,1) и, загружаясь позже modern.css, выигрывает. Пилюли/кнопки — без
   подчёркивания (правило проекта: подчёркнуты только текстовые ссылки). --- */
a.m2-blog-tag, a.m2-blog-cloud-tag, a.m2-blog-more, a.m2-blog-comm,
a.m2-blog-side-all, a.m2-blog-pg, a.m2-blog-pn, .m2-blog-all-list a,
a.m2-blog-card-title, .m2-blog-card-title a { text-decoration: none; }
a.m2-blog-tag { color: #52627a; }
a.m2-blog-tag:hover { color: var(--brand); }
a.m2-blog-tag.cur { color: #fff; }
a.m2-blog-cloud-tag { color: var(--ink); }
a.m2-blog-cloud-tag:hover { color: var(--brand); }
a.m2-blog-more, a.m2-blog-side-all { color: var(--brand); }
a.m2-blog-more:hover, a.m2-blog-side-all:hover { text-decoration: underline; }
a.m2-blog-comm { color: var(--muted); }
a.m2-blog-comm:hover { color: var(--brand); }
.m2-blog-all-list a { color: var(--ink); }
.m2-blog-all-list a:hover { color: var(--brand); }

/* --- Подстраховка: контент старых записей содержит несбалансированные <div>,
   из-за чего картинка/врезка может «выпасть» из .m2-blog-excerpt/.m2-blog-text
   и стать прямым потомком карточки/статьи. Ограничиваем ВСЮ медиа в блоке
   контента шириной колонки, чтобы ничего не вылезало под боковую панель. --- */
.m2-blog-card img, .m2-blog-card iframe, .m2-blog-card video, .m2-blog-card table,
.m2-blog-article img, .m2-blog-article iframe, .m2-blog-article video, .m2-blog-article table,
.m2-blog-post img, .m2-blog-post iframe, .m2-blog-post video, .m2-blog-post table {
   /* !important — в старых записях у картинок есть инлайн-стиль max-width:NNNpx
      (специфичность 1,0,0,0), который иначе перебивает внешнее правило и растягивает
      фото шире колонки под боковую панель. */
   max-width: 100% !important; height: auto !important;
}
.m2-blog-card iframe, .m2-blog-post iframe, .m2-blog-article iframe { border-radius: 12px; }
.m2-blog-card, .m2-blog-article, .m2-blog-post, .m2-blog-excerpt, .m2-blog-text { overflow-wrap: break-word; }