/* Styling for article cards to display writing entries */
.card.article-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #444;
    border-radius: 0.5rem;
    background-color: #2c2c2c;
}

/* Ensure card body allows content to determine height */
.card-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
}

/* Thumbnail image wrapper */
.thumb-wrap {
    flex: 0 0 auto;
    max-width: 100px;
    /* Constrain width, allow height to adjust */
}

/* Ensure images maintain aspect ratio without cropping */
.thumb-img {
    width: 100%;
    max-width: 100px;
    /* Match wrapper to prevent overflow */
    height: auto;
    /* Allow height to adjust based on aspect ratio */
    object-fit: contain;
    /* Display full image without cropping */
    border-radius: 0.25rem;
}

/* Ensure summary text wraps naturally and does not truncate */
.article-summary {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #d3d3d3;
    margin-bottom: 0;
    white-space: normal;
    /* Allow text to wrap */
}

/* Responsive adjustments for mobile */
@media (max-width: 576px) {
    .card-body {
        flex-direction: column;
        /* Stack image and text on mobile */
        align-items: stretch;
    }

    .thumb-wrap {
        max-width: 100%;
        /* Allow full width on mobile */
    }

    .thumb-img {
        width: 100%;
        max-width: none;
        /* Remove max-width constraint for mobile */
        height: auto;
        /* Maintain aspect ratio */
        max-height: 200px;
        /* Prevent overly tall images */
    }

    .article-summary {
        font-size: 0.85rem;
        /* Slightly smaller for mobile */
    }
}