/* ---------- 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: 40px 24px 44px;
    margin-top: 4px;
}
@media (min-width: 768px) {
    .zfx-hero .zfx-hero__band { padding: 52px 48px; border-radius: 28px; }
}
@media (min-width: 1440px) {
    .zfx-hero .zfx-hero__band { padding: 68px 64px; border-radius: 32px; }
}

/* База .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, 400px);
        gap: 52px;
    }
    .zfx-hero .zfx-hero__grid--solo { grid-template-columns: 1fr; }
}

/* ---- кикер со счётчиком + живой точкой ---- */
.zfx-hero .zfx-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 18px;
}
.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 14px;
    color: #fff;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.015em;
    font-size: clamp(36px, 4.6vw, 64px);
}
.zfx-hero .zfx-hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.55;
    max-width: 46ch;
}

/* ---- мини-лента «Свежее» ---- */
.zfx-hero .zfx-hero__fresh {
    list-style: none;
    margin: 26px 0 0;
    padding: 22px 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: 2px; }
.zfx-hero .zfx-hero__fresh-link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 8px 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: 13px;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
    min-width: 74px;
}
.zfx-hero .zfx-hero__fresh-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    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: 18px;
    overflow: hidden;
    text-decoration: none;
    color: var(--zfx-ink);
    box-shadow: 0 18px 44px rgba(0, 30, 12, 0.28);
    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: 230px;
    object-fit: cover;
    background: #cfe9d8;
}
.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: 18px 20px 20px;
}
.zfx-hero .zfx-hero__eyebrow {
    display: block;
    font-size: 12px;
    color: var(--zfx-mut);
    margin-bottom: 7px;
    font-variant-numeric: tabular-nums;
}
.zfx-hero .zfx-hero__card-title {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}
.zfx-hero .zfx-hero__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--zfx-g);
    font-weight: 500;
    font-size: 14px;
}
.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; }
}