/*
 * Blog Article Content Styling
 *
 * Styles for WYSIWYG content in blog articles.
 * These complement Tailwind's prose classes for elements
 * that need specific styling beyond the Typography plugin.
 */

/* Ensure images are responsive */
.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Video embeds responsive */
.blog-post-content iframe {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Code blocks */
.blog-post-content pre {
    background-color: rgb(var(--color-gray-800, 31 41 55));
    color: rgb(var(--color-gray-50, 249 250 251));
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.blog-post-content code {
    background-color: rgb(var(--color-gray-100, 243 244 246));
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.blog-post-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

/* Reset PageBuilder row styles inside author description */
.blog-author-description [data-content-type="row"] > div {
    margin-bottom: 0;
    padding: 0;
}