/* ==========================================================================
   Blog Listing Page — ByteCore Stack Theme
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.bpl-hero {
  position:  relative;
  overflow:  hidden;
  padding:   clamp(4rem, 10vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--bpt-border);
}

.bpl-hero__glow {
  position:       absolute;
  top:            -60px;
  left:           50%;
  transform:      translateX(-50%);
  width:          700px;
  height:         400px;
  background:     radial-gradient(ellipse, rgba(99, 102, 241, .18) 0%, transparent 70%);
  pointer-events: none;
  z-index:        0;
}

.bpl-hero::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: radial-gradient(circle, rgba(99,102,241,.12) 1px, transparent 1px);
  background-size:  28px 28px;
  pointer-events:   none;
  z-index:          0;
}

.bpl-hero__inner {
  position:   relative;
  z-index:    1;
  text-align: center;
  max-width:  720px;
  margin:     0 auto;
}

.bpl-hero__badge {
  display:        inline-flex;
  align-items:    center;
  gap:            .45rem;
  padding:        .35rem .9rem;
  border-radius:  999px;
  background:     var(--bpt-accent-dim);
  border:         1px solid rgba(99, 102, 241, .3);
  color:          var(--bpt-accent-h);
  font-size:      .75rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom:  1.25rem;
}

.bpl-hero__title {
  font-size:      clamp(2rem, 5vw + .5rem, 3.5rem);
  font-weight:    700;
  line-height:    1.15;
  letter-spacing: -.03em;
  margin-bottom:  1rem;
  background:     linear-gradient(135deg, var(--bpt-text) 40%, var(--bpt-accent-h));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bpl-hero__desc {
  font-size:     clamp(.95rem, 1.5vw + .5rem, 1.15rem);
  color:         var(--bpt-text-2);
  line-height:   1.7;
  max-width:     55ch;
  margin:        0 auto 2rem;
}

.bpl-hero__stats {
  display:       inline-flex;
  align-items:   center;
  gap:           1.5rem;
  padding:       .75rem 1.5rem;
  background:    var(--bpt-surface);
  border:        1px solid var(--bpt-border-light);
  border-radius: var(--bpt-radius-lg);
}

.bpl-hero__stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .15rem;
}

.bpl-hero__stat-num {
  font-size:   1.4rem;
  font-weight: 700;
  color:       var(--bpt-accent-h);
  line-height: 1;
  font-family: var(--bpt-mono);
}

.bpl-hero__stat-label {
  font-size:      .72rem;
  color:          var(--bpt-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.bpl-hero__stat-sep {
  width:       1px;
  height:      32px;
  background:  var(--bpt-border-light);
  flex-shrink: 0;
}

/* ── Category filter bar ─────────────────────────────────────────────────── */
.bpl-filter {
  position:        sticky;
  top:             var(--bpt-header-h);
  z-index:         100;
  background:      rgba(15, 17, 23, .9);
  backdrop-filter: blur(12px);
  border-bottom:   1px solid var(--bpt-border);
  padding:         .75rem 0;
}

.admin-bar .bpl-filter { top: calc(var(--bpt-header-h) + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .bpl-filter { top: calc(var(--bpt-header-h) + 46px); }
}

.bpl-filter__nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bpl-filter__nav::-webkit-scrollbar { display: none; }

.bpl-filter__list {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  list-style:  none;
  padding:     0;
  margin:      0;
  white-space: nowrap;
}

.bpl-filter__btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  padding:         .42rem .9rem;
  border-radius:   999px;
  font-size:       .82rem;
  font-weight:     500;
  color:           var(--bpt-text-2);
  text-decoration: none;
  border:          1px solid transparent;
  transition:      color var(--bpt-t), background var(--bpt-t), border-color var(--bpt-t);
}

.bpl-filter__btn:hover {
  color:        var(--bpt-text);
  background:   var(--bpt-surface-2);
  border-color: var(--bpt-border-light);
}

.bpl-filter__btn--active {
  color:        var(--bpt-accent-h);
  background:   var(--bpt-accent-dim);
  border-color: rgba(99, 102, 241, .35);
}
.bpl-filter__btn--active:hover { background: var(--bpt-accent-dim); }

