/* BLOG & INSIGHTS PAGE — page-specific tweaks on top of index.css's
   shared chrome (util-bar, header, canvas frame, buttons, footer, wa-btn). */

#blogs-hero { min-height: 52vh; padding: 160px 6% 50px; justify-content: center; }

@media (max-width: 768px) {
  #blogs-hero { padding: 100px 5% 36px; min-height: 50vh; }
}
#blogs-hero .hero-sub { margin: 14px auto 0; text-align: center; }

#cta { justify-content: center; }
.hero-ctas a.glow-btn { text-decoration: none; }

/* --- CATEGORY BADGE (shared by featured + grid cards) --- */
.blog-cat {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--btn-text);
  background: linear-gradient(135deg, var(--teal), var(--aqua));
  padding: 4px 10px; border-radius: 6px;
}
.blog-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

/* --- FEATURED POST --- */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.feat-photo { border: 1px solid var(--card-border); border-radius: 18px; overflow: hidden; }
.feat-photo img { width: 100%; display: block; }
.feat-body { display: flex; flex-direction: column; gap: 12px; }
.feat-body h2 { font-size: 1.6rem; color: var(--text); }
.feat-body p { color: var(--muted); }

/* --- ARTICLE GRID --- */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.blog-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 18px; overflow: hidden; transition: var(--ease);
  display: flex; flex-direction: column;
}
.blog-card:hover { border-color: rgba(var(--teal-rgb),0.4); transform: translateY(-4px); }
.blog-photo { height: 190px; overflow: hidden; }
.blog-photo img { width: 100%; height: 100%; object-fit: cover; transition: var(--ease); }
.blog-card:hover .blog-photo img { transform: scale(1.05); }
.blog-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.blog-body h3 { font-size: 1.02rem; color: var(--text); margin-top: 4px; line-height: 1.35; }
.blog-body p { font-size: 0.88rem; color: var(--muted); }

.blog-empty {
  display: none; text-align: center; color: var(--muted); margin-top: 30px; font-size: 0.9rem;
}
.blog-empty.show { display: block; }

/* --- NEWSLETTER --- */
.newsletter-box {
  display: flex; justify-content: space-between; align-items: center; gap: 30px;
  flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--card-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 20px; padding: 36px 40px;
}
.newsletter-box h2 { font-size: 1.4rem; color: var(--text); margin-top: 6px; }
.newsletter-box p { color: var(--muted); margin-top: 6px; font-size: 0.9rem; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input {
  background: rgba(255,255,255,0.7); border: 1px solid var(--card-border); border-radius: 40px;
  padding: 12px 20px; color: var(--text); font-size: 0.9rem; min-width: 220px;
}
.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form button.glow-btn { white-space: nowrap; }

.newsletter-note {
  display: none; margin-top: 16px; text-align: center; font-size: 13px; color: var(--aqua);
  border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 16px;
  background: rgba(var(--teal-rgb), 0.08);
}
.newsletter-note.show { display: block; }

@media (max-width: 1100px) {
  .blog-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .feat-grid { grid-template-columns: 1fr; }
  .newsletter-box { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
}