/* Base Container & Wrapper Grid */
.custom-post-query-outer-container {
    width: 100%;
}

.custom-post-query-wrapper {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

/* Grid Column Variations */
.custom-post-columns-1 {
    grid-template-columns: 1fr;
}
.custom-post-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}
.custom-post-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}
.custom-post-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Default Post Item Style */
.custom-post-item {
    box-sizing: border-box;
    display: flex;
    transition: all 0.3s ease;
}

/* row layout for 1 Column list */
.custom-post-columns-1 .custom-post-item {
    flex-direction: row;
    align-items: stretch;
}

/* vertical layout for Multi-Column grid */
.custom-post-columns-2 .custom-post-item,
.custom-post-columns-3 .custom-post-item,
.custom-post-columns-4 .custom-post-item {
    flex-direction: column;
}

/* Image Wrapper and Image Styling */
.custom-post-image-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
}

.custom-post-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
}

.custom-post-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

/* Image Hover Zoom Animation */
.custom-post-image-wrapper:hover img {
    transform: scale(1.05);
}

/* Date Badge Overlay */
.custom-post-date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.custom-post-date-badge .badge-day {
    font-size: 20px;
    font-weight: 700;
}

.custom-post-date-badge .badge-month {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Content Area */
.custom-post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    border-left-style: solid;
}

/* Adjustments for Multi-Column Card Layouts */
.custom-post-columns-2 .custom-post-image-wrapper,
.custom-post-columns-3 .custom-post-image-wrapper,
.custom-post-columns-4 .custom-post-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    margin-bottom: 20px;
}

.custom-post-columns-2 .custom-post-content,
.custom-post-columns-3 .custom-post-content,
.custom-post-columns-4 .custom-post-content {
    padding-left: 15px !important;
}

/* Inline Date */
.custom-post-inline-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Title */
.custom-post-title {
    margin-top: 0;
    font-weight: 600;
    line-height: 1.35;
}

.custom-post-title a {
    text-decoration: none;
    background-color: transparent;
}

/* Excerpt */
.custom-post-excerpt {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Read More Button */
.custom-post-read-more {
    text-decoration: none;
    font-weight: 500;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

/* Pagination container */
.custom-post-pagination-container {
    width: 100%;
    box-sizing: border-box;
}

/* Page Numbers Pagination */
.custom-post-pagination-links {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.custom-post-pagination-links a,
.custom-post-pagination-links span {
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Prev / Next: SVG icon buttons — auto-sized, not affected by item width */
.custom-post-pagination-links a.prev,
.custom-post-pagination-links a.next {
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}

.custom-post-pagination-links a.prev svg,
.custom-post-pagination-links a.next svg {
    display: block;
    pointer-events: none;
}

/* Load More Button style */
.custom-post-load-more-btn {
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.25s ease;
    position: relative;
}

.custom-post-load-more-btn.loading {
    cursor: not-allowed;
}

.btn-loader {
    margin-left: 8px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* Responsive Mobile Rules */
@media (max-width: 767px) {
    .custom-post-query-wrapper {
        grid-template-columns: 1fr !important;
    }
    
    .custom-post-item {
        flex-direction: column !important;
    }
    
    .custom-post-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
        margin-bottom: 20px;
    }
    
    .custom-post-content {
        padding-left: 15px !important;
    }
}