/* Используется .page-container-flush из layout-utilities.css для layout без боковых отступов */
/* Стили обложки берутся из profile-card.css (используем те же классы) */

/* ===================================
   Community Profile Card - Дополнительные стили
   =================================== */

/* Карточка профиля сообщества - используем общий класс gc-profile-card */
/* Карточка профиля сообщества/эпика */
/* Отступы управляются родителем .page-layout через gap */

/* Аватар сообщества (расширение базовых стилей) */
.gc-community-avatar-placeholder {
    width: 128px; /* 150px */
    height: 128px;
    border-radius: var(--radius-full);
    background: var(--ui-surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);
    font-weight: 600;
    color: var(--font-secondary);
    border: 6px solid var(--bg-content-main); /* 6px */
    box-sizing: border-box;
}

/* Алиасы классов для совместимости */
.gc-community-avatar-col {
    display: flex;
    justify-content: center;
    margin-top: -88px; 
}

.gc-community-avatar-col img {
    width: 128px; /* 150px */
    height: 128px;
    object-fit: cover;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    cursor: pointer;
    border: 6px solid var(--bg-content-main); /* 6px */
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.gc-community-avatar-col img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

/* Адаптив для аватара сообщества */
@media (max-width: 768px) {
    .gc-community-avatar-col {
        margin-top: -4.6875rem; /* -75px */
    }
    
    .gc-community-avatar-col img,
    .gc-community-avatar-placeholder {
        width: 7.5rem; /* 120px */
        height: 7.5rem;
        border-width: 0.25rem; /* 4px */
    }
}

@media (max-width: 576px) {
    .gc-community-avatar-col {
        margin-top: -3.75rem; /* -60px */
    }
    
    .gc-community-avatar-col img,
    .gc-community-avatar-placeholder {
        width: 6.25rem; /* 100px */
        height: 6.25rem;
    }
}

/* Slug сообщества (интерактивный элемент) */
.gc-community-slug {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: var(--accent-link) !important;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.gc-community-slug:hover {
    opacity: 0.8; /* TODO: добавить --opacity-hover в variables.css */
}

.gc-channel-actions {
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.gc-channel-actions form,
.gc-channel-actions .gc-dropdown {
    display: flex;
}

.gc-channel-action {
    min-height: 36px;
}

.gc-channel-action-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
}

.gc-channel-action-toggle {
    justify-content: space-between;
    gap: var(--spacing-xs);
}

.gc-channel-action-toggle .gc-channel-action-label {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}

.gc-channel-action-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--font-secondary);
    transition: transform var(--transition-fast);
}

.gc-channel-action-caret i {
    font-size: var(--font-size-xs);
}

.gc-channel-action-toggle[aria-expanded="true"] .gc-channel-action-caret {
    transform: rotate(-180deg);
}

.gc-channel-actions--stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.gc-channel-actions--stack form,
.gc-channel-actions--stack .gc-dropdown,
.gc-channel-actions--stack .gc-btn {
    width: 100%;
}

.gc-channel-actions--stack .gc-btn {
    justify-content: center;
}

.gc-channel-actions--stack .gc-btn.gc-channel-action-toggle {
    justify-content: space-between;
}

.gc-channel-actions--stack .gc-dropdown .gc-btn {
    width: 100%;
}

/* Мобильный rail ленты: одна кнопка «Подписаться» на всю ширину */
.gc-channel-actions--feed-mobile-rail {
    width: 100%;
}

.gc-channel-actions--feed-mobile-rail .gc-channel-actions-feed-mobile__subscribe,
.gc-channel-actions--feed-mobile-rail .gc-channel-actions-feed-mobile__subscribe .gc-btn {
    width: 100%;
}

.gc-channel-actions--feed-mobile-rail .gc-channel-actions-feed-mobile__subscribe .gc-btn {
    justify-content: center;
}

/* Separator в метаданных сообщества */
.gc-community-meta-separator {
    color: var(--font-secondary);
}

/* ===================================
   Community Toast Notifications
   =================================== */

