/* ───────────────────────────────────────────────────────────────────────────
   Баннер поддержки (оранжевый блок Boosty).

   1. Фон карточки — полотно плиток поддержавших с непрерывной прокруткой:
      ник, сумма доната / уровень подписки. Декоративный слой.
   2. Сборы — часть карточки: без своего фона и панели, разделяются отступами.

   Разметка: _includes/support_team.html, полоса прогресса —
   общий компонент _includes/fundraiser_progress.html.

   Design_System_TDot_v2.md:
     §2.1 — без декоративных border/outline, только тон, отступы и тень;
     §3.1–3.5 — отступы/радиусы/типографика из нормативных токенов;
     §3.3 — цвета из существующих --themes-*;
     §5 — адаптивность; полотно скрывается там, где нет места.
   ─────────────────────────────────────────────────────────────────────────── */

.supportteam--funding {
    position: relative;
    overflow: hidden;
}

/* Полотно позиционируется относительно текстового блока: так оно
   вертикально ограничено заголовком и описанием и не попадает
   в область сборов. */
.supportteam--funding .supportteam-text-container {
    position: relative;
    min-width: 0;
}

/* ── Полотно плиток поддержавших ──────────────────────────────────────────── */

.support-wall {
    position: absolute;
    /* Начинаемся ниже заголовка: имена не должны ложиться на текст. */
    top: 72px;
    right: 0;
    bottom: 0;
    left: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-10);
    overflow: hidden;
    /* Декоративный фон: не перехватывает клики и скрыт от скринридеров. */
    pointer-events: none;
    /* Мягкий край со стороны текста: ряды растворяются к заголовку. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* Отдельный слой для вертикального растворения: он не повёрнут, поэтому
   маска гасит ряды ровно по верхней и нижней границе блока — имена
   не обрезаются пополам. */
.support-wall__fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
}

/* Ряд прокручивается бесконечно. Список продублирован в разметке,
   поэтому сдвиг на -50% возвращает ряд в исходное положение без рывка.
   Обёртка повёрнута: горизонтальный сдвиг читается как движение по диагонали. */
.support-wall__rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    transform: rotate(-9deg) scale(1.4);
    transform-origin: center;
}

.support-wall__row {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    width: max-content;
    animation: support-wall-scroll 60s linear infinite;
}

/* Чётные ряды идут в обратную сторону — полотно выглядит «живым». */
.support-wall__row--reverse {
    animation-direction: reverse;
}

/* Ряды сдвинуты друг относительно друга: одинаковые ники не выстраиваются
   в столбцы, и полотно читается как множество разных людей, а не как
   повторяющаяся таблица. */
.support-wall__row:nth-child(1) { margin-left: 0; }
.support-wall__row:nth-child(2) { margin-left: -72px; }
.support-wall__row:nth-child(3) { margin-left: -148px; }
.support-wall__row:nth-child(4) { margin-left: -36px; }
.support-wall__row:nth-child(5) { margin-left: -196px; }
.support-wall__row:nth-child(6) { margin-left: -110px; }

@keyframes support-wall-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Плитка: иконка уровня + ник, ниже итоговая сумма, которую человек внёс.
   Без подложки — только текст поверх фона карточки. */
.support-tile {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 108px;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-05);
    overflow: hidden;
    text-align: center;
    /* Обычное написание: ники не капсом. */
    text-transform: none;
    color: var(--themes-color-1, #ffffff);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    /* Плашки нет, поэтому читаемость на насыщенном фоне держим тенью текста. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Иконка уровня стоит вплотную к нику. */
.support-tile__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-05);
    min-width: 0;
    max-width: 100%;
}

.support-tile__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Иконка уровня подписки (assets/img/lvl1..3_icon.svg) рядом с ником.
   Без собственной тени — чтобы по стилю совпадать с обычным текстом ника. */
.support-tile__icon {
    flex: 0 0 auto;
    width: auto;
    height: 16px;
    display: block;
    object-fit: contain;
    filter: none;
}

.support-tile__meta {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
}

/* Уважаем настройку «меньше движения»: полотно остаётся статичным. */
@media (prefers-reduced-motion: reduce) {
    .support-wall__row {
        animation: none;
    }
}

/* ── Счётчик подписчиков ─────────────────────────────────────────────────── */
.support-count {
    margin: 0;
    align-self: flex-start;
    padding: var(--space-05) var(--space-15);
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--themes-color-1, #ffffff);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.support-count strong {
    font-weight: var(--font-weight-bold);
}

/* ── Сборы внизу карточки ─────────────────────────────────────────────────── */

/* Ни фона, ни панели: сборы — часть карточки, разделены отступами. */
.support-funding {
    display: flex;
    flex-direction: column;
    gap: var(--space-30);
    min-width: 0;
}

.support-funding__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--themes-color-1, #ffffff);
}

.support-funding__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40) var(--space-50);
    min-width: 0;
}

/* В баннере карточки не панели, поэтому название цели показываем полностью
   в две строки, а не обрезаем до нечитаемого. */
.support-funding .fp__title {
    -webkit-line-clamp: 2;
}

@media screen and (min-width: 900px) {
    .support-funding__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1200px) {
    .support-funding__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Адаптивность (§5) ───────────────────────────────────────────────────── */

/* Полотно живёт только там, где справа от текста есть свободное место.
   Высота холста задаётся только когда полотно реально выводится
   (.supportteam--has-wall), иначе в пустом состоянии оставался бы
   большой отступ под кнопкой. */
@media screen and (min-width: 1201px) {
    .supportteam--has-wall .supportteam-text-container {
        min-height: 400px;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 1200px) {
    .support-wall {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .support-funding {
        gap: var(--space-20);
    }

    .support-funding__title {
        font-size: var(--font-size-md);
    }

    .support-funding__grid {
        gap: var(--space-30);
    }
}

/* ── Основная кнопка баннера ──────────────────────────────────────────────── */

/* Менее контрастная, чем была: полупрозрачная поверхность вместо плотной
   белой заливки, чтобы акцент оставался у сборов, а не у общей кнопки. */
.supportteam--funding .utility-button {
    background-color: rgba(255, 255, 255, 0.22);
    color: var(--themes-color-1, #ffffff);
    font-weight: var(--font-weight-semibold);
    transition: background-color 0.2s ease-in-out;
}

.supportteam--funding .utility-button:hover {
    background-color: rgba(255, 255, 255, 0.32);
    transform: none;
}

.supportteam--funding .utility-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}