/**
 * announces-redesign.css
 * Унифицированный дизайн ленты анонсов: главная (#f-announces) и /announces.
 *
 * Скоуп — класс-маркер .announce-card (есть только у партиала
 * protected/views/announces/_announce.php). Класс .announce без .announce-card
 * используется в рецензиях/блоге и на /book/<id>/announces (//blog/_post.php) —
 * они НЕ затрагиваются.
 *
 * Новый стиль (эталон — страница книги): каждый анонс — чистая светлая карточка
 * с лёгким скруглением и тонкой границей, заголовок-ссылка акцентно-синий
 * (#0088cc), мета приглушённая, аккуратная картинка-превью слева, текст обрезан
 * до 3 строк с синей кнопкой «показать больше».
 *
 * Раскладка (устойчивый flex, НЕ зависит от ширины контейнера и порядка
 * элементов в DOM): превью-картинка слева, справа — блок .announce-body
 * (текст обрезан до 3 строк + кнопка «показать больше» под текстом).
 * Картинка в DOM идёт ПОСЛЕ текста, поэтому ставим её слева через order:-1.
 * Анонс без картинки: .announce-body занимает всю ширину. Кнопка снимает
 * обрезку через класс .expanded.
 *
 * Тёмная тема: цвета заголовка/меты/«показать больше»/тела .msg централизованно
 * заданы в css/dark-theme.css (грузится ПОЗЖЕ и с !important). Здесь — только
 * фон/границы самой карточки, которых в общем файле нет (фоллбэк-значения
 * совпадают с переменными --dark-* для бесшовного слияния .msg с карточкой).
 */

/* ===== Карточка анонса ===== */
.announce-card {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    /* overflow:hidden создаёт BFC — карточка обтекает внутренние float .a/.b */
    overflow: hidden;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.announce-card:hover {
    border-color: #d6e6f2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Заголовок — название книги, акцентно-синяя ссылка */
.announce-card .b h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.announce-card .b h2 a {
    color: #0088cc;
    text-decoration: none;
}

.announce-card .b h2 a:hover {
    color: #006699;
    text-decoration: underline;
}

/* Мета: «от X в разделе «…»» — приглушённая */
.announce-card .b .info {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #8a9099;
}

.announce-card .b .info a {
    color: #6b7884;
    text-decoration: none;
}

.announce-card .b .info a:hover {
    color: #0088cc;
    text-decoration: underline;
}

/* Иконка комментария справа в мета-строке */
.announce-card .b .cmt a {
    color: #aab2bd;
    text-decoration: none;
}

.announce-card .b .cmt a:hover {
    color: #0088cc;
}

/* Миниатюра обложки слева (50×50) — аккуратное скругление */
.announce-card .a .img {
    border-radius: 6px;
}

/* Тело анонса: flex-строка «картинка слева / текст справа».
   Внутри карточки .msg — без собственного фона/границы (карточка сама
   контейнер); align-items:flex-start — картинка и текст прижаты к верху. */
.announce-card .b .msg {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Декоративный «хвостик» speech-bubble в карточке не нужен.
   display:none убирает его и из flex-потока. */
.announce-card .b .msg .v {
    display: none;
}

/* Контейнер превью-картинки — визуально слева через order,
   хотя в DOM идёт последним */
.announce-card .post-image {
    order: -1;
    flex: 0 0 auto;
    margin: 0;
}

/* Превью-картинка фиксированного размера */
.announce-card .post-image img {
    width: 140px;
    height: 188px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Правый блок: текст + кнопка. min-width:0 обязателен, чтобы длинный текст
   (или длинное слово/URL) не распирал flex-элемент и не ломал раскладку. */
.announce-card .announce-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Текст анонса: обрезка до 3 строк */
.announce-card .announce-text {
    color: #3d4751;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Развёрнутое состояние — снимаем обрезку, текст показывается полностью. */
.announce-card.expanded .announce-text {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
}

/* Кнопка «показать больше» — небольшая акцент-ссылка под текстом */
.announce-card .announce-more {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 0;
    color: #0088cc;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.announce-card .announce-more:hover,
.announce-card .announce-more:focus {
    color: #006699;
    text-decoration: underline;
    outline: none;
}

/* SVG-иконка комментария: наследует цвет ссылки (currentColor),
   корректна в светлой и тёмной теме */
.announce-card .cmt .announce-cmt-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 2px;
}

/* ===== ТЁМНАЯ ТЕМА =====
   Только фон/границы карточки (в dark-theme.css их нет). Цвета текста/ссылок
   и фон .msg перекрывает dark-theme.css. Фон карточки = --dark-bg-card, поэтому
   принудительный фон .msg из dark-theme.css сливается с карточкой (чистая
   единая панель), а border:none у .msg обнуляет ширину границы. */
body.dark-theme .announce-card {
    background: var(--dark-bg-card, #2a2a2a);
    border-color: var(--dark-border-primary, #404040);
    box-shadow: none;
}

body.dark-theme .announce-card:hover {
    border-color: var(--dark-border-secondary, #555555);
    box-shadow: none;
}

/* Тело анонса: в светлой теме тёмно-серый #3d4751, на тёмной карточке он почти
   сливается с фоном — поднимаем до вторичного светлого текста. */
body.dark-theme .announce-card .announce-text {
    color: var(--dark-text-secondary, #b0b0b0);
}

/* ===== АДАПТИВ =====
   Приоритет — компактность, чтобы лента не разрасталась в длину.
   На всех брейкпоинтах сохраняем «картинка слева / текст справа»,
   уменьшая превью и отступы. */

/* Планшет / узкий desktop */
@media (max-width: 767px) {
    .announce-card {
        padding: 12px 13px;
    }
    .announce-card .b .msg {
        gap: 10px;
    }
    .announce-card .post-image img {
        width: 120px;
        height: 160px;
    }
}

/* Мобильные */
@media (max-width: 480px) {
    .announce-card {
        margin-bottom: 12px;
        padding: 11px 12px;
        border-radius: 8px;
    }
    .announce-card .post-image img {
        width: 100px;
        height: 140px;
    }
    /* Удобный тап-таргет для «показать больше» */
    .announce-card .announce-more {
        padding: 6px 0;
        font-size: 14px;
    }
}

/* Очень узкие экраны */
@media (max-width: 360px) {
    .announce-card .b .msg {
        gap: 8px;
    }
    .announce-card .post-image img {
        width: 90px;
        height: 130px;
    }
}