/* ═══════════════════════════════════════════════
   Rise-N-Shine Services — Article Page Styles
   Loaded by all article pages and the post template.
   ═══════════════════════════════════════════════ */

/* ── ARTICLE BANNER ── */
.article-banner {
  background: linear-gradient(135deg, #1A4D32 0%, #2D7A4F 55%, #3a9460 100%);
  padding: 4rem 2rem 3rem; text-align: center; position: relative; overflow: hidden;
}
.article-banner::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='40' cy='40' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.banner-inner { max-width: var(--article-w); margin: 0 auto; position: relative; }
.banner-breadcrumb {
  font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.banner-breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
.banner-breadcrumb a:hover { color: var(--gold); }
.banner-breadcrumb svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.article-category-badge {
  display: inline-block; background: var(--gold); color: var(--charcoal);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 1rem; border-radius: 2rem; text-decoration: none; margin-bottom: 1.25rem; transition: background 0.2s;
}
.article-category-badge:hover { background: var(--gold-dark); }
.article-banner h1 {
  font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 1.25rem;
}
.article-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; flex-wrap: wrap; color: rgba(255,255,255,0.65); font-size: 0.85rem;
}
.article-meta span { display: flex; align-items: center; gap: 0.4rem; }
.article-meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── COVER IMAGE ── */
.article-image-wrap { max-width: 900px; margin: 0 auto; padding: 0 2rem; transform: translateY(-2rem); }
.article-img-container {
  position: relative; border-radius: 1.25rem; overflow: hidden;
  aspect-ratio: 16/9; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.article-img-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,77,50,0.65) 0%, rgba(26,77,50,0.1) 50%, transparent 100%);
  display: flex; align-items: flex-end; padding: 1.75rem;
}
.article-img-caption { color: rgba(255,255,255,0.8); font-size: 0.8rem; font-style: italic; }

/* ── TWO-COLUMN LAYOUT ── */
.article-layout {
  max-width: var(--max-w); margin: 0 auto; padding: 0 2rem 5rem;
  display: grid; grid-template-columns: 1fr 300px; column-gap: 4rem; align-items: start;
}
/* .article-sidebar is the sticky grid item; on mobile it becomes display:contents
   so .sidebar-toc and .sidebar-cta-wrap become independent flex children */
.article-sidebar {
  grid-column: 2; position: sticky; top: 5rem;
  display: flex; flex-direction: column; gap: 1.5rem; align-self: start;
}

/* ── ARTICLE BODY ── */
.article-content h2 {
  font-family: 'Playfair Display', serif; font-size: 1.65rem; font-weight: 700;
  line-height: 1.3; color: var(--charcoal); margin: 2.5rem 0 1rem;
  padding-top: 0.5rem; border-top: 2px solid var(--gold-light);
}
.article-content h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.article-content h3 {
  font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 600;
  color: var(--green-text); margin: 2rem 0 0.75rem;
}
.article-content p { font-size: 1.05rem; line-height: 1.85; color: #3a3834; margin-bottom: 1.25rem; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-content li { font-size: 1.05rem; line-height: 1.75; color: #3a3834; margin-bottom: 0.5rem; }
.article-content strong { color: var(--charcoal); font-weight: 700; }
.article-content a { color: var(--green); text-decoration: underline; text-decoration-color: var(--gold-light); }
.article-content a:hover { color: var(--green-dark); }

/* ── PULL QUOTE ── */
.pull-quote {
  border-left: 4px solid var(--gold); padding: 1.25rem 1.5rem;
  background: var(--green-light); border-radius: 0 0.75rem 0.75rem 0; margin: 2rem 0;
}
.pull-quote p {
  font-family: 'Playfair Display', serif; font-size: 1.2rem;
  font-style: italic; color: var(--green-dark); line-height: 1.5; margin: 0;
}

/* ── QUICK FACTS BOX ── */
.quick-facts {
  background: #fff; border: 2px solid var(--gold); border-radius: 1.25rem;
  padding: 1.75rem; margin-bottom: 2.5rem; box-shadow: 0 4px 20px rgba(212,168,67,0.12);
}
.quick-facts-header {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gold-light);
}
.quick-facts-header svg { width: 18px; height: 18px; stroke: var(--gold-dark); fill: none; stroke-width: 2; flex-shrink: 0; }
.quick-facts-header h4 {
  font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700;
  color: var(--charcoal); text-transform: uppercase; letter-spacing: 0.06em;
}
.quick-facts-item { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; }
.quick-facts-item:last-child { margin-bottom: 0; }
.qf-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green); background: var(--green-light); padding: 0.2rem 0.6rem;
  border-radius: 0.4rem; white-space: nowrap; flex-shrink: 0; margin-top: 0.1rem;
}
.qf-text { font-size: 0.9rem; line-height: 1.6; color: var(--charcoal); }

