/* ============================================================
   Blog Module – Sourabh Gupta Groundwater Advisory
   File:  static/css/blog.css
   Stack: Bootstrap 5.3 + Custom CSS
   ============================================================ */

/* ── Page Hero ─────────────────────────────────────────────── */
.blog-page-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%, #051f3e 100%);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}
.blog-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.blog-page-hero .breadcrumb-item,
.blog-page-hero .breadcrumb-item a {
  color: rgba(255,255,255,.65);
  font-size: .85rem;
}
.blog-page-hero .breadcrumb-item.active { color: rgba(255,255,255,.9); }
.blog-page-hero .breadcrumb-divider    { color: rgba(255,255,255,.4); }

/* ── Layout Wrapper ────────────────────────────────────────── */
.blog-layout { padding: 60px 0 80px; background: var(--bg-light); }

/* ── BLOG CARD (Grid) ──────────────────────────────────────── */
.blog-card {
  background:    var(--bg-white);
  border-radius: var(--radius-md);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--border);
  transition:    transform var(--transition), box-shadow var(--transition);
  display:       flex;
  flex-direction: column;
  height:        100%;
}
.blog-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-md);
}
.blog-card-img-wrap {
  position:    relative;
  overflow:    hidden;
  aspect-ratio: 16/9;
  background:   var(--bg-light);
}
.blog-card-img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform .5s ease;
  loading:    lazy;
}
.blog-card:hover .blog-card-img-wrap img { transform: scale(1.05); }
.blog-card-img-placeholder {
  width:      100%;
  height:     100%;
  display:    flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-pale), #d4edf9);
  color:      var(--primary-light);
  font-size:  2.5rem;
}
.blog-card-body {
  padding: 1.4rem 1.5rem 1.6rem;
  flex:    1;
  display: flex;
  flex-direction: column;
}
.blog-card-category {
  display:       inline-block;
  font-size:     .72rem;
  font-weight:   700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:         var(--accent);
  background:    var(--accent-pale);
  padding:       .25rem .75rem;
  border-radius: 50px;
  margin-bottom: .75rem;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.blog-card-category:hover { background: var(--accent); color: #fff; }
.blog-card-title {
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--primary);
  line-height: 1.35;
  margin-bottom: .55rem;
}
.blog-card-title a {
  color:      inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.blog-card-title a:hover { color: var(--accent); }
.blog-card-excerpt {
  font-size:   .9rem;
  color:       var(--text-mid);
  line-height: 1.65;
  flex:        1;
  margin-bottom: 1rem;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.blog-card-meta {
  display:    flex;
  align-items: center;
  gap:        .75rem;
  font-size:  .78rem;
  color:      var(--text-light);
  flex-wrap:  wrap;
  margin-bottom: .85rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.blog-card-meta i { color: var(--accent); }
.blog-card-tags {
  display:  flex;
  flex-wrap: wrap;
  gap:      .3rem;
  margin-bottom: 1rem;
}
.blog-tag-pill {
  font-size:     .7rem;
  font-weight:   600;
  background:    #eef4fb;
  color:         var(--primary-light);
  padding:       .2rem .6rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  border:     1px solid var(--border);
}
.blog-tag-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.blog-card-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      auto;
}
.blog-read-more {
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--accent);
  text-decoration: none;
  display:     inline-flex;
  align-items: center;
  gap:         .3rem;
  transition:  gap var(--transition), color var(--transition);
}
.blog-read-more:hover { color: var(--accent-light); gap: .55rem; }

/* ── BLOG CARD (List View) ─────────────────────────────────── */
.blog-card-list {
  background:    var(--bg-white);
  border-radius: var(--radius-md);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--border);
  transition:    transform var(--transition), box-shadow var(--transition);
  display:       flex;
  flex-direction: row;
  margin-bottom: 1.5rem;
}
.blog-card-list:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-md);
}
.blog-card-list .blog-card-img-wrap {
  width:       260px;
  min-width:   260px;
  aspect-ratio: auto;
  height:      auto;
  min-height:  200px;
}
.blog-card-list .blog-card-body { padding: 1.5rem 1.75rem; }
.blog-card-list .blog-card-excerpt { -webkit-line-clamp: 4; }

