.clbg {
  --clbg-accent: #2A5972;
  --clbg-text: currentColor;
  --clbg-muted: rgba(128, 128, 128, 0.86);
}

.clbg-grid {
  display: grid;
  grid-template-columns: repeat(var(--clbg-cols, 3), minmax(0, 1fr));
  column-gap: var(--clbg-gap, 36px);
  row-gap: var(--clbg-row-gap, 56px);
}

.clbg-card { min-width: 0; }
.clbg-card__link { display: block; color: inherit; text-decoration: none; }
.clbg-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--clbg-radius, 0);
  background: var(--clbg-placeholder, #2A5972);
}
.clbg-card__image,
.clbg-card__placeholder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.clbg-card__image {
  transform: scale(1.001);
  transition: transform .7s cubic-bezier(.23,1,.32,1), opacity .35s ease;
}
.clbg-card__placeholder { background: var(--clbg-placeholder, #2A5972); }
.clbg-card__link:hover .clbg-card__image { transform: scale(1.045); }

.clbg-card__body { padding-top: 18px; }
.clbg-card__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.clbg-card__category,
.clbg-card__meta {
  font-size: .75rem;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clbg-muted);
}
.clbg-card__title { margin: 0; line-height: 1.13; }
/*
 * Rhye assigns theme colors directly to anchor elements. Keep the post title
 * controlled by the heading itself so the default Rhye/Elementor heading color
 * survives Barba/PJAX transitions. Elementor custom Title Color is applied to
 * .clbg-card__title and the link always inherits it.
 */
.clbg-card__title > a.clbg-card__link { color: inherit !important; text-decoration: none; transition: opacity .25s ease; }
.clbg-card__title a:hover { opacity: .68; }
.clbg-card__excerpt { margin-top: 12px; line-height: 1.65; color: var(--clbg-muted); }
.clbg-card__meta { display: flex; gap: 10px 18px; flex-wrap: wrap; margin-top: 14px; }
.clbg-card__more {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: 16px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.clbg-card__more span { transition: transform .25s ease; }
.clbg-card__more:hover span { transform: translateX(3px); }

.clbg-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-bottom: 36px;
}
.clbg-filter {
  appearance: none;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  padding: 5px 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  opacity: .5;
  transition: opacity .25s ease, border-color .25s ease;
}
.clbg-filter:hover,
.clbg-filter.is-active { opacity: 1; }
.clbg-filter.is-active { border-bottom-color: currentColor; }

.clbg-pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(42px, 7vw, 88px);
}
.clbg-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}
.clbg-load-more:hover { opacity: .72; }
.clbg-load-more[disabled] { opacity: .35; cursor: wait; }

.clbg-pages { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.clbg-page {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid rgba(128,128,128,.3);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.clbg-page:hover,
.clbg-page.is-active { border-color: currentColor; }
.clbg-page.is-active { background: currentColor; }
.clbg-page.is-active { color: var(--clbg-page-active-color, #fff); }
.clbg-pages__ellipsis { padding: 0 4px; opacity: .55; }

.clbg-status { min-height: 1px; text-align: center; margin-top: 14px; font-size: .9rem; }
.clbg-empty { grid-column: 1 / -1; padding: 36px 0; opacity: .7; }
.clbg.is-loading .clbg-grid { opacity: .55; transition: opacity .2s ease; }

@media (max-width: 1024px) {
  .clbg-grid {
    grid-template-columns: repeat(var(--clbg-cols-tablet, 3), minmax(0, 1fr));
    column-gap: var(--clbg-gap-tablet, var(--clbg-gap, 36px));
    row-gap: var(--clbg-row-gap-tablet, var(--clbg-row-gap, 56px));
  }
}

@media (max-width: 767px) {
  .clbg-grid {
    grid-template-columns: repeat(var(--clbg-cols-mobile, 1), minmax(0, 1fr));
    column-gap: var(--clbg-gap-mobile, var(--clbg-gap-tablet, 24px));
    row-gap: var(--clbg-row-gap-mobile, var(--clbg-row-gap-tablet, 40px));
  }
  .clbg-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 28px;
    padding-bottom: 2px;
  }
  .clbg-filters::-webkit-scrollbar { display: none; }
  .clbg-filter { flex: 0 0 auto; }
}