/* ── SIDEBAR ── */
/* .article-sidebar replaced by .sidebar-toc + .sidebar-cta-wrap as grid siblings */
.sidebar-card {
  background: #fff; border-radius: 1.25rem; padding: 1.5rem;
  margin-bottom: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.sidebar-card h4 {
  font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700;
  color: var(--charcoal); margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gold-light);
}
.toc-list { list-style: none; }
.toc-list li { margin-bottom: 0.5rem; }
.toc-list a {
  font-size: 0.88rem; color: var(--warm-gray); text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s;
}
.toc-list a::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); flex-shrink: 0; }
.toc-list a:hover { color: var(--green); }
.toc-list a:hover::before { background: var(--green); }
.sidebar-cta {
  background: linear-gradient(135deg, #1A4D32, #2D7A4F); border-radius: 1.25rem;
  padding: 1.5rem; text-align: center;
}
.sidebar-cta p { color: rgba(255,255,255,0.8); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.25rem; }
.sidebar-cta a {
  display: block; background: var(--gold); color: var(--charcoal);
  font-weight: 700; font-size: 0.88rem; padding: 0.75rem 1rem;
  border-radius: 2rem; text-decoration: none; transition: background 0.2s;
}
.sidebar-cta a:hover { background: var(--gold-dark); }

/* ── TAG CLOUD ── */
.tag-cloud { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,0.08); }
.tag-cloud-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--warm-gray); margin-bottom: 0.75rem;
}
.tag-cloud-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-pill {
  font-size: 0.82rem; font-weight: 600; padding: 0.3rem 0.85rem; border-radius: 2rem;
  border: 1.5px solid rgba(45,122,79,0.3); color: var(--green-text);
  text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.tag-pill:hover { background: var(--green-light); border-color: var(--green); }

/* ── RELATED POSTS ── */
.related-posts { background: var(--cream); padding: 4rem 2rem; border-top: 1px solid rgba(0,0,0,0.06); }
.related-posts-inner { max-width: var(--max-w); margin: 0 auto; }
.related-posts h2 {
  font-family: 'Playfair Display', serif; font-size: 1.8rem;
  font-weight: 700; margin-bottom: 2rem; color: var(--charcoal);
}

/* ── IDENTITY CARDS (Wealth Identity article) ── */
.identity-card {
  border-radius: 1rem; padding: 1.5rem; margin: 1.5rem 0;
  border-left: 4px solid var(--gold); background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.identity-card-title {
  font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700;
  color: var(--charcoal); margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.identity-card-title span { font-size: 1.3rem; }
.identity-card p { font-size: 0.95rem; line-height: 1.75; color: #3a3834; margin: 0; }
.identity-card strong { color: var(--green-dark); }

/* ── ARTICLE RESPONSIVE ── */
@media (max-width: 900px) {
  .article-layout { display: flex; flex-direction: column; }
  /* Wrapper dissolves — children become direct flex siblings of article-layout */
  .article-sidebar { display: contents; }
  /* TOC floats before article body; CTA stays in natural DOM order (after) */
  .sidebar-toc { order: -1; }
}
@media (max-width: 768px) {
  .article-image-wrap { transform: translateY(-1rem); }
}