/* Универсальные стили для обложек */

/* Контейнер обложки с соотношением 16:9 */
.gc-cover-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

/* Обертка с соотношением 16:9 */
.gc-cover-wrapper {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 соотношение */
    overflow: hidden;
    background-color: var(--bg-content-secondary); /* Светлый фон вместо черного */
}

/* Заблюренный фон */
.gc-cover-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(30px);
    opacity: 0.9;
    transform: scale(1.1); /* Чтобы скрыть размытые края */
}

/* Затемняющий слой */
.gc-cover-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Контейнер для основного изображения */
.gc-cover-image-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Основное изображение */
.gc-cover-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Сохраняем пропорции */
    z-index: 2;
}

/* Модификаторы для разных контекстов */

/* Для карточек брифингов */
.gc-cover-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Для страницы брифинга */
.gc-cover-stage {
    border-radius: 12px;
}

/* Для модальных окон */
.gc-cover-modal {
    border-radius: 0;
}

/* Для загрузки обложки (с контролами) */
.gc-cover-upload .gc-cover-wrapper {
    cursor: pointer;
}

/* Изображение в upload контейнере сохраняет пропорции */
.gc-cover-upload .gc-cover-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Сохраняем пропорции, blur-фон заполнит пустоты */
}

/* Дропдаун «...» поверх изображения — абсолютно позиционирован в правом верхнем углу */
.gc-cover-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

/* Компактнее отступ угла (кнопка — gc-dropdown-toggle-secondary + gc-profile-menu-btn, как на /profile) */
.gc-cover-actions.gc-cover-actions--sm {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
}

/*
 * Триггер «…» поверх фото: без бордера, стекло как у .card-top (blur виден только при полупрозрачном фоне).
 * Высокая специфичность — перебивает .gc-dropdown-toggle-secondary из dropdown.css.
 * Не затрагивает кнопку меню на карточке /profile (она не внутри .gc-cover-actions).
 */
.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn {
    border: none;
    box-shadow: none;
    color: var(--font-primary);
    /* Тёмная тема: светлое матовое стекло поверх фото */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn:hover,
.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn:focus-visible {
    border: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.16);
}

.gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn[aria-expanded="true"] {
    border: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.18);
}

/* Светлая тема: плотнее светлая пластина, блюр остаётся заметным на тёмных фото */
[data-theme="light"] .gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

[data-theme="light"] .gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn:hover,
[data-theme="light"] .gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn:focus-visible {
    background: rgba(255, 255, 255, 0.96);
}

[data-theme="light"] .gc-cover-actions .gc-dropdown-toggle.gc-dropdown-toggle-icon.gc-dropdown-toggle-secondary.gc-profile-menu-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 1);
}

/* Кнопка удаления (legacy) */
.gc-cover-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
    z-index: 10;
    border-radius: 12px;
}

.gc-cover-remove-btn:hover {
    opacity: 1;
    background-color: rgba(220, 53, 69, 0.8);
}

/* Плейсхолдер для загрузки */
.gc-cover-placeholder {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-content-secondary);
    border: 1px dashed var(--ui-border);
    z-index: 1;
    transition: all 0.2s ease;
    text-align: center;
    border-radius: var(--radius-lg);
}

.gc-cover-placeholder:hover {
    background-color: var(--bg-content-secondary);
    border-color: var(--accent-link);
}

.gc-cover-placeholder i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .gc-cover-container {
        border-radius: 6px;
    }
    
    .gc-cover-stage {
        border-radius: 8px;
    }
}