/*
 * Plugin Style: My Category Posts Display
 * This file contains the basic styling for the post grid output by the shortcode.
 * Customize this file to make the output "fancy and stylish".
 */

/* --- Basic Grid Layout --- */
.my-category-posts-grid {
    display: grid;
    /* Creates a responsive grid: columns auto-fit, minimum width 280px, max 1fr */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px; /* Space between grid items */
    margin: 20px 0; /* Space above/below the grid */
}

/* --- Individual Post Item Styling --- */
.my-post-item {
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 8px; /* Slightly rounded corners */
    overflow: hidden; /* Ensures nothing spills out of the rounded corners */
    background-color: #fff; /* White background */
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack elements vertically */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

.my-post-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* More pronounced shadow on hover */
}


/* --- Post Thumbnail (Image) Styling --- */
.my-post-item .post-thumbnail {
    flex-shrink: 0; /* Prevent shrinking */
    margin-bottom: 15px; /* Space below the image */
    position: relative;
    overflow: hidden; /* Hide overflow from transform */
}

.my-post-item .post-thumbnail img {
    display: block; /* Remove extra space below image */
    width: 100%; /* Image takes full width of its container */
    height: 200px; /* Fixed height for uniformity - adjust as needed */
    object-fit: cover; /* Cover the area without distortion */
    transition: transform 0.3s ease; /* Smooth zoom on hover */
}

.my-post-item:hover .post-thumbnail img {
    transform: scale(1.05); /* Slightly zoom image on hover */
}

.my-post-item .post-thumbnail a {
    display: block; /* Make the link cover the image area */
    line-height: 0; /* Remove extra height from link */
}

/* --- Content Area Styling --- */
.my-post-item .entry-header,
.my-post-item .entry-content,
.my-post-item .entry-footer {
    padding: 0 15px; /* Add padding to content sections */
}

/* --- Title Styling --- */
.my-post-item .entry-header {
     margin-bottom: 10px;
}

.my-post-item .entry-header .entry-title {
    margin: 0; /* Remove default margin */
    font-size: 1.3em; /* Title font size */
    line-height: 1.4;
}

.my-post-item .entry-header .entry-title a {
    text-decoration: none; /* Remove underline from title link */
    color: #333; /* Dark grey color for title */
    transition: color 0.2s ease;
}

.my-post-item .entry-header .entry-title a:hover {
    color: #0073aa; /* WordPress blue on hover */
}

/* --- Excerpt (Content) Styling --- */
.my-post-item .entry-content {
    font-size: 0.95em; /* Slightly smaller font */
    color: #555; /* Medium grey color */
    line-height: 1.6;
    flex-grow: 1; /* Allows content area to take up available space */
     margin-bottom: 15px; /* Space below excerpt */
}

/* --- Read More Button Styling --- */
.my-post-item .entry-footer {
     margin-top: auto; /* Push footer to the bottom if content heights vary */
     padding-bottom: 15px; /* Add padding below the button */
     text-align: right; /* Align button to the right */
}

.my-post-item .entry-footer .read-more {
    display: inline-block; /* Make it block-like for padding/margin */
    background-color: #0073aa; /* WordPress blue */
    color: white; /* White text */
    padding: 8px 15px; /* Padding inside the button */
    text-decoration: none; /* No underline */
    border-radius: 4px; /* Rounded corners for button */
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.my-post-item .entry-footer .read-more:hover {
    background-color: #005177; /* Darker blue on hover */
}

/* --- Optional: Basic Color Theme Example (requires class 'dark-theme' in settings) --- */
.my-category-posts-wrapper.dark-theme .my-post-item {
    background-color: #333;
    border-color: #555;
    box-shadow: 0 2px 5px rgba(255,255,255,0.1);
}

.my-category-posts-wrapper.dark-theme .my-post-item .entry-title a {
    color: #eee;
}

.my-category-posts-wrapper.dark-theme .my-post-item .entry-content {
    color: #bbb;
}

.my-category-posts-wrapper.dark-theme .my-post-item .read-more {
     background-color: #555;
}

.my-category-posts-wrapper.dark-theme .my-post-item .read-more:hover {
     background-color: #777;
}


/* --- Responsive Adjustments (Optional) --- */
@media (max-width: 768px) {
    .my-category-posts-grid {
        gap: 15px; /* Reduce gap on smaller screens */
    }
    .my-post-item {
        padding: 10px;
    }
     .my-post-item .entry-header,
     .my-post-item .entry-content,
     .my-post-item .entry-footer {
         padding: 0 10px;
     }
}
/* --- Pagination Styling --- */
.my-category-posts-pagination {
    clear: both; /* Ensures pagination appears below the grid */
    padding: 20px 0;
    text-align: center; /* Center align the pagination links */
}

.my-category-posts-pagination ul.page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Keeps the list centered */
}

.my-category-posts-pagination ul.page-numbers li {
    display: inline-block; /* Links are side-by-side */
    margin: 0 5px;
}

.my-category-posts-pagination .page-numbers {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.my-category-posts-pagination .page-numbers:hover {
    background-color: #eee;
    border-color: #bbb;
    color: #000;
}

.my-category-posts-pagination .page-numbers.current {
    background-color: #0073aa; /* Highlight color for current page */
    border-color: #0073aa;
    color: white;
    font-weight: bold;
}

.my-category-posts-pagination .page-numbers.dots {
    border: none;
    background: none;
    padding: 8px 0;
    cursor: default;
}

/* Style for previous and next links */
.my-category-posts-pagination .prev,
.my-category-posts-pagination .next {
    font-weight: bold;
}


/* --- Basic Inline Style Overrides (from color picker) --- */
/* These styles are applied directly via PHP */
/* You might need to adjust your CSS to ensure these inline styles take precedence */
/* For example, using !important sparingly or more specific selectors */
/*
.my-post-item[style] {
    // Styles set via JS/PHP will override here
}
.my-post-item[style] .entry-title a,
.my-post-item[style] .entry-content {
     // Potentially need to re-apply color here if not inheriting
     color: inherit; // Or var(--post-text-color) if using CSS variables
}
*/