/* ===================================================================
   Страница сервера: шапка карточки, описание, теги, скриншоты,
   активные услуги, график онлайна.

   Общие атомы (.server-name, .server-details, .detail-*, .server-link,
   .vote__button, .server-placeholder) берутся из home.css, который
   страница подключает рядом. Заголовки разделов, чипы, сегментированный
   переключатель, карточки и модальные окна — из global.css.

   Значения — только из tokens.css.
   =================================================================== */

.server-info {
}

/* Разделы страницы отбиваются одинаково. Раньше каждый блок носил свой
   margin-bottom: 40px, а «Информация о сервере» сверху — капслочную
   подпись, которая ничего не сообщала: и так видно, чья это страница. */
.server-info > * + * {
    margin-top: var(--stack-lg);
}

/* ------------------------------------------------------------------
   Шапка карточки
   ------------------------------------------------------------------ */

.server-info__card-body {
    --card-spine: var(--accent);

    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--pad-card);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    /* Полоса — псевдоэлемент, а не border-left: рамка добавляла 3px к
       ширине и сдвигала всё содержимое панели. */
    position: relative;
    overflow: hidden;
}

.server-info__card-name-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.server-info__card-name-row .server-name {
    margin: 0;
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    /* nowrap здесь резал длинные названия вроде «MineLegacy Выживание». */
    white-space: normal;
}

.server-info__card-body .server-description {
    margin: 0;
    max-width: var(--measure);
    font-size: var(--fs-body);
    color: var(--text-3);
    /* На карточке слоган не обрезаем: место есть, а в каталоге он уже
       был подрезан двумя строками. */
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
}

/* Левая колонка теперь держит название, слоган, баннер и метрики — она
   выше правой и раскладывается вплотную, без разрывов. Правая прижата к
   низу, поэтому кнопка раскрутки заканчивается на одной линии с рядом
   метрик, а поле с адресом встаёт напротив слогана.

   До этого название и слоган стояли НАД рядом, левая колонка состояла из
   баннера и метрик (120px) и была ниже правой (156px). Разницу в 36px
   некуда было деть: при flex-end она превращалась в пустоту между
   слоганом и баннером, при space-between — между баннером и метриками. */
.server-info__card-row {
    display: flex;
    align-items: stretch;
    gap: var(--sp-6);
}

/* space-between — страховка на случай, когда баннера нет и левая колонка
   становится ниже правой: без него под рядом метрик оставалась дыра в
   высоту недостающего баннера. С баннером левая колонка выше правой,
   свободного места нет, и правило ничего не меняет. */
.server-info__card-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* Название и слоган прижаты друг к другу теснее, чем блоки колонки между
   собой: это одна мысль, а не два соседних блока. */
.server-info__card-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
}

.server-info__card-left .server-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
}

/* Характеристики на странице сервера — утопленные плашки, а не строка
   текста: здесь у них больше места и это главные цифры страницы. */
.server-info__card-left .detail-item {
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface-sunken);
    border-radius: var(--r-md);
}

.server-info__card-left .detail-text {
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
}

/* Правая колонка: адрес — голос — раскрутка. Порядок и вес по убыванию,
   чтобы три кнопки подряд не выглядели одинаково важными. */
.server-info__card-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--sp-2);
    width: 280px;
}

.server-info__card-right .server-link-wrapper {
    width: 100%;
}

.server-info__card-right .server-link {
    width: 100%;
    height: var(--control-h-lg);
    font-size: var(--fs-lead);
}

/* На карточке сервера кнопка голоса — сплошная: это единственное главное
   действие страницы, и по правилу акцента заливка положена именно ему.

   В каталоге она остаётся приглушённой (--accent-soft из home.css): там
   таких кнопок столько же, сколько серверов в выдаче, и сплошные они
   собрались бы в жёлтую колонку. Одна и та же кнопка, разный вес —
   потому что «главное действие СТРАНИЦЫ» бывает только одно. */
.server-info__card-right .vote__button {
    width: 100%;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: var(--fs-body);
}

