/* ===== Listing Blocks (проекты, новости, статьи) и страницы новости и статьи ===== */

.listing{
    padding: var(--spacing-24) var(--spacing-20);
    background: var(--color-neutral-0)
}
@media (min-width: 768px) and (max-width: 1023px){.listing{
        padding: var(--spacing-20) var(--spacing-10)
    }}
@media (max-width: 767px){.listing{
        padding: var(--spacing-15) var(--spacing-4)
    }}
.listing__inner{
    max-width: var(--container-large);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12)
}
@media (max-width: 767px){.listing__inner{
        gap: var(--spacing-8)
    }}

/* --- Шапка секции --- */
.listing__head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-6)
}
@media (max-width: 767px){.listing__head{
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-5)
    }}
.listing__heading{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    max-width: 760px
}
.listing__title{
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-xl);
    color: var(--color-brand-850);
    margin: 0
}
@media (max-width: 767px){.listing__title{
        font-size: var(--font-size-l);
        line-height: 40px
    }}
.listing__subtitle{
    font-family: var(--font-base);
    font-size: var(--font-size-m);
    line-height: 28px;
    color: var(--color-neutral-700);
    margin: 0
}
@media (max-width: 767px){.listing__subtitle{
        font-size: var(--font-size-s);
        line-height: var(--line-height-s)
    }}
.listing__more{
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    border: var(--border-s) solid var(--color-transparent-brand-30);
    border-radius: var(--radius-full);
    background: var(--color-neutral-0);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--color-brand-800);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast)
}
.listing__more:hover{
    background: var(--color-brand-50);
    border-color: var(--color-brand-500);
    color: var(--color-brand-800);
    text-decoration: none
}
.listing__more svg{
    color: var(--color-brand-500);
    transition: transform var(--transition-fast)
}
.listing__more:hover svg{
    transform: translateX(3px)
}

/* --- Сетка карточек --- */
.listing__grid{
    display: grid;
    gap: var(--spacing-6)
}
.listing__grid--3{
    grid-template-columns: repeat(3, minmax(0, 1fr))
}
.listing__grid--4{
    grid-template-columns: repeat(4, minmax(0, 1fr))
}
@media (max-width: 1023px){.listing__grid--3,
    .listing__grid--4{
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }}
@media (max-width: 767px){.listing__grid--3{
        grid-template-columns: 1fr
    }
    .listing__grid--4{
        gap: var(--spacing-3)
    }}

/* --- Карточка проекта --- */
.work-card{
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-0);
    border: var(--border-s) solid var(--color-neutral-100-stroke);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    cursor: zoom-in;
    transition: transform var(--transition-base), box-shadow var(--transition-base)
}
.work-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 40px var(--color-transparent-dark-8)
}
.work-card__image{
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-brand-50)
}
.work-card--wide .work-card__image{
    aspect-ratio: 16 / 10
}
.work-card__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow)
}
.work-card:hover .work-card__image img{
    transform: scale(1.04)
}
.work-card__year{
    position: absolute;
    top: var(--spacing-4);
    left: var(--spacing-4);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    background: var(--color-transparent-white-70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    line-height: var(--line-height-xs);
    color: var(--color-brand-800)
}
.work-card__zoom{
    position: absolute;
    right: var(--spacing-4);
    bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-neutral-0);
    color: var(--color-brand-600);
    box-shadow: var(--shadow-light);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition-base), transform var(--transition-base)
}
.work-card:hover .work-card__zoom{
    opacity: 1;
    transform: none
}
@media (hover: none){.work-card__zoom{
        opacity: 1;
        transform: none;
        width: 32px;
        height: 32px
    }}
.work-card__body{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-5) var(--spacing-6) var(--spacing-6)
}
@media (max-width: 767px){.listing__grid--4 .work-card__body{
        padding: var(--spacing-3) var(--spacing-4) var(--spacing-4)
    }}
.work-card__title{
    font-family: var(--font-base);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-s);
    color: var(--color-brand-850);
    margin: 0
}
.listing__grid--4 .work-card__title{
    font-size: var(--font-size-s)
}
@media (max-width: 767px){.listing__grid--4 .work-card__title{
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs)
    }}
.work-card__desc{
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs-alt);
    color: var(--color-neutral-700);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

@media (max-width: 767px){.listing__grid--4 .work-card{
        border-radius: var(--radius-lg)
    }
    .listing__grid--4 .work-card__desc{
        -webkit-line-clamp: 4
    }}

/* --- Карточка новости или статьи --- */
.post-card{
    display: flex
}
.post-card__link{
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--radius-xl);
    background: var(--color-neutral-0);
    border: var(--border-s) solid var(--color-neutral-100-stroke);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base)
}
.post-card__link:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 40px var(--color-transparent-dark-8);
    color: inherit;
    text-decoration: none
}
.post-card__image{
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-brand-50)
}
.post-card__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow)
}
.post-card__link:hover .post-card__image img{
    transform: scale(1.04)
}
.post-card__body{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-6)
}
.post-card__date{
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: var(--font-base);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semi);
    line-height: var(--line-height-2xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-brand-600)
}
.post-card__title{
    font-family: var(--font-heading);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    line-height: 28px;
    color: var(--color-brand-850);
    margin: 0;
    text-align: left;
    padding: 0
}
.post-card__excerpt{
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs-alt);
    color: var(--color-neutral-700);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}
.post-card__read{
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: auto;
    padding-top: var(--spacing-2);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--color-brand-600)
}
.post-card__read svg{
    transition: transform var(--transition-fast)
}
.post-card__link:hover .post-card__read svg{
    transform: translateX(3px)
}

