/* blog.css */
.blog-notify-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; background: white; border-radius: 999px; padding: 8px 18px; font-size: 0.82rem; color: var(--muted); box-shadow: 0 3px 0 var(--btn-light); border: 1px solid rgba(8,38,87,0.1); }
.notify-link { color: var(--btn-dark); font-weight: 700; text-decoration: none; }
.notify-link:hover { text-decoration: underline; }

.blog-section { padding: var(--section-pad); }
.blog-filters-wrap { margin-bottom: 36px; }
.blog-filters { display: flex; gap: 10px; flex-wrap: wrap; }

/* 3D filter buttons — dark+light, always readable, hover highlights */
.filter-btn {
  padding: 9px 22px; border-radius: 999px;
  background: var(--btn-dark); color: rgb(5, 5, 5);
  border: none; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--btn-light);
  opacity: 0.45;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.15s;
}
.filter-btn.active { opacity: 1; transform: translateY(2px); box-shadow: 0 3px 0 var(--btn-light); }
.filter-btn:hover { opacity: 1; transform: translateY(2px); box-shadow: 0 3px 0 var(--btn-light); }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.blog-card {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 7px 0 var(--btn-light), 0 14px 32px rgba(86,204,242,0.1);
  border: 1.5px solid rgba(8,38,87,0.07);
  transition: transform 0.2s, box-shadow 0.2s; position: relative; background: white;
}
.blog-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--btn-dark), var(--btn-light)); }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 12px 0 var(--btn-light), 0 22px 44px rgba(86,204,242,0.14); }
.blog-card.featured-post { position: relative; }
.blog-card.featured-post::after {
  content: '✦ recently added';
  position: absolute;
  top: 12px; right: 12px;
  background: linear-gradient(135deg, var(--btn-fill), var(--btn-shadow));
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 2;
}
.blog-card-inner { padding: 28px; }
.blog-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.blog-tag { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; }
.blog-tag.placement { background: rgba(8,38,87,0.08); color: var(--btn-dark); }
.blog-tag.building { background: #e8f8ff; color: #0077aa; }
.blog-tag.thoughts { background: #fff0f8; color: #aa0066; }
.blog-tag.tech { background: #e8fff0; color: #007744; }
.blog-date, .blog-read { font-size: 0.78rem; color: var(--muted); }
.blog-card h2 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-dark); margin-bottom: 10px; line-height: 1.4; }
.blog-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.read-more { font-size: 0.85rem; color: var(--btn-dark); font-weight: 700; text-decoration: none; }
.read-more:hover { text-decoration: underline; }
.empty-state { text-align: center; padding: 40px; color: var(--muted); font-size: 0.95rem; }

.newsletter-section { padding: var(--section-pad); display: flex; justify-content: center; }
.newsletter-box { background: var(--btn-dark); color: white; border-radius: var(--radius); padding: 48px 40px; max-width: 580px; width: 100%; text-align: center; box-shadow: 0 10px 0 var(--btn-light), 0 20px 48px rgba(86,204,242,0.15); }
.newsletter-icon { font-size: 2rem; display: block; margin-bottom: 12px; }
.newsletter-box h2 { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 10px; }
.newsletter-box p { font-size: 0.92rem; opacity: 0.85; margin-bottom: 24px; line-height: 1.6; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.email-input { flex: 1; min-width: 220px; padding: 12px 18px; border-radius: 999px; border: none; font-family: var(--font-body); font-size: 0.9rem; outline: none; }
.newsletter-note { font-size: 0.75rem; opacity: 0.6; }

/* ===== BLOG TARGETED FIXES ===== */
/* Filter buttons — fully visible dark 3D */
.filter-btn {
  background: var(--btn-dark) !important;
  color: black !important;
  box-shadow: 0 5px 0 var(--btn-light) !important;
  opacity: 0.5 !important;
  transition: opacity 0.15s, transform 0.12s, box-shadow 0.12s !important;
}
.filter-btn.active, .filter-btn:hover {
  opacity: 1 !important;
  transform: translateY(2px) !important;
  box-shadow: 0 3px 0 var(--btn-light) !important;
}

/* Newsletter box — fix email input */
.newsletter-box {
  background: var(--btn-dark) !important;
}
.newsletter-form {
  flex-direction: column;
  align-items: center;
}
.email-input {
  width: 100%; max-width: 340px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 54, 71, 0.5);
}

/* Blog cards — identical charcoal shadow + border for both featured and normal */
.blog-card,
.blog-card.featured-post {
  box-shadow: 0 7px 0 var(--shadow-charcoal), 0 14px 32px rgba(35,60,102,0.15) !important;
  border: 1.5px solid var(--btn-shadow) !important;
}
.blog-card:hover,
.blog-card.featured-post:hover {
  box-shadow: 0 12px 0 var(--shadow-charcoal), 0 22px 44px rgba(35,60,102,0.2) !important;
}