/**
 * wintra.marquee — стили универсальной бесшовной ленты.
 *
 * Структура (viewport/track/animation) — в marquee-engine.css.
 * Здесь — декор карточки (item) + варианты по WM_DISPLAY.
 */

/* === Карточка — общая структура =======================================
 * Ширина item = --wm-marquee-item-width (из движка, viewport/per-view).
 * Картинка сжимается до доступной ширины item, опц. ограничение по высоте
 * через WM_ITEM_HEIGHT (--wm-marquee-item-height, default = по контенту).
 */
.wm-marquee__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    padding: 8px 12px;
}

/* === display=picture =================================================== */
.wm-marquee--display-picture .wm-marquee__item {
    flex-direction: row;
}
.wm-marquee--display-picture .wm-marquee__img {
    display: block;
    width: 100%;
    max-height: var(--wm-marquee-item-height, none);
    object-fit: contain;
}

/* === display=name ====================================================== */
.wm-marquee--display-name .wm-marquee__item {
    flex-direction: row;
}
.wm-marquee--display-name .wm-marquee__name {
    font-size: var(--wintra-type-size-body, 16px);
    font-weight: 500;
    color: var(--wintra-color-ink, #11161F);
    text-align: center;
}

/* === display=both ====================================================== */
.wm-marquee--display-both .wm-marquee__item {
    flex-direction: column;
    gap: 8px;
}
.wm-marquee--display-both .wm-marquee__img {
    display: block;
    width: 100%;
    max-height: var(--wm-marquee-item-height, none);
    object-fit: contain;
}
.wm-marquee--display-both .wm-marquee__name {
    font-size: var(--wintra-type-size-caption, 13px);
    color: var(--wintra-color-ink-muted, rgba(0,0,0,0.6));
    text-align: center;
    line-height: 1.2;
}

/* === Тёмная тема ряда / группы рядов ====================================
 * Покрываем все варианты «тёмного фона» по которым рендерятся надписи:
 *   • .wm-row--dark — конкретный ряд помечен dark
 *   • .wm-row-group--dark — группа рядов
 *   • [data-theme="dark"] — общая тема (контейнер группы) с выворотом
 *
 * Срабатывает для display=name и display=both (где есть текстовая надпись).
 * Picture-only карточки тут ни при чём — там картинки + grayscale-фильтр.
 */
.wm-row--dark .wm-marquee__name,
.wm-row-group--dark .wm-marquee__name,
[data-theme="dark"] .wm-marquee__name {
    color: var(--wintra-color-surface, #fff);
    opacity: 0.5;
}

/* === Hover для cliquables ============================================== */
a.wm-marquee__item:hover {
    text-decoration: none;
}
/* Hover-эффект для картинок управляется через .wm-marquee--grayscale в
 * marquee-engine.css (opacity 0.48 → 1 при hover). Для текстовых надписей
 * hover-блекнование не делаем — текст остаётся читаемым. */