/* Blog post content styling */
.node--type-article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Main content area */
.node__content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}

/* Image styling */
.node__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: block;
}

/* Image container */
.field--name-field-media-image {
    margin: 2rem auto;
    text-align: center;
    max-width: 100%;
    clear: both;
}

.align-left {
    float: none;
    margin: 2rem auto;
}

.align-right {
    float: none;
    margin: 2rem auto;
}

@media (min-width: 768px) {
    .field--name-field-media-image {
        margin: 2rem auto;
    }
    
    .align-left {
        float: left;
        margin: 1rem 3rem 2rem 0;
        max-width: 50%;
    }
    
    .align-right {
        float: right;
        margin: 1rem 0 2rem 3rem;
        max-width: 50%;
    }
}

/* Clear floats */
.node__content::after {
    content: "";
    display: table;
    clear: both;
}

/* Image caption and credit */
.field--name-field-media-image figcaption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
    padding: 0 1rem;
}

/* Responsive image container */
.field--name-field-media-image .field__item {
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    display: inline-block; /* This helps with alignment */
}

/* Add spacing between image and surrounding content */
.field--name-field-media-image + p,
p + .field--name-field-media-image {
    margin-top: 2rem;
}

/* Handle nested content near images */
.field--name-field-media-image + * {
    overflow: hidden; /* Creates new block formatting context */
}

/* Image aspect ratio container */
.field--name-field-media-image .field__item img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Image wrapper for article content */
.article-image-wrapper {
    position: relative;
    width: 100%;
    margin: 2rem auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .article-image-wrapper {
        padding: 0;
        max-width: 90%;
    }
}

/* Article typography */
.node--type-article h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--kaliyattam-primary);
    clear: both; /* Ensure headings clear floated images */
}

.node--type-article p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    overflow-wrap: break-word;
}

/* Ensure proper text wrapping around images */
.node--type-article p:has(+ .field--name-field-media-image),
.node--type-article .field--name-field-media-image + p {
    margin-top: 0;
    display: flow-root;
}

/* Article meta information */
.node__meta {
    margin-bottom: 2rem;
    color: #666;
    font-size: 0.9rem;
}

/* Content spacing */
.node__content > * + * {
    margin-top: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .node--type-article {
        padding: 1rem;
    }
    
    .node__content {
        font-size: 1rem;
    }
    
    .field--name-field-media-image {
        margin: 1.5rem -1rem;
    }
}