/* ---------- Zemexx — hero для списков /news/ и /blog/ ---------- */
/* Редакционная композиция: топографический паттерн + кикер-счётчик  */
/* + H1 + подзаголовок + мини-лента «Свежее» слева, крупная карточка */
/* справа. Фильтры остаются отдельной секцией .ns-news ниже.         */

.zfx-hero {
    --zfx-g:   #00BF3F;
    --zfx-gd:  #067a37;
    --zfx-gl:  #18cc52;
    --zfx-ink: #030813;
    --zfx-sec: #6F737A;
    --zfx-mut: #A3A5AA;
}

.zfx-hero .zfx-hero__band {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background-color: var(--zfx-g);
    /* Слои (сверху вниз): SVG-текстура «план посёлка» (сетка участков,    */
    /* подсветка делянок, дорога, топо-контуры, волна) → блик у карточки   */
    /* → зелёное боке → виньетка снизу → тёмный угол сверху-слева → база.   */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 520' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='p' width='82' height='82' patternUnits='userSpaceOnUse'%3E%3Cpath d='M82 0V82M0 82H82' fill='none' stroke='%23fff' stroke-opacity='0.12' stroke-width='1.2'/%3E%3C/pattern%3E%3C/defs%3E%3Cg transform='rotate(-12 600 260)'%3E%3Crect x='-360' y='-340' width='1920' height='1200' fill='url(%23p)'/%3E%3Cg fill='%23fff'%3E%3Crect x='246' y='-2' width='82' height='82' opacity='0.06'/%3E%3Crect x='410' y='80' width='82' height='82' opacity='0.10'/%3E%3Crect x='574' y='-2' width='82' height='82' opacity='0.07'/%3E%3Crect x='656' y='162' width='82' height='82' opacity='0.06'/%3E%3Crect x='820' y='80' width='82' height='82' opacity='0.11'/%3E%3Crect x='902' y='244' width='82' height='82' opacity='0.06'/%3E%3Crect x='328' y='244' width='82' height='82' opacity='0.08'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M-60 486 C 240 470, 360 300, 620 286 S 1010 250, 1270 120' stroke-opacity='0.08' stroke-width='22'/%3E%3Cpath d='M-60 486 C 240 470, 360 300, 620 286 S 1010 250, 1270 120' stroke-opacity='0.26' stroke-width='2' stroke-dasharray='13 17'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round' opacity='0.5'%3E%3Cpath d='M1050 14 C1146 26, 1208 92, 1196 168 S1118 296, 1022 294 S888 224, 900 148 S954 2, 1050 14 Z'/%3E%3Cpath d='M1052 64 C1118 73, 1160 116, 1150 170 S1098 252, 1034 250 S944 204, 952 152 S986 56, 1052 64 Z'/%3E%3Cpath d='M1054 112 C1090 117, 1112 140, 1106 170 S1078 214, 1042 213 S994 188, 998 160 S1018 108, 1054 112 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round' opacity='0.32'%3E%3Cpath d='M150 348 C212 352, 250 396, 240 438 S192 502, 134 500 S58 462, 64 416 S88 344, 150 348 Z'/%3E%3Cpath d='M152 392 C190 396, 214 422, 208 448 S178 488, 142 487 S96 462, 100 434 S114 389, 152 392 Z'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cpath d='M0 470 C 220 440, 460 492, 700 470 S 1080 440, 1200 472 V520 H0 Z' opacity='0.05'/%3E%3Cpath d='M0 496 C 260 472, 480 514, 740 496 S 1090 472, 1200 500 V520 H0 Z' opacity='0.06'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(58% 78% at 85% 6%,  rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 50%),
        radial-gradient(46% 64% at 14% 46%, rgba(150, 255, 190, 0.13) 0%, rgba(150, 255, 190, 0) 56%),
        radial-gradient(150% 120% at 50% 132%, rgba(0, 42, 17, 0.42) 0%, rgba(0, 42, 17, 0) 56%),
        radial-gradient(120% 120% at -8% -16%, rgba(0, 42, 17, 0.34) 0%, rgba(0, 42, 17, 0) 46%),
        linear-gradient(120deg, #025020 0%, #00a836 46%, #1fd258 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 26px 20px 30px;
    margin-top: 4px;
}
@media (min-width: 768px) {
    .zfx-hero .zfx-hero__band { padding: 30px 34px; border-radius: 22px; }
}
@media (min-width: 1440px) {
    .zfx-hero .zfx-hero__band { padding: 46px 52px; border-radius: 28px; }
}

/* База .zfx-hero__band несёт фон НОВОСТЕЙ («план посёлка»).            */
/* Блог переопределяет фон на «редакционный»: точечная сетка +         */
/* плавные горизонтали-контуры + кольца, более глубокий зелёный тон.   */
.zfx-hero .zfx-hero__band--blog {
    background-color: #00982f;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 520' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='d' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%23fff' fill-opacity='0.11'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' width='1200' height='520' fill='url(%23d)'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5' stroke-opacity='0.16'%3E%3Cpath d='M-40 78 C 220 40, 440 116, 680 80 S 1060 44, 1260 96'/%3E%3Cpath d='M-40 150 C 240 112, 470 188, 700 152 S 1080 116, 1260 168'/%3E%3Cpath d='M-40 222 C 220 184, 480 262, 720 224 S 1090 188, 1260 240'/%3E%3Cpath d='M-40 296 C 260 258, 460 336, 700 298 S 1100 262, 1260 314'/%3E%3Cpath d='M-40 370 C 230 332, 500 410, 740 372 S 1110 336, 1260 388'/%3E%3Cpath d='M-40 444 C 250 406, 470 486, 720 446 S 1100 410, 1260 462'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6' opacity='0.32'%3E%3Cellipse cx='1040' cy='120' rx='132' ry='70' transform='rotate(-10 1040 120)'/%3E%3Cellipse cx='1040' cy='120' rx='86' ry='46' transform='rotate(-10 1040 120)'/%3E%3Cellipse cx='1040' cy='120' rx='42' ry='22' transform='rotate(-10 1040 120)'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(60% 80% at 84% 8%,  rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 50%),
        radial-gradient(140% 120% at 50% 130%, rgba(0, 36, 14, 0.44) 0%, rgba(0, 36, 14, 0) 55%),
        radial-gradient(110% 120% at -6% -14%, rgba(0, 36, 14, 0.36) 0%, rgba(0, 36, 14, 0) 46%),
        linear-gradient(125deg, #02401b 0%, #008c2c 48%, #12bd4c 100%);
}

.zfx-hero .zfx-hero__grid {
    position: relative;
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 960px) {
    .zfx-hero .zfx-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
        gap: 32px;
    }
    .zfx-hero .zfx-hero__grid--solo { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
    .zfx-hero .zfx-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        gap: 44px;
    }
}

/* ---- кикер со счётчиком + живой точкой ---- */
.zfx-hero .zfx-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 11px;
}
.zfx-hero .zfx-hero__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: zfxHeroPulse 2.2s ease-out infinite;
}
@keyframes zfxHeroPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.zfx-hero .zfx-hero__title {
    margin: 0 0 9px;
    color: #fff;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.015em;
    font-size: clamp(26px, 2.7vw, 42px);
}
.zfx-hero .zfx-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(13px, 0.95vw, 16px);
    line-height: 1.48;
    max-width: 46ch;
}

