/* static/blog/css/post_detail.css */

/* Стилі для основного контейнера посту */
.blog-post {
    max-width: 80%; /* 80% ширини для основного блоку на великих екранах */
    margin: 30px auto; /* Центрування по горизонталі та відступи зверху/знизу */
    padding: 20px 30px; /* Внутрішні відступи */
    background-color: #ffffff; /* Білий фон для посту */
    border-radius: 8px; /* Заокруглені кути */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Легка тінь для "глибини" */
    box-sizing: border-box; /* Включаємо padding і border у загальну ширину */
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 1050px) { /* Для екранів шириною 768px і менше (типові планшети та мобільні) */
    .blog-post {
        max-width: 95%; /* 95% ширини на мобільних */
        margin: 20px auto; /* Менші відступи */
        padding: 15px 20px;
    }
}

/* Стилі для заголовка посту */
.blog-post h1 {
    font-size: 2.5em;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: center;
}

/* Стилі для мета-інформації (дата публікації) */
.blog-post-meta {
    font-size: 0.9em;
    color: #7f8c8d;
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee; /* Роздільна лінія */
    padding-bottom: 15px;
}

/* Стилі для основного вмісту (тексту) публікації */
.blog-content {
    font-family: 'Open Sans', sans-serif; /* Виберіть шрифт, який вам подобається */
    font-size: 1.1em;
    line-height: 1.8; /* Міжрядковий інтервал для кращої читабельності */
    color: #34495e;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #eee; /* Роздільна лінія перед контентом */
}

.blog-content p {
    margin-bottom: 1em; /* Відступ між параграфами */
}

/* Стилі для горизонтальної лінії */
hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 40px 0;
}

/* Стилі для адаптивного відео, вбудованого через CKEditor 5 */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Співвідношення сторін 16:9 (висота / ширина * 100). Для 4:3 це 75%. */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Додає чорний фон під час завантаження відео */
    margin-bottom: 16px; /* Невеликий відступ знизу, для кращого вигляду */
    margin-left: auto;   /* Центрування блоку відео */
    margin-right: auto;
}

/* Застосовуємо ці стилі до iframe, object та embed елементів всередині .video-responsive */
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Прибирає стандартну рамку */
}

/* 1. ЗАГАЛЬНІ ПРАВИЛА ДЛЯ ВСІХ <figure.image> ВНУТРІ ВМІСТУ ПОСТУ */
/* Це гарантує, що всі обгорнуті зображення будуть адаптивними та матимуть базові стилі */
.blog-content figure.image {
    margin: 1em auto; /* Базові відступи зверху/знизу, центрування для не-плаваючих */
    max-width: 100%; /* Гарантує, що figure не вийде за межі батьківського контейнера */
    height: auto; /* Зберігає пропорції */
    box-sizing: border-box; /* Враховуємо padding та border */
    /* Важливо: скидаємо будь-який float та clear, щоб специфічні класи могли їх встановити */
    float: none;
    clear: both;
}

/* 2. ПРАВИЛА ДЛЯ ЗОБРАЖЕНЬ З ВИРІВНЮВАННЯМ 'SIDE' (ТЕКСТ ОБТІКАЄ ЗБОКУ) */
/* Виходячи з попереднього контексту, ви хочете, щоб це вирівнювалося праворуч, як в адмінці. */
.blog-content figure.image-style-side {
    float: right; /* Це змусить зображення плавати праворуч */
    margin-left: 1.5em; /* Відступ між зображенням та текстом зліва */
    margin-bottom: 1em; /* Відступ під зображенням, якщо текст обтікає */
    /* Inline style (width:36.59%) буде мати пріоритет над будь-яким 'width' тут */
    /* Якщо 36.59% - це забагато на мобільному, доведеться додати @media-запит */
}

/* 3. ЗАГАЛЬНІ ПРАВИЛА ДЛЯ <img всередині <figure.image> */
/* Це гарантує, що саме зображення всередині фігури буде адаптивним */
.blog-content figure.image img {
    max-width: 100%; /* Зображення заповнить всю доступну ширину своєї <figure> */
    height: auto;    /* Зберігає пропорції */
    display: block;  /* Робить зображення блоковим елементом */
    /* aspect-ratio: inherit; - якщо ви хочете, щоб воно успадковувало від inline стилю */
}


/* 4. ДОДАТКОВІ ПРАВИЛА ДЛЯ ІНШИХ ТИПІВ ВИРІВНЮВАННЯ, ЯКЩО ВИКОРИСТОВУЄТЬСЯ */
/* Хоча ви надали лише 'image-style-side', CKEditor5 може генерувати й інші,
   наприклад, 'image-style-alignLeft' (якщо 'side' не означає конкретну сторону, а лише плавання)
   або 'image-style-full' (повна ширина) або 'image-style-alignCenter'. */

/* Приклад, якщо є окремий клас для лівого вирівнювання */
.blog-content figure.image-style-alignLeft {
    float: left;
    margin-right: 1.5em;
    margin-left: 0; /* Для уникнення конфліктів з margin-left від .image-style-side */
    margin-bottom: 1em;
}

/* Приклад для центрування (якщо є клас 'image-style-alignCenter') */
.blog-content figure.image-style-alignCenter {
    display: block; /* Гарантуємо блочний елемент */
    margin-left: auto; /* Центрування */
    margin-right: auto;
    float: none; /* Забороняємо плавання */
    clear: both; /* Очищаємо обтікання з обох сторін */
}


/* ... (решта існуючих стилів, включаючи @media запити) ... */

/* Можливо, для мобільних пристроїв ви захочете вимкнути плавання для "side" зображень */
@media (max-width: 768px) {
    .blog-content figure.image-style-side {
        float: none; /* Вимкнути плавання на мобільних */
        width: 100% !important; /* Зробити його на повну ширину */
        margin-left: auto; /* Центрувати */
        margin-right: auto;
        margin-bottom: 1em;
        clear: both; /* Забезпечити, що ніщо не обтікає */
    }
}