/**
 * Modern Posts Grid - Main Styles
 * Creates a magazine-style grid layout with image backgrounds
 */

/* Container */
.mpg-container {
    margin: 0 auto;
    padding: 20px;
}

/* Search Form Styles */
.mpg-search-container {
    margin-bottom: 30px;
    max-width: 100%;
}

.mpg-search-controls-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.mpg-search-form {
    flex: 0 1 auto;
    max-width: 500px;
    min-width: 280px;
}

.mpg-search-input-container {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 2px solid #e1e8ed;
    border-radius: 50px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: none;
    min-height: 44px;
}

.mpg-search-input-container:focus-within {
    border-color: var(--mpg-button-bg, #5e4caf);
    transform: translateY(-1px);
}

.mpg-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    padding: 8px 20px 8px 24px !important;
    font-size: 16px;
    background: transparent;
    color: #333;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    height: auto;
    line-height: 1.5;
    box-sizing: border-box;
}

.mpg-search-input::placeholder {
    color: #999;
    opacity: 1;
}

.mpg-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mpg-button-bg, #5e4caf) !important;
    border: none !important;
    padding: 6px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 50px;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    height: auto;
}

.mpg-search-btn:hover {
    color: var(--mpg-button-hover, #4a3a8c);
}

.mpg-search-btn:focus {
    outline: none;
}

.mpg-search-btn img {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none;
    transition: opacity 0.3s ease;
}

.mpg-search-btn:hover img {
    opacity: 0.8;
}

.mpg-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #999;
    padding: 8px 12px;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: none;
    margin-right: 8px;
    outline: none;
}

.mpg-search-clear:hover {
    color: #666;
}

/* Sort Buttons */
.mpg-sort-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.mpg-sort-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    background: #ffffff;
    border: 2px solid #e1e8ed;
    border-radius: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--mpg-button-bg, #5e4caf);
    padding: 0 16px;
    outline: none;
    white-space: nowrap;
}

/* Hover and active styles removed per user request */

.mpg-sort-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mpg-sort-btn .mpg-az-text,
.mpg-sort-btn .mpg-shuffle-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.mpg-sort-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.mpg-search-clear:focus {
    outline: none;
}

.mpg-search-clear svg {
    width: 16px;
    height: 16px;
}

