/* ============================================================
   SCORPIO ZODIAC v3 — blog.css
   Blog-specific styles: listing, article, newsletter
   ============================================================ */

/* ── BLOG HERO ── */
.blog-hero { padding:60px 24px 48px;text-align:center; }
.blog-hero-title { font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3rem);font-weight:600;color:var(--ivory);line-height:1.2;margin:12px 0; }
.blog-hero-title em { color:var(--lavender);font-style:italic; }
.blog-hero-sub  { font-size:1rem;color:var(--text-soft);font-style:italic;max-width:420px;margin:0 auto; }

/* ── FEATURED CARD ── */
.featured-card {
  display:block;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:36px;position:relative;overflow:hidden;
  transition:border-color 0.25s,transform 0.25s;
}
.featured-card::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#a897c840,transparent); }
.featured-card:hover { border-color:var(--border-soft);transform:translateY(-2px); }

.fc-meta  { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.fc-tag   { font-family:'DM Mono',monospace;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.1em;padding:3px 10px;background:linear-gradient(135deg,#3d3055,#4a3048);border:1px solid #6b5580;border-radius:20px;color:var(--lavender); }
.fc-date  { font-family:'DM Mono',monospace;font-size:0.62rem;color:var(--text-dim); }
.fc-title { font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--ivory);line-height:1.3;margin-bottom:14px; }
.fc-excerpt { font-size:1rem;color:var(--text-soft);line-height:1.75;margin-bottom:20px; }
.fc-read  { font-family:'DM Mono',monospace;font-size:0.65rem;color:var(--lavender);text-transform:uppercase;letter-spacing:0.08em; }

/* ── BLOG GRID ── */
.blog-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }
.blog-grid-2 { grid-template-columns:repeat(2,1fr); }

.blog-card {
  display:block;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px;transition:border-color 0.25s,transform 0.2s;
  position:relative;overflow:hidden;
}
.blog-card::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#a897c825,transparent); }
.blog-card:hover { border-color:var(--border-soft);transform:translateY(-2px); }

.bc-tag     { display:inline-block;font-family:'DM Mono',monospace;font-size:0.56rem;text-transform:uppercase;letter-spacing:0.1em;padding:2px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;color:var(--text-dim);margin-bottom:12px; }
.bc-title   { font-family:'Playfair Display',serif;font-size:1.05rem;color:var(--ivory);line-height:1.35;margin-bottom:10px; }
.bc-excerpt { font-size:0.9rem;color:var(--text-soft);line-height:1.7;margin-bottom:16px; }
.bc-footer  { display:flex;justify-content:space-between;align-items:center; }
.bc-date    { font-family:'DM Mono',monospace;font-size:0.6rem;color:var(--text-dim); }
.bc-read    { font-family:'DM Mono',monospace;font-size:0.6rem;color:var(--lavender-dim); }

/* ── CATEGORIES ── */
.category-row { display:flex;flex-wrap:wrap;gap:10px; }
.cat-pill { padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:40px;font-family:'DM Mono',monospace;font-size:0.62rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.06em;cursor:pointer;transition:all 0.2s; }
.cat-pill:hover { border-color:var(--lavender-dim);color:var(--lavender); }

/* ── NEWSLETTER ── */
.newsletter-card { background:linear-gradient(135deg,#1e1a30,#1a1528);border:1px solid #3a3258;border-radius:var(--radius-lg);padding:40px;text-align:center; }
.nl-glyph { font-size:2rem;color:var(--lavender);margin-bottom:14px; }
.nl-title { font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--ivory);margin-bottom:10px; }
.nl-sub   { font-size:0.95rem;color:var(--text-soft);font-style:italic;margin-bottom:24px;line-height:1.65; }
.nl-form  { display:flex;gap:10px;max-width:380px;margin:0 auto;flex-wrap:wrap;justify-content:center; }
.nl-input { flex:1;min-width:200px;padding:11px 16px;background:var(--bg);border:1px solid var(--border);border-radius:40px;color:var(--text);font-family:'Lora',serif;font-size:0.95rem;outline:none;transition:border-color 0.2s; }
.nl-input:focus       { border-color:var(--lavender-dim); }
.nl-input::placeholder { color:var(--text-dim); }

/* ── ARTICLE ── */
.article-container { padding-top:20px;padding-bottom:60px; }

.back-link { display:inline-block;font-family:'DM Mono',monospace;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-dim);text-decoration:none;margin-bottom:24px;transition:color 0.2s; }
.back-link:hover { color:var(--lavender); }

.article-header  { margin-bottom:36px; }
.article-meta    { display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap; }
.article-title   { font-family:'Playfair Display',serif;font-size:clamp(1.6rem,4vw,2.4rem);color:var(--ivory);line-height:1.2;margin-bottom:14px; }
.article-sub     { font-size:1.05rem;color:var(--text-soft);font-style:italic;line-height:1.7;padding-bottom:24px;border-bottom:1px solid var(--border); }

.article-body    { max-width:680px; }
.article-lead    { font-size:1.12rem;line-height:1.9;color:var(--text);margin-bottom:22px; }

.article-body p  { font-size:1.02rem;line-height:1.9;color:var(--text-soft);margin-bottom:18px; }
.article-body h2 { font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--ivory);margin:32px 0 14px;padding-left:16px;border-left:2px solid var(--lavender-dim); }

.article-cta { margin:36px 0;padding:28px;background:linear-gradient(135deg,#1e1a30,#1a1528);border:1px solid #3a3258;border-radius:var(--radius-lg);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px; }
.article-cta p { font-size:1rem;color:var(--text-soft);font-style:italic; }

.related-section { margin-top:8px; }

/* ── RESPONSIVE BLOG ── */
@media (max-width:620px) {
  .blog-grid    { grid-template-columns:1fr; }
  .blog-grid-2  { grid-template-columns:1fr; }
  .featured-card { padding:24px; }
  .fc-title     { font-size:1.25rem; }
  .newsletter-card { padding:28px 20px; }
}