/* Posts Section Styles */

.posts-section__title {
    font-family: 'TT Firs Neue', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 64px 0;
    text-align: left;
}

.posts-grid {
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.post-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.post-item__image {
    width: 100%;
    max-width: 350px;
    height: 477.5px;
    overflow: hidden;
    background-color: #FFFFFF;
}

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

/* Оптимизация для lazy loading */
.post-image-optimized {
    transition: opacity 0.3s ease;
}

.post-image-optimized[data-src] {
    opacity: 0.7;
    filter: blur(2px);
}

.post-image-optimized:not([data-src]) {
    opacity: 1;
    filter: none;
}

.post-item__content {
    display: flex;
    gap: 24px;
    align-items: center;
}

.post-item__action {
    font-family: 'TT Firs Neue', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3333333333333333em;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.post-item__action:hover {
    opacity: 0.8;
}

.post-item__date {
    font-family: 'TT Firs Neue', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3333333333333333em;
    color: #A3A4A6;
}

/* Responsive Design */

/* Tablet: 769px - 2 ряда, шрифт 15px, заголовок 24px */
@media (max-width: 769px) {
    
    .posts-section__title {
        font-size: 24px;
    }
    
    .posts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .post-item__image {
        height: 405px;
    }
    
    .post-item__action,
    .post-item__date {
        font-size: 15px;
    }
}

/* Mobile: 394px - 1 ряд, горизонтальный скролл */
@media (max-width: 394px) {
    
    .posts-grid {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .posts-grid::-webkit-scrollbar {
        display: none;
    }
    
    .posts-grid {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
    .post-item {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
    
    .post-item__image {
        height: 350px;
    }
    
    .post-item__action,
    .post-item__date {
        font-size: 14px;
    }
}

/* Container for proper centering */
.container {
    max-width: 1600px;
    margin: 0 auto;
}