/* Основной контейнер ленты */
.rss-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Контейнер для каждой записи */
.rss-item {
    padding: 10px 0;
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden; /* Важное свойство для float */
}

/* Картинка — плавает слева */
.rss-image {
    float: left;
    margin: 0 15px 4px 0; /* Отступы: справа 15px, снизу 15px */
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
}

/* Блок с текстом — занимает оставшееся место */
.rss-content {
    margin-left: 165px; /* 150 (картинка) + 15 (отступ) */
    overflow: hidden; /* Предотвращает наложение */
}


/* Стили для текста (заголовок, описание, мета) */
.rss-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    line-height: 1.3;
    color: #222;
}

.rss-excerpt {
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;
    word-wrap: break-word;
    hyphens: auto;
}

.rss-meta {
    clear: both; /* Мета‑блок строго под картинкой */
    padding-top: 5px;
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Адаптация для мобильных (ширина < 768px) */
@media (max-width: 768px) {
    .rss-image {
        float: none; /* Отключаем float */
        margin: 0 auto 10px; /* Центрируем, отступ снизу 15px */
        display: block;
        max-width: 100%; /* Занимает всю доступную ширину */
        width: 100%; /* Растягиваем на 100% */
        height: auto; /* Сохраняем пропорции */
    }

    .rss-content {
        margin-left: 0; /* Убираем отступ слева */
        padding: 0 5px; /* Внутренний отступ по бокам */
    }

    /* Уменьшаем отступы между элементами */
    .rss-item {
        padding: 10px 0;
    }

    .rss-meta {
        flex-direction: column; /* Источник и дата — друг под другом */
        align-items: flex-start;
        gap: 6px; /* Расстояние между строками */
        font-size: 13px;
    }
}

/* Для очень узких экранов (например, смартфоны в портретной ориентации) */
@media (max-width: 480px) {
    .rss-image {
        margin-bottom: 12px; /* Уменьшаем отступ снизу */
    }

    .rss-title {
        font-size: 16px; /* Немного уменьшаем заголовок */
    }

    .rss-excerpt {
        font-size: 14px; /* Текст описания */
    }

    .rss-meta {
        font-size: 12px;
        gap: 4px;
    }
}