/* The Somal Law Firm — blog / article styles. Loads AFTER styles.css, reuses its tokens. */

/* ---------- Article hero (branded, no stock photo) ---------- */
.post-hero{
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  color: var(--white);
  padding: calc(var(--space-3xl) + 40px) 0 var(--space-2xl);
  position: relative; overflow: hidden;
}
.post-hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 80% at 85% 15%, var(--gold-glow), transparent 60%);
  pointer-events:none;
}
.post-hero .container{ position:relative; z-index:1; max-width: 860px; }
.post-hero__cat{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--gold-400); font-family: var(--font-body); font-weight:700;
  font-size: var(--text-sm); text-transform:uppercase; letter-spacing:.12em;
  margin-bottom: var(--space-md);
}
.post-hero__cat i{ font-size:1.05em; }
.post-hero__title{
  font-family: var(--font-heading); font-weight:700; color:#fff;
  font-size: var(--text-4xl); line-height:1.12; margin:0 0 var(--space-md);
}
.post-hero__meta{ color: var(--warm-300); font-size: var(--text-sm); }
.post-hero__meta a{ color: var(--gold-300); text-decoration:none; }
.post-breadcrumb{ font-size: var(--text-xs); color: var(--warm-300); margin-bottom: var(--space-lg); }
.post-breadcrumb a{ color: var(--gold-300); text-decoration:none; }
.post-breadcrumb a:hover{ text-decoration:underline; }

/* ---------- Article body (prose) ---------- */
.post-body{ background: var(--cream); }
.post-body .container{ max-width: 780px; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.prose{ font-family: var(--font-body); font-size: var(--text-lg); line-height:1.75; color: var(--text-secondary); }
.prose > p:first-of-type{ font-size: calc(var(--text-lg) + 1px); color: var(--text-primary); }
.prose h2{
  font-family: var(--font-heading); font-weight:700; color: var(--navy-900);
  font-size: var(--text-2xl); line-height:1.2; margin: var(--space-2xl) 0 var(--space-md);
  padding-bottom: var(--space-sm); border-bottom: 2px solid var(--warm-200);
}
.prose h3{ font-family: var(--font-heading); color: var(--navy-800); font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.prose p{ margin: 0 0 var(--space-md); }
.prose ul, .prose ol{ margin: 0 0 var(--space-md) var(--space-lg); padding-left: var(--space-md); }
.prose li{ margin-bottom: var(--space-sm); }
.prose strong{ color: var(--navy-900); font-weight:700; }
.prose a{ color: var(--gold-600); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover{ color: var(--navy-700); }
.prose blockquote{
  border-left: 4px solid var(--gold-500); background: var(--gold-100);
  margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--navy-800); font-style: italic;
}
.prose em{ color: var(--text-muted); }
/* the closing disclaimer paragraph (last italic block) */
.prose > p > em:only-child{ display:block; }
.post-disclaimer{
  margin-top: var(--space-2xl); padding: var(--space-lg);
  background: var(--warm-100); border:1px solid var(--warm-200); border-radius: var(--radius);
  font-size: var(--text-sm); color: var(--text-muted); font-style: italic; line-height:1.6;
}

/* ---------- Blog index ---------- */
.blog-hero{
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color:#fff; padding: calc(var(--space-3xl) + 40px) 0 var(--space-2xl); text-align:center;
}
.blog-hero h1{ font-family: var(--font-heading); font-size: var(--text-4xl); margin:0 0 var(--space-sm); color:#fff; }
.blog-hero p{ color: var(--warm-300); max-width:640px; margin:0 auto; font-size: var(--text-lg); }
.blog-filters{ display:flex; flex-wrap:wrap; gap:var(--space-sm); justify-content:center; margin: var(--space-xl) 0; }
.blog-filters button{
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; cursor:pointer;
  padding:8px 16px; border-radius:999px; border:1px solid var(--warm-300); background:#fff; color:var(--navy-800);
}
.blog-filters button.is-active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.blog-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: var(--space-lg); margin-bottom: var(--space-3xl); }
.blog-card{
  background:#fff; border:1px solid var(--warm-200); border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; display:flex; flex-direction:column;
}
.blog-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card__top{ background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); padding: var(--space-lg); color:#fff; }
.blog-card__cat{ color: var(--gold-400); font-size: var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.blog-card__icon{ float:right; color: var(--gold-500); font-size:1.4rem; opacity:.7; }
.blog-card__body{ padding: var(--space-lg); display:flex; flex-direction:column; flex:1; }
.blog-card__title{ font-family: var(--font-heading); font-size: var(--text-lg); color: var(--navy-900); line-height:1.25; margin:0 0 var(--space-sm); }
.blog-card__title a{ color: inherit; text-decoration:none; }
.blog-card__title a:hover{ color: var(--gold-600); }
.blog-card__excerpt{ font-size: var(--text-sm); color: var(--text-muted); flex:1; margin-bottom: var(--space-md); }
.blog-card__link{ color: var(--gold-600); font-weight:600; font-size: var(--text-sm); text-decoration:none; }

@media (max-width: 640px){
  .post-hero__title{ font-size: var(--text-3xl); }
  .prose{ font-size: var(--text-base); }
}