/* ============================================================
   adserve — Blog styles (On Air)
   Used by Flask-rendered /blog/ and /blog/<slug> pages only
   ============================================================ */

/* ---------- Hero animation (reuse from pages.css pattern) ---------- */
@keyframes blogHeroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero .hero-animate {
  animation: blogHeroFadeUp 0.75s var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}

/* ---------- Blog badge / category label ---------- */
.blog-badge {
  display: inline-block;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--orange-100, #FFF7ED);
  color: var(--orange-600, #C2410C);
}
.blog-badge--hero {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-4, 1rem);
}
.blog-badge--announcement {
  background: var(--navy-100, #E0E7FF);
  color: var(--navy-700, #3730A3);
}
.blog-badge--hero.blog-badge--announcement {
  background: rgba(99,102,241,0.25);
  color: rgba(255,255,255,0.9);
}

/* ---------- Press release dateline ---------- */
.pr-dateline {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: var(--gray-50, #F9FAFB);
  border-left: 3px solid var(--indigo-500, #6366F1);
  border-radius: 0 6px 6px 0;
  margin-bottom: var(--space-8, 2rem);
  font-size: var(--text-sm, 0.875rem);
}
.pr-dateline__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo-600, #4F46E5);
  font-size: var(--text-xs, 0.75rem);
}
.pr-dateline__date {
  color: var(--gray-500, #6B7280);
}

.blog-date {
  font-size: var(--text-sm, 0.875rem);
  color: var(--gray-400, #9CA3AF);
}

/* ---------- Featured post ---------- */
.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: var(--radius-2xl, 1.25rem);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-lg);
  transition: box-shadow 0.2s, transform 0.2s;
  margin-bottom: var(--space-6, 1.5rem);
}
.blog-featured:hover {
  box-shadow: 0 24px 64px rgba(30,41,84,0.14);
  transform: translateY(-3px);
}
.blog-featured__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
}
.blog-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  transition: transform 0.4s;
}
.blog-featured:hover .blog-featured__image img { transform: scale(1.04); }
.blog-featured__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  color: var(--indigo-400, #818CF8);
}
.blog-featured__body {
  padding: var(--space-10, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-5, 1.25rem);
}
.blog-featured__title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--gray-900, #111827);
  margin: 0 0 var(--space-4, 1rem);
}
.blog-featured__excerpt {
  font-size: var(--text-base, 1rem);
  color: var(--gray-500, #6B7280);
  line-height: var(--leading-relaxed, 1.6);
  margin: 0 0 var(--space-6, 1.5rem);
}
.blog-featured__cta {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--orange-500, #F97316);
}

/* ---------- Post grid ---------- */
.blog-grid__heading {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--space-8, 2rem);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7, 1.75rem);
}