.server-info__card-right .vote__button:hover:not(:disabled) {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

/* Проголосовавшему — тот же нейтральный вид, что и в каталоге. */
.server-info__card-right .vote__button:disabled,
.server-info__card-right .vote__button.is-voted {
    border-color: var(--border);
    background: var(--surface-3);
    color: var(--text-3);
}

.server-info__boost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    box-sizing: border-box;
    height: var(--control-h);
    padding-inline: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.server-info__boost-btn:hover {
    background: var(--surface-4);
}

.server-info__boost-icon {
    flex-shrink: 0;
    color: var(--accent);
}

/* ------------------------------------------------------------------
   Описание
   ------------------------------------------------------------------ */

.server-info__desc-section__text {
    position: relative;
    max-width: var(--measure);
    font-size: var(--fs-body);
    line-height: var(--lh-base);
    color: var(--text-2);
    overflow-wrap: break-word;
    word-break: break-word;
}

.server-info__desc-section__empty {
    color: var(--text-4);
}

.server-info__desc-section__text p {
    margin: 0 0 var(--sp-3);
}

.server-info__desc-section__text p:last-child {
    margin-bottom: 0;
}

.server-info__desc-section__text ul,
.server-info__desc-section__text ol {
    padding-left: var(--sp-5);
    margin: 0 0 var(--sp-3);
}

.server-info__desc-section__text li {
    margin-bottom: var(--sp-1);
}

.server-info__desc-section__text strong,
.server-info__desc-section__text b {
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.server-info__desc-section__text em,
.server-info__desc-section__text i {
    font-style: italic;
}

.server-info__desc-section__text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease);
}

.server-info__desc-section__text a:hover {
    color: var(--accent-hover);
}

.server-info__desc-section__text h2,
.server-info__desc-section__text h3 {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

/* ------------------------------------------------------------------
   Теги

   Три категории шли тремя блоками с капслочными подзаголовками —
   девять строк служебного текста ради двух-трёх ссылок в каждой.
   Теперь чипы лежат одним рядом: посетителю важен сам тег, а не то,
   в какой раздел справочника он записан.
   ------------------------------------------------------------------ */

.server-info__tags-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* ------------------------------------------------------------------
   Скриншоты
   ------------------------------------------------------------------ */

.server-info__gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 279px;
    gap: var(--sp-2);
}

.server-info__gallery:has(> .server-info__main-image:only-child) {
    grid-template-columns: minmax(0, 1fr);
}

.server-info__main-image {
    height: 420px;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.server-info__main-image--img,
.server-info__thumbnail-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-info__thumbnails {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.server-info__thumbnail {
    flex: 1;
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Ссылки сервера
   ------------------------------------------------------------------ */

.server-info__icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.server-info__icons--link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--control-h);
    height: var(--control-h);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    opacity: 0.75;
    transition: opacity var(--dur) var(--ease),
                background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.server-info__icons--link:hover {
    opacity: 1;
    background: var(--surface-3);
    border-color: var(--border-strong);
}

.server-info__icon--img {
    width: var(--icon-md);
    height: var(--icon-md);
    object-fit: contain;
}

/* ------------------------------------------------------------------
   Активные услуги
   ------------------------------------------------------------------ */

.server-info__purchases-wrap {
    position: relative;
}

/* Высоту в свёрнутом виде считает server_card_page.js по фактическому
   первому ряду — здесь только обрезка, чтобы не держать два источника. */
.server-info__purchases-wrap.is-collapsed .server-info__purchases-grid {
    overflow: hidden;
}

.server-info__purchases-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease);
}

.server-info__purchases-toggle {
    margin-top: var(--sp-3);
}

.server-info__purchases-arrow {
    flex-shrink: 0;
    fill: none;
    transition: transform var(--dur-slow) var(--ease);
}

.server-info__purchases-toggle.is-open .server-info__purchases-arrow {
    transform: rotate(180deg);
}

/* auto-fit вместо repeat(3, 1fr): сетка сама переходит на две колонки
   и на одну, без отдельного брейкпоинта на каждый шаг. */
.server-info__purchases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-2);
    transition: max-height var(--dur-slow) var(--ease);
}

.server-info__purchase-card {
    --card-spine: var(--accent);

    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--pad-card-sm);
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.server-info__purchase-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border-radius: var(--r-md);
    background: var(--accent-soft);
}

.server-info__purchase-icon img {
    width: var(--icon-md);
    height: var(--icon-md);
}

.server-info__highlight-swatch {
    display: block;
    width: var(--icon-sm);
    height: var(--icon-sm);
    border-radius: var(--r-xs);
}

.server-info__purchase-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.server-info__purchase-amount {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--accent);
}

.server-info__purchase-expires {
    font-size: var(--fs-caption);
    color: var(--text-4);
}

/* Карточка купленного бейджа окрашивается в его цвет — полоса слева и
   название. Цвета берутся из tokens.css, которые зеркалят BADGE_TYPES. */
