*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Manrope', sans-serif; background: #fff; color: #111614; }

:root {
    --g:   #6bb476;
    --gd:  #4d9659;
    --gl:  #edf6ef;
    --dark:#0d1f1a;
    --d2:  #132b22;
    --gray:#6b7280;
    --bdr: #e5e7eb;
    --bg:  #f5f6f5;
}

.container { max-width: 1480px; margin: 0 auto; padding: 0 40px; width: 100%; }

/* ── анимации ── */
.fx { opacity:0; transform:translateY(24px);
      transition: opacity .55s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.fx.d1 { transition-delay:.08s; }
.fx.d2 { transition-delay:.16s; }
.fx.d3 { transition-delay:.24s; }
.fx.d4 { transition-delay:.32s; }
.fx.d5 { transition-delay:.40s; }
.fx.d6 { transition-delay:.48s; }
.fx._on { opacity:1; transform:none; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.25} }

/* ════════════ HERO ════════════ */
.hero {
    background: #0d1f1a;
    padding: 46px 0 50px;
    position: relative; overflow: hidden;
}
.hero::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg,transparent,rgba(107,180,118,.35) 25%,rgba(107,180,118,.35) 75%,transparent);
}
.hero__grid {
    position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(107,180,118,.042) 1px,transparent 1px),
        linear-gradient(90deg,rgba(107,180,118,.042) 1px,transparent 1px);
    background-size: 72px 72px;
}
.hero__glow {
    position:absolute; top:-200px; right:-60px;
    width:560px; height:560px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle,rgba(107,180,118,.13) 0%,transparent 65%);
}
.hero .container { position:relative; z-index:1; }

.hero__eyebrow {
    display:inline-flex; align-items:center; gap:7px;
    font-size:10px; font-weight:800; color:var(--g);
    letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}
.hero__dot {
    width:5px; height:5px; border-radius:50%; background:var(--g);
    box-shadow:0 0 6px rgba(107,180,118,.9);
    animation:pulse 2s ease-in-out infinite;
}
.hero__title {
    font-size: clamp(32px,4vw,56px);
    font-weight:900; line-height:1.05; letter-spacing:-.03em; color:#fff;
}
.hero__title em { font-style:normal; color:var(--g); }
.hero__sub {
    margin-top:10px; font-size:15px;
    color:rgba(255,255,255,.38); line-height:1.7; max-width:480px;
}

/* ════════════ GRID SECTION ════════════ */
.news-section { padding: 56px 0 72px; }

.news-section__head {
    display:flex; align-items:center; gap:16px; margin-bottom:32px;
}
.news-section__label {
    font-size:10px; font-weight:900; color:var(--gray);
    letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.news-section__line { flex:1; height:1px; background:var(--bdr); }
.news-section__count {
    font-size:11px; color:var(--gray);
    border:1px solid var(--bdr); border-radius:20px; padding:3px 13px; flex-shrink:0;
}

/* ── сетка ── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 24px;
    align-items: stretch;
}

/* ════════════ КАРТОЧКА ════════════ */
/* 2. Вся карточка кликабельна — position:relative + cursor:pointer */
.card {
    display: flex; flex-direction: column;
    border-radius: 20px; overflow: hidden;
    text-decoration: none; color: inherit;
    border: 1.5px solid var(--bdr);
    background: #fff;
    cursor: pointer;
    /* 3. Hover-эффект: подъём + тень */
    transition: border-color .3s, box-shadow .3s, transform .35s cubic-bezier(.22,1,.36,1);
    position: relative;
    /* 1. Одинаковая высота — карточка растягивается на всю ячейку */
    height: 100%;
}
.card:hover {
    border-color: rgba(107,180,118,.5);
    box-shadow: 0 20px 56px rgba(107,180,118,.16), 0 4px 16px rgba(0,0,0,.06);
    transform: translateY(-6px);
}

/* ── фото ── */
.card__img {
    position: relative; overflow: hidden;
    height: 210px; flex-shrink: 0;
    background: var(--bg);
}

/* 5. Базовый градиент снизу — всегда виден, читабельность даты */
.card__img::after {
    content: '';
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    background: linear-gradient(to top, rgba(10,28,20,.82) 0%, rgba(10,28,20,.12) 55%, transparent 100%);
    z-index: 2;
}
/* 3. Дополнительный слой затемнения при hover — через opacity */
.card__img::before {
    content: '';
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    background: rgba(10,28,20,.22);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 3;
}
.card:hover .card__img::before { opacity: 1; }

.card__img img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.card:hover .card__img img { transform: scale(1.07); }

/* 6. Дата — компактнее, меньше конкурирует с заголовком */
/* z-index: 5 — выше обоих псевдоэлементов (::after z2, ::before z3) */
.card__date-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 32px 18px 14px;
    display: flex; align-items: flex-end; gap: 6px;
    z-index: 5;
}
.card__date-num {
    /* Уменьшено с 42px до 28px */
    font-size: 28px; font-weight: 900; color: #fff;
    letter-spacing: -.03em; line-height: 1;
    opacity: .9;
}
.card__date-month {
    font-size: 10px; font-weight: 700; color: rgba(255,255,255,.55);
    text-transform: uppercase; letter-spacing: .07em;
    padding-bottom: 3px; line-height: 1.3;
}