/* ---------- Blog card ---------- */
.blog-card {
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: var(--radius-xl, 1rem);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
  border-top: 3px solid var(--orange-500, #F97316);
}
.blog-card:hover {
  box-shadow: 0 16px 40px rgba(30,41,84,0.12);
  transform: translateY(-4px);
}
.blog-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.blog-card:hover .blog-card__image img { transform: scale(1.05); }
.blog-card__placeholder {
  width: 100%;
  height: 100%;
  min-height: 150px;
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--indigo-400, #818CF8);
}
.blog-card__body {
  padding: var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 0.75rem);
}
.blog-card__title {
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  color: var(--gray-900, #111827);
  line-height: 1.35;
  margin: 0 0 var(--space-3, 0.75rem);
  flex: 1;
}
.blog-card__excerpt {
  font-size: var(--text-sm, 0.875rem);
  color: var(--gray-500, #6B7280);
  line-height: var(--leading-relaxed, 1.6);
  margin: 0 0 var(--space-4, 1rem);
}
.blog-card__link {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--orange-500, #F97316);
  margin-top: auto;
}

/* ---------- Single post layout ---------- */
.blog-layout {
  max-width: 720px;
  margin: 0 auto;
}
.blog-breadcrumb { margin-bottom: var(--space-4, 1rem); }
.blog-breadcrumb__link {
  font-size: var(--text-sm, 0.875rem);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.blog-breadcrumb__link:hover { color: rgba(255,255,255,0.9); }
.blog-post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  margin-top: var(--space-3, 0.75rem);
  opacity: 0.65;
}
.blog-hero-image {
  border-radius: var(--radius-xl, 1rem);
  overflow: hidden;
  margin-bottom: var(--space-10, 2.5rem);
  box-shadow: var(--shadow-lg);
}
.blog-hero-image img {
  width: 100%;
  display: block;
  max-height: 480px;
  object-fit: cover;
}

/* ---------- Post prose body ---------- */
.blog-prose {
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.8;
  color: var(--gray-700, #374151);
  margin-bottom: var(--space-12, 3rem);
}
.blog-prose h1, .blog-prose h2, .blog-prose h3, .blog-prose h4 {
  color: var(--gray-900, #111827);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 1.75em 0 0.6em;
  line-height: 1.25;
}
.blog-prose h1 { font-size: 1.875rem; }
.blog-prose h2 { font-size: 1.5rem; }
.blog-prose h3 { font-size: 1.25rem; }
.blog-prose h4 { font-size: 1.125rem; }
.blog-prose p { margin: 0 0 1.25em; }
.blog-prose a { color: var(--orange-500, #F97316); }
.blog-prose a:hover { color: var(--orange-600, #EA580C); }
.blog-prose ul, .blog-prose ol {
  padding-left: 1.5em;
  margin: 0 0 1.25em;
}
.blog-prose li { margin-bottom: 0.5em; }
.blog-prose blockquote {
  border-left: 4px solid var(--orange-400, #FB923C);
  margin: 2em 0;
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  background: var(--orange-50, #FFF7ED);
  border-radius: 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0;
  font-style: italic;
  color: var(--gray-600, #4B5563);
}
.blog-prose blockquote p { margin: 0; }
.blog-prose code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.875em;
  background: var(--gray-100, #F3F4F6);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--gray-800);
}
.blog-prose pre {
  background: var(--gray-900, #111827);
  color: var(--gray-100, #F3F4F6);
  padding: var(--space-6, 1.5rem);
  border-radius: var(--radius-lg, 0.75rem);
  overflow-x: auto;
  margin: 0 0 1.5em;
}
.blog-prose pre code { background: none; padding: 0; color: inherit; font-size: 0.875rem; }
.blog-prose hr {
  border: none;
  border-top: 1px solid var(--gray-200, #E5E7EB);
  margin: 2.5em 0;
}
.blog-prose img { max-width: 100%; border-radius: var(--radius-lg, 0.75rem); margin: 1em 0; }
.blog-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: var(--text-sm); }
.blog-prose th, .blog-prose td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--gray-200); text-align: left; }
.blog-prose th { font-weight: 700; color: var(--gray-900); background: var(--gray-50); }

/* ---------- Voting widget ---------- */
.blog-vote {
  display: flex;
  align-items: center;
  gap: var(--space-5, 1.25rem);
  padding: var(--space-6, 1.5rem) var(--space-8, 2rem);
  background: var(--gray-50, #F9FAFB);
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: var(--radius-xl, 1rem);
  margin-bottom: var(--space-8, 2rem);
  flex-wrap: wrap;
}
.blog-vote__label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--gray-600, #4B5563);
  margin: 0;
  white-space: nowrap;
}
.blog-vote__buttons { display: flex; align-items: center; gap: var(--space-3, 0.75rem); }
.blog-vote__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border: 1.5px solid var(--gray-200, #E5E7EB);
  border-radius: var(--radius-lg, 0.75rem);
  background: var(--white, #fff);
  color: var(--gray-500, #6B7280);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.blog-vote__btn:hover {
  border-color: var(--orange-300, #FDBA74);
  color: var(--orange-500, #F97316);
  background: var(--orange-50, #FFF7ED);
}
.blog-vote__btn--active {
  border-color: var(--orange-400, #FB923C);
  color: var(--orange-500, #F97316);
  background: var(--orange-50, #FFF7ED);
}
.blog-vote__count { font-variant-numeric: tabular-nums; }
.blog-vote__thankyou {
  font-size: var(--text-sm);
  color: var(--gray-400);
  font-style: italic;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-featured__image { aspect-ratio: 16/9; }
  .blog-featured__body { padding: var(--space-7, 1.75rem); }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-prose { font-size: var(--text-base, 1rem); }
  .blog-vote { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}