.community-toast {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    color: var(--font-primary);
    padding: var(--spacing-mdl) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    z-index: var(--z-notification);
    backdrop-filter: blur(20px) saturate(1.15);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    border: 1px solid var(--border-overlay);
    box-shadow: var(--shadow-dropdown-sheet), 0 0 0 1px var(--border-overlay);
}

.community-toast.success {
    background: linear-gradient(
        135deg,
        rgba(var(--success-color-rgb), 0.88),
        rgba(var(--bg-rgb), 0.45)
    );
    border-color: rgba(var(--success-color-rgb), 0.45);
}

.community-toast.error {
    background: linear-gradient(
        135deg,
        rgba(var(--danger-color-rgb), 0.88),
        rgba(var(--bg-rgb), 0.48)
    );
    border-color: rgba(var(--danger-color-rgb), 0.48);
}

.community-toast.slide-up {
    animation: communityToastSlideUp var(--transition-slow) var(--ease-out);
}

.community-toast.slide-down {
    animation: communityToastSlideDown var(--transition-slow) var(--ease-in);
}

@keyframes communityToastSlideUp {
    from { 
        transform: translateX(-50%) translateY(var(--spacing-lg)); 
        opacity: 0; 
    }
    to { 
        transform: translateX(-50%) translateY(0); 
        opacity: 1; 
    }
}

@keyframes communityToastSlideDown {
    from { 
        transform: translateX(-50%) translateY(0); 
        opacity: 1; 
    }
    to { 
        transform: translateX(-50%) translateY(var(--spacing-lg)); 
        opacity: 0; 
    }
}

/* ===================================
   Community Sidebar - Разделение секций
   =================================== */

.channel-sidebar-card {
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.channel-sidebar-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--ui-border);
    color: var(--font-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.channel-sidebar-back:hover {
    background: var(--bg-content-secondary);
    color: var(--font-primary);
}

.channel-sidebar-card-cover {
    height: 88px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-content-secondary);
}

.channel-sidebar-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-mdl) var(--spacing-mdl);
}

.channel-sidebar-card-avatar {
    margin-top: -24px;
}

.channel-sidebar-card-avatar img,
.channel-sidebar-card-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-content-main);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface-1);
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px var(--ui-border);
    color: var(--font-secondary);
    font-size: var(--font-size-2xl);
    font-weight: 600;
}

.channel-sidebar-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.channel-sidebar-card-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
}

.channel-sidebar-card-name {
    margin: 0;
    word-break: break-word;
}

.channel-sidebar-card-description {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--font-secondary);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.channel-sidebar-card-slug {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--font-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.channel-sidebar-card-slug:hover {
    color: var(--accent-link);
    opacity: 1;
}

.channel-sidebar-card-actions-wrap {
    margin-top: var(--spacing-xs);
}

/* Сайдбар с разделенными секциями (как в профиле) */
.catalog-layout:not(.catalog-layout--page) .catalog-sidebar {
    background: transparent !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl); /* Отступы между секциями */
}

/* Сайдбар каталога: .catalog-nav — как .gc-tabs (tabs.css). */

@media (max-width: 991.98px) {
    .catalog-sidebar {
        display: none !important;
    }
}

/* Базовый sticky .catalog-sidebar — layout-utilities.css (не дублировать overflow/position здесь). */
@media (min-width: 992px) {
    .channel-layout--compact .catalog-main {
        align-self: start;
    }
}

/* Компактный канал: между панелями и заголовками групп — тот же шаг, что у базового .catalog-main (не --spacing-sm из .catalog-main--content) */
.channel-layout--compact .catalog-main.catalog-main--content {
    gap: var(--spacing-mdl);
}

/* ===================================
   Старые стили (Legacy)
   =================================== */

/* Контейнер */
.community-container {
    max-width: 1140px; /* TODO: добавить --container-max-width в variables.css */
    margin: 0 auto;
    padding: var(--spacing-md) 0;
}

