/**
 * Event Info Mobile - блок с информацией о цене и сообществе для мобильной версии
 */

/* Обёртка мобильного инфо-стека без эпика */
.event-mobile-info-stack {
    width: 100%;
}

/* Эпик + панель на мобилке страницы мероприятия — тот же приём, что gc-event-card-cell--epic */
.event-show-mobile-info-cell {
    isolation: isolate;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
}

/* Эпик на всю ширину колонки — без боковых inset */
.event-show-mobile-info-cell .gc-event-card-epic-row {
    padding-left: 0;
    padding-right: 0;
}

.event-show-mobile-info-cell--epic .gc-event-card-epic-row {
    position: relative;
    z-index: 0;
}

.event-show-mobile-info-cell--epic .mobile-event-info-block {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * (var(--spacing-md) + var(--spacing-xs)));
}

/* Объединенный блок — как .sidebar-event-info-block (внутренний inset) */
.mobile-event-info-block {
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: var(--spacing-xs);
}

/* На адаптиве — верхний инфо-блок у края экрана без боковых линий */
@media (max-width: 991.98px) {
    .mobile-event-info-block {
        /* border-left: none;
        border-right: none; */
    }

    /*
     * Внутри .gc-show-main-panel (/weapons/{id}, /stages/{id}): панель уже даёт фон и контур,
     * отдельная «пилюля» не нужна — без бордера и лишнего inset; ритм секций — column gap.
     */
    .mobile-event-info-block.mobile-event-info-block--in-show-panel {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-mdl);
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-event-info-block.mobile-event-info-block--in-show-panel .weapon-sidebar-stack {
        gap: var(--spacing-mdl);
    }
}

/* Блок с ценой */
.event-info-price-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
}

/* Сумма цены - крупнее и жирнее */
.event-info-amount {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--font-primary);
    line-height: 1.3;
}

/* Тип цены/участия */
.event-info-type {
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
}

/* Разделитель */
.event-info-divider {
    height: 1px;
    background: var(--ui-border);
    margin: 0;
}

/* Блок с сообществом (кликабельный) */
.event-info-community-mobile {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
    cursor: pointer;
}

.event-info-community-mobile:hover {
    background: var(--bg-content-secondary);
}

.event-info-community-mobile--static {
    cursor: default;
}

.event-info-community-mobile--static:hover {
    background: transparent;
}

.event-community-chevron {
    color: var(--font-secondary);
    font-size: var(--font-size-md);
    flex-shrink: 0;
    margin-left: auto;
}

/* Аватарка для мобильной версии */
.mobile-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.mobile-avatar-placeholder {
    box-sizing: border-box;
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1;
    color: var(--font-secondary);
}

/* Обертка имени и статуса */
.mobile-name-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    flex-grow: 1;
}

/* Название сообщества */
.event-community-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--font-primary);
    margin-bottom: var(--spacing-4xs);
}

/* Статус сообщества */
.event-community-status {
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
}