/* News & blog pages (neo_site/blogs.php, blogs-details.php) - builds on style.css */

/* ---------------- List */
.blog-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.blog-filters a {
  border: 2px solid var(--bg-navyblue);
  color: var(--bg-navyblue);
  border-radius: 999px;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 600;
}
.blog-filters a:hover { background: #f0f1f7; color: var(--bg-navyblue); }
.blog-filters a.active { background: var(--bg-navyblue); color: var(--white); }
.blog-filter-note { font-size: 14px; color: #6b7080; margin: -6px 0 16px; }
.blog-filter-note a { color: var(--bg-navyblue); text-decoration: underline; }

.blog-section .blog-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #eef0f4; }
.blog-type-badge {
  display: inline-block;
  margin-left: 8px;
  background: rgba(192, 8, 183, 0.1);
  color: rgba(192, 8, 183, 0.95);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 700;
}
.blog-section .post-date { flex-wrap: wrap; gap: 6px 14px; }

.blog-empty { text-align: center; padding: 48px 20px; color: #6b7080; border: 1px dashed #d9dce5; border-radius: 14px; }
.blog-empty .mdi { font-size: 48px; color: #c5c9d6; display: block; margin-bottom: 6px; }
.blog-empty h4 { color: #1f2233; font-weight: 700; }
.blog-empty a { color: var(--bg-navyblue); font-weight: 600; text-decoration: underline; }

.blog-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 14px; color: #6b7080; }
.blog-pagination a { color: var(--bg-navyblue); font-weight: 600; border: 2px solid var(--bg-navyblue); border-radius: 999px; padding: 6px 16px; }
.blog-pagination a:hover { background: var(--bg-navyblue); color: var(--white); }

/* ---------------- Sidebar */
.blog-search .form-control { border-radius: 999px 0 0 999px; border-right: 0; min-height: 42px; }
.blog-search .btn { border: 1px solid #ced4da; border-left: 0; border-radius: 0 999px 999px 0; background: var(--white); color: var(--bg-navyblue); }
.blog-categories { list-style: none; padding: 0; margin: 0; }
.blog-categories li { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid #f0f1f5; font-size: 14px; }
.blog-categories li a:hover { color: var(--bg-navyblue); text-decoration: underline; }
.blog-categories li span { color: #6b7080; font-size: 13px; }
.popular-blog-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------------- Article */
.blog-single-img img { width: 100%; max-height: 460px; object-fit: cover; }
.blog-single-title { font-size: 2rem; font-weight: 700; color: #1f2233; line-height: 1.25; margin: 8px 0 12px; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #6b7080; font-size: 14px; padding-bottom: 16px; border-bottom: 1px solid #f0f1f5; margin-bottom: 22px; }
.blog-meta .mdi { margin-right: 4px; }

.post-content { font-size: 17px; line-height: 1.75; color: #2b2e3c; overflow-wrap: break-word; }
.post-content p { margin: 0 0 1.1em; padding: 0; }
.post-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.6em 0 0.6em; color: #1f2233; }
.post-content h3 { font-size: 1.25rem; font-weight: 700; margin: 1.4em 0 0.5em; color: #1f2233; }
.post-content h4, .post-content h5, .post-content h6 { font-weight: 700; margin: 1.2em 0 0.5em; }
.post-content ul, .post-content ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.post-content li { margin-bottom: 0.35em; }
.post-content a { color: var(--bg-navyblue); text-decoration: underline; }
.post-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 0.6em 0; }
.post-content img[style*="float: left"] { margin-right: 1.2em; }
.post-content img[style*="float: right"] { margin-left: 1.2em; }
.post-content iframe, .post-content video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; margin: 1em 0; background: #000; }
.post-content blockquote {
  border-left: 4px solid rgba(192, 8, 183, 0.8);
  background: #f7f8fb;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 1.4em 0;
}
.post-content blockquote > :last-child { margin-bottom: 0; }
.post-content pre { background: #1f2233; color: #f7f8fb; padding: 14px 16px; border-radius: 10px; overflow-x: auto; font-size: 14px; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 15px; display: block; overflow-x: auto; }
.post-content th, .post-content td { border: 1px solid #e6e8ee; padding: 8px 10px; }
.post-content th { background: #f7f8fb; }
.post-content hr { border-top: 1px solid #e6e8ee; margin: 2em 0; }

.blog-share-links a { font-size: 20px; color: var(--bg-navyblue); }
.blog-share-links a:hover { color: rgba(192, 8, 183, 0.9); }

.blog-preview-banner {
  background: #fff8e6;
  border: 1px solid #ffe2a6;
  color: #7a5200;
  border-radius: 12px;
  padding: 10px 16px;
  margin: 0 15px 18px;
  font-size: 14px;
}
.blog-preview-banner a { color: #7a5200; font-weight: 700; text-decoration: underline; margin-left: 6px; }

.blog-more { margin-top: 30px; padding-top: 20px; border-top: 1px solid #f0f1f5; }
.blog-more h4 { font-weight: 700; margin-bottom: 14px; color: #1f2233; }
.blog-more-card { display: block; }
.blog-more-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: #eef0f4; }
.blog-more-date { display: block; font-size: 12.5px; color: #6b7080; margin-top: 8px; }
.blog-more-title { display: block; font-weight: 600; line-height: 1.35; color: #1f2233; }
.blog-more-card:hover .blog-more-title { color: var(--bg-navyblue); text-decoration: underline; }

@media (max-width: 575.98px) {
  .blog-single-title { font-size: 1.5rem; }
  .post-content { font-size: 16px; }
}

/* style.css makes every link in .blog-single-desc 38px bold (it was meant for the old title link): keep links inside
   the post and the category label at normal text size */
.blog-single-desc .post-content a { font-size: inherit; font-weight: inherit; color: var(--bg-navyblue); text-decoration: underline; }
.blog-single-desc .post-cat a { font-size: 14px; font-weight: 600; }

/* Sidebar search must fit its column */
.blog-search .input-group { flex-wrap: nowrap; width: 100%; min-width: 0; } /* sengine-v2.css gives every .input-group min-width: 550px */
.blog-search .form-control { width: 1%; flex: 1 1 auto; min-width: 0; }