.mpg-search-loading {
    display: none;
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.mpg-search-info {
    margin-top: 10px;
    color: #2271b1;
    font-size: 14px;
}

.mpg-search-error {
    margin-top: 10px;
    color: #d63638;
    font-size: 14px;
}

.mpg-container.mpg-searching .mpg-grid-wrapper {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Grid wrapper */
.mpg-grid-wrapper {
    transition: opacity 0.3s;
}

/* Ensure loaded grids are visible */
.mpg-container .mpg-grid {
    margin-bottom: 40px;
}

.mpg-container .mpg-grid:last-child {
    margin-bottom: 0;
}

/* Grid Layout - Exact positioning from the image */
.mpg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto; /* Let grid create rows as needed instead of pre-allocating */
    gap: var(--mpg-grid-gap, 25px);
    margin-bottom: 40px;
}

/* Full-width grid layout with 12 columns for precise fractional layouts (24-post patterns) */
.mpg-grid.mpg-grid-full {
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-rows: auto !important; /* Create rows dynamically based on content */
}

/* Pattern A - Original layout with 9th position filled */
.mpg-pattern-A .mpg-card-1 { grid-column: 1 / 3; grid-row: 1; }    /* Large */
.mpg-pattern-A .mpg-card-2 { grid-column: 3 / 5; grid-row: 1; }    /* Large */
.mpg-pattern-A .mpg-card-3 { grid-column: 1 / 3; grid-row: 2; }    /* Medium */
.mpg-pattern-A .mpg-card-4 { grid-column: 3 / 4; grid-row: 2; }    /* Small */
.mpg-pattern-A .mpg-card-5 { grid-column: 4 / 5; grid-row: 2; }    /* Small */
.mpg-pattern-A .mpg-card-6 { grid-column: 1 / 2; grid-row: 3; }    /* Small */
.mpg-pattern-A .mpg-card-7 { grid-column: 2 / 5; grid-row: 3; }    /* Wide */
.mpg-pattern-A .mpg-card-8 { grid-column: 1 / 3; grid-row: 4; }    /* Medium */
.mpg-pattern-A .mpg-card-9 { grid-column: 3 / 5; grid-row: 4; }    /* Medium - FILLS THE GAP */

/* Pattern B - Starts with wide card to avoid double column issue */
.mpg-pattern-B .mpg-card-1 { grid-column: 1 / 4; grid-row: 1; }    /* Wide - STARTS WITH WIDE */
.mpg-pattern-B .mpg-card-2 { grid-column: 4 / 5; grid-row: 1; }    /* Small */
.mpg-pattern-B .mpg-card-3 { grid-column: 1 / 2; grid-row: 2; }    /* Small */
.mpg-pattern-B .mpg-card-4 { grid-column: 2 / 4; grid-row: 2; }    /* Medium */
.mpg-pattern-B .mpg-card-5 { grid-column: 4 / 5; grid-row: 2; }    /* Small */
.mpg-pattern-B .mpg-card-6 { grid-column: 1 / 3; grid-row: 3; }    /* Large */
.mpg-pattern-B .mpg-card-7 { grid-column: 3 / 5; grid-row: 3; }    /* Large */
.mpg-pattern-B .mpg-card-8 { grid-column: 1 / 4; grid-row: 4; }    /* Wide - ENDS WITH WIDE */
.mpg-pattern-B .mpg-card-9 { grid-column: 4 / 5; grid-row: 4; }    /* Small */

/* Pattern A_FULL - Full-width 22-post layout (photographer-optimized, alternating variety) */
/* Row 1: 1/4 + 1/6 + 1/6 + 1/6 + 1/4 (5 posts) */
.mpg-pattern-A_FULL .mpg-card-1 { grid-column: 1 / 4 !important; grid-row: 1 !important; }     /* 1/4 width */
.mpg-pattern-A_FULL .mpg-card-2 { grid-column: 4 / 6 !important; grid-row: 1 !important; }     /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-3 { grid-column: 6 / 8 !important; grid-row: 1 !important; }     /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-4 { grid-column: 8 / 10 !important; grid-row: 1 !important; }    /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-5 { grid-column: 10 / 13 !important; grid-row: 1 !important; }   /* 1/4 width */

/* Row 2: 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 (6 posts) */
.mpg-pattern-A_FULL .mpg-card-6 { grid-column: 1 / 3 !important; grid-row: 2 !important; }     /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-7 { grid-column: 3 / 5 !important; grid-row: 2 !important; }     /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-8 { grid-column: 5 / 7 !important; grid-row: 2 !important; }     /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-9 { grid-column: 7 / 9 !important; grid-row: 2 !important; }     /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-10 { grid-column: 9 / 11 !important; grid-row: 2 !important; }   /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-11 { grid-column: 11 / 13 !important; grid-row: 2 !important; }  /* 1/6 width */

/* Row 3: 1/6 + 1/4 + 1/6 + 1/4 + 1/6 (5 posts) */
.mpg-pattern-A_FULL .mpg-card-12 { grid-column: 1 / 3 !important; grid-row: 3 !important; }    /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-13 { grid-column: 3 / 6 !important; grid-row: 3 !important; }    /* 1/4 width */
.mpg-pattern-A_FULL .mpg-card-14 { grid-column: 6 / 8 !important; grid-row: 3 !important; }    /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-15 { grid-column: 8 / 11 !important; grid-row: 3 !important; }   /* 1/4 width */
.mpg-pattern-A_FULL .mpg-card-16 { grid-column: 11 / 13 !important; grid-row: 3 !important; }  /* 1/6 width */

/* Row 4: 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 (6 posts) */
.mpg-pattern-A_FULL .mpg-card-17 { grid-column: 1 / 3; grid-row: 4; }    /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-18 { grid-column: 3 / 5; grid-row: 4; }    /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-19 { grid-column: 5 / 7; grid-row: 4; }    /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-20 { grid-column: 7 / 9; grid-row: 4; }    /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-21 { grid-column: 9 / 11; grid-row: 4; }   /* 1/6 width */
.mpg-pattern-A_FULL .mpg-card-22 { grid-column: 11 / 13; grid-row: 4; }  /* 1/6 width */

/* Fallback for cards without pattern class (backwards compatibility) */
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-1,
.mpg-card-1:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 1 / 3; grid-row: 1; }
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-2,
.mpg-card-2:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 3 / 5; grid-row: 1; }
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-3,
.mpg-card-3:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 1 / 3; grid-row: 2; }
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-4,
.mpg-card-4:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 3 / 4; grid-row: 2; }
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-5,
.mpg-card-5:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 4 / 5; grid-row: 2; }
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-6,
.mpg-card-6:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 1 / 2; grid-row: 3; }
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-7,
.mpg-card-7:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 2 / 5; grid-row: 3; }
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-8,
.mpg-card-8:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 1 / 3; grid-row: 4; }
.mpg-card:not([class*="mpg-pattern-"]).mpg-card-9,
.mpg-card-9:not(.mpg-pattern-A):not(.mpg-pattern-B) { grid-column: 3 / 5; grid-row: 4; }