@media (min-width: 768px) {
    .community-container {
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

@media (min-width: 1400px) {
    .community-container {
        max-width: 1320px;
    }
}

/* Шапка сообщества */
.gc-community-header {
    background: var(--bg-content-main);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Обложка */
.gc-community-cover {
    width: 100%;
    height: 15rem; /* 240px */
    background-size: cover;
    background-position: center;
    background-color: var(--bg-content-secondary);
    position: relative;
}

.gc-community-cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent-link) 0%, #667eea 100%);
    opacity: 0.3; /* TODO: добавить --opacity-subtle в variables.css */
}

/* Контент под обложкой */
.gc-community-header-content {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    position: relative;
}

.gc-community-header-inner {
    display: flex;
    align-items: flex-end; /* Выравниваем все по нижнему краю */
    gap: var(--spacing-lg);
}

/* Аватар - поднимается поверх обложки */
.gc-community-avatar {
    width: 10rem; /* 160px */
    height: 10rem;
    border-radius: var(--radius-full);
    border: 0.25rem solid var(--bg-content-main); /* 4px */
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-content-main);
    box-shadow: var(--shadow-md);
    margin-top: -5rem; /* -80px */
}

.gc-community-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .gc-community-avatar-placeholder - удален дубликат, используется определение выше */

/* Информация */
.gc-community-info {
    flex-grow: 1;
    min-width: 0; /* Позволяет сжиматься внутри flex */
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
}

.gc-community-name {
    margin: 0 0 var(--spacing-xs) 0;
}

.gc-community-slug {
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
}

.gc-community-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
}

.gc-community-stat-item {
    color: var(--font-primary);
}

.gc-community-stat-divider {
    opacity: 0.5;
}

/* Действия */
.gc-community-actions {
    flex-shrink: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Десктопная версия кнопок - показываем на больших экранах */
.gc-community-actions-desktop {
    display: flex;
}

/* Мобильная версия кнопок - скрываем на больших экранах */
.gc-community-actions-mobile {
    display: none;
}


/* Унифицируем размеры всех кнопок в шапке */
.gc-community-actions .gc-btn {
    min-height: 2.5rem; /* 40px */
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.gc-community-actions .d-flex.gap-2 .gc-btn {
    flex: 1;
    min-width: 0;
}

/* Навигация в сайдбаре */
.sidebar-nav {
    display: flex;
    flex-direction: column;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-mdl);
    padding: 0.875rem var(--spacing-lg); /* 14px вертикально */
    color: var(--font-secondary);
    text-decoration: none;
    transition: all var(--transition-base) var(--ease-out);
    font-size: var(--font-size-mdl);
    font-weight: 500;
    position: relative;
}

/* Полоска слева для активного элемента */
.sidebar-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--spacing-xs);
    height: 0;
    background: var(--accent-link);
    border-radius: 0 var(--spacing-4xs) var(--spacing-4xs) 0;
    transition: height var(--transition-base) var(--ease-out);
}

.sidebar-nav-item.active::before {
    height: var(--spacing-xl);
}

.sidebar-nav-item:hover {
    background: var(--bg-content-secondary);
    color: var(--font-primary);
}

.sidebar-nav-item.active {
    background: var(--bg-content-secondary);
    color: var(--font-primary);
    font-weight: 500;
}

.sidebar-nav-item i {
    width: var(--spacing-lg);
    font-size: var(--font-size-sm);
    text-align: center;
    flex-shrink: 0;
}

.sidebar-nav-item span:not(.badge) {
    flex: 1;
}

.sidebar-nav-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sidebar-nav-item-disabled:hover {
    background: transparent;
    color: var(--font-secondary);
}

/* Дополнительные стили для текста в навигации */
.sidebar-nav-item:hover .text-secondary {
    color: var(--font-secondary) !important;
}

.sidebar-nav-item.active .text-secondary {
    color: var(--font-secondary) !important;
}