/* ---- мини-лента «Свежее» ---- */
.zfx-hero .zfx-hero__fresh {
    list-style: none;
    margin: 15px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    max-width: 52ch;
}
.zfx-hero .zfx-hero__fresh-item + .zfx-hero__fresh-item { margin-top: 0; }
.zfx-hero .zfx-hero__fresh-link {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
    border-radius: 8px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.zfx-hero .zfx-hero__fresh-date {
    flex: none;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
    min-width: 66px;
}
.zfx-hero .zfx-hero__fresh-title {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    border-bottom: 1px solid transparent;
}
@media (any-hover: hover) {
    .zfx-hero .zfx-hero__fresh-link:hover { transform: translateX(4px); }
    .zfx-hero .zfx-hero__fresh-link:hover .zfx-hero__fresh-title {
        border-bottom-color: rgba(255, 255, 255, 0.55);
    }
}

/* ---- карточка последней записи ---- */
.zfx-hero .zfx-hero__card {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--zfx-ink);
    box-shadow: 0 14px 36px rgba(0, 30, 12, 0.26);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
    will-change: transform;
}
@media (any-hover: hover) {
    .zfx-hero .zfx-hero__card:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 56px rgba(0, 30, 12, 0.34);
    }
}
.zfx-hero .zfx-hero__card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.zfx-hero .zfx-hero__card-media { position: relative; display: block; }
.zfx-hero .zfx-hero__card-img {
    display: block;
    width: 100%; height: 152px;
    object-fit: cover;
    background: #cfe9d8;
}
@media (min-width: 1440px) {
    .zfx-hero .zfx-hero__card-img { height: 190px; }
}
.zfx-hero .zfx-hero__card-img--ph {
    background-image: linear-gradient(135deg, #cfe9d8, #bfe0c9);
}
.zfx-hero .zfx-hero__card-flag {
    position: absolute;
    left: 14px; top: 14px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(3, 8, 19, 0.55);
    backdrop-filter: blur(4px);
    padding: 5px 11px;
    border-radius: 100px;
}
.zfx-hero .zfx-hero__card-tag {
    position: absolute;
    right: 14px; bottom: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--zfx-gd);
    background: #fff;
    padding: 5px 12px;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.zfx-hero .zfx-hero__card-body {
    display: block;
    padding: 13px 15px 15px;
}
.zfx-hero .zfx-hero__eyebrow {
    display: block;
    font-size: 11.5px;
    color: var(--zfx-mut);
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}
.zfx-hero .zfx-hero__card-title {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.28;
}
.zfx-hero .zfx-hero__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 11px;
    color: var(--zfx-g);
    font-weight: 500;
    font-size: 13.5px;
}
.zfx-hero .zfx-hero__more svg { transition: transform 0.2s ease; }
@media (any-hover: hover) {
    .zfx-hero .zfx-hero__card:hover .zfx-hero__more svg { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .zfx-hero .zfx-hero__card,
    .zfx-hero .zfx-hero__fresh-link,
    .zfx-hero .zfx-hero__more svg { transition: none; }
    .zfx-hero .zfx-hero__card:hover,
    .zfx-hero .zfx-hero__fresh-link:hover { transform: none; }
    .zfx-hero .zfx-hero__dot { animation: none; }
}

/* ---------- Список статей: и блог, и новости — простой грид 2 → 3 колонки ---------- */
/* Блог (.bl) штатно упирался в 2 колонки. Новости (:not(.bl)) имели «журнальную»      */
/* сетку из map-redesign.css: repeat(6,1fr) + карточки span 3 (16:9) / span 2 (1:1).   */
/* По решению заказчика приводим ОБА к простому 3-колоночному гриду одинакового вида:  */
/* колонки 2(768)/3(1440+) и у новостей гасим span + принудительный aspect-ratio       */
/* (!important — span-правила имеют равную специфичность, порядок подключения           */
/* ненадёжен). Размер заголовков карточек — общий (см. .vp-news--h3 ниже).             */
/* ZFX 2026-07-21: minmax(0,1fr) вместо 0.333fr/0.5fr — иначе контент распирал колонки (308/308/468).
   aspect-ratio: 4/3 (а не auto) — чтобы фото приводились к единому размеру (жалоба: «фото не подгоняются»). */
@media (min-width: 768px) {
    .ns-news .ns-news--div__GRID.bl,
    .ns-news .ns-news--div__GRID:not(.bl) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
    .ns-news .ns-news--div__GRID.bl,
    .ns-news .ns-news--div__GRID:not(.bl) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ns-news .ns-news--div__GRID:not(.bl) > .vp-news--a__MAIN { grid-column: auto !important; }
    .ns-news .ns-news--div__GRID:not(.bl) > .vp-news--a__MAIN .vp-news--img__SWIPER_IMG { aspect-ratio: 4 / 3 !important; }
}
@media (min-width: 1920px) {
    .ns-news .ns-news--div__GRID.bl,
    .ns-news .ns-news--div__GRID:not(.bl) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Заголовки карточек в списке новостей/блога — компактнее (было 20/28/32px). */
/* Ограничено списком .ns-news--div__GRID, чтобы не задеть слайдеры на главной. */
.ns-news .ns-news--div__GRID .vp-news--h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 12px 0 0;
}
@media (min-width: 768px) {
    .ns-news .ns-news--div__GRID .vp-news--h3 { font-size: 19px; margin: 14px 0 0; }
}
@media (min-width: 1440px) {
    .ns-news .ns-news--div__GRID .vp-news--h3 { font-size: 21px; margin: 16px 0 0; }
}