/* ==================================================================
   CTI Blog Template — category, tag and search listings
   ==================================================================
   The listing design comes from the blog page's own stylesheet, printed
   after this file. What lives here is only what that page does not
   provide: undoing the theme's width cap, the count line, and pagination
   links (the blog page paginates with buttons and JavaScript, so its
   rules do not cover anchors).
   ================================================================== */

/* The Hello Elementor theme caps <main> at 1140px, which clipped the
   shell's gradient, grid and glow orbs to a band down the middle. */
body.cti-bt-archive main.site-main,
body.cti-bt-archive #content,
body.cti-bt-archive .site-main,
body.cti-bt-archive .page-content{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
body.cti-bt-archive .cti-bt-archive-root{ width:100%; }

/* Result count above the grid. */
.cti-bt-archive-root .cti-bt-count{
  margin:0 0 18px;
  text-align:center;
  font-size:13px;
  color:var(--color-lavender,#dde8f8);
  opacity:.7;
}

/* ---- pagination ----
   Same look as the blog page's buttons, applied to real links so each
   page is a crawlable URL that works without JavaScript. */
.cti-bt-archive-root .blog-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.cti-bt-archive-root .blog-pagination .blog-page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 14px;
  border-radius:var(--br-100,100px);
  border:1px solid var(--color-gray-300,rgba(255,255,255,.1));
  background:var(--color-gray-100,#0d1120);
  color:var(--color-lavender,#dde8f8);
  font-size:13px;
  font-weight:600;
  text-decoration:none !important;
  line-height:1;
  transition:background .2s,border-color .2s,color .2s;
}
.cti-bt-archive-root .blog-pagination .blog-page-btn:hover{
  border-color:var(--color-royalblue,#0069df);
  color:var(--color-white,#fff) !important;
}
.cti-bt-archive-root .blog-pagination .blog-page-btn.active{
  background:var(--gradient-1,linear-gradient(#1a7fff,#0069df));
  border-color:transparent;
  color:var(--color-white,#fff) !important;
}
.cti-bt-archive-root .blog-pagination .blog-page-dots{
  color:var(--color-lavender,#dde8f8);
  opacity:.5;
  padding:0 2px;
}

/* ---- empty state ---- */
.cti-bt-archive-root .blog-empty{
  width:100%;
  text-align:center;
  color:var(--color-lavender,#dde8f8);
  padding:30px 0 10px;
}
.cti-bt-archive-root .blog-empty p{ margin:0 0 14px; }
.cti-bt-archive-root .blog-empty .blog-cat-pill{ width:auto; display:inline-flex; }

/* ---- fallback ----
   Only used when the blog page's stylesheet cannot be read. Deliberately
   written with a single class so the borrowed rules — which are printed
   after this file — always win. An earlier version scoped these under
   .cti-bt-archive-root, which made them MORE specific than the real
   design and capped the shell at 1240px instead of running full width. */
.blog-grid:not([data-styled]){
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:28px;
  width:100%;
}
.blog-shell:not([data-styled]){
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  width:100%;
  padding:120px 20px 100px;
  box-sizing:border-box;
}