/*
Block Name: Post Listings
Description: A block used to loop through your news posts, with an optional AJAX category filter bar.
*/

/* -------------------------------------------------------------------------
   FILTER BAR
   Row of category buttons and 'Clear all' text rendered above the post grid
   when the 'add_filter' ACF field is enabled on this block.
   ------------------------------------------------------------------------- */

.block-post-listings .container{max-width: 132rem !important;}

.block-post-listings .filter-wrapper{background-color: var(--brand-5); padding: 4rem 0;}
.block-post-listings .filter-wrapper h4{text-align: center; color: var(--brand-1) !important; margin-bottom: 5rem; text-transform: uppercase;}

.block-post-listings .pattern-block { width: 100%; display: flex; margin-bottom: 5rem; }
.block-post-listings .pattern-block svg { height: 100%; }
   
.post-listings-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    justify-content: space-evenly;
}

/* Individual category filter button */
.post-listings-filter-btn {
    padding: 1.25rem 2rem;
    border-radius: 4rem;
    border: none;
    background: var(--brand-6);
    color: #000;
    font-size: 1.8rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.post-listings-filter-btn:hover {
    opacity: .75;
}

/* Active / selected state */
.post-listings-filter-btn.active {
    background: var(--brand-1);
    border-color: var(--brand-1);
    color: #fff;
}

/* 'Clear all' — hidden by default, shown by JS (.visible) when filters active */
.post-listings-clear {
    background: none;
    border: none;
    padding: .4rem .25rem;
    font-size: 1.8rem;
    color: inherit;
    opacity: .55;
    text-decoration: underline;
    margin-left: .5rem;
    transition: opacity .15s ease;
}

.post-listings-clear.active {
    color: inherit;
    opacity: .8;
    text-decoration: underline;
    cursor: pointer;
    margin-left: .5rem;
    transition: opacity .15s ease;
}

.post-listings-clear:hover {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   EMPTY STATE
   Shown by the AJAX handler when no posts match the selected categories.
   ------------------------------------------------------------------------- */

.post-listings-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 0;
    opacity: .55;
    color:#000;
}

.post-listings .post-listing{display: grid; grid-template-columns: 1fr 1fr; background-color: #fff; padding: 2rem; box-shadow: none;}
.post-listings .post-listing .post-listing-image img{height: 100%; width: 100%; min-height: 160px; object-fit: cover;}
.post-listings .post-listing .post-listing-content{padding: 2px 0 2px 2rem; font-size: 1.6rem; color: var(--text-color);}
.post-listings .post-listing .post-listing-content h3{font-size: 2rem; font-weight: 500;}
.post-listings .post-listing .post-listing-content h3 + p{margin-top: calc(var(--base-type-spacing) / 6); margin-bottom: 1.5rem;}