.bpl-filter__count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       20px;
  height:          18px;
  padding:         0 .35rem;
  border-radius:   999px;
  font-size:       .68rem;
  font-weight:     600;
  background:      var(--bpt-surface-3);
  color:           var(--bpt-text-3);
}

.bpl-filter__btn--active .bpl-filter__count {
  background: rgba(99, 102, 241, .25);
  color:      var(--bpt-accent-h);
}

/* ── Main content area ───────────────────────────────────────────────────── */
.bpl-main {
  padding-top:    clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ── 3-column post grid ──────────────────────────────────────────────────── */
.bpl-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.5rem;
  margin-bottom:         3rem;
}

/* ── Post card ───────────────────────────────────────────────────────────── */
.bpl-card {
  background:     var(--bpt-surface);
  border:         1px solid var(--bpt-border);
  border-radius:  var(--bpt-radius-lg);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  position:       relative;
  transition:     border-color var(--bpt-t), box-shadow var(--bpt-t), transform var(--bpt-t);
}

.bpl-card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .4), transparent);
  opacity:    0;
  transition: opacity var(--bpt-t);
}

.bpl-card:hover {
  border-color: var(--bpt-border-light);
  box-shadow:   var(--bpt-shadow);
  transform:    translateY(-3px);
}
.bpl-card:hover::before { opacity: 1; }

/* Thumbnail */
.bpl-card__thumb-link {
  display:     block;
  overflow:    hidden;
  flex-shrink: 0;
}

.bpl-card__thumb {
  width:      100%;
  height:     auto;
  display:    block;
  transition: transform .4s ease;
}
.bpl-card:hover .bpl-card__thumb { transform: scale(1.04); }

/* Body */
.bpl-card__body {
  display:        flex;
  flex-direction: column;
  gap:            .65rem;
  padding:        1.25rem;
  flex:           1;
}

/* Meta row */
.bpl-card__meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         .5rem;
}

.bpl-card__date {
  font-size:   .73rem;
  color:       var(--bpt-text-3);
  font-family: var(--bpt-mono);
}

/* Title */
.bpl-card__title {
  font-size:   1rem;
  line-height: 1.4;
  margin:      0;
}

.bpl-card__title a {
  color:           var(--bpt-text);
  text-decoration: none;
  transition:      color var(--bpt-t);
}
.bpl-card__title a:hover { color: var(--bpt-accent-h); }

/* Excerpt */
.bpl-card__excerpt {
  font-size:          .855rem;
  color:              var(--bpt-text-2);
  line-height:        1.6;
  margin:             0;
  flex:               1;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* No thumbnail — let the excerpt grow to fill the card */
.bpl-card--no-thumb .bpl-card__excerpt {
  -webkit-line-clamp: 14;
}

/* Footer: author + read-more */
.bpl-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .5rem;
  padding-top:     .65rem;
  border-top:      1px solid var(--bpt-border);
  margin-top:      auto;
}

.bpl-card__author {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  min-width:   0;
}

.bpl-card__avatar {
  border-radius: 50%;
  width:         26px;
  height:        26px;
  object-fit:    cover;
  border:        1px solid var(--bpt-border-light);
  flex-shrink:   0;
}

.bpl-card__author-name {
  font-size:     .78rem;
  color:         var(--bpt-text-3);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.bpl-card__read-more {
  display:         inline-flex;
  align-items:     center;
  gap:             .3rem;
  font-size:       .78rem;
  font-weight:     600;
  color:           var(--bpt-accent-h);
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:      gap var(--bpt-t), color var(--bpt-t);
}
.bpl-card__read-more:hover { gap: .5rem; color: var(--bpt-text); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.bpl-empty {
  text-align: center;
  padding:    5rem 1rem;
  max-width:  480px;
  margin:     0 auto;
}

.bpl-empty__icon {
  display:  block;
  margin:   0 auto 1.5rem;
  color:    var(--bpt-text-3);
  width:    56px;
  height:   56px;
  opacity:  .5;
}

.bpl-empty__title {
  font-size:     1.5rem;
  margin-bottom: .75rem;
}

.bpl-empty__desc {
  color:         var(--bpt-text-2);
  margin-bottom: 2rem;
  font-size:     .95rem;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.bpl-pagination { margin-top: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bpl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .bpl-grid { grid-template-columns: 1fr; gap: 1rem; }
}