/* Styling for the post grid */

/* General container for the list of posts in flex layout */
.pds .post-list {
    display: flex; /* Flex layout for post list */
    flex-direction: column; /* Posts will stack vertically */
    gap: 20px; /* Adds space between posts */
}

/* Single post item styling */
.pds .post-item {
    display: flex; /* Flex layout for post items */
    align-items: flex-start; /* Align content to the top */
    gap: 20px; /* Space between the thumbnail and content */
    border-bottom: 1px solid #ccc; /* Bottom border for separation */
    padding-bottom: 20px; /* Adds space below the post item */
    margin-bottom: 20px; /* Adds space between post items */
}

/* Thumbnail (image) styles */
.post-thumbnail img {
    max-width: 150px; /* Set maximum width for images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for images */
}

/* Post content container */
.post-content {
    flex: 1; /* Allow post content to take remaining space */
}

/* Grid layout for the post grid container */
.pds.post-grid {
    display: grid; /* Use grid layout for posts */
    grid-gap: 20px; /* Space between grid items */
}

/* Single column layout */
.pds.post-grid.one-column {
    grid-template-columns: 1fr; /* One column grid */
}

/* Two columns layout */
.pds.post-grid.two-columns {
    grid-template-columns: repeat(2, 1fr); /* Two equally-sized columns */
}

/* Three columns layout */
.pds.post-grid.three-columns {
    grid-template-columns: repeat(3, 1fr); /* Three equally-sized columns */
}

/* Excerpt (post content preview) styles */
.post-excerpt {
    font-size: 1em; /* Normal font size for excerpts */
    color: #666; /* Grey text color for readability */
}

/* "Read More" button styling */
.pds.read-more-btn {
    display: inline-block; /* Display button inline with block-level styling */
    margin-top: 10px; /* Adds space above the button */
    background-color: transparent; /* Transparent background */
    color: #fff; /* Default text color (overridden later) */
    text-decoration: none; /* Remove underline from the link */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    border: 1px solid #444; /* Dark border */
    color: #444; /* Dark text color */
    padding: 6px 22px; /* Padding inside the button */
}

/* "Read More" button hover effects */
.pds.read-more-btn:hover {
    background-color: #005177; /* Darker background on hover */
    color: #fff; /* White text color on hover */
}

/* Pagination container styling */
.pds.pagination {
    display: flex; /* Flexbox layout for pagination links */
    justify-content: center; /* Center the pagination */
    align-items: center; /* Align items in the middle */
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 20px 0; /* Adds vertical margin for spacing */
}

/* Pagination links and spans */
.pds.pagination a, 
.pds.pagination span {
    color: #0073aa; /* Blue link color */
    padding: 10px 15px; /* Adds space inside links */
    margin: 0 5px; /* Space between links */
    text-decoration: none; /* Remove underline from links */
    border: 1px solid #ddd; /* Light border around links */
    border-radius: 5px; /* Rounded corners for links */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions on hover */
}

/* Pagination link hover effect */
.pds.pagination a:hover {
    background-color: #0073aa; /* Blue background on hover */
    color: white; /* White text on hover */
    border-color: #0073aa; /* Change border color on hover */
}

/* Current page in pagination */
.pds.pagination .current {
    background-color: #0073aa; /* Blue background for current page */
    color: white; /* White text for current page */
    font-weight: bold; /* Bold font for current page */
    border: 1px solid #0073aa; /* Blue border for current page */
}

/* Disabled pagination link */
.pds.pagination a.disabled {
    color: #ccc; /* Grey color for disabled links */
    pointer-events: none; /* Disable click on disabled links */
}

/* Previous and next pagination links */
.pds.pagination .prev, 
.pds.pagination .next {
    font-weight: bold; /* Bold font for next/previous links */
    padding: 10px 20px; /* Adds padding for larger buttons */
}

/* Hover effects for previous/next links */
.pds.pagination .prev:hover, 
.pds.pagination .next:hover {
    background-color: #005082; /* Darker blue background on hover */
    border-color: #005082; /* Darker blue border on hover */
}