.server-info__purchase-card--badge-fire      { --card-spine: var(--badge-fire); }
.server-info__purchase-card--badge-lightning { --card-spine: var(--badge-lightning); }
.server-info__purchase-card--badge-star      { --card-spine: var(--badge-star); }
.server-info__purchase-card--badge-diamond   { --card-spine: var(--badge-diamond); }
.server-info__purchase-card--badge-crown     { --card-spine: var(--badge-crown); }
.server-info__purchase-card--badge-heart     { --card-spine: var(--badge-heart); }
.server-info__purchase-card--badge-meteor    { --card-spine: var(--badge-meteor); }
.server-info__purchase-card--badge-trophy    { --card-spine: var(--badge-trophy); }
.server-info__purchase-card--badge-balloon   { --card-spine: var(--badge-balloon); }
.server-info__purchase-card--badge-confetti  { --card-spine: var(--badge-confetti); }

.server-info__purchase-amount--fire      { color: var(--badge-fire); }
.server-info__purchase-amount--lightning { color: var(--badge-lightning); }
.server-info__purchase-amount--star      { color: var(--badge-star); }
.server-info__purchase-amount--diamond   { color: var(--badge-diamond); }
.server-info__purchase-amount--crown     { color: var(--badge-crown); }
.server-info__purchase-amount--heart     { color: var(--badge-heart); }
.server-info__purchase-amount--meteor    { color: var(--badge-meteor); }
.server-info__purchase-amount--trophy    { color: var(--badge-trophy); }
.server-info__purchase-amount--balloon   { color: var(--badge-balloon); }
.server-info__purchase-amount--confetti  { color: var(--badge-confetti); }

/* Подложка иконки повторяет цвет полосы, а не всегда жёлтая. */
.server-info__purchase-card .server-info__purchase-icon {
    background: color-mix(in srgb, var(--card-spine) 12%, transparent);
}

/* ------------------------------------------------------------------
   Статистика
   ------------------------------------------------------------------ */

/* Копирования IP. auto-fit вместо двух колонок: на узком экране плитки сами
   встают в одну, брейкпоинт под них не нужен. */
/* Одна плашка вместо двух карточек по 581px.

   Величины вложенные: сегодняшние копирования входят в месячные. Двумя
   равными карточками рядом «2» и «2» читались как сбой, а не как две
   шкалы. Теперь крупное число — окно, «сегодня» — приписка справа. */
.copy-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
}

.copy-stats__value {
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text);
    /* Цифра меняется на месте после копирования — без табличных цифр соседний
       текст дёргался бы по горизонтали. */
    font-variant-numeric: tabular-nums;
}

.copy-stats__caption {
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    color: var(--text-4);
}

.copy-stats__today {
    margin-left: auto;
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    color: var(--text-4);
    font-variant-numeric: tabular-nums;
}

/* ---- График ---- */

.online-chart {
    width: 100%;
    height: 280px;
}

.chart-ranges {
    align-self: flex-start;
    margin-bottom: var(--sp-4);
}

/* Сервер, добавленный час назад, за неделю данных не имеет — вместо пустого
   прямоугольника показываем причину. */
.online-chart__empty {
    margin: 0;
    padding: var(--sp-8) 0;
    text-align: center;
    color: var(--text-4);
    font-size: var(--fs-small);
}

/* ==================================================================
   Адаптив
   ================================================================== */

@media (max-width: 1024px) {
    .server-info__card-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-4);
    }

    .server-info__card-right {
        width: 100%;
        flex-direction: row;
        align-items: stretch;
    }

    .server-info__card-right .server-link-wrapper,
    .server-info__card-right .vote__button,
    .server-info__boost-btn {
        flex: 1;
    }

    .server-info__card-right .vote__button,
    .server-info__boost-btn {
        height: var(--control-h-lg);
    }

    .server-info__gallery {
        grid-template-columns: minmax(0, 1fr);
    }

    .server-info__main-image {
        height: auto;
        max-height: 420px;
    }

    .server-info__thumbnails {
        flex-direction: row;
    }

    .server-info__thumbnail {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .server-info__card-right {
        flex-direction: column;
    }

    /* flex:1 достался от правила на 1024, где колонка была строкой. В
       колонке он задаёт основу по ВЫСОТЕ — кнопки схлопывались в 26px. */
    .server-info__card-right .server-link-wrapper,
    .server-info__card-right .vote__button,
    .server-info__boost-btn {
        flex: 0 0 auto;
    }

    /* Ростом 52 они были только пока стояли в один ряд и должны были
       совпадать. Столбиком возвращается разница в весе: адрес крупнее
       голоса, голос крупнее раскрутки. */
    .server-info__card-right .vote__button,
    .server-info__boost-btn {
        height: var(--control-h);
    }

    .server-info__card-left .server-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .server-info__thumbnails {
        flex-direction: column;
    }

    .server-info__thumbnail {
        height: auto;
    }
}