/* Layout: Контент + Сайдбар */
.community-layout {
    display: grid;
    grid-template-columns: 1fr 22.5rem; /* 360px */
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

@media (min-width: 1600px) {
    .community-layout {
        grid-template-columns: 1fr 25rem; /* 400px */
    }
}

.community-main {
    min-width: 0; /* Важно для корректного переноса текста в grid */
}

.community-sidebar {
    height: fit-content;
    position: sticky;
    top: 5rem; /* 80px */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.sidebar-section-nav {
    background: var(--bg-content-main);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sidebar-section {
    background: var(--bg-content-main);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.sidebar-section-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--font-primary);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-family-heading);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.stat-item {
    text-align: center;
    padding: var(--spacing-mdl);
    background: var(--bg-content-secondary);
    border-radius: var(--radius-lg);
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--font-primary);
    display: block;
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    margin-top: var(--spacing-xs);
}

/* Контент секции */
/* Специфичные свойства для сообществ (базовый класс в styles.css) */
/* Убираем overflow: hidden, чтобы не ломать карточки событий */

/* Старые стили content-section удалены - используйте gc-panel */

/* Скрываем время окончания события при нехватке места */
.upcoming-event-card .event-end-time {
    display: inline;
}

/* Скрываем время окончания, когда контейнер узкий */
.upcoming-event-card .event-time-container {
    container-type: inline-size;
}

@container (max-width: 280px) {
    .upcoming-event-card .event-end-time {
        display: none !important;
    }
}

/* Скрываем время окончания на узких экранах */
@media (max-width: 576px) {
    .upcoming-event-card .event-end-time {
        display: none !important;
    }
}

/* Адаптивность */
@media (max-width: 991px) {
    .community-layout {
        grid-template-columns: 1fr;
    }
    
    .community-sidebar {
        position: static;
        order: -1; /* Показываем сайдбар сверху на мобилках */
    }
}

@media (max-width: 768px) {
    /* Секции сохраняют скругления, просто контейнер без padding */
    
    .gc-community-header-content {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }
    
    .gc-community-cover {
        height: 11.25rem; /* 180px */
    }
    
    .gc-community-header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-mdl);
    }
    
    .gc-community-avatar {
        width: 7.5rem; /* 120px */
        height: 7.5rem;
        margin-top: -3.75rem; /* -60px */
    }
    
    .gc-community-avatar-placeholder,
    .gc-community-avatar-placeholder i {
        font-size: 4.5rem; /* 72px - увеличено для мобильных */
    }
    
    .gc-community-info {
        padding-top: 0;
    }
    
    /* Скрываем десктопную версию кнопок */
    .gc-community-actions-desktop {
        display: none;
    }
    
    /* Показываем мобильную версию кнопок */
    .gc-community-actions-mobile {
        display: flex;
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;
        flex-direction: row; /* Кнопки в ряд */
        align-items: stretch;
    }
    
    .gc-community-actions-mobile .gc-btn,
    .gc-community-actions-mobile .gc-dropdown {
        justify-content: center;
        flex: 1; /* Делим пространство поровну */
        min-height: 2.5rem; /* 40px */
    }
    
    .gc-community-actions-mobile .gc-dropdown .gc-btn {
        width: 100%;
    }
    
    .gc-community-actions-mobile .d-flex.gap-2 {
        width: 100%;
        flex-direction: row;
    }
    
    .gc-community-actions-mobile .d-flex.gap-2 .gc-btn {
        flex: 1;
    }
}

/* Стили для рейтинга сезона в сайдбаре (компактная версия) */
.season-rankings-list-compact {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* 6px */
}

.season-ranking-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast) var(--ease-out);
    cursor: default;
}

.season-ranking-item:hover {
    background: var(--bg-content-secondary);
}

.season-ranking-item.non-member {
    opacity: 0.6; /* TODO: добавить --opacity-disabled в variables.css */
}

.ranking-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem; /* 28px */
    gap: var(--spacing-4xs);
    flex-shrink: 0;
}

.ranking-position i {
    font-size: var(--font-size-lg);
}

.ranking-number {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--font-secondary);
    text-align: center;
    min-width: var(--spacing-lg);
}

.ranking-change {
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
    display: inline-block;
}

.ranking-change.up {
    color: var(--success-color);
}

.ranking-change.down {
    color: var(--danger-color);
}

.ranking-avatar {
    flex-shrink: 0;
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--bg-content-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast) var(--ease-out);
}

