.blog-listing {
    padding: 56px 0 72px;
}

.blog-listing.blog-author-page { padding-top: 146px; }
@media (min-width: 768px) and (max-width: 1200px) { .blog-listing.blog-author-page { padding-top: 514px; } }
@media (max-width: 767px) { .blog-listing.blog-author-page { padding-top: 100px; } }

.blog-listing__search { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
.blog-listing__search input { min-width: min(100%, 320px); padding: 10px 12px; border: 1px solid #b7c4b3; }
.blog-listing__search button { padding: 10px 16px; background: #315d1f; color: #fff; border: 0; cursor: pointer; }
.blog-author-header { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 26px; margin-bottom: 32px; padding: 28px; border: 1px solid #e0e8da; border-radius: 12px; background: #f6f8f3; }
.blog-author-header__avatar { display: grid; place-items: center; width: 120px; height: 120px; overflow: hidden; border-radius: 50%; color: #fff; background: #315d1f; font-size: 48px; font-weight: 700; }
.blog-author-header__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-author-header__body { min-width: 0; }
.blog-author-header h1 { margin: 0; color: #1d2b1f; overflow-wrap: anywhere; }
.blog-author-header__job { margin: 8px 0 0; color: #567349; font-weight: 600; }
.blog-author-header__intro { margin: 10px 0 0; color: #4c5548; line-height: 1.55; }
.blog-author-header__social { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.blog-author-description { margin-bottom: 36px; }
@media (max-width: 600px) { .blog-author-header { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 14px; padding: 20px; } .blog-author-header__avatar { width: 64px; height: 64px; font-size: 28px; } .blog-author-header h1 { font-size: 27px; line-height: 1.2; } }

.blog-listing__nav {
    margin-bottom: 32px;
    overflow-x: auto;
}

.blog-listing__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-listing__nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 16px;
    border: 1px solid #d7ded5;
    border-radius: 4px;
    color: #1d2b1f;
    background: #fff;
    text-decoration: none;
}

.blog-listing__nav-link:hover,
.blog-listing__nav-link:focus {
    border-color: #5d8b35;
    color: #315d1f;
}

.blog-listing__nav-link.is-active {
    border-color: #315d1f;
    color: #fff;
    background: #315d1f;
}

.blog-listing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.blog-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.blog-card__image {
    display: block;
    aspect-ratio: 440 / 259;
    overflow: hidden;
    background: #f2f4f1;
}

.blog-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    color: #66705f;
    font-size: 14px;
    line-height: 1.4;
}

.blog-card__title {
    margin: 10px 0 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 500;
}

.blog-card__title a {
    color: #1d2b1f;
    text-decoration: none;
}

.blog-card__title a:hover,
.blog-card__title a:focus {
    color: #315d1f;
}

.blog-card__excerpt {
    margin: 10px 0 0;
    color: #4c5548;
    font-size: 15px;
    line-height: 1.55;
}

.blog-listing__pagination {
    margin-top: 40px;
}

.blog-listing__empty {
    max-width: 680px;
    margin: 0;
    color: #4c5548;
    font-size: 18px;
    line-height: 1.55;
}

.blog-listing__seo {
    padding: 0 0 72px;
}

@media (max-width: 1199px) {
    .blog-listing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .blog-listing {
        padding: 40px 0 56px;
    }

    .blog-listing__nav-list {
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .blog-listing__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .blog-card__title {
        font-size: 18px;
    }
}