/* ============================================================
   NEWS ARTICLE PAGE — extends about.css's .page-hero and
   main.css's tokens (--gold, --black, --font-display, etc.)
   ============================================================ */

.article-section {
  padding: 60px 24px 20px;
  background: var(--off-white, #FAFAF7);
}

.article-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.article-body {
  background: #fff;
  border-radius: 14px;
  padding: 40px;
  border: 1px solid var(--gray-200, #E8E8E0);
  font-family: var(--font-body, 'Nunito', sans-serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gray-800, #2A2A22);
}

.article-body p { margin-bottom: 1.1em; }
.article-body h2, .article-body h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  margin: 1.4em 0 0.6em;
  color: var(--black, #111);
}
.article-body img { border-radius: 10px; margin: 1em 0; }
.article-body blockquote {
  border-left: 4px solid var(--gold, #F5C518);
  padding: 4px 20px;
  margin: 1.4em 0;
  font-style: italic;
  color: var(--gray-600, #5A5A52);
}
.article-body ul, .article-body ol { margin: 0 0 1.1em 1.4em; }

.article-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }
.side-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--gray-200, #E8E8E0);
  padding: 20px;
}
.side-card h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1rem;
  margin-bottom: 12px;
}
.side-share { display: flex; gap: 10px; }
.side-share a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gray-100, #F5F5F0);
  color: var(--black, #111);
  transition: background 0.15s ease;
}
.side-share a:hover { background: var(--gold, #F5C518); }
.btn-full-side { width: 100%; justify-content: center; }

.more-news-section { padding: 20px 24px 80px; }
.mn-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1.6rem;
  max-width: 1100px;
  margin: 0 auto 24px;
}
.mn-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mn-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--gray-200, #E8E8E0);
  overflow: hidden;
  display: block;
}
.mn-card img { width: 100%; height: 160px; object-fit: cover; }
.mn-card-body { padding: 16px; }
.mn-card-body h4 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--black, #111);
}
.mn-card-body span { font-size: 0.8rem; color: var(--gray-600, #5A5A52); }

@media (max-width: 860px) {
  .article-inner { grid-template-columns: 1fr; }
  .article-side { position: static; }
  .mn-grid { grid-template-columns: 1fr; }
  .article-body { padding: 24px; }
}