/**
 * More Articles Shortcode Styles
 */

/* Skeleton Loader Styles */
.ma-skeleton {
    animation: skeleton-loading 1.5s linear infinite alternate;
    background: #ddd;
    border-radius: 4px;
}

.ma-skeleton-image {
    height: 200px !important;
    max-height: 200px !important;
    min-width: 35% !important;
    max-width: 35% !important;
}

.ma-skeleton-category {
    height: 14px;
    width: 25%;
    margin-bottom: 8px;
}

.ma-skeleton-title {
    height: 28px;
    width: 90%;
    margin-bottom: 10px;
}

.ma-skeleton-excerpt {
    height: 40px;
    width: 95%;
    margin-bottom: 10px;
}

.ma-skeleton-byline {
    height: 14px;
    width: 40%;
}

/* Keyframes remain global */
@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 85%);
    }
    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

@media screen and (max-width: 767px) {
    .ma-skeleton-image {
        min-width: 36% !important;
        max-width: 36% !important;
        height: 100px !important;
        max-height: 100px !important;
    }
    /* Add specific mobile styles for other ma-skeleton parts if needed */
}

/* Styles for the actual loaded content using ma- prefixes */
.ma-article-parent-container {
    /* Add any specific container styles if needed */
}

.ma-article-container {
    display: flex;
    margin-bottom: 15px; /* Example spacing */
}

.ma-featured-image {
    /* Styles for the image container */
    margin-right: 15px; /* Example spacing */
}

.ma-featured-image img {
    /* Styles for the image itself */
    max-width: 100%;
    height: auto;
}

.ma-article-info {
    /* Styles for the text content container */
    flex-grow: 1;
}

.ma-category {
    /* Styles for category */
    display: block;
    font-size: 0.8em;
    color: #555;
    margin-bottom: 5px;
}

.ma-article-info h4 {
    /* Styles for title */
    margin-top: 0;
    margin-bottom: 10px;
}

.ma-excerpt {
    /* Styles for excerpt */
    font-size: 0.9em;
    color: #333;
    margin-bottom: 10px;
}

.ma-byline {
    /* Styles for byline */
    font-size: 0.8em;
    color: #777;
}

/* Ensure tnr-divider-separator is handled if needed */
.ma-article-parent-container .tnr-divider-separator {
    /* Adjust styles if necessary */
}

/* Add styles for ma- prefixed pagination elements */
.more-articles-app .ma-button,
.more-articles-app .ma-page,
.more-articles-app .ma-current-page {
    /* Add common styles for pagination items: padding, margin, border, etc. */
    display: inline-block;
    margin: 0 2px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 3px;
}

.more-articles-app .ma-button {
    /* Specific styles for buttons (prev/next/first/last) */
    background-color: #eee;
}

.more-articles-app .ma-current-page {
    /* Styles for the current page number */
    background-color: #ddd;
    font-weight: bold;
    cursor: default;
}

.more-articles-app .ma-page:not(.ma-button):not(.ma-current-page):hover {
    /* Hover effect for clickable page numbers */
    background-color: #f5f5f5;
}

.more-articles-app .ma-button:hover {
    /* Hover effect for buttons */
    background-color: #e0e0e0;
}

/* Ensure these styles don't conflict with other pagination on the site */
/* You might need to adjust specificity based on your theme */