/* =====================================================================
   Лента блога פיננסיקו — /category/blog/ (category-blog.php, inc/blog-hub.php, js/blog-hub.js).
   Дополняет tools-hub.css: оттуда берутся .msi-hub, .msi-wrap, .msi-hub-search и пилюли .msi-hub-nav-n.
   Здесь — шапка с показателями, панель фильтра, сама лента и блок «показать ещё».
   RTL: только логические свойства (inset-inline, margin-inline, padding-inline).
   ===================================================================== */

/* ---------- Шапка ---------- */
.msi-blog-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.msi-blog-head-row .msi-hub-crumbs { margin-bottom: 0; }
.msi-blog-updated { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ms-muted); }
.msi-blog-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; flex: 0 0 auto; }

.msi-blog-badge { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 12px; padding: 6px 14px; border-radius: 999px; background: #FEF3C7; color: #8F6400; font-size: 13px; font-weight: 700; }
.msi-blog-badge svg { width: 16px; height: 16px; }

.msi-blog-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.msi-blog-stat { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.msi-blog-stat-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #EEF3FA; color: var(--ms-navy); }
.msi-blog-stat-ico svg { width: 20px; height: 20px; }
.msi-blog-stat strong { font-size: 24px; font-weight: 900; color: var(--ms-navy); line-height: 1.1; }
.msi-blog-stat > span:last-child { font-size: 13px; color: var(--ms-muted); }
.msi-blog-stat--ok .msi-blog-stat-ico { background: #E3F6EE; color: #0B7A55; }
.msi-blog-stat--ok strong { font-size: 20px; }

/* ---------- Панель фильтра ---------- */
/* Липкость наследуем от .msi-hub-nav, но у блога внутри ещё и поиск с сортировкой. */
.category-blog #wrapper { overflow: clip; }
.msi-blog-bar { padding-block: 12px 10px; }
.msi-blog-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.msi-blog-tools .msi-hub-search { flex: 1 1 320px; max-width: 520px; }
.msi-blog-tools .msi-hub-search input { padding-block: 11px; font-size: 16px; }
.msi-blog-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ms-muted); }
.msi-blog-sort label { white-space: nowrap; font-weight: 600; }
.msi-blog-sort select { min-height: 44px; border: 1.5px solid var(--ms-border); border-radius: 12px; background: var(--ms-surface); color: var(--ms-navy); font: inherit; font-size: 15px; font-weight: 600; padding-inline: 12px 30px; cursor: pointer; }
.msi-blog-sort select:focus { outline: none; border-color: var(--ms-navy); box-shadow: 0 0 0 4px rgba(245,179,1,.35); }

/* На широком экране чипы переносятся строками: обрезанный сбоку чип читается как поломка.
   На узком остаётся горизонтальная лента — там перенос съедал бы пол-экрана. */
.msi-blog-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.msi-blog-chips::-webkit-scrollbar { display: none; }
.msi-blog-chips li { flex: 0 0 auto; scroll-snap-align: start; }
.msi-blog-chips a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ms-border); border-radius: 999px; background: var(--ms-surface); color: var(--ms-navy); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.msi-blog-chips a svg { width: 18px; height: 18px; }
.msi-blog-chips a:hover { border-color: var(--ms-amber); }
.msi-blog-chips a.is-active { background: var(--ms-navy); border-color: var(--ms-navy); color: #fff; }
.msi-blog-chips a.is-active .msi-hub-nav-n.is-soon { background: transparent; color: #C9D3E3; border-color: #3A5480; }

/* ---------- Лента ---------- */
.msi-blog-feed-wrap { padding-block: 26px 10px; }
.msi-blog-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.msi-blog-feed-head h2 { font-size: 27px; font-weight: 800; color: var(--ms-navy); margin: 0; }
.msi-blog-feed-head .msi-hub-count { margin: 0; }

/* align-items по умолчанию (stretch): карточки одного ряда одной высоты, и ряд не выглядит рваным
   из-за того, что у части статей есть обложка, а у части нет. */
.msi-blog-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.msi-blog-card { display: flex; flex-direction: column; background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 16px; overflow: hidden; transition: box-shadow .15s, border-color .15s, transform .15s; }
.msi-blog-card:hover { border-color: #C7D4E6; box-shadow: 0 10px 28px -20px rgba(11,31,58,.45); }
.msi-blog-card.is-hidden, .msi-blog-card.is-over { display: none; }

/* Карточки одного размера: широкая первая занимала две ячейки, и в неполном ряду оставалась дыра.
   Добивку последнего ряда делает скрипт — классами is-fill-2 / is-fill-3 на хвостовых карточках. */
.msi-blog-card.is-fill-2 { grid-column: span 2; }
.msi-blog-card.is-fill-3 { grid-column: span 3; }
.msi-blog-card.is-fill-2 .msi-blog-card-media, .msi-blog-card.is-fill-3 .msi-blog-card-media { height: 210px; }
/* Картинку показываем там, где обложка правда есть (27 статей из 37). Плашку с иконкой вместо
   обложки пробовал — ряд из одинаковых иконок читается как пустые коробки, это хуже отсутствия
   картинки. Ряды при этом не рвутся: сетка тянет карточки одного ряда до общей высоты. */
.msi-blog-card-media { display: none; place-items: center; height: 190px; background: #EEF3FA; color: var(--ms-navy); overflow: hidden; }
.msi-blog-card-media.has-img { display: block; }
.msi-blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msi-blog-card-media svg { width: 52px; height: 52px; opacity: .5; }

.msi-blog-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.msi-blog-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ms-muted); }
.msi-blog-card-cat { background: #EEF3FA; color: var(--ms-navy); border-radius: 7px; padding: 2px 9px; font-weight: 700; }
.msi-blog-card-time { unicode-bidi: isolate; }
.msi-blog-card-title { font-size: 18px; line-height: 1.35; font-weight: 800; color: var(--ms-navy); margin: 0; }
.msi-blog-card-title a { color: inherit; }
.msi-blog-card:hover .msi-blog-card-title a { color: #133E72; }
.msi-blog-card-text { font-size: 14.5px; line-height: 1.65; color: var(--ms-muted); margin: 0; }
.msi-blog-card-cta { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 800; color: var(--ms-navy); display: inline-flex; align-items: center; gap: 6px; }
.msi-blog-card:hover .msi-blog-card-cta { color: var(--ms-amber-dark, #8F6400); }

.msi-blog-empty { margin-top: 18px; }

/* ---------- Постраничная навигация ---------- */
.msi-blog-pager { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.msi-blog-pager-count { margin: 0; font-size: 14px; color: var(--ms-muted); }
.msi-blog-pager-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.msi-blog-pages { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.msi-blog-pages-gap { min-width: 24px; text-align: center; color: var(--ms-muted); }
/* 44 px по меньшей стороне — палец, а не курсор (то же правило, что у чипов и кнопок калькуляторов). */
.msi-blog-pages button, .msi-blog-pager-arrow { min-height: 44px; min-width: 44px; padding: 10px 14px; border: 1.5px solid var(--ms-border); border-radius: 12px; background: var(--ms-surface); color: var(--ms-navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.msi-blog-pages button:hover, .msi-blog-pager-arrow:hover:not(:disabled) { border-color: var(--ms-amber); }
.msi-blog-pages button.is-active { background: var(--ms-navy); border-color: var(--ms-navy); color: #fff; }
.msi-blog-pager-arrow { display: inline-flex; align-items: center; gap: 6px; }
/* Стрелка нарисована для иврита (справа налево). На русской версии зеркалим её по горизонтали,
   иначе «Назад» показывает вправо. Одно правило вместо двух наборов глифов. */
.msi-blog-pager-arrow span[aria-hidden] { display: inline-block; }
html[dir="ltr"] .msi-blog-pager-arrow span[aria-hidden] { transform: scaleX(-1); }
.msi-blog-pager-arrow:disabled { opacity: .45; cursor: default; }

/* ---------- Мини-блок калькуляторов ---------- */
.msi-blog-calcs { padding-block: 34px 44px; border-top: 1px solid var(--ms-border); }
.msi-blog-calcs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.msi-blog-calcs-head h2 { font-size: 22px; font-weight: 800; color: var(--ms-navy); margin: 0; }
.msi-blog-calcs-head a { font-size: 14px; font-weight: 700; color: var(--ms-navy); }
.msi-blog-calcs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.msi-blog-calc { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--ms-border); border-radius: 14px; background: var(--ms-surface); transition: border-color .15s, background .15s; }
.msi-blog-calc:hover { border-color: var(--ms-amber); background: #FFFDF6; }
.msi-blog-calc-ico { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: #EEF3FA; color: var(--ms-navy); }
.msi-blog-calc-ico svg { width: 20px; height: 20px; }
.msi-blog-calc-text { display: flex; flex-direction: column; min-width: 0; }
.msi-blog-calc-text strong { font-size: 15px; font-weight: 800; color: var(--ms-navy); }
.msi-blog-calc-text span { font-size: 12.5px; color: var(--ms-muted); }

/* ---------- Экраны поменьше ---------- */
@media (max-width: 1000px) {
	.msi-blog-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.msi-blog-card.is-fill-3 { grid-column: span 2; }
	.msi-blog-calcs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.msi-blog-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.msi-blog-feed { grid-template-columns: 1fr; gap: 14px; }
	.msi-blog-card-media, .msi-blog-card.is-fill-2 .msi-blog-card-media, .msi-blog-card.is-fill-3 .msi-blog-card-media { height: 170px; }
	.msi-blog-card.is-fill-2, .msi-blog-card.is-fill-3 { grid-column: auto; }
	.msi-blog-feed-head h2 { font-size: 22px; }
	.msi-blog-tools .msi-hub-search { flex-basis: 100%; max-width: none; }
	.msi-blog-sort { width: 100%; }
	.msi-blog-sort select { flex: 1; }
	/* Лента чипов на телефоне доезжает до края экрана, иначе кажется обрезанной. */
	.msi-blog-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin-inline: -24px; padding-inline: 24px; }
	.msi-blog-chips li { scroll-snap-align: start; }
}