/* blog.css — styles unique to the blog INDEX page (/blog/).
   Loaded only on the blog index, on top of core.css. */

.blog-hero {
  padding: 148px 0 80px;
  background: linear-gradient(110deg, var(--ink) 0%, var(--night) 100%);
  position: relative;
  overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,184,102,.14), transparent 68%);
  top: -200px; right: -100px;
}
.blog-hero .container { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; margin-bottom: 18px; }
.eyebrow::before { content: ''; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.blog-hero h1 { font-family: var(--serif); color: var(--white); font-size: clamp(42px, 6vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 20px; max-width: 700px; }
.blog-hero p { color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.7; max-width: 560px; }

.blog-grid-section { padding: 80px 0 110px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 56px; }

.post-card-image { width: 100%; height: 210px; object-fit: cover; display: block; transition: opacity .2s ease; }
.post-card a:hover .post-card-image { opacity: .88; }
.post-card {
  background: var(--white);
  border: 1px solid rgba(20,33,50,.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20,33,50,.07);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(20,33,50,.13); }
.post-card-body { padding: 32px; flex: 1; display: flex; flex-direction: column; }
.post-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.tag { background: rgba(185,145,56,.1); border: 1px solid rgba(185,145,56,.22); border-radius: 999px; padding: 5px 13px; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.post-date { color: var(--muted); font-size: 13px; font-weight: 600; }
.post-card h2 { font-family: var(--serif); color: var(--night); font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 14px; }
.post-card p { font-size: 15px; line-height: 1.75; color: var(--muted); margin-bottom: 28px; flex: 1; max-width: none; }
.read-link { display: inline-flex; align-items: center; gap: 8px; color: var(--night); font-size: 14px; font-weight: 800; letter-spacing: .02em; margin-top: auto; }
.read-link::after { content: '→'; transition: transform .2s ease; }
.post-card:hover .read-link::after { transform: translateX(4px); }

.blog-cta { background: var(--night); border-radius: var(--radius); padding: 64px; text-align: center; margin-top: 80px; position: relative; overflow: hidden; }
.blog-cta::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(216,184,102,.14), transparent 68%); top: -150px; right: -100px; }
.blog-cta .container { position: relative; z-index: 2; }
.blog-cta h2 { font-family: var(--serif); color: var(--white); font-size: clamp(28px, 4vw, 46px); margin-bottom: 16px; }
.blog-cta p { color: rgba(255,255,255,.68); font-size: 17px; margin: 0 auto 32px; max-width: 480px; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-cta { padding: 48px 24px; }
}