@media (max-width: 767px) {
  .blog-card-list {
    flex-direction: column;
  }
  .blog-card-list .blog-card-img-wrap {
    width:      100%;
    min-width:  0;
    aspect-ratio: 16/9;
    min-height: 0;
  }
}

/* ── View Toggle Buttons ───────────────────────────────────── */
.view-toggle .btn {
  padding:       .4rem .7rem;
  border:        1px solid var(--border);
  background:    var(--bg-white);
  color:         var(--text-mid);
  border-radius: var(--radius-sm);
  transition:    all var(--transition);
}
.view-toggle .btn.active,
.view-toggle .btn:hover {
  background: var(--primary);
  color:      #fff;
  border-color: var(--primary);
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.blog-sidebar { position: sticky; top: 88px; }

.sidebar-widget {
  background:    var(--bg-white);
  border-radius: var(--radius-md);
  border:        1px solid var(--border);
  padding:       1.5rem;
  margin-bottom: 1.5rem;
  box-shadow:    var(--shadow-sm);
}
.sidebar-widget-title {
  font-size:     1rem;
  font-weight:   700;
  color:         var(--primary);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--accent-pale);
  display:       flex;
  align-items:   center;
  gap:           .5rem;
}
.sidebar-widget-title i { color: var(--accent); }

/* Search Widget */
.sidebar-search-input {
  border:        1px solid var(--border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding:       .55rem .85rem;
  font-size:     .9rem;
  outline:       none;
  color:         var(--text-dark);
  background:    var(--bg-light);
  width:         100%;
}
.sidebar-search-input:focus { border-color: var(--accent); background: #fff; }
.sidebar-search-btn {
  background:    var(--accent);
  color:         #fff;
  border:        none;
  padding:       .55rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor:        pointer;
  transition:    background var(--transition);
}
.sidebar-search-btn:hover { background: var(--accent-light); }

/* Categories Widget */
.sidebar-cat-list { list-style: none; padding: 0; margin: 0; }
.sidebar-cat-list li {
  border-bottom: 1px solid var(--border);
  padding:       .5rem 0;
}
.sidebar-cat-list li:last-child { border-bottom: none; }
.sidebar-cat-list a {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  color:           var(--text-dark);
  font-size:       .9rem;
  text-decoration: none;
  transition:      color var(--transition);
}
.sidebar-cat-list a:hover { color: var(--accent); }
.sidebar-cat-list a.active { color: var(--accent); font-weight: 600; }
.cat-count {
  background:    var(--accent-pale);
  color:         var(--accent);
  font-size:     .72rem;
  font-weight:   700;
  padding:       .15rem .55rem;
  border-radius: 50px;
}

/* Recent Posts Widget */
.recent-post-item {
  display:     flex;
  gap:         .75rem;
  align-items: flex-start;
  padding:     .6rem 0;
  border-bottom: 1px solid var(--border);
}
.recent-post-item:last-child { border-bottom: none; }
.recent-post-thumb {
  width:         64px;
  min-width:     64px;
  height:        50px;
  border-radius: var(--radius-sm);
  overflow:      hidden;
  background:    var(--bg-light);
}
.recent-post-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.recent-post-thumb-placeholder {
  width:      100%;
  height:     100%;
  display:    flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-pale);
  color:      var(--accent);
  font-size:  1.1rem;
}
.recent-post-info a {
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--primary);
  text-decoration: none;
  line-height: 1.35;
  display:     block;
  transition:  color var(--transition);
}
.recent-post-info a:hover { color: var(--accent); }
.recent-post-date {
  font-size: .72rem;
  color:     var(--text-light);
  margin-top: .2rem;
}

/* Tags Cloud */
.tags-cloud {
  display:  flex;
  flex-wrap: wrap;
  gap:      .4rem;
}

/* ── DETAIL PAGE ───────────────────────────────────────────── */
.blog-detail-wrap { padding: 60px 0 80px; background: var(--bg-light); }

.blog-detail-card {
  background:    var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--border);
  overflow:      hidden;
}
.blog-detail-featured-img {
  width:       100%;
  max-height:  480px;
  object-fit:  cover;
  display:     block;
}
.blog-detail-body { padding: 2rem 2.5rem 2.5rem; }

@media (max-width: 767px) {
  .blog-detail-body { padding: 1.4rem 1.25rem 1.75rem; }
}