/* Post title link styling */
.pds a.post-link {
    text-decoration: none; /* Remove underline from post titles */
}

/* Adjust title link hover effect */
.pds .post-title a:hover {
    color: #0073aa; /* Blue color on hover */
}

/* Post grid title link styling */
.pds.post-grid-title a {
    text-decoration: none; /* Remove underline from post titles */
    font-weight: bold; /* Bold font for post titles */
    font-size: 1.2em; /* Slightly larger font size */
    color: #2c3e50; /* Darker text color for better readability */
}

/* Post grid title hover effect */
.pds.post-grid-title a:hover {
    text-decoration: underline; /* Add underline on hover */
    color: #2980b9; /* Change color on hover */
}

/* Adjust the spacing for post titles */
.pds h2.post-title {
    margin-top: -3px; /* Adjust top margin to align properly */
}

.post-item.image-left {
    display: flex;
    align-items: flex-start;
}

.post-item.image-left .post-thumbnail {
    margin-right: 15px;
}

.post-item.image-top .post-thumbnail {
    margin-bottom: 15px;
}

.post-item .post-thumbnail img {
    max-width: 100%;
    height: auto;
}

/* General styling for post grid */
.pds.post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pds.post-grid.one-column .post-item {
    width: 100%;
}

.pds.post-grid.two-columns .post-item {
    width: calc(50% - 20px);
}

.pds.post-grid.three-columns .post-item {
    width: calc(33.33% - 20px);
}

/* Styling for top-aligned images */
.post-item.image-top {
    display: block;
}

.post-item.image-top .post-thumbnail {
    margin-bottom: 15px;
    text-align: center;
}

.post-item.image-top .post-thumbnail img {
    max-width: 100%;
    height: auto;
}

/* Styling for left-aligned images */
.post-item.image-left {
    display: flex;
    align-items: flex-start;
}

.post-item.image-left .post-thumbnail {
    margin-right: 15px;
    flex-shrink: 0;
}

.post-item.image-left .post-thumbnail img {
    width: 150px; /* Set a specific width for left-aligned images */
    height: auto;
}

/* Flex layout for post content in image-left layout */
.post-item.image-left .post-content {
    flex-grow: 1;
}
.pds h2.post-title {
    margin-top: -3px;
    font-size: 28px;
    font-weight: bold;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    
    /* Stack posts vertically on mobile */
    .pds .post-list {
        flex-direction: column; /* Posts will stack vertically */
    }

    /* Stack post items vertically */
    .pds .post-item {
        flex-direction: column; /* Stack image and content */
        align-items: stretch; /* Ensure full width on mobile */
    }

    /* Full-width thumbnail for mobile */
    .post-thumbnail img {
        width: 100%;
        height: auto;
        max-width: 100%; /* Image takes full width */
        margin-bottom: 10px; /* Space between image and content */
        border-radius: 8px; /* Rounded corners for images */
    }
    .pds h2.post-title {
        margin-top: -3px;
        font-size: 18px;
        font-weight: bold;
    }
    .post-excerpt {
        font-size: 0.83em;
        color: #666;
    }

    /* Ensure post content appears below the image */
    .post-content {
        order: 2; /* Content appears second */
    }

    /* Post title appears at the top on mobile */
    .pds .post-title {
        order: 1; /* Title appears first */
    }

    /* Read More button alignment on mobile */
    .pds.read-more-btn {
        order: 3; /* Button appears last */
        align-self: flex-start; /* Align button to the left */
    }

    /* Adjust pagination padding and margins on mobile */
    .pds.pagination a, .pds.pagination span {
        padding: 8px 10px; /* Smaller padding for mobile */
        margin: 0 3px; /* Smaller margin for mobile */
    }
    
    .pds.pagination .prev, .pds.pagination .next {
        padding: 8px 12px; /* Smaller padding for next/prev buttons */
    }
}