/* ===== Страница новости или статьи ===== */
.post{
    padding: var(--spacing-12) var(--spacing-20) var(--spacing-20);
    background: var(--gradient-section-light)
}
@media (min-width: 768px) and (max-width: 1023px){.post{
        padding: var(--spacing-10) var(--spacing-10) var(--spacing-15)
    }}
@media (max-width: 767px){.post{
        padding: var(--spacing-6) var(--spacing-4) var(--spacing-12)
    }}
.post__inner{
    max-width: 880px;
    margin-inline: auto
}
.post__crumbs{
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--spacing-2);
    margin: 0 0 var(--spacing-6);
    padding: 0;
    list-style: none;
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600)
}
.post__crumbs li + li::before{
    content: "/";
    margin-right: var(--spacing-2);
    color: var(--color-neutral-400)
}
.post__crumbs a{
    color: var(--color-neutral-600);
    text-decoration: none
}
.post__crumbs a:hover{
    color: var(--color-brand-600)
}
.post__title{
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-xl);
    color: var(--color-brand-850);
    margin: 0;
    text-align: left;
    padding: 0
}
@media (max-width: 767px){.post__title{
        font-size: 28px;
        line-height: 36px
    }}
.post__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2) var(--spacing-5);
    margin-top: var(--spacing-5);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600)
}
.post__meta-item{
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2)
}
.post__meta-item svg{
    color: var(--color-brand-500)
}
.post__cover{
    margin: var(--spacing-8) 0 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    background: var(--color-brand-50)
}
.post__cover img{
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover
}
.post__content{
    margin-top: var(--spacing-8);
    padding: var(--spacing-10) var(--spacing-12);
    border-radius: var(--radius-xl);
    background: var(--color-neutral-0);
    border: var(--border-s) solid var(--color-transparent-brand-10);
    box-shadow: var(--shadow-light);
    font-family: var(--font-base);
    font-size: 17px;
    line-height: 28px;
    color: var(--color-neutral-800)
}
@media (max-width: 767px){.post__content{
        padding: var(--spacing-6);
        font-size: var(--font-size-s);
        line-height: 26px
    }}
.post__content p{
    margin: 0 0 var(--spacing-5)
}
.post__content p:last-child{
    margin-bottom: 0
}
.post__content b,
.post__content strong{
    color: var(--color-brand-850)
}
.post__content a{
    color: var(--color-brand-600);
    text-decoration: underline
}
.post__content > :first-child{
    margin-top: 0
}

/* Разметка текста из Markdown: заголовки, списки, таблицы, цитаты */
.post__content h2,
.post__content h3,
.post__content h4{
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-850);
    text-align: left;
    padding: 0
}
.post__content h2{
    margin: var(--spacing-10) 0 var(--spacing-4);
    font-size: 26px;
    line-height: 34px
}
.post__content h3{
    margin: var(--spacing-8) 0 var(--spacing-3);
    font-size: 20px;
    line-height: 28px
}
.post__content h4{
    margin: var(--spacing-6) 0 var(--spacing-2);
    font-size: var(--font-size-m);
    line-height: 26px
}
@media (max-width: 767px){.post__content h2{
        margin-top: var(--spacing-8);
        font-size: 22px;
        line-height: 30px
    }
    .post__content h3{
        font-size: var(--font-size-m);
        line-height: 26px
    }}
.post__content ul,
.post__content ol{
    margin: 0 0 var(--spacing-5);
    padding-left: var(--spacing-6)
}
.post__content li{
    margin-bottom: var(--spacing-2)
}
.post__content li:last-child{
    margin-bottom: 0
}
.post__content ul li::marker{
    color: var(--color-brand-500)
}
.post__content ol li::marker{
    color: var(--color-brand-600);
    font-weight: var(--font-weight-bold)
}
.post__content blockquote{
    margin: 0 0 var(--spacing-5);
    padding: var(--spacing-4) var(--spacing-6);
    border-left: 4px solid var(--color-brand-500);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background: var(--color-brand-50)
}
.post__content blockquote p:last-child{
    margin-bottom: 0
}
.post__content hr{
    margin: var(--spacing-8) 0;
    border: 0;
    border-top: var(--border-s) solid var(--color-transparent-brand-10)
}
.post__table{
    margin: 0 0 var(--spacing-5);
    overflow-x: auto;
    border: var(--border-s) solid var(--color-transparent-brand-10);
    border-radius: var(--radius-lg)
}
.post__table table{
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-s);
    line-height: 24px
}
.post__table th,
.post__table td{
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    vertical-align: top;
    border-bottom: var(--border-s) solid var(--color-transparent-brand-10)
}
.post__table th{
    background: var(--color-brand-50);
    font-weight: var(--font-weight-semi);
    color: var(--color-brand-850)
}
.post__table tr:last-child td{
    border-bottom: 0
}
.post__table tbody tr:nth-child(even) td{
    background: var(--color-neutral-50)
}
@media (max-width: 767px){.post__table table{
        font-size: var(--font-size-xs);
        line-height: 20px
    }
    .post__table th,
    .post__table td{
        padding: var(--spacing-2) var(--spacing-3)
    }}
.post__back{
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-8);
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semi);
    color: var(--color-brand-700);
    text-decoration: none
}
.post__back:hover{
    color: var(--color-brand-600);
    text-decoration: none
}
.post__back svg{
    transition: transform var(--transition-fast)
}
.post__back:hover svg{
    transform: translateX(-3px)
}

/* Перебиваем глобальные стили h1/h2/h3 сайта */
.listing__title,
.work-card__title,
.post__title{
    text-align: left;
    padding: 0
}