.ranking-avatar.profile-trigger {
    cursor: pointer;
}

.ranking-avatar.profile-trigger:hover {
    transform: scale(1.08); /* TODO: добавить --scale-hover в variables.css */
}

.ranking-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ranking-avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface-1);
    box-shadow: inset 0 0 0 1px var(--ui-border);
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
}

.ranking-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xs);
}

.ranking-name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.ranking-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--font-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-fast) var(--ease-out);
}

.ranking-name.profile-trigger {
    cursor: pointer;
}

.ranking-name.profile-trigger:hover {
    color: var(--accent-link);
}

.non-member-icon {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    opacity: 0.5; /* TODO: добавить --opacity-muted в variables.css */
    flex-shrink: 0;
}

.ranking-stats {
    display: flex;
    align-items: center;
    gap: 0.375rem; /* 6px */
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    flex-wrap: wrap;
}

.ranking-points {
    font-weight: 500;
    color: var(--font-primary);
}

.ranking-events {
    color: var(--font-secondary);
}

/* Убеждаемся, что рейтинг виден */
.sidebar-section .season-rankings-list-compact {
    margin-top: 0;
}

/* Скрытие карточки профиля на мобильных (для компактной навигации) */
@media (max-width: 991.98px) {
    .gc-hide-mobile {
        display: none !important;
    }
}

/* ===================================
   Channel Avatar Upload — форма создания/редактирования
   =================================== */

.gc-channel-avatar-upload-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.gc-channel-avatar-preview-container {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--bg-content-secondary);
    border: 2px solid var(--ui-border);
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-channel-avatar-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gc-channel-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--ui-surface-1);
    color: var(--font-secondary);
    font-size: var(--font-size-xl);
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.gc-channel-avatar-upload-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Lazy load: триггер IntersectionObserver под списком мероприятий канала */
.channel-linked-events-sentinel {
    width: 100%;
    height: 1px;
    flex-shrink: 0;
    pointer-events: none;
}

.channel-attachable-events-modal-list {
    margin-top: var(--spacing-sm);
}

/* ===================================
   Эпик — карточка (Figma: hero + сайдбар в одной сетке)
   =================================== */

/* Десктопный сабхедер: без отдельной линии — карточка уже с бордером; паттерн split-form (.gc-subheader--in-panel) без второго контура */
.gc-card.gc-community-profile-card > .gc-subheader.gc-subheader--in-panel:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Один вертикальный зазор между hero и блоком контента: нижний padding у .gc-stage-show-hero, без дубля сверху у .gc-profile-content (как .gc-stage-content-description--main после hero) */
.gc-card.gc-community-profile-card--epic > .gc-stage-show-hero + .gc-profile-content {
    padding-top: 0;
}

.gc-card.gc-community-profile-card > .gc-subheader.gc-subheader--in-panel .gc-subheader-title {
    font-size: var(--font-size-mdl);
    font-weight: 500;
    line-height: var(--line-height-list-title);
    margin: 0;
}

.epic-profile-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
}

@media (min-width: 992px) {
    .epic-profile-summary {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--spacing-md);
    }
}

.epic-profile-summary-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xs);
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .epic-profile-summary-price {
        align-items: flex-end;
        text-align: right;
    }
}

.epic-profile-price-value {
    font-size: var(--font-size-mdl);
    font-weight: 500;
    line-height: var(--line-height-list-title);
    color: var(--font-primary);
}

.epic-profile-price-caption {
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: var(--line-height-list-meta);
    color: var(--font-secondary);
}

