@import url("../style.css");

/* Minimal article detail page styling */
.article-page{ padding: 2rem 0 3rem; }
.article-root{ display:flex; justify-content:center; }
.article-card{
  width:100%;
  max-width: 980px;
  background: white;
  border-radius: var(--radius-xl);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200);
}
.article-hero{
  position:relative;
  height: 280px;
  overflow:hidden;
  background: var(--gray-100);
}
.article-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.10) 55%, rgba(0,0,0,.02));
}
.article-hero-content{
  position:absolute; left:18px; right:18px; bottom:14px;
  display:flex; flex-direction:column; gap:8px;
}
.article-title{ margin:0; color:white; font-size: 1.9rem; line-height:1.2; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.article-meta{
  display:flex; gap:10px; flex-wrap:wrap;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
.article-body{ padding: 1.25rem; }
.article-lead{ color: var(--gray-700); margin-bottom: 1rem; }
.article-content{ white-space: pre-wrap; color: var(--gray-800); line-height: 1.75; }