.blog-detail-category {
  display:       inline-block;
  font-size:     .72rem;
  font-weight:   700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:         var(--accent);
  background:    var(--accent-pale);
  padding:       .3rem .85rem;
  border-radius: 50px;
  text-decoration: none;
  margin-bottom: 1rem;
  transition: background var(--transition), color var(--transition);
}
.blog-detail-category:hover { background: var(--accent); color: #fff; }
.blog-detail-title {
  font-size:     clamp(1.5rem, 3vw, 2.2rem);
  font-weight:   700;
  color:         var(--primary);
  line-height:   1.25;
  margin-bottom: 1rem;
}
.blog-detail-meta {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1rem;
  font-size:  .85rem;
  color:      var(--text-light);
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.blog-detail-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.blog-detail-meta i    { color: var(--accent); }

/* Rich Content */
.blog-detail-content {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--text-dark);
}
.blog-detail-content h2, .blog-detail-content h3, .blog-detail-content h4 {
  font-family: var(--font-display);
  color:       var(--primary);
  margin-top:  2rem;
  margin-bottom: .75rem;
}
.blog-detail-content p      { margin-bottom: 1.1rem; }
.blog-detail-content ul, .blog-detail-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.1rem;
}
.blog-detail-content ul li, .blog-detail-content ol li { margin-bottom: .35rem; }
.blog-detail-content blockquote {
  border-left: 4px solid var(--accent);
  background:  var(--accent-pale);
  padding:     1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin:      1.5rem 0;
  font-style:  italic;
  color:       var(--text-mid);
}
.blog-detail-content img {
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-sm);
  margin:        1rem 0;
  max-width:     100%;
}
.blog-detail-content table {
  width:         100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
}
.blog-detail-content table th,
.blog-detail-content table td {
  border:  1px solid var(--border);
  padding: .6rem .85rem;
  text-align: left;
}
.blog-detail-content table th { background: var(--bg-light); font-weight: 700; color: var(--primary); }

