/* ==========================================================================
   Single Post CSS — BytePressTech Theme
   ========================================================================== */

/* ── Wrapper — full container width, matching header/footer ──────────────── */
.bpt-single-wrap {
  width: 100%;
  max-width: 900px;
}

/* ── Hero image ──────────────────────────────────────────────────────────── */
.bpt-single__hero {
  margin-bottom: 2.5rem;
  border-radius: var(--bpt-radius-lg);
  overflow:      hidden;
  aspect-ratio:  16/9;
  border:        1px solid var(--bpt-border);
}

.bpt-single__hero-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.bpt-single__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-single__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-single__header > * { position: relative; z-index: 1; }

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

.bpt-single__cats {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .4rem;
  margin-bottom: .875rem;
}

.bpt-single__title {
  font-size:     clamp(1.6rem, 3.5vw + .5rem, 2.75rem);
  line-height:   1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -.03em;
}

/* Meta row */
.bpt-single__meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         .75rem;
  font-size:   .85rem;
  color:       var(--bpt-text-2);
}

.bpt-single__author {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}
.bpt-single__author a { color: var(--bpt-text-2); text-decoration: none; font-weight: 500; }
.bpt-single__author a:hover { color: var(--bpt-accent-h); }

.bpt-single__avatar {
  border-radius: 50%;
  width: 28px; height: 28px;
  object-fit: cover;
  border: 1px solid var(--bpt-border-light);
}

.bpt-single__date { font-family: var(--bpt-mono); font-size: .8rem; }

.bpt-single__read-time {
  display:      flex;
  align-items:  center;
  gap:          .3rem;
  font-family:  var(--bpt-mono);
  font-size:    .8rem;
  color:        var(--bpt-text-2);
}

.bpt-single__sep { color: var(--bpt-border-light); }

/* ── Content ─────────────────────────────────────────────────────────────── */
.bpt-single__content {
  margin-bottom: 3rem;
  font-size:     clamp(.95rem, .5vw + .875rem, 1.05rem);
}

/* Inline images */
.bpt-single__content img {
  border-radius: var(--bpt-radius);
  border:        1px solid var(--bpt-border);
  height:        auto;
  margin-block:  .5rem;
}

/* ── Post footer (tags) ──────────────────────────────────────────────────── */
.bpt-single__footer {
  padding-top:   2rem;
  border-top:    1px solid var(--bpt-border);
  margin-bottom: 3rem;
}

.bpt-single__tags {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         .5rem;
}

.bpt-single__tags-label {
  font-size:  .8rem;
  color:      var(--bpt-text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Page links (multi-page posts) ──────────────────────────────────────── */
.bpt-page-links {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         .4rem;
  padding-top: 1.5rem;
  font-size:   .875rem;
  color:       var(--bpt-text-2);
}
.bpt-page-links__item a, .bpt-page-links__item {
  padding:       .3rem .7rem;
  background:    var(--bpt-surface-2);
  border:        1px solid var(--bpt-border);
  border-radius: var(--bpt-radius-sm);
  color:         var(--bpt-text-2);
  text-decoration: none;
  transition:    all var(--bpt-t);
}
.bpt-page-links__item a:hover { border-color: var(--bpt-accent); color: var(--bpt-accent-h); }

/* ── Post navigation ─────────────────────────────────────────────────────── */
.bpt-post-nav .nav-links {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-bottom:         3rem;
}

.bpt-post-nav .nav-previous,
.bpt-post-nav .nav-next {
  background:    var(--bpt-surface);
  border:        1px solid var(--bpt-border);
  border-radius: var(--bpt-radius);
  padding:       1.25rem;
  transition:    border-color var(--bpt-t), background var(--bpt-t);
}
.bpt-post-nav .nav-previous:hover,
.bpt-post-nav .nav-next:hover { border-color: var(--bpt-border-light); background: var(--bpt-surface-2); }
.bpt-post-nav .nav-next { text-align: right; }

.bpt-post-nav a { text-decoration: none; display: block; }

.bpt-post-nav__label {
  display:       block;
  font-size:     .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:         var(--bpt-text-3);
  font-weight:   600;
  margin-bottom: .4rem;
}

.bpt-post-nav__title {
  display:     block;
  font-size:   .9rem;
  font-weight: 600;
  color:       var(--bpt-text-2);
  line-height: 1.4;
  transition:  color var(--bpt-t);
}
.bpt-post-nav a:hover .bpt-post-nav__title { color: var(--bpt-accent-h); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bpt-post-nav .nav-links { grid-template-columns: 1fr; }
  .bpt-post-nav .nav-next  { text-align: left; }
  .bpt-single__hero { border-radius: var(--bpt-radius); }
}

/* ── Comments ─────────────────────────────────────────────────────────────── */
.bpt-comments { margin-top: 3rem; }

.bpt-comments__title {
  font-size:     1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bpt-border);
}

.bpt-comment-list {
  list-style: none;
  padding:    0;
  margin:     0 0 2rem;
  display:    flex;
  flex-direction: column;
  gap:        1rem;
}

.bpt-comment {
  background:    var(--bpt-surface);
  border:        1px solid var(--bpt-border);
  border-radius: var(--bpt-radius);
  padding:       1.25rem;
}

/* Nested comments */
.bpt-comment .children {
  list-style:  none;
  padding:     0;
  margin:      1rem 0 0 1.5rem;
  display:     flex;
  flex-direction: column;
  gap:         .75rem;
}

.bpt-comment__header {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  margin-bottom: .75rem;
  flex-wrap:   wrap;
}

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

.bpt-comment__meta {
  display:        flex;
  flex-direction: column;
  gap:            .1rem;
  flex:           1;
}

.bpt-comment__author {
  font-size:  .9rem;
  font-weight: 600;
  color:      var(--bpt-text);
}

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

.bpt-comment__reply a {
  font-size:       .78rem;
  color:           var(--bpt-accent-h);
  text-decoration: none;
  font-weight:     500;
  transition:      color var(--bpt-t);
}
.bpt-comment__reply a:hover { color: var(--bpt-text); }

.bpt-comment__moderation {
  font-size:     .82rem;
  color:         var(--bpt-warning);
  margin-bottom: .5rem;
}

.bpt-comment__text {
  font-size:   .9rem;
  color:       var(--bpt-text-2);
  line-height: 1.7;
}
.bpt-comment__text > * { margin: 0; }
.bpt-comment__text > * + * { margin-top: .75rem; }

.bpt-comments__closed {
  font-size: .875rem;
  color:     var(--bpt-text-3);
  padding:   1rem 0;
}