/* ============================================================
   Blog Module — Frontend Styles (Bootstrap 5 extension)
   ============================================================ */

:root{
  --blog-radius: .75rem;
  --blog-muted: #6c757d;
}

.blog-wrapper{ max-width: 1200px; }

/* ---- Cards ---- */
.blog-card{
  border-radius: var(--blog-radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{ transform: translateY(-4px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important; }
.blog-card__media{ overflow:hidden; border-radius: var(--blog-radius) var(--blog-radius) 0 0; }
.blog-card__img{
  width:100%; aspect-ratio: 3/2; object-fit:cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card__img{ transform: scale(1.05); }
.blog-card__title a{ transition: color .15s ease; }
.blog-card__title a:hover{ color: var(--bs-primary); }
.blog-card--list .blog-card__media{ border-radius: var(--blog-radius) 0 0 var(--blog-radius); }
.blog-card--list .blog-card__media img{ aspect-ratio: 3/2; min-height: 200px; }

/* line clamp helpers */
.line-clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.object-fit-cover{ object-fit: cover; }

/* ---- Slider ---- */
.blog-slider__item{ position:relative; background:#000; }
.blog-slider__overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 50%, transparent 100%);
}
.blog-slider__caption h2{ text-shadow:0 2px 8px rgba(0,0,0,.5); }

/* ---- Sidebar / Widgets ---- */
.blog-widget{
  border-radius: var(--blog-radius);
}
.blog-widget__title{
  letter-spacing:.05em;
  position:relative; padding-left:.75rem;
}
.blog-widget__title::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:1em; background: var(--bs-primary); border-radius:2px;
}
.blog-widget--newsletter{ background: linear-gradient(135deg, #e7f1ff 0%, #f3e8ff 100%); }
.blog-thumb-list img{ width:70px; height:56px; }
.blog-cat-list a:hover{ color: var(--bs-primary) !important; }
.blog-popular-list__num{ font-size:1.4rem; line-height:1; min-width:1.2rem; }

/* ---- Article ---- */
.blog-article__title{ line-height:1.2; }
.blog-content{ line-height:1.8; font-size:1.05rem; }
.blog-content h2{
  font-size:1.6rem; font-weight:700; margin-top:2rem; margin-bottom:1rem;
  scroll-margin-top: 80px;
}
.blog-content h3{
  font-size:1.3rem; font-weight:600; margin-top:1.5rem; margin-bottom:.75rem;
  scroll-margin-top: 80px;
}
.blog-content p{ margin-bottom:1.1rem; }
.blog-content img{ max-width:100%; height:auto; border-radius: var(--blog-radius); margin:1.5rem 0; }
.blog-content blockquote{
  border-left:4px solid var(--bs-primary); padding:1rem 1.5rem;
  background:#f8f9fa; border-radius:0 var(--blog-radius) var(--blog-radius) 0;
  font-style:italic; color: #495057;
}
.blog-content pre{
  background:#212529; color:#f8f9fa; padding:1.25rem; border-radius: var(--blog-radius);
  overflow-x:auto;
}
.blog-content code{ background:#e9ecef; padding:.15em .4em; border-radius:.25rem; font-size:.9em; }
.blog-content pre code{ background:none; padding:0; }
.blog-content table{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.blog-content table th, .blog-content table td{
  border:1px solid #dee2e6; padding:.6rem .9rem;
}
.blog-content table thead{ background:#f8f9fa; }
.blog-content a{ color: var(--bs-primary); }

/* ---- Table of contents ---- */
.blog-toc{ position:sticky; top:1rem; }
.blog-toc__list{ counter-reset: toc; }
.blog-toc__list li{ margin-bottom:.35rem; }
.blog-toc__list a{
  color:#495057; text-decoration:none; display:block;
  padding:.15rem 0; border-left:2px solid transparent; padding-left:.5rem;
  transition: all .15s ease;
}
.blog-toc__list a:hover,
.blog-toc__list a.is-active{
  color: var(--bs-primary); border-left-color: var(--bs-primary); font-weight:600;
}

/* ---- Share buttons ---- */
.blog-share__btn{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; }
.blog-share__btn:hover{ transform: translateY(-2px); }

/* ---- Comments ---- */
.blog-comment__body{ background:#f8f9fa; border-radius: var(--blog-radius); padding:.75rem 1rem; }
.blog-comments__list ul{ padding-left:1rem; border-left:2px solid #e9ecef; margin-left:.5rem; }

/* ---- Author box ---- */
.blog-author-box img{ width:72px; height:72px; }

/* ---- Newsletter section ---- */
.blog-newsletter-section{ border-radius: 1.25rem; }

/* ---- Prev/Next ---- */
.blog-prev-next__link{ transition: transform .15s ease; }
.blog-prev-next__link:hover{ transform: translateY(-2px); }

/* ---- 404 ---- */
.blog-404 .display-1{ font-size: 6rem; line-height:1; }

/* ---- Footer (sticky) ---- */
.blog-body{ min-height:100vh; display:flex; flex-direction:column; }
.blog-wrapper{ flex:1 0 auto; }
.blog-footer{ margin-top:auto; }

/* ---- Pagination ---- */
.blog-pagination .page-link{ border-radius:.5rem; margin:0 .15rem; border:none; color:#495057; }
.blog-pagination .page-item.active .page-link{ background: var(--bs-primary); color:#fff; }

/* ---- Responsive ---- */
@media (max-width: 575.98px){
  .blog-card--list{ flex-direction:column; }
  .blog-card--list .blog-card__media{ max-width:100% !important; }
  .blog-card--list .blog-card__media img{ min-height:180px; }
  .blog-slider__caption h2{ font-size:1.25rem; }
}

/* ---- Search live results dropdown ---- */
.blog-search-live{
  position:absolute; z-index:1050; background:#fff; border-radius: var(--blog-radius);
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.15); width:100%; max-height:400px; overflow-y:auto;
}
.blog-search-live__item{ display:flex; gap:.75rem; padding:.6rem; border-bottom:1px solid #f1f3f5; text-decoration:none; }
.blog-search-live__item:hover{ background:#f8f9fa; }
.blog-search-live__item img{ width:48px; height:48px; border-radius:.375rem; object-fit:cover; }