/* =====[BLOG LISTING MAIN]===== */
.redcat-blog-listing {
   margin: 2rem 0;
}

/* =====[FILTER BUTTONS]===== */
.blog-listing-filters {
   margin-bottom: 2.5rem;
}
.blog-listing-filters .filter-buttons {
   display: flex;
   gap: 2rem;
   overflow-x: auto;
   padding-bottom: 10px;
   scrollbar-width: thin;
   scrollbar-color: #888 #f1f1f1;
}
.blog-listing-filters .filter-buttons::-webkit-scrollbar {
   height: 8px;
}
.blog-listing-filters .filter-buttons::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 10px;
}
.blog-listing-filters .filter-buttons::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 10px;
}
.blog-listing-filters .filter-buttons::-webkit-scrollbar-thumb:hover {
   background: #555;
}
.blog-listing-filters .filter-btn {
   font-family: var(--wp--preset--font-family--raleway);
   font-size: var(--wp--preset--font-size--button);
   font-weight: 500;
   color: #686868;
   display: inline-block;
   line-height: 30px;
   white-space: nowrap;
   border: 0;
   border-bottom: 4px solid transparent;
   background: transparent;
   cursor: pointer;
   transition: all 0.3s ease;
   padding: 0.125rem 0.375rem;
}
.blog-listing-filters .filter-btn:hover {
   color: var(--wp--preset--color--primary);
   border-bottom-color: var(--wp--preset--color--primary);
}
.blog-listing-filters .filter-btn.active {
   font-weight: 700;
   color: var(--wp--preset--color--primary);
   border-bottom-color: var(--wp--preset--color--primary);
}
.blog-listing-filters .filter-btn.loading {
   opacity: 0.6;
   cursor: not-allowed;
}

/* =====[GRID LAYOUT]===== */
.blog-listing-grid {
   display: grid;
   gap: 3rem 2rem;
   margin-bottom: 3rem;
}
.blog-listing-grid.columns-2 {
   grid-template-columns: repeat(2, 1fr);
}
.blog-listing-grid.columns-3 {
   grid-template-columns: repeat(3, 1fr);
}
.blog-listing-grid.columns-4 {
   grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1399px) {
   .blog-listing-grid.columns-4 {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 1024px) {
   .blog-listing-grid.columns-3,
   .blog-listing-grid.columns-4 {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .blog-listing-grid.columns-2,
   .blog-listing-grid.columns-3,
   .blog-listing-grid.columns-4 {
      grid-template-columns: 1fr;
   }
}


/* =====[BLOG LISTING ITEM]===== */
.blog-listing-item {
   background: var(--wp--preset--color--white);
}
.blog-listing-item .blog-item-image {
   position: relative;
   margin-bottom: clamp(16px, 2vw, 1.5rem);
}
.blog-listing-item .blog-item-image a {
   display: block;
   width: 100%;
}
.blog-listing-item .blog-thumbnail {
   display: block;
   width: 100%;
   object-fit: cover;
   object-position: center;
   aspect-ratio: 16/10;
}
.blog-listing-item .blog-item-meta {
   font-size: 16px;
   font-weight: 500;
   color: #898989;
   margin-bottom: clamp(12px, 2vw, 1.5rem);
   display: flex;
   flex-wrap: wrap;
}
.blog-listing-item .blog-item-meta .meta-items + .meta-items {
   padding-left: 0.75rem;
}
.blog-listing-item .blog-item-meta .meta-items + .meta-items:before {
   content: '|';
   padding-right: 0.75rem;
}
.blog-listing-item .blog-item-title {
   font-size: clamp(19px, 2vw, 1.25rem);
   line-height: 1.3;
   margin: 0 0 clamp(10px, 2vw, 14px) 0;
}
.blog-listing-item .blog-item-title a {
   color: var(--wp--preset--color--black);
   text-decoration: none;
   display: inline-block;
}
.blog-listing-item .blog-item-title a:hover {
   color: var(--wp--preset--color--primary);
   text-decoration: underline;
}
.blog-listing-item .blog-item-excerpt {
   color: var(--wp--preset--color--black);
}
.blog-listing-item .blog-item-link {
   font-size: var(--wp--preset--font-size--button);
   font-weight: 600;
   color: var(--wp--preset--color--primary);
   display: inline-block;
   background: transparent;
   border: 2px solid var(--wp--preset--color--primary);
   padding: 0.5rem 1.25rem;
   line-height: 1.2;
   text-transform: uppercase;
   text-decoration: none;
   margin-top: 22px;
}
.blog-listing-item .blog-item-link:hover {
   color: var(--wp--preset--color--white);
   background: var(--wp--preset--color--primary);
   border: 2px solid var(--wp--preset--color--primary);
}

/* =====[PAGINATION]===== */
.blog-listing-pagination {
   margin-top: 3rem;
   text-align: center;
}
.blog-listing-pagination .page-numbers {
   font-weight: 600;
   display: inline-block;
   padding: 0.25rem 0.75rem;
   margin: 0 0.25rem;
   background: var(--wp--preset--color--white);
   border: 2px solid var(--wp--preset--color--primary);
   color: var(--wp--preset--color--primary);
   text-decoration: none;
   transition: all 0.3s ease;
}
.blog-listing-pagination .page-numbers:hover,
.blog-listing-pagination .page-numbers.current {
   background: var(--wp--preset--color--primary);
   color: var(--wp--preset--color--white);
   border-color: var(--wp--preset--color--primary);
}
.blog-listing-pagination .page-numbers.prev,
.blog-listing-pagination .page-numbers.next {
   font-weight: 600;
}

/* =====[TOGGLE REDCAT/CIG]===== */
.redcat.redcat-blog-listing .blog-listing-item .blog-item-link {
   display: none;
}

.cig.redcat-blog-listing .blog-listing-item .blog-item-title {
   text-transform: uppercase;
}
.cig.redcat-blog-listing .blog-listing-item .blog-item-meta {
   text-transform: uppercase;
}

/* =====[MICS]===== */
/* Empty State */
.blog-listing-empty {
   grid-column: 1 / -1;
   text-align: center;
   padding: 3rem;
   color: #666;
   font-style: italic;
}

/* Loading State */
.blog-listing-loading {
   opacity: 0.6;
   pointer-events: none;
}
.blog-listing-loading::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 40px;
   height: 40px;
   margin: -20px 0 0 -20px;
   border: 3px solid #f3f3f3;
   border-top: 3px solid #333;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

/* Wide and Full Width Support */
.wp-block-redcat-blog-listing.alignwide {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}
.wp-block-redcat-blog-listing.alignfull {
   max-width: none;
   width: 100vw;
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
}
.wp-block-redcat-blog-listing.alignfull .blog-listing-grid {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
   padding: 0 2rem;
}

/* Dark Background Support */
.redcat-blog-listing.has-background {
   padding: 2rem;
   border-radius: 8px;
}
.redcat-blog-listing.has-dark-background .blog-item-title a {
   color: white;
}
.redcat-blog-listing.has-dark-background .blog-item-excerpt {
   color: rgba(255, 255, 255, 0.8);
}
.redcat-blog-listing.has-dark-background .blog-item-date {
   color: rgba(255, 255, 255, 0.7);
}