/* Embed стили для адаптивности и правильного отображения */

/* CSS переменные для Telegram виджетов, привязанные к системе темы */
/* Используем более специфичные селекторы для переопределения внешних стилей */
:root {
    --user-accent-color: var(--color-2);
    --accent-color: var(--color-2);
}

/* Более специфичные селекторы для переопределения внешних CSS */
body:not(.external-override).theme-dark,
body.theme-dark:not(.external-override),
body.theme-dark {
    --user-accent-color: #1cbec7 !important;
    --accent-color: #1cbec7 !important;
    --accent-background: #1cbec71f !important;
    --accent-line-color: #1cbec7 !important;
}

body:not(.external-override).theme-light,
body.theme-light:not(.external-override),
body.theme-light {
    --user-accent-color: #00686e !important;
    --accent-color: #00686e !important;
    --accent-background: #00686e1f !important;
    --accent-line-color: #00686e !important;
}

/* Дополнительное переопределение для body.dark (внешний CSS) */
body.dark {
    --user-accent-color: #1cbec7 !important;
    --accent-color: #1cbec7 !important;
    --accent-background: #1cbec71f !important;
    --accent-line-color: #1cbec7 !important;
}

/* Убираем ограничение ширины WordPress по умолчанию */
.wp-block-embed {
    max-width: none !important;
}

.wp-block-embed__wrapper>* {
    max-width: 100% !important;
}

/* VK Video адаптивные стили */
.wp-block-embed__wrapper iframe[src*="vk.com/video_ext.php"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    /* горизонтальная ориентация по умолчанию */
}

/* Вертикальная ориентация для VK видео */
.wp-block-embed.is-style-vertical iframe[src*="vk.com/video_ext.php"] {
    aspect-ratio: 9 / 16 !important;
}

/* Telegram виджеты */
.wp-block-embed__wrapper script[src*="telegram.org"] {
    display: block !important;
    width: 100%;
}

/* Стили для Telegram виджетов */
.wp-block-embed__wrapper iframe[src*="telegram.org"] {
    transition: opacity 0.3s ease !important;
    border-radius: 8px;
    overflow: hidden;
    width: 100% !important;
    border: none !important;
}

/* Кастомизация Telegram виджетов под тему */
.wp-block-embed__wrapper iframe[src*="telegram.org"] {
    /* Эти стили будут применены к iframe виджета */
    filter: none;
}

body.theme-dark .wp-block-embed__wrapper iframe[src*="telegram.org"] {
    /* Для темной темы можно добавить фильтры если нужно */
    filter: brightness(0.9) contrast(1.1);
}

.wp-block-embed__wrapper .telegram-widget-loading {
    opacity: 0.5;
}

/* Принудительные стили для Telegram iframe */
iframe[src*="telegram.org"] {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 8px !important;
    transition: opacity 0.3s ease !important;
}

/* Reddit embed адаптивность */
.wp-block-embed__wrapper iframe[src*="reddit.com"],
.wp-block-embed__wrapper iframe[src*="redditmedia.com"] {
    width: 100% !important;
    min-height: 300px;
}

/* Общие стили для всех embed блоков */
.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .wp-block-embed__wrapper iframe {
        width: 100% !important;
        height: auto !important;
    }

    .wp-block-embed__wrapper iframe[src*="vk.com/video_ext.php"] {
        aspect-ratio: 16 / 9;
        min-height: 200px;
    }

    .wp-block-embed.is-style-vertical iframe[src*="vk.com/video_ext.php"] {
        aspect-ratio: 9 / 16;
        min-height: 300px;
    }

    iframe[src*="telegram.org"] {
        width: 100% !important;
        min-height: 200px;
    }
}

/* Стили для редактора Gutenberg */
.editor-styles-wrapper .wp-block-embed {
    max-width: none !important;
}

.editor-styles-wrapper .wp-block-embed__wrapper>* {
    max-width: 100% !important;
}

/* Placeholder стили для "грустной собаки" */
.wp-block-embed .wp-block-embed__wrapper::before {
    display: none;
    /* скрываем placeholder если embed загружен */
}

.wp-block-embed.wp-embed-loading .wp-block-embed__wrapper::before {
    content: "Загрузка...";
    display: block;
    text-align: center;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 4px;
}

/* Дополнительная защита от внешних стилей */
[data-telegram-post] {
    display: block !important;
    width: 100% !important;
}

/* Отладочные стили для разработки */
.telegram-widget-debug {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}