/* Base card styles - featured image as background */
.mpg-card {
    position: relative;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-radius: var(--mpg-border-radius, 4px);
    overflow: hidden;
    min-height: 250px;
    display: flex;
    transition: transform 0.3s ease;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
}

/* Card heights based on size */
.mpg-size-large {
    min-height: 400px;
}

.mpg-size-medium {
    min-height: 350px;
}

.mpg-size-small {
    min-height: 300px;
}

.mpg-size-wide {
    min-height: 370px;
}

/* Full-width layout card heights - increased for better desktop viewing */
.mpg-size-third {
    min-height: 320px;
}

.mpg-size-half {
    min-height: 340px;
}

.mpg-size-quarter {
    min-height: 280px;
}

.mpg-size-sixth {
    min-height: 250px;
}

/* Hover effects */
.mpg-card {
    transition: transform 0.3s ease, background-image 0.4s ease;
}

.mpg-card:hover {
    transform: scale(1.02);
}

/* Hover image effect - only apply to cards with hover images */
.mpg-card.mpg-hover-image-enabled:hover {
    transform: none; /* Disable zoom when hover image is active */
}

/* Fallback: if no hover image available, use zoom effect */
.mpg-card:not(.mpg-hover-image-enabled):hover {
    transform: scale(1.02);
}

/* Card link - full clickable area */
.mpg-card-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: white;
    padding: 20px;
    background: linear-gradient(to bottom, 
        var(--mpg-overlay-top, rgba(0,0,0,0.4)) 0%, 
        rgba(0,0,0,0) 50%, 
        var(--mpg-overlay-bottom, rgba(0,0,0,0.6)) 100%);
}

