/* ═══════════════════════════════════════════════════════════
   GARDEN HERO  ·  Insight / Article Pages
   Estilos exclusivos das páginas editoriais de Insights.
   Depende de: tokens.css  base.css  components.css  project.css
   ═══════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; }

/* ╔═══════════════════════════════════════════════════════╗
   ║  HERO DO ARTIGO (minimalista, sem imagem)             ║
   ╚═══════════════════════════════════════════════════════╝ */

.article-hero {
  position: relative;
  background: var(--color-bg);
  padding: 200px 24px 96px;
  display: flex;
  justify-content: center;
}

.article-hero__content {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.article-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  color:          var(--color-gold);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  opacity:        0.85;
}

.article-eyebrow::before,
.article-eyebrow::after {
  content:    '';
  width:      32px;
  height:     1px;
  background: var(--color-gold);
  opacity:    0.6;
}

.article-title {
  font-family:    var(--font-display);
  font-size:      clamp(var(--text-3xl), 6vw, var(--text-5xl));
  line-height:    1.05;
  color:          var(--color-white);
  letter-spacing: 0.02em;
  margin:         0;
}

.article-subtitle {
  font-family: var(--font-body);
  font-size:   var(--text-md);
  line-height: 1.7;
  color:       var(--color-white-80);
  max-width:   560px;
  margin:      0;
}

.article-meta {
  display:        flex;
  align-items:    center;
  gap:            14px;
  font-family:    var(--font-body);
  font-size:      var(--text-2xs);
  color:          var(--color-white-50);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.article-meta__sep {
  width:      3px;
  height:     3px;
  border-radius: 50%;
  background: var(--color-white-50);
}

@media (max-width: 640px) {
  .article-hero { padding: 160px 20px 64px; }
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  CORPO DO ARTIGO                                      ║
   ╚═══════════════════════════════════════════════════════╝ */

.article-body {
  background: var(--color-bg);
  padding:    0 24px 120px;
}

.article-body__inner {
  max-width: 700px;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  gap:       28px;
}

.article-body p {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  line-height: 1.9;
  color:       var(--color-white-80);
  margin:      0;
}

.article-body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size:   64px;
  color:       var(--color-gold);
  float:       left;
  line-height: 0.8;
  padding:     6px 10px 0 0;
}

.article-quote {
  font-family:    var(--font-display);
  font-size:      clamp(1.3rem, 3vw, 2rem);
  line-height:    1.5;
  color:          var(--color-white);
  border-left:    2px solid var(--color-gold);
  padding-left:   32px;
  margin:         12px 0;
}

.article-quote cite {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-style:     normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--color-gold);
  margin-top:     14px;
}

@media (max-width: 640px) {
  .article-body { padding: 0 20px 80px; }
  .article-body p:first-of-type::first-letter { font-size: 48px; }
}