/* ============ ARTICLE PAGE STYLES ============ */
.article-hero {
  padding: 120px 0 40px;
  background: linear-gradient(135deg,#0D1B2A 0%,#003580 100%);
  color: #fff;
  position: relative;
}
.article-hero .container { max-width: 900px; }
.article-breadcrumb { font-size: .82rem; opacity: .8; margin-bottom: 14px; }
.article-breadcrumb a { color: #fff; text-decoration: none; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-cat-tag {
  display: inline-block; background: rgba(201,153,59,.95); color: #fff;
  padding: 4px 12px; border-radius: 4px; font-weight: 700;
  font-size: .72rem; letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 14px;
}
.article-title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800; line-height: 1.2; margin: 0 0 16px;
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: 18px; font-size: .85rem; opacity: .85;
}

.article-feature-image {
  max-width: 900px; margin: -30px auto 0; padding: 0 20px;
}
.article-feature-image img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.article-body {
  max-width: 760px; margin: 50px auto; padding: 0 20px;
  font-size: 1.02rem; line-height: 1.75; color: #1f2937;
}
.article-body h2 {
  font-size: 1.5rem; color: #0D1B2A; margin: 38px 0 16px;
  padding-bottom: 8px; border-bottom: 2px solid #003580; font-weight: 700;
}
.article-body h3 { font-size: 1.18rem; color: #003580; margin: 24px 0 10px; font-weight: 700; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 26px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: #0D1B2A; }
.article-body a { color: #003580; font-weight: 600; }
.article-body a:hover { color: #C9993B; }
.article-body blockquote {
  border-left: 4px solid #C9993B; background: #fffbeb;
  padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0;
  font-style: italic; color: #78350f;
}
.article-body table {
  width: 100%; border-collapse: collapse; margin: 18px 0;
  font-size: .92rem; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.article-body table th {
  background: #003580; color: #fff; padding: 10px 14px; text-align: left;
}
.article-body table td { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.article-body table tr:nth-child(even) td { background: #f9fafb; }

.article-cta {
  max-width: 760px; margin: 40px auto; padding: 30px;
  background: linear-gradient(135deg,#003580,#1a4f9e); color: #fff;
  border-radius: 14px; text-align: center;
}
.article-cta h3 { color: #fff; font-size: 1.4rem; margin: 0 0 10px; }
.article-cta p { margin: 0 0 18px; opacity: .9; }
.article-cta .btn { background: #C9993B; color: #fff; padding: 12px 28px; border-radius: 8px;
  text-decoration: none; font-weight: 700; display: inline-block; }
.article-cta .btn:hover { background: #fff; color: #003580; }

.related-articles { max-width: 1100px; margin: 60px auto; padding: 0 20px; }
.related-articles h3 { font-size: 1.4rem; color: #0D1B2A; margin: 0 0 24px; text-align: center; }
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
}