/* ==========================================================================
   News Detail Page Styles (news-detail.css)
   ========================================================================== */

.featured-article-img-container {
    display: flex;
    justify-content: center;
    max-height: 40rem;
}

/* 1. Featured Header Image */
.featured-article__img {
    display: block;
    width: 100%;
    max-width: 50rem;
    height: auto;
    margin-bottom: 1.5rem;
    object-fit: contain;
}

/* 2. Article Body Container */
.featured-article__body {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 3. Title */
.featured-article__title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: #222;
}

/* 4. Publish Date */
.featured-article__date {
    display: block;
    font-size: 0.9rem;
    color: #666;
    /* Reduced bottom margin to accommodate author */
    margin-bottom: 0.25rem;
}

/* NEW: Author Style */
.featured-article__author {
    display: block;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    /* Main margin is now here */
    margin-bottom: 1.5rem;
}

/* 5. Content Area */
.featured-article__content {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.featured-article__content p {
    margin-bottom: 1rem;
    /* justify-content: stretch; */
}

.featured-article__content p:has(img) {
    display: flex;
    justify-content: center;
}

/* 6. Clear Floats After Content */
.featured-article__content::after {
    content: "\A";
    display: table;
    clear: both;
}

/* 7. Markdown-Injected Images */
/* 7.1 Base sizing & margin */
/* .featured-article__content img {
    max-width: 40%;
    height: auto;
    margin: 0.5rem;
} */

/* 7.2 Float odd images right, even images left */
/* .featured-article__content img:nth-of-type(odd) {
    float: right;
    margin-left: 1rem;
}

.featured-article__content img:nth-of-type(even) {
    float: left;
    margin-right: 1rem;
} */

/* 8. Horizontal Rules */
.featured-article__content hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
}

.featured-article__content p>img {
    width: 20rem;
    height: auto;
}

/* 9. Lists in Content */
/* 9.1 Remove default bullets & spacing, stack with gap */
.featured-article__content ul {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* 9.2 Turn each list item into a horizontal row */
.featured-article__content ul li {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333;
    width: 100%;
    padding: 0.5rem;
    gap: 1rem;
    border-radius: 5px;
    border: 1px solid rgba(215, 215, 215, 0.54);
    box-shadow: 3px 3px 5px rgba(207, 206, 206, 0.3);
}

.content-img {
    width: 10rem;
    height: 6rem;
    border-radius: 4px;
    flex-shrink: 0;
    margin-right: 1rem;
}

/* 10. Thumbnails in List Items */
.featured-article__content ul li img {
    width: 10rem;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    min-width: 10rem;
    min-height: 6rem;
}

/* 11. Optional: Scoped “Notable Purchases” Overrides */
/* .featured-article__content ul.notable-purchases { } */
/* .featured-article__content ul.notable-purchases li { } */

/* 12. Image Placeholder Fallback (optional styling) */
.featured-article__content img[src*="placeholder.jpg"] {
    opacity: 0.8;
    filter: grayscale(20%);
}

.featured-article__content p {
    /* white-space: pre-line; */
}

img[src=""] {
    /* display: none; */
    visibility: hidden;
}

/* 1. Constrain the <figure> element itself */
.featured-article__content figure {
    margin: 1.5em 0;
    text-align: center;
    max-width: 100%;
    /* Ensures the figure doesn't overflow */
}

/* 2. This is the main fix: Constrain the <img> */
.featured-article__content figure img {
    max-width: 80%;
    /* Image will never be wider than its container */
    height: auto;
    /* Maintains aspect ratio */
    border-radius: 5px;
    /* Adds a nice rounded corner */
}

/* 3. Style the <figcaption> */
.featured-article__content figcaption {
    font-size: 0.9rem;
    font-style: italic;
    color: #555;
    padding: 0.5em;
}

/* Remove any row-based media queries */
@media (min-width: 768px) {
    .featured-article {
        /* Ensure vertical flow even on large screens */
        display: block;
    }

    .featured-article__img,
    .featured-article__body {
        width: 100%;
    }

}

@media(max-width: 789px) {
    .featured-article__content ul li {
        flex-direction: column;
    }

    .featured-article__content ul li {
        width: 90%;
    }

    .featured-article__content ul li {
        padding: 1rem;
    }

    .content-img {
        width: 100%;
        height: fit-content;
        margin: 0;
        min-height: 0;
    }

    .featured-article__content p>img {
        width: 80%;
    }

    .featured-article__content ul li img {
        width: 100%;
        height: 100%;
        min-height: 0;
    }
}