/* ── тело ── */
.card__body {
    padding: 20px 22px 22px;
    /* 1. flex + flex:1 держат footer внизу независимо от длины заголовка */
    flex: 1; display: flex; flex-direction: column; gap: 0;
}

/* 1. Заголовок ограничен 3 строками с обрезкой */
.card__title {
    font-size: 15px; font-weight: 800; color: #111614;
    line-height: 1.38; letter-spacing: -.01em;
    /* flex:1 — толкает footer вниз */
    flex: 1;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    transition: color .2s;
    margin-bottom: 16px;
}
.card:hover .card__title { color: var(--gd); }

.card__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--bdr);
    /* 1. footer всегда на одной линии */
    margin-top: auto;
    flex-shrink: 0;
}

/* 9. Кнопка «читать» — чуть акцентнее */
.card__read {
    font-size: 10px; font-weight: 800; color: var(--gd);
    letter-spacing: .1em; text-transform: uppercase;
    transition: color .2s;
}
.card:hover .card__read { color: var(--g); }

.card__arrow {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid var(--bdr);
    display: flex; align-items: center; justify-content: center;
    color: var(--gray);
    transition: background .25s, border-color .25s, color .25s, transform .25s;
    flex-shrink: 0;
}
.card__arrow svg { width: 14px; height: 14px; }
/* 3. Стрелка-CTA при hover */
.card:hover .card__arrow {
    background: var(--g); border-color: var(--g); color: #fff;
    transform: translateX(4px);
}

/* ════════════ PAGINATION ════════════ */
.pagination {
    padding: 40px 0 0;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pagination__item {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    border: 1.5px solid var(--bdr); color: var(--gray);
    text-decoration: none; transition: all .2s;
}
.pagination__item:hover { border-color:rgba(107,180,118,.4); color:var(--gd); background:var(--gl); }
.pagination__item--cur { background:var(--g); border-color:var(--g); color:#fff; }
.pagination__item--cur:hover { background:var(--gd); border-color:var(--gd); }
.pagination__item svg { width:14px; height:14px; }

/* ════════════ CTA ════════════ */
.cta {
    margin-top: 72px;
    padding: 90px 0;
    background: var(--gl);
    text-align: center;
    border-top: 1px solid rgba(107,180,118,.2);
}
.cta__inner { max-width: 720px; margin: 0 auto; }
.cta__title {
    font-size: clamp(24px,3vw,42px); font-weight:900; color:#111614;
    letter-spacing:-.025em; margin-bottom:16px; line-height:1.15;
}
.cta__text { font-size:16px; color:var(--gray); line-height:1.8; margin-bottom:32px; }
.cta__btn {
    display:inline-flex; align-items:center; gap:9px;
    background:var(--gd); color:#fff;
    font-size:14px; font-weight:800; letter-spacing:.04em;
    padding:14px 32px; border-radius:12px; text-decoration:none; margin-bottom:32px;
    transition:background .2s, transform .2s, box-shadow .2s;
}
.cta__btn:hover { background:#3d7a48; transform:translateY(-2px); box-shadow:0 10px 28px rgba(77,150,89,.25); }
.cta__perks { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.cta__perk { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--gray); }
.cta__perk svg { width:13px; height:13px; fill:var(--g); }

/* ════════════ АДАПТИВ ════════════ */
@media (max-width:1100px) {
    .news-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
}
@media (max-width:680px) {
    .container { padding:0 20px; }
    .hero { padding:36px 0 40px; }
    .news-section { padding:40px 0 56px; }
    /* 7. Мобайл: 1 колонка, карточки не растягиваются слишком */
    .news-grid { grid-template-columns:1fr; gap:16px; }
    .card__img { height:190px; }
    /* 7. Ограничиваем заголовок 2 строками на мобайле */
    .card__title { -webkit-line-clamp:2; }
    .cta { padding:56px 0; margin-top:0; }
}