/* ==========================================================================
   Archive / Blog CSS — BytePressTech Theme
   ========================================================================== */

/* ── Archive header ──────────────────────────────────────────────────────── */
.bpt-archive-header {
  margin-bottom:  2.5rem;
  padding:        clamp(3rem, 6vw, 4.5rem) 0 2rem;
  border-bottom:  1px solid var(--bpt-border);
  position:       relative;
  overflow:       hidden;
}

.bpt-archive-header::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;
}

.bpt-archive-header > * { position: relative; z-index: 1; }

.bpt-archive-header__title {
  font-size:     clamp(1.5rem, 3vw + .5rem, 2.5rem);
  margin-bottom: .5rem;
  color:         var(--bpt-text);
}

.bpt-archive-header__desc {
  color:         var(--bpt-text-2);
  font-size:     1rem;
  line-height:   1.7;
  max-width:     60ch;
}
.bpt-archive-header__desc > * { margin: 0; }

@media (max-width: 768px) {
  .bpt-archive-header { padding-top: clamp(5rem, 12vw, 7rem); }
}

/* ── Card grid ───────────────────────────────────────────────────────────── */
.bpt-archive-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap:                   1.5rem;
  margin-bottom:         3rem;
}

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

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

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

/* Thumbnail */
.bpt-card-post__thumb-link { display: block; overflow: hidden; aspect-ratio: 16/9; }

.bpt-card-post__thumb {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.bpt-card-post:hover .bpt-card-post__thumb { transform: scale(1.04); }

/* Body */
.bpt-card-post__body {
  padding:        1.5rem;
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
  flex:           1;
}

/* Meta row */
.bpt-card-post__meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         .5rem;
}

.bpt-card-post__date {
  font-size:  .75rem;
  color:      var(--bpt-text-2);
  font-family: var(--bpt-mono);
}

/* Title */
.bpt-card-post__title {
  font-size:   1.1rem;
  line-height: 1.35;
  margin:      0;
}
.bpt-card-post__title a {
  color:           var(--bpt-text);
  text-decoration: none;
  transition:      color var(--bpt-t);
}
.bpt-card-post__title a:hover { color: var(--bpt-accent-h); }

/* Excerpt */
.bpt-card-post__excerpt {
  font-size:   .875rem;
  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;
}

/* Read more */
.bpt-card-post__read-more {
  display:         inline-flex;
  align-items:     center;
  gap:             .35rem;
  font-size:       .82rem;
  font-weight:     600;
  color:           var(--bpt-accent-h);
  text-decoration: none;
  margin-top:      auto;
  transition:      gap var(--bpt-t), color var(--bpt-t);
}
.bpt-card-post__read-more:hover { gap: .6rem; color: var(--bpt-text); }

/* ── Featured / sticky post ──────────────────────────────────────────────── */
.sticky.bpt-card-post {
  border-color: rgba(99, 102, 241, .4);
  grid-column:  1 / -1;
}
.sticky.bpt-card-post .bpt-card-post__thumb-link { aspect-ratio: 21/9; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .bpt-archive-grid { grid-template-columns: 1fr; }
  .bpt-card-post__body { padding: 1.25rem; }
}