.epic-profile-description {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.epic-profile-description.epic-description-editable {
    cursor: pointer;
    border-radius: var(--radius-md);
}

.epic-profile-description.epic-description-editable:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/*
 * Эпик: .gc-profile-main--epic — та же сетка классов, что у профиля, но без предка .gc-profile-layout;
 * мобильные центрирующие правила в profile-card.css завязаны на .gc-profile-layout и сюда не попадают.
 */

/* Заголовок эпика: один h1 на страницу, визуально как имя в карточке канала/профиля (h5 в типографике) */
.gc-community-profile-card .gc-profile-header-group > h1.gc-profile-name {
    font-size: var(--font-size-md);
    font-weight: 500;
}

/* Вторая строка под названием — Figma secondary / токен sm */
.epic-profile-subline {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: var(--line-height-list-description);
    color: var(--font-secondary);
}

@media (min-width: 992px) {
    /*
     * При body.modal-open sticky + overflow на сайдбаре даёт скачок вёрстки (flex-цепочка + lock скролла).
     * Пока модалка открыта — обычный поток в ячейке грида (scroll всё равно заблокирован на html).
     */
    body.modal-open .catalog-sidebar.catalog-sidebar--epic {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }
}

/* ─── Эпик — лента (Figma 775:23156): gap между панелями; стыки секций content → content → list ─ */

.gc-epic-events-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
}

/* Страница эпика: на адаптиве секции на всю ширину колонки — без боковых границ карточек/панелей */
@media (max-width: 991.98px) {
    /* Боковые границы убираем (полная ширина колонки), скругления — как у gc-card / gc-panel из UI Kit */
    .catalog-main--epic-show > .gc-card,
    .catalog-main--epic-show > .gc-panel,
    .catalog-main--epic-show > .gc-stack > .gc-card,
    .catalog-main--epic-show > .gc-stack > .gc-panel,
    .catalog-main--epic-show .gc-epic-events-feed > .gc-card {
        /* border-left: none;
        border-right: none; */
    }
}

/*
 * Карточка мероприятия в эпике — Figma 777:23451 (gc-card).
 * Корень: gap 4px. content-section: gap 8px между лидом, списком упражнений, облаком.
 * gc-card-footer-12: py 12 + «Подробнее».
 */
.gc-card.gc-epic-event-card {
    gap: var(--spacing-xs);
}

.gc-epic-event-card__subheader {
    padding: var(--spacing-mdl);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.gc-epic-event-card__title-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-xs);
}

/* Колонка дата/чипы + строка названия: без лишнего вертикального gap (типографика даёт ритм) */
.gc-epic-event-heading-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xs);
}

.gc-epic-event-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Дата в мета-строке — одна точка стиля (без gc-list-title + gc-list-title-sm + gc-font-semibold) */
.gc-epic-event-card__date {
    margin: 0;
    font-size: var(--font-size-mdl);
    font-weight: 600;
    line-height: var(--line-height-list-title);
    color: var(--font-primary);
}

/* Заголовок строки упражнения в списке программы карточки */
.gc-epic-event-card__program-item-title {
    margin: 0;
    font-size: var(--font-size-mdl);
    font-weight: 500;
    line-height: var(--line-height-list-title);
    color: var(--font-primary);
}

/* Название под датой: вторичная строка; в интерфейсе — sm (14px), читаемее чем caption 13px из макета */
.gc-epic-event-card__event-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--line-height-list-description);
    letter-spacing: normal;
}

.gc-epic-event-title-link {
    display: inline-block;
    max-width: 100%;
    color: var(--font-secondary);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-in-out);
}

.gc-epic-event-title-link:hover {
    color: var(--font-primary);
}

/* content-section: gap 8px между лидом, программой и облаком */
.gc-epic-event-card__main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/*
 * Лид карточки мероприятия: только сетка (.gc-epic-event-card__lead).
 * Типографика и TipTap — как у описания эпика в шапке: .gc-text-content (tiptap-content.css)
 * + .event-description-text (event-layout.css), без дублирования здесь.
 */
.gc-epic-event-card__lead {
    padding: 0 var(--spacing-mdl);
}

/* Список упражнений / брифингов в карточке мероприятия эпика */
.gc-epic-event-card__program {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.gc-epic-event-card__program-list.gc-panel-content--list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * Облако участников: gc-panel-content (инсет mdl, как обычный контент панели), не gc-panel-content--list.
 * Если блок не первый в __main — убираем padding-top, чтобы не суммировать с gap между секциями.
 */
.gc-epic-event-card__people-list.gc-panel-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Нижний инсет панели не нужен — до футера карточки ритм задаёт gap корня / padding футера */
    padding-bottom: 0;
    padding-top: 0;
}

