/* Главная: современные панели «Популярное за неделю / Новостройки / Избранное», популярные и избранные записи (cn3-plus) */

/* ---- три панели вверху ---- */
body .top-block__wrap { gap: 20px; }
@media (max-width: 1100px) { body .top-block__wrap { display: grid; grid-template-columns: 1fr; gap: 14px; } }
body .top-block__last-news { margin-bottom: 0; padding: 20px 22px 12px; border-radius: 18px; border: 1px solid var(--borderColor); background: var(--lightColor); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body .top-block__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0; font-size: var(--t-label, .65rem); font-weight: var(--bold, 600); letter-spacing: .12em; text-transform: uppercase; color: var(--cn3Muted, var(--greyColor)); }
body .top-block__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cn3Accent, #8c4a3c); }
body .top-block__title-link { color: inherit; }
body .last-news__item, body .last-news__item:nth-of-type(even) { padding: 13px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--borderColor); }
body .last-news__item:last-child { border-bottom: 0; }
body .last-news__title { margin: 0; font-size: var(--t-card, .95rem); font-weight: var(--medium, 500); line-height: 1.35; }
body .last-news__link, body .last-news__title a { color: var(--mainColor); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body .last-news__link:hover, body .last-news__title a:hover { color: var(--hoverColor); }
body .last-news__meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: var(--t-meta, .78rem); color: var(--cn3Muted, var(--greyColor)); }
body .last-news__meta svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; }
body .last-news__title--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body .last-news__title--row > a { flex: 1; min-width: 0; }

/* «Популярное за неделю»: крупные номера */
.top-block__wrap > .top-block__last-news:first-child { counter-reset: cn3x-pop; }
.top-block__wrap > .top-block__last-news:first-child .last-news__item { counter-increment: cn3x-pop; display: flex; align-items: baseline; gap: 14px; }
.top-block__wrap > .top-block__last-news:first-child .last-news__item::before { content: counter(cn3x-pop, decimal-leading-zero); flex: 0 0 auto; min-width: 2ch; font-size: 1.3rem; line-height: 1; font-weight: var(--bold, 600); font-variant-numeric: tabular-nums; color: var(--borderColor); -webkit-text-stroke: 1px var(--cn3Muted, var(--greyColor)); color: transparent; }

/* оценка новостройки: мягкая плашка */
.cn3x-score { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: var(--t-meta, .78rem); font-weight: var(--bold, 600); font-variant-numeric: tabular-nums; }
.cn3x-score svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.cn3x-score.is-hi { background: rgba(16,185,129,.16); color: #047857; }
.cn3x-score.is-mid { background: rgba(245,158,11,.18); color: #b45309; }
.cn3x-score.is-lo { background: rgba(239,68,68,.15); color: #b91c1c; }
html:root[data-theme="dark"] .cn3x-score.is-hi { color: #34d399; }
html:root[data-theme="dark"] .cn3x-score.is-mid { color: #fbbf24; }
html:root[data-theme="dark"] .cn3x-score.is-lo { color: #f87171; }

/* ---- «Популярные записи»: карточки в 4 колонки с номером ---- */
body .popular-section { padding: 2.4rem 0; }
body .popular-section__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: cn3x-pp; }
body .popular-list__item { counter-increment: cn3x-pp; margin: 0 !important; }
body .popular-item { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0; gap: 12px; border: 0; border-radius: 0; background: none; }
body .popular-item__img { flex: none; max-width: none; max-height: none; width: 100%; margin: 0; aspect-ratio: 16 / 10; border-radius: 14px; }
body .popular-item__img a, body .popular-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .popular-item__img::after { content: counter(cn3x-pp, decimal-leading-zero); position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.62); color: #fff; font-size: var(--t-meta, .78rem); font-weight: var(--bold, 600); font-variant-numeric: tabular-nums; pointer-events: none; }
body .popular-item__content { text-align: left; gap: 4px; }
body .popular-item__cats { margin: 0; font-size: var(--t-label, .65rem); letter-spacing: .06em; text-transform: uppercase; }
body .popular-item__title { margin: 0; font-size: var(--t-card, .95rem); font-weight: var(--medium, 500); line-height: 1.3; }
body .popular-item__link { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--mainColor); text-decoration: none; }
body .popular-item__link:hover { color: var(--hoverColor); }
@media (max-width: 1100px) { body .popular-section__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 14px; } }

/* ---- «Избранные записи»: аккуратные карточки с подписью внизу ---- */
body .feat-posts__list { gap: 20px; }
body .feat-article { border-radius: 16px; }
body .feat-article__wrapper { height: 300px; border-radius: 16px; transition: transform .5s ease; }
body .feat-article__wrapper::before { border-radius: 16px; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.28) 55%, transparent 100%); }
body .feat-article__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 18px; }
body .feat-article__title { margin: 0 0 8px; font-size: var(--t-card-lg, 1.15rem); font-weight: var(--bold, 600); line-height: 1.25; }
body .feat-article__link { color: #fff; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { body .feat-posts__list { display: grid; grid-template-columns: 1fr; gap: 14px; } body .feat-article__wrapper { height: 240px; } }
@media (hover: none) { body .feat-posts__item:hover .feat-article__wrapper { transform: none; } }