/* =========================================
   БАЗОВЫЕ СТИЛИ СЕТКИ И КАРТОЧЕК
   ========================================= */
/* Фикс для правильного отображения Flex и Grid внутри редактора Gutenberg */
.kolben-expandable-grid > .block-editor-inner-blocks,
.kolben-expandable-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: contents;
}

.kolben-expandable-grid {
    width: 100%;
    transition: all 0.3s ease;
}

.kolben-expandable-card {
    transition: all 0.3s ease;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

/* Видимая часть */
.kolben-card-visible {
    cursor: pointer;
    padding: 20px;
    position: relative; /* Нужно для позиционирования крестика */
}

/* Прячем внутренний контент по умолчанию (на фронтенде) */
body:not(.wp-admin) .kolben-card-hidden {
    display: none;
    padding: 20px;
    border-top: 1px solid #eee;
}

/* =========================================
   ЛОГИКА РАСКРЫТИЯ (Фронтенд)
   ========================================= */
/* 1. Плавный переход для всей сетки (чтобы отступы тоже анимировались) */
.kolben-expandable-grid {
    transition: gap 0.4s ease-in-out !important;
}

/* Когда сетка ОТКРЫТА — принудительно включаем Flexbox и убираем отступы */
.kolben-expandable-grid.is-expanded-mode {
    display: flex !important;
    gap: 0px !important;
}

/* 2. Базовые стили карточки: анимируем ширину, прозрачность и внутренние отступы */
.kolben-expandable-card {
    transition: max-width 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out, margin 0.4s ease-in-out, border-width 0.4s ease-in-out !important;
    overflow: hidden !important;
}

/* 3. Когда сетка ОТКРЫТА — убираем отступы (gap) 
   Если этого не сделать, скрытые нулевые карточки всё равно будут оставлять пустые полосы */
.kolben-expandable-grid.is-expanded-mode {
    gap: 0px !important;
}

.kolben-expandable-grid.is-expanded-mode > .kolben-expandable-card {
	border: none !important;
}

/* 4. АКТИВНАЯ карточка (ваши 70%) */
.kolben-expandable-grid.is-expanded-mode > .kolben-expandable-card.is-active {
    max-width: 70% !important;
	height: fit-content !important;
    opacity: 1 !important;
	margin: 0 auto !important;
}

/* 5. СКРЫТЫЕ карточки — физически уничтожаем их ширину вместо display: none */
.kolben-expandable-grid.is-expanded-mode > .kolben-expandable-card:not(.is-active) {
    display: flex !important; /* Перебиваем старый display: none, если он где-то остался */
    max-width: 0px !important; 
    min-width: 0px !important;
    border-width: 0px !important;
    opacity: 0 !important;
    pointer-events: none; /* Отключаем клики по сжатому призраку */
	height: 0px !important;
}

/* Удерживаем ширину контента при ОТКРЫТОЙ сетке (для спрятанных карточек) */
.kolben-expandable-grid.is-expanded-mode > .kolben-expandable-card:not(.is-active) > * {
    min-width: 400px !important; 
}

/* Удерживаем ширину контента при ЗАКРЫТИИ (для всех карточек, пока идет анимация 0.4s) */
.kolben-expandable-grid.is-closing > .kolben-expandable-card > * {
    min-width: 400px !important; 
}

.kolben-expandable-grid.is-expanded-mode .kolben-card-visible {
    cursor: pointer; 
}

/* Показываем контент внутри активной карточки */
.kolben-expandable-card.is-active .kolben-card-hidden {
    display: block !important;
    animation: fadeInContent 0.4s ease forwards;
}

@keyframes fadeInContent {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   КРЕСТИК ЗАКРЫТИЯ (Появляется при открытии)
   ========================================= */
.kolben-expandable-card.is-active .kolben-card-visible::after {
	display: none !important;
    content: '✕';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: #f1f3f5;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    opacity: 0;
    animation: kolben-cross-appear 0.3s ease forwards;
    transition: background 0.2s, color 0.2s;
}

.kolben-expandable-card.is-active .kolben-card-visible:hover::after {
    background: #e2e6ea;
    color: #dc3545;
}

@keyframes kolben-cross-appear {
    from { opacity: 0; transform: rotate(-90deg) scale(0.5); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

/* Полностью скрываем старую кнопку */
.kolben-card-close-btn {
    display: none !important;
}

/* =========================================
   ИСПРАВЛЕНИЕ СЕТКИ В АДМИНКЕ GUTENBERG
   ========================================= */
.editor-styles-wrapper .wp-block.kolben-expandable-grid,
.editor-styles-wrapper .kolben-expandable-grid {
    display: grid !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* «Растворяем» служебные слои Gutenberg для работы Grid */
.editor-styles-wrapper .kolben-expandable-grid > .block-editor-inner-blocks,
.editor-styles-wrapper .kolben-expandable-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: contents !important;
}

.editor-styles-wrapper .kolben-expandable-grid > .block-editor-inner-blocks > .block-editor-block-list__layout > .kolben-expandable-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}