.gc-epic-event-card__main > * + .gc-epic-event-card__people .gc-epic-event-card__people-list.gc-panel-content {
    padding-top: 0;
}

/* Облако участников: gap 10px между айтемами (макет 787:23831); карточка мероприятия эпика и hero эпика */
.gc-epic-event-card .gc-user-cloud,
.gc-community-profile-card--epic .gc-user-cloud--epic-hero {
    gap: var(--spacing-2sm);
    row-gap: var(--spacing-2sm);
}

/* gc-card-footer-12: py 12; внутренний блок с px 12 у кнопки */
.gc-epic-event-card__card-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: var(--spacing-mdl) 0;
    box-sizing: border-box;
}

.gc-epic-event-card__card-footer-inner {
    padding: 0 var(--spacing-mdl);
    width: 100%;
    box-sizing: border-box;
}

/* Футер карточки: два gc-btn в ряд (gap 10), как 777:23451 */
.gc-epic-event-card__card-footer-inner.gc-epic-event-card__card-footer-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-2sm);
}

.gc-epic-event-card__card-footer-inner.gc-epic-event-card__card-footer-actions > .gc-btn {
    flex: 1 1 0;
    min-width: 0;
}

.gc-epic-event-card__card-footer-inner.gc-epic-event-card__card-footer-actions > .gc-btn.gc-btn-outline,
.gc-epic-event-card__card-footer-inner.gc-epic-event-card__card-footer-actions > .gc-btn.gc-btn-black {
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-list-description);
    justify-content: center;
}

.gc-epic-event-card__card-footer-inner.gc-epic-event-card__card-footer-actions > .gc-event-feed-action-segmented .gc-event-feed-action-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.gc-epic-event-card__card-footer-inner.gc-epic-event-card__card-footer-actions > .gc-event-feed-action-segmented .gc-event-feed-action-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Участвую» / «Заявка подана» — как в gc-event-feed-card */
.gc-epic-event-card .gc-event-feed-action--request-sent.gc-btn-black:disabled,
.gc-epic-event-card .gc-event-feed-action--request-sent.gc-btn-black[disabled] {
    background-color: var(--btn-black-bg);
    color: var(--btn-black-color);
    border-color: var(--btn-black-border);
    opacity: 1;
    cursor: default;
}

/* Между строками программы — 2px как в макете (list-group gap) */
.gc-epic-program-list-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xs);
}

/* Облако людей: базовый gap 2px; в карточке мероприятия эпика — 10px (.gc-epic-event-card .gc-user-cloud) */
.gc-user-cloud {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--spacing-4xs);
    row-gap: var(--spacing-4xs);
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Figma 765:9069 «user-cloud / item»: только обводка и инсеты (без заливки фона в покое), pl 4 / pr 8 / py 4, gap 6, радиус 8, p/500 14/24 */
.gc-user-cloud__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3xs);
    max-width: 220px;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    background: var(--ui-surface-2);
    text-decoration: none;
    color: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--line-height-list-title);
    box-sizing: border-box;
    cursor: pointer;
    transition:
        background var(--transition-fast) var(--ease-in-out),
        border-color var(--transition-fast) var(--ease-in-out),
        color var(--transition-fast) var(--ease-in-out);
}

.gc-user-cloud__item:hover {
    background: var(--bg-content-main);
    border-color: var(--border-tertiary);
    color: var(--font-primary);
}

.gc-user-cloud__item:focus-visible {
    outline: 2px solid var(--accent-link);
    outline-offset: 2px;
}

.gc-user-cloud__item:active {
    background: var(--bg-hover);
    border-color: var(--border-tertiary);
}

.gc-user-cloud__media {
    flex-shrink: 0;
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.gc-user-cloud__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gc-user-cloud__media-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--bg-content-secondary);
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
}

