/* ===== Обновленная Карусель изображений ===== */
.feed-card__media {
    width: 100%;
    position: relative;
    /* Убираем overflow отсюда, он будет внутри */
}

/* Контейнер для фото с кропом 3:2 (ваши параметры постов с каруселью) */
.feed-carousel {
    position: relative;
    width: 100%;
    /* Кропаем всё под 3:2. Если фото выше — оно обрежется сверху/снизу */
    aspect-ratio: 3 / 2; 
    overflow: hidden; /* Скрываем стрелки, которые выйдут за пределы */
}

.feed-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    -ms-overflow-style: none;
    height: 100%;
}



.feed-carousel__track::-webkit-scrollbar {
    display: none; 
}

.feed-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start; /* Выравнивание по левому краю для надежности */
}

/* Ссылка и картинка занимают всё пространство слайда */
.feed-carousel__slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.feed-carousel__slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Ключевое: картинка растягивается и обрезается, заполняя 3:2 */
    border-radius: 32px;
}

/* Обычный вывод одного фото остается как раньше (без кропа 3:2) */
.feed-card__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== Стрелки навигации ===== */
.feed-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(126, 126, 126, 0.219);
    border: none;
    border-radius: 25%;
    font-size: 16px;
    color: #ffffff9f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s, transform 0.2s;
    /* Убираем стандартные отступы */
    padding: 0; 
}

.feed-carousel__btn:hover {
    background: rgba(126, 126, 126, 0.349);
    transform: translateY(-50%) scale(1.05);
}

.feed-carousel__btn--prev { left: 16px; }
.feed-carousel__btn--next { right: 16px; }

/* ===== Точки пагинации ===== */
.feed-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px; /* Отступ от фото снизу */
}

.feed-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #D6D6D6; /* Неактивная точка */
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    padding: 0;
}

.feed-carousel__dot:hover {
    background-color: #8A8A8A;
}

.feed-carousel__dot--active {
    background-color: #2F2F2F; /* Активная точка */
}

/* На мобильных (меньше 768px) скрываем стрелки, оставляем только свайп */
@media (max-width: 768px) {
    .feed-carousel__btn {
        display: none;
    }

    .feed-carousel__slide img {
    border-radius: 20px;
}
}


@media (max-width: 400px) {
    .feed-card__name {
        font-size: 14px;
    }

    .feed-card__role {
                font-size: 12px;
                margin-top: -4px;
    }

    .feed-card__date {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Прижимаем к правому краю */
        gap: 2px; /* Небольшой отступ между датой и временем */
        line-height: 1.3;
    }
    
    .feed-date-sep {
        display: none; /* Скрываем точку-разделитель */
    }

    

    .feed-card__avatar {
    width: 34px;
    height: 34px;
}
}