/* Top section with label and title */
.mpg-card-top {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* Text positioning variants */
/* Bottom Left (Default) - left-aligned, move to bottom */
.mpg-text-pos-bottom-left .mpg-card-top {
    order: 1;
    align-self: flex-start;
    text-align: left;
}

.mpg-text-pos-bottom-left .mpg-card-bottom {
    order: 0;
}

/* Bottom Right - right-aligned, move to bottom */
.mpg-text-pos-bottom-right .mpg-card-top {
    order: 1;
    align-self: flex-end;
    text-align: right;
}

.mpg-text-pos-bottom-right .mpg-card-bottom {
    order: 0;
}

/* Top Right - keep at top, right-aligned */
.mpg-text-pos-top-right .mpg-card-top {
    align-self: flex-end;
    text-align: right;
}

/* Card title */
.mpg-card-title {
    margin: 0;
    padding: 0;
    font-size: var(--mpg-title-font-size, 24px);
    font-weight: var(--mpg-heading-weight, 700);
    line-height: 1.2;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Card subtitle */
.mpg-card-subtitle {
    margin: 0;
    padding: 0;
    font-size: var(--mpg-subtitle-font-size, 18px);
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Bottom section with button and meta */
.mpg-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

/* Read more button */
.mpg-read-more {
    display: inline-block;
    background: var(--mpg-button-bg, #5e4caf);
    color: var(--mpg-button-text, white);
    padding: 8px 16px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    text-transform: lowercase;
    transition: background 0.3s ease;
}

.mpg-card:hover .mpg-read-more {
    background: var(--mpg-button-hover, #4a3a8c);
}

/* Card meta */
.mpg-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    text-align: right;
    margin-left: auto;
}

.mpg-author {
    font-style: normal;
}

.mpg-separator {
    color: rgba(255,255,255,0.7);
}


/* Smaller padding for small cards */
.mpg-size-small .mpg-card-link {
    padding: 15px;
}

/* No posts message */
.mpg-no-posts {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
}

/* Responsive design */

/* Full-width layout specific responsive rules */
@media (max-width: 1200px) {
    /* Slightly reduce full-width card heights for smaller desktops */
    .mpg-size-third {
        min-height: 300px;
    }

    .mpg-size-half {
        min-height: 320px;
    }

    .mpg-size-quarter {
        min-height: 260px;
    }

    .mpg-size-sixth {
        min-height: 240px;
    }
}

@media (max-width: 1024px) {
    /* Full-width layout becomes 2-column on tablets */
    .mpg-grid.mpg-grid-full {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
    }
    
    /* Reset full-width card positioning for tablet */
    .mpg-pattern-A_FULL .mpg-card {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
    
    /* Make alternating full-width cards span 2 columns for variety */
    .mpg-pattern-A_FULL .mpg-card-1,
    .mpg-pattern-A_FULL .mpg-card-4,
    .mpg-pattern-A_FULL .mpg-card-7,
    .mpg-pattern-A_FULL .mpg-card-10,
    .mpg-pattern-A_FULL .mpg-card-13,
    .mpg-pattern-A_FULL .mpg-card-16,
    .mpg-pattern-A_FULL .mpg-card-19,
    .mpg-pattern-A_FULL .mpg-card-22 {
        grid-column: span 2 !important;
    }
    
    /* Uniform heights for full-width cards on tablet */
    .mpg-size-third,
    .mpg-size-half,
    .mpg-size-quarter,
    .mpg-size-sixth {
        min-height: 300px;
    }
}

@media (max-width: 1024px) {
    /* Standard layout tablet rules (only applies to non-full-width grids) */
    .mpg-grid:not(.mpg-grid-full) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: var(--mpg-grid-gap, 20px);
    }
    
    /* Reset all standard layout cards to span full width in their row */
    .mpg-grid:not(.mpg-grid-full) .mpg-card {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
    
    /* Make alternating standard layout cards span 2 columns for variety */
    .mpg-grid:not(.mpg-grid-full) .mpg-card-1,
    .mpg-grid:not(.mpg-grid-full) .mpg-card-3,
    .mpg-grid:not(.mpg-grid-full) .mpg-card-7 {
        grid-column: span 2 !important;
    }
    
    /* Uniform heights on tablet for standard layout */
    .mpg-grid:not(.mpg-grid-full) .mpg-card {
        min-height: 320px;
    }
}

@media (max-width: 768px) {
    .mpg-container {
        padding: 10px;
    }
    
    /* Search form mobile styles */
    .mpg-search-container {
        margin-bottom: 20px;
        max-width: 100%;
    }

    .mpg-search-controls-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .mpg-search-input {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 8px 20px 8px 24px !important;
    }

    .mpg-search-btn {
        padding: 10px 14px;
        min-width: 44px;
    }

    /* Smaller sort buttons on mobile */
    .mpg-sort-buttons {
        gap: 6px;
    }

    .mpg-sort-btn {
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        font-size: 13px;
    }

    .mpg-sort-btn .mpg-az-text,
    .mpg-sort-btn .mpg-shuffle-text {
        font-size: 13px;
    }

    .mpg-sort-btn svg {
        width: 18px;
        height: 18px;
    }

    .mpg-search-form {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0 !important;
    }

    .mpg-sort-buttons {
        justify-content: center;
    }
    
    /* Full-width layout mobile: 2-column with alternating pattern (default) */
    .mpg-grid.mpg-grid-full {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--mpg-grid-gap, 15px);
    }

    /* Full-width mobile alternation: 1/2 + 1/2 | 1/1 | 1/2 + 1/2 pattern */
    .mpg-pattern-A_FULL .mpg-card {
        grid-column: span 1 !important;
        grid-row: auto !important;
        min-height: 250px;
    }

    /* Full-width cards - every 3rd card spans full width (1/1) */
    .mpg-pattern-A_FULL .mpg-card:nth-child(3n) {
        grid-column: span 2 !important;
    }

    /* Full-width mobile single column override */
    .mpg-full-width-mobile-single .mpg-grid.mpg-grid-full {
        grid-template-columns: 1fr !important;
    }

    .mpg-full-width-mobile-single .mpg-pattern-A_FULL .mpg-card {
        grid-column: 1 / -1 !important;
    }
    
    /* Standard layout mobile: single column */
    .mpg-grid:not(.mpg-grid-full) {
        grid-template-columns: 1fr;
        gap: var(--mpg-grid-gap, 15px);
    }
    
    /* Standard layout - all cards full width on mobile */
    .mpg-grid:not(.mpg-grid-full) .mpg-card {
        grid-column: 1 / -1 !important;
        min-height: 280px;
        position: relative; /* For absolute positioning of subtitle */
    }
    
    /* Maintain consistent text size on mobile */
    .mpg-card-title {
        font-size: var(--mpg-title-font-size-mobile, 22px);
    }

    /* Restructure card for subtitle positioning */
    .mpg-card-link {
        padding: 15px;
        padding-bottom: 25px; /* Reduced padding when button is hidden (default) */
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Keep bottom section at bottom */
    }

    /* Keep top section at top */
    .mpg-card-top {
        order: 1;
    }

    /* Position subtitle absolutely at bottom left on mobile */
    .mpg-card-subtitle {
        position: absolute !important;
        bottom: 10px !important;
        left: 15px !important;
        right: 15px !important;
        font-size: var(--mpg-subtitle-font-size-mobile, 16px);
        margin: 0;
        padding: 0;
        order: 3;
    }

    /* Stack bottom elements on mobile and make space for subtitle */
    .mpg-card-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 15px; /* Reduced space when no button (default) */
        margin-top: auto; /* Push to bottom above subtitle */
        order: 2;
    }

    /* Show meta on all cards on mobile */
    .mpg-card-meta {
        display: flex;
    }

    /* Mobile Button Control - Show button when enabled */
    .mpg-show-mobile-button .mpg-read-more {
        display: inline-block !important;
    }

    /* Increase padding when button is shown */
    .mpg-show-mobile-button .mpg-card-link {
        padding-bottom: 50px !important; /* Extra space for button */
    }

    /* Adjust subtitle and bottom spacing when button is shown */
    .mpg-show-mobile-button .mpg-card-bottom {
        margin-bottom: 30px !important; /* More space for button */
    }

    /* Mobile Layout Styles */
    /* Compact - Everything together at bottom */
    .mpg-mobile-compact .mpg-card-subtitle {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 5px;
    }

    .mpg-mobile-compact .mpg-card-bottom {
        margin-bottom: 0 !important;
    }

    /* Minimal - Hide date/author, show only subtitle */
    .mpg-mobile-minimal .mpg-card-meta {
        display: none !important;
    }
}

/* Pagination Styles */
.mpg-pagination {
    margin-top: 40px;
    text-align: center;
}

/* Numbered Pagination */
.mpg-numbered-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.mpg-page-numbers {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mpg-page-link {
    display: inline-block;
    padding: 8px 12px;
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 14px;
    min-width: 40px;
    text-align: center;
}

.mpg-page-link:hover {
    background: var(--mpg-button-bg, #5e4caf);
    color: var(--mpg-button-text, white);
    border-color: var(--mpg-button-bg, #5e4caf);
}

.mpg-current-page {
    background: var(--mpg-button-bg, #5e4caf);
    color: var(--mpg-button-text, white);
    border-color: var(--mpg-button-bg, #5e4caf);
}

.mpg-prev-page,
.mpg-next-page {
    font-weight: 500;
    padding: 8px 16px;
}

.mpg-page-dots {
    padding: 8px 4px;
    color: #6c757d;
}

/* Load More Button */
.mpg-load-more-container {
    text-align: center;
    margin-top: 20px;
}

.mpg-load-more-btn {
    background: var(--mpg-button-bg, #5e4caf);
    color: var(--mpg-button-text, white);
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.mpg-load-more-btn:hover {
    background: var(--mpg-button-hover, #4a3a8c);
    transform: translateY(-1px);
}

.mpg-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.mpg-loading {
    margin-top: 10px;
    color: #666;
    font-style: italic;
}

/* Mobile Pagination */
@media (max-width: 768px) {
    .mpg-numbered-pagination {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .mpg-page-link {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 35px;
    }
    
    .mpg-prev-page,
    .mpg-next-page {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .mpg-load-more-btn {
        width: 100%;
        max-width: 200px;
    }
}