.gc-user-cloud__name {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-user-cloud__item--more {
    max-width: none;
    cursor: default;
    background: transparent;
    color: var(--font-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px dashed var(--border-secondary);
}

a.gc-user-cloud__item--more {
    cursor: pointer;
}

.gc-user-cloud__item--more:hover {
    background: var(--bg-content-secondary);
    border-style: solid;
    border-color: var(--ui-border);
    color: var(--accent-link);
}

.gc-user-cloud__item--more:focus-visible {
    outline: 2px solid var(--accent-link);
    outline-offset: 2px;
}

/* Hero эпика: только ширина колонки — отступы между блоками задаёт .gc-profile-main (gap), без margin у облака */
.gc-community-profile-card--epic .gc-user-cloud--epic-hero {
    max-width: 100%;
}

/* CTA под лентой событий эпика — отступы на обёртке, на кнопке только gc-btn */
.gc-epic-events-feed-cta {
    margin-top: 0;
}

.gc-epic-events-feed-cta .gc-btn {
    white-space: normal;
    flex-shrink: 1;
}

/* ─── Участники канала: панель приглашений (stack + details, якорь #channel-invites) ─── */
.channel-members-page-stack.gc-stack {
    gap: var(--spacing-sm);
}

.channel-members-invite-details.gc-panel {
    overflow: hidden;
}

/*
 * Закрытый <details>: UA обычно скрывает всё кроме <summary>, но .gc-panel-content
 * задаёт display:flex из UI Kit и в ряде браузеров перебивает это — форма остаётся видимой.
 */
.channel-members-invite-details.gc-panel:not([open]) > :not(summary) {
    display: none !important;
}

summary.channel-members-invite-details__summary {
    list-style: none;
    cursor: pointer;
}

summary.channel-members-invite-details__summary::-webkit-details-marker {
    display: none;
}

summary.channel-members-invite-details__summary.gc-panel-header {
    justify-content: flex-start;
    gap: var(--spacing-sm);
}

.channel-members-invite-details__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--font-secondary);
    transition: transform var(--transition-fast);
}

.channel-members-invite-details__chev i {
    font-size: var(--font-size-md);
}

.channel-members-invite-details[open] .channel-members-invite-details__chev {
    transform: rotate(-180deg);
}

.channel-members-invite-details__summary-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

.channel-members-invite-details__submit {
    margin-top: var(--spacing-2xs);
}

.channel-members-invite-details__submit .gc-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ─── Материалы канала (как участники на /events/{id}: gc-interactive-row в gc-panel-content--list) ─── */
.channel-materials-flash {
    margin-bottom: var(--spacing-mdl);
}

.channel-materials-row__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.channel-materials-row__link:hover {
    color: inherit;
}

.channel-materials-row__main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1 1 auto;
    min-width: 0;
}

.channel-materials-row--inactive .gc-list-media-icon {
    color: var(--font-secondary);
}

.channel-materials-row--inactive .gc-list-title {
    color: var(--font-secondary);
}

/*
 * Сегментированный медиаблок (общая рамка, без зазора между сегментами): материалы канала — папка + аватар.
 */
.channel-materials-row__media-segmented {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--ui-control-bg);
}

.channel-materials-row__media-segmented > .gc-list-media-icon {
    border: none;
    border-radius: 0;
}

.channel-materials-row__media-segmented > .gc-list-media-icon + .gc-list-media-icon {
    border-left: 1px solid var(--ui-border);
}

/*
 * Сегмент под фото: у .gc-list-media-icon padding задаётся через --gc-list-media-icon-padding (lists.css),
 * простого padding: 0 недостаточно, если lists грузится позже — обнуляем переменную и паддинг явно.
 */
.channel-materials-row__media-segmented > .gc-list-media-icon.channel-materials-row__viewer-avatar {
    --gc-list-media-icon-padding: 0;
    padding: 0;
    overflow: hidden;
}

.channel-materials-row__viewer-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Инициалы в сегменте сетки: полный размер ячейки, без круга (как обложка img).
   Без своего бордера — разделитель только border-left между сегментами (иначе двойная линия). */
.channel-materials-row__viewer-fallback-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: var(--font-size-mdl);
    font-weight: 600;
}

/* Лента льгот — слева только аватар */
.subscriptions-benefit-feed-item__media-chain {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}