/* Tags Section */
.blog-detail-tags { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.blog-detail-tags-label { font-size: .82rem; font-weight: 700; color: var(--text-mid); margin-bottom: .5rem; }

/* Social Share */
.social-share-section {
  padding:       1.5rem;
  background:    var(--bg-light);
  border-radius: var(--radius-md);
  margin-top:    1.5rem;
  border:        1px solid var(--border);
}
.social-share-title { font-size: .9rem; font-weight: 700; color: var(--text-mid); margin-bottom: .75rem; }
.social-share-btn {
  display:     inline-flex;
  align-items: center;
  gap:         .4rem;
  padding:     .45rem 1rem;
  border-radius: var(--radius-sm);
  font-size:   .82rem;
  font-weight: 600;
  text-decoration: none;
  transition:  opacity var(--transition), transform var(--transition);
  color:       #fff;
  border:      none;
  cursor:      pointer;
}
.social-share-btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; }
.social-share-btn.fb    { background: #1877F2; }
.social-share-btn.tw    { background: #1DA1F2; }
.social-share-btn.wa    { background: #25D366; }
.social-share-btn.li    { background: #0A66C2; }
.social-share-btn.copy  { background: var(--text-mid); }

/* Prev / Next Navigation */
.blog-nav-section {
  background:    var(--bg-white);
  border-radius: var(--radius-md);
  border:        1px solid var(--border);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  margin-top:    1.5rem;
}
.blog-nav-link {
  display:     block;
  padding:     1.1rem 1.4rem;
  text-decoration: none;
  color:       inherit;
  transition:  background var(--transition);
}
.blog-nav-link:hover { background: var(--bg-light); }
.blog-nav-direction {
  font-size:     .72rem;
  font-weight:   700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:         var(--accent);
  display:       flex;
  align-items:   center;
  gap:           .3rem;
  margin-bottom: .25rem;
}
.blog-nav-title {
  font-size:   .92rem;
  font-weight: 600;
  color:       var(--primary);
  line-height: 1.35;
}
.blog-nav-divider { width: 1px; background: var(--border); align-self: stretch; }

/* Related Posts */
.related-posts-section { margin-top: 3rem; }
.related-posts-section .section-label { font-size: .8rem; }
.related-post-card {
  background:    var(--bg-white);
  border-radius: var(--radius-md);
  border:        1px solid var(--border);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  transition:    transform var(--transition), box-shadow var(--transition);
}
.related-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related-post-img {
  width:       100%;
  aspect-ratio: 16/9;
  object-fit:  cover;
}
.related-post-img-placeholder {
  aspect-ratio: 16/9;
  display:     flex;
  align-items: center;
  justify-content: center;
  background:  linear-gradient(135deg, var(--accent-pale), #d4edf9);
  color:       var(--primary-light);
  font-size:   1.8rem;
}
.related-post-body { padding: 1rem 1.1rem 1.2rem; }
.related-post-title {
  font-size:   .95rem;
  font-weight: 700;
  color:       var(--primary);
  line-height: 1.35;
  margin-bottom: .4rem;
}
.related-post-title a { color: inherit; text-decoration: none; }
.related-post-title a:hover { color: var(--accent); }
.related-post-date { font-size: .75rem; color: var(--text-light); }

/* ── Enquiry Button ────────────────────────────────────────── */
.btn-blog-enquiry {
  background:    var(--accent);
  color:         #fff;
  border:        2px solid var(--accent);
  padding:       .65rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight:   600;
  font-size:     .95rem;
  display:       inline-flex;
  align-items:   center;
  gap:           .4rem;
  cursor:        pointer;
  transition:    all var(--transition);
  text-decoration: none;
}
.btn-blog-enquiry:hover {
  background:  var(--accent-light);
  border-color: var(--accent-light);
  color:       #fff;
  transform:   translateY(-1px);
  box-shadow:  0 4px 16px rgba(46,139,87,.3);
}

/* ── Pagination ────────────────────────────────────────────── */
.blog-pagination .page-link {
  color:         var(--primary);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  margin:        0 .2rem;
  padding:       .45rem .85rem;
  font-weight:   500;
  transition:    all var(--transition);
}
.blog-pagination .page-link:hover {
  background:    var(--primary);
  border-color:  var(--primary);
  color:         #fff;
}
.blog-pagination .page-item.active .page-link {
  background:    var(--accent);
  border-color:  var(--accent);
  color:         #fff;
}
.blog-pagination .page-item.disabled .page-link { opacity: .4; }

/* ── Empty State ───────────────────────────────────────────── */
.blog-empty-state {
  text-align: center;
  padding:    4rem 2rem;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border:     1px solid var(--border);
}
.blog-empty-state i { font-size: 3rem; color: var(--border); display: block; margin-bottom: 1rem; }
.blog-empty-state h4 { color: var(--primary); margin-bottom: .5rem; }
.blog-empty-state p  { color: var(--text-mid); font-size: .9rem; }

/* ── Active Filter Badge ───────────────────────────────────── */
.filter-badge {
  display:     inline-flex;
  align-items: center;
  gap:         .35rem;
  background:  var(--accent-pale);
  color:       var(--accent);
  border:      1px solid var(--accent);
  border-radius: 50px;
  padding:     .3rem .85rem;
  font-size:   .82rem;
  font-weight: 600;
  text-decoration: none;
  transition:  all var(--transition);
}
.filter-badge:hover { background: var(--accent); color: #fff; }
.filter-badge .bi-x { font-size: .9rem; }

/* ── Featured Badge ────────────────────────────────────────── */
.blog-featured-badge {
  position:      absolute;
  top:           .6rem;
  left:          .6rem;
  background:    var(--gold);
  color:         #fff;
  font-size:     .65rem;
  font-weight:   800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:       .22rem .65rem;
  border-radius: 50px;
  z-index:       2;
}

/* ── Enquiry Modal ─────────────────────────────────────────── */
#enquiryModal .modal-header {
  background:    var(--primary);
  color:         #fff;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
#enquiryModal .modal-header .btn-close { filter: invert(1); }
#enquiryModal .modal-title { font-family: var(--font-display); font-weight: 700; }
#enquiryModal .form-label   { font-weight: 600; font-size: .88rem; color: var(--text-dark); }
#enquiryModal .form-control {
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     .9rem;
  padding:       .55rem .85rem;
  transition:    border-color var(--transition);
}
#enquiryModal .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46,139,87,.12); }
#enquiryModal .modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.25rem; }