/* ═══════════════════════════════════════
   BLOG PAGE — blog.css
   Save to: clicklink-website/css/blog.css
═══════════════════════════════════════ */

/* ── HERO ── */
.blg-hero {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.blg-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/blog-hero.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  animation: blgHeroZoom 18s ease-in-out infinite alternate;
}
@keyframes blgHeroZoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.09); }
}
.blg-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0,20,45,0.92) 0%, rgba(0,40,80,0.80) 55%, rgba(0,20,50,0.55) 100%);
}
.blg-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(90px,13vw,130px) clamp(20px,5vw,56px) clamp(60px,8vw,90px);
  display: flex;
  align-items: center;
  gap: clamp(32px,5vw,72px);
}
.blg-hero-left {
  flex: 1;
  min-width: 0;
}
.blg-hero-right {
  flex-shrink: 0;
  width: clamp(280px,34vw,380px);
}
.blg-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 30px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.blg-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #e00611; }
.blg-pill span { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.75); }
.blg-hero-title {
  font-size: clamp(28px,4.5vw,50px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.blg-hero-title span { color: #e00611; }
.blg-hero-desc {
  font-size: clamp(13px,1.4vw,15px);
  color: rgba(255,255,255,.75);
  line-height: 1.85;
  max-width: 100%;
  word-wrap: break-word;
  margin-bottom: 28px;
}
.blg-hero-stats {
  display: flex;
  align-items: center;
  gap: clamp(14px,2.5vw,28px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  flex-wrap: wrap;
}
.blg-hero-stat { display: flex; flex-direction: column; gap: 2px; }
.blg-hero-stat-n { font-size: clamp(16px,2.2vw,22px); font-weight: 800; color: #fff; }
.blg-hero-stat-l { font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 1px; }
.blg-hero-stat-div { width: 1px; height: 30px; background: rgba(255,255,255,.15); flex-shrink: 0; }

/* search box on right side */
.blg-search-box {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 24px;
}
.blg-search-box-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.blg-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.blg-search-input {
  width: 100%;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: 13px 36px 13px 16px;
  color: #fff;
  font-size: 13px;
  font-family: 'Sora', sans-serif;
  outline: none;
  transition: border-color .2s, background .2s;
  box-sizing: border-box;
}
.blg-search-input::placeholder { color: rgba(255,255,255,.38); }
.blg-search-input:focus { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.2); }
.blg-search-clear {
  position: absolute;
  right: 10px;
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blg-search-cats {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.blg-sq-tag {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .18s;
  letter-spacing: .5px;
}
.blg-sq-tag:hover { background: #e00611; border-color: #e00611; color: #fff; }

/* ── RESPONSIVE HERO ── */
@media(max-width:768px){
  .blg-hero-inner { flex-direction: column; gap: 28px; }
  .blg-hero-right { width: 100%; }
  .blg-hero-stats .blg-hero-stat-div { display: none; }
}

/* ── SECTION INNER ── */
.blg-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px,5vw,56px);
}

/* ── FEATURED POST ── */
.blg-featured-wrap {
  padding: clamp(32px,5vw,52px) 0;
}
.blg-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid #dde4ef;
  cursor: pointer;
  transition: box-shadow .25s, transform .25s;
  background: #fff;
}
.blg-featured:hover { box-shadow: 0 16px 48px rgba(0,45,89,.12); transform: translateY(-3px); }
.blg-featured-img {
  position: relative;
  min-height: 340px;
  overflow: hidden;
}
.blg-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blg-featured:hover .blg-featured-img img { transform: scale(1.04); }
.blg-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,20,45,.3), transparent);
}
.blg-featured-label {
  position: absolute;
  top: 16px; left: 16px;
  background: #e00611;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
}
.blg-featured-body {
  padding: clamp(24px,4vw,40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.blg-featured-title {
  font-size: clamp(18px,2.2vw,24px);
  font-weight: 800;
  color: #002d59;
  line-height: 1.3;
}
.blg-featured-excerpt {
  font-size: 13px;
  color: #5a6a82;
  line-height: 1.75;
  word-wrap: break-word;
}
.blg-featured-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.blg-author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#002d59,#004a94);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.blg-author-name { font-size: 12px; font-weight: 700; color: #002d59; }
.blg-post-date   { font-size: 11px; color: #5a6a82; margin-top: 2px; }
.blg-read-btn {
  background: #e00611;
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  align-self: flex-start;
  transition: background .2s;
}
.blg-read-btn:hover { background: #c0050e; }

/* ── CATEGORY FILTER ── */
.blg-filter-section { padding: 0 0 8px; }
.blg-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0 20px;
  border-bottom: 1px solid #dde4ef;
}
.blg-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.blg-cat-pill {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid #dde4ef;
  font-size: 11px;
  font-weight: 600;
  color: #5a6a82;
  background: #fff;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  transition: all .18s;
  white-space: nowrap;
}
.blg-cat-pill:hover { border-color: #004a94; color: #004a94; }
.blg-cat-pill.active { background: #002d59; color: #fff; border-color: #002d59; }
.blg-post-count { font-size: 12px; color: #5a6a82; font-weight: 600; white-space: nowrap; }
.blg-post-count span { color: #002d59; font-weight: 800; }

/* ── CATEGORY TAG COLORS ── */
.blg-cat-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.cat-seo       { background: #e6f1fb; color: #004a94; }
.cat-web       { background: #f0fdf4; color: #166534; }
.cat-mobile    { background: #fdf4ff; color: #7e22ce; }
.cat-marketing { background: #fff7ed; color: #92400e; }
.cat-design    { background: #fef9c3; color: #854d0e; }
.cat-business  { background: #fef2f2; color: #991b1b; }

/* ── BLOG GRID ── */
.blg-grid-section { padding: clamp(24px,4vw,40px) 0 clamp(40px,6vw,64px); }
.blg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap: 22px;
}
.blg-card {
  background: #fff;
  border: 1.5px solid #dde4ef;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all .25s;
}
.blg-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,45,89,.1); border-color: #b0c4de; }
.blg-card.hidden { display: none; }
.blg-card-thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.blg-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blg-card:hover .blg-card-thumb img { transform: scale(1.05); }
.blg-card-cat-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-block;
  width: auto;
  max-width: fit-content;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  color: #fff;
  z-index: 2;
}
.blg-card-body { padding: 18px; }
.blg-card-title {
  font-size: clamp(13px,1.5vw,15px);
  font-weight: 800;
  color: #002d59;
  line-height: 1.4;
  margin-bottom: 8px;
}
.blg-card-excerpt {
  font-size: 12px;
  color: #5a6a82;
  line-height: 1.7;
  margin-bottom: 12px;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blg-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #5a6a82;
  flex-wrap: wrap;
}
.blg-card-date { font-weight: 600; }
.blg-meta-dot { color: #b0bcc8; }
.blg-no-results {
  text-align: center;
  padding: 60px 20px;
  color: #5a6a82;
}
.blg-no-results h3 { font-size: 18px; font-weight: 800; color: #002d59; margin-bottom: 8px; }

/* ── NEWSLETTER ── */
.blg-newsletter {
  background: linear-gradient(135deg, #002d59, #001a38);
  padding: clamp(28px,4vw,44px) 0;
}
.blg-newsletter-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.blg-newsletter-text { flex: 1; min-width: 200px; }
.blg-newsletter-text h2 { font-size: clamp(14px,2vw,18px); font-weight: 800; color: #fff; margin-bottom: 4px; line-height: 1.3; }
.blg-newsletter-text p  { font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.6; }
.blg-nl-fields {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.blg-nl-input {
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 12px;
  font-family: 'Sora', sans-serif;
  outline: none;
  width: 170px;
  transition: border-color .2s;
}
.blg-nl-input::placeholder { color: rgba(255,255,255,.35); }
.blg-nl-input:focus { border-color: rgba(255,255,255,.5); }
.blg-nl-btn {
  background: #e00611;
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  white-space: nowrap;
  transition: background .2s;
}
.blg-nl-btn:hover { background: #c0050e; }
.blg-nl-success { font-size: 12px; font-weight: 700; color: #4ade80; }
@media(max-width:600px){
  .blg-nl-fields { width: 100%; flex-direction: column; }
  .blg-nl-input, .blg-nl-btn { width: 100%; }
}

/* ═══════════════════════════════
   POST READER VIEW
═══════════════════════════════ */
.blg-post-topbar {
  position: sticky;
  top: 68px;
  background: #fff;
  border-bottom: 1px solid #dde4ef;
  padding: 12px clamp(16px,5vw,56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  flex-wrap: wrap;
  gap: 10px;
}
.blg-back-btn {
  background: none;
  border: 1.5px solid #dde4ef;
  color: #002d59;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  transition: all .18s;
}
.blg-back-btn:hover { background: #f0f4fa; }
.blg-post-topbar-right { display: flex; align-items: center; gap: 8px; }
.blg-share-label { font-size: 11px; color: #5a6a82; font-weight: 600; }
.blg-share-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #dde4ef;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #002d59;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
}
.blg-share-btn:hover { background: #002d59; color: #fff; border-color: #002d59; }

/* ── POST ARTICLE ── */
.blg-post-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px,5vw,56px) clamp(16px,5vw,40px);
}
.blg-post-hero-img {
  width: 100%;
  height: clamp(220px,40vw,460px);
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 32px;
}
.blg-post-cat { margin-bottom: 12px; }
.blg-post-title {
  font-size: clamp(22px,4vw,36px);
  font-weight: 800;
  color: #002d59;
  line-height: 1.2;
  margin-bottom: 16px;
}
.blg-post-meta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dde4ef;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.blg-post-author-wrap { display: flex; align-items: center; gap: 10px; }
.blg-post-meta-info { font-size: 12px; color: #5a6a82; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.blg-post-meta-div  { color: #dde4ef; }

/* ── ARTICLE BODY TYPOGRAPHY ── */
.blg-post-body {
  font-family: 'Merriweather', Georgia, serif;
  font-size: clamp(15px,1.6vw,17px);
  color: #2a3547;
  line-height: 1.95;
  word-wrap: break-word;
}
.blg-post-body h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(18px,2.5vw,22px);
  font-weight: 800;
  color: #002d59;
  margin: 36px 0 14px;
  line-height: 1.3;
}
.blg-post-body h3 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(16px,2vw,18px);
  font-weight: 700;
  color: #002d59;
  margin: 28px 0 10px;
}
.blg-post-body p { margin-bottom: 20px; }
.blg-post-body ul, .blg-post-body ol {
  padding-left: 24px;
  margin-bottom: 20px;
}
.blg-post-body li { margin-bottom: 8px; }
.blg-post-body strong { color: #002d59; font-weight: 700; }
.blg-post-body blockquote {
  border-left: 4px solid #e00611;
  padding: 16px 20px;
  background: #f8fafd;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
  font-style: italic;
  color: #3a4a5c;
}
.blg-post-body a { color: #e00611; font-weight: 600; }
.blg-post-tip {
  background: linear-gradient(135deg,#e6f1fb,#f0f8ff);
  border-left: 4px solid #004a94;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 24px 0;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  color: #002d59;
  line-height: 1.7;
}
.blg-post-tip strong { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 6px; color: #004a94; }

/* ── POST TAGS ── */
.blg-post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid #dde4ef;
  margin-top: 32px;
}
.blg-post-tag {
  background: #f0f4fa;
  color: #002d59;
  border: 1px solid #dde4ef;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

/* ── RELATED POSTS ── */
.blg-related {
  background: #f8fafd;
  padding: 28px clamp(16px,5vw,40px);
  border-top: 1px solid #dde4ef;
  max-width: 820px;
  margin: 0 auto;
  border-radius: 0 0 16px 16px;
}
.blg-related-title { font-size: 14px; font-weight: 800; color: #002d59; margin-bottom: 16px; }
.blg-related-grid  { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; }
.blg-related-card  { background: #fff; border-radius: 12px; border: 1px solid #dde4ef; overflow: hidden; cursor: pointer; transition: all .2s; }
.blg-related-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,45,89,.08); }
.blg-related-card img { width: 100%; height: 100px; object-fit: cover; }
.blg-related-card-body { padding: 10px 12px; }
.blg-related-card-title { font-size: 11px; font-weight: 700; color: #002d59; line-height: 1.4; margin-bottom: 4px; }
.blg-related-card-date  { font-size: 10px; color: #5a6a82; }

/* ═══════════════════════════════
   COMMENTS SECTION
═══════════════════════════════ */
.blg-comments-section {
  background: #f8fafd;
  border-top: 1px solid #dde4ef;
  padding: clamp(28px,5vw,48px) 0;
}
.blg-comments-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(16px,5vw,40px);
}
.blg-comments-header { margin-bottom: 24px; }
.blg-comments-title {
  font-size: 18px;
  font-weight: 800;
  color: #002d59;
}

/* SINGLE COMMENT */
.blg-comment-item {
  background: #fff;
  border: 1px solid #dde4ef;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.blg-comment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.blg-comment-author-row { display: flex; align-items: center; gap: 10px; }
.blg-comment-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,#002d59,#004a94);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.blg-comment-name { font-size: 13px; font-weight: 700; color: #002d59; }
.blg-comment-org  { font-size: 11px; color: #5a6a82; margin-top: 1px; }
.blg-comment-date { font-size: 10px; color: #b0bcc8; white-space: nowrap; }
.blg-comment-text { font-size: 13px; color: #3a4a5c; line-height: 1.7; word-wrap: break-word; }

/* ADMIN REPLY */
.blg-comment-reply {
  background: #f0f7ff;
  border-left: 3px solid #004a94;
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  margin-top: 12px;
}
.blg-reply-label { font-size: 10px; font-weight: 800; color: #004a94; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.blg-reply-text  { font-size: 12px; color: #2a3547; line-height: 1.6; }

/* COMMENT FORM */
.blg-comment-form-wrap {
  background: #fff;
  border: 1.5px solid #dde4ef;
  border-radius: 16px;
  padding: clamp(20px,3vw,28px);
  margin-top: 28px;
}
.blg-comment-form-title {
  font-size: 15px;
  font-weight: 800;
  color: #002d59;
  margin-bottom: 18px;
}
.blg-cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media(max-width:520px){ .blg-cform-row { grid-template-columns: 1fr; } }
.blg-cform-group { margin-bottom: 0; }
.blg-cform-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #5a6a82;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.blg-cform-input {
  width: 100%;
  background: #f8fafd;
  border: 1.5px solid #dde4ef;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  font-family: 'Sora', sans-serif;
  color: #002d59;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.blg-cform-input::placeholder { color: #b0bcc8; }
.blg-cform-input:focus { border-color: #004a94; }
.blg-cform-textarea { resize: vertical; min-height: 100px; margin-bottom: 14px; display: block; }
.blg-comment-submit {
  background: #002d59;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  transition: background .2s;
}
.blg-comment-submit:hover { background: #e00611; }
.blg-comment-posted {
  margin-top: 12px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 700;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 10px 14px;
  border-radius: 8px;
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .blg-featured { grid-template-columns: 1fr; }
  .blg-featured-img { min-height: 220px; }
  .blg-hero-inner { flex-direction: column; }
  .blg-hero-search { width: 100%; }
  .blg-grid { grid-template-columns: 1fr; }
  .blg-newsletter-inner { flex-direction: column; }
  .blg-newsletter-form { width: 100%; }
  .blg-nl-input { width: 100%; }
}
@media(max-width:480px){
  .blg-post-topbar { flex-direction: column; align-items: flex-start; }
  .blg-filter-bar  { flex-direction: column; align-items: flex-start; }
}

/* ── AI & TECH CATEGORY ── */
.cat-tech { background: linear-gradient(135deg, #002d59, #004a94); color: #fff; }
.blg-cat-pill[data-cat="tech"].active { background: #004a94; color: #fff; border-color: #004a94; }

/* ── BLOG CARD THUMBNAIL (CSS gradient style) ── */
.blg-card-thumb {
  position: relative;
  overflow: hidden;
  min-height: 190px;
}
.blg-card-thumb > div:first-child { min-height: 190px; }
.blg-card-cat-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-block; width: auto; max-width: fit-content;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 12px; color: #fff;
  text-transform: uppercase; z-index: 2;
}

/* ── SHARE BUTTONS ── */
.blg-share-btn { border-radius: 6px !important; color: #fff !important; font-weight: 800; }