/* ─── ARTICLE LAYOUT ─────────────────────────────────────────────────────────── */
.article-wrapper { max-width: 860px; margin: 0 auto; padding: 0 5% 80px; }
.article-header { padding: 40px 0 48px; }
.article-tag { display: inline-flex; background: var(--green-light); color: var(--green-dark); border: 1px solid hsl(160 84% 39% / 0.2); padding: 5px 14px; border-radius: 100px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.article-header h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 20px; }
.article-meta { display: flex; align-items: center; gap: 16px; font-size: 0.85rem; color: var(--muted-fg); padding-bottom: 32px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.article-meta strong { color: var(--fg); }
.breadcrumb { max-width: 860px; margin: 0 auto; }

/* ─── ARTICLE BODY ───────────────────────────────────────────────────────────── */
.article-body { padding-top: 40px; }
.article-body p { font-size: 1.05rem; line-height: 1.8; color: hsl(24, 8%, 18%); margin-bottom: 24px; }
.article-body h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 48px 0 16px; }
.article-body h3 { font-size: 1.15rem; font-weight: 600; margin: 32px 0 12px; }
.article-body ul, .article-body ol { margin: 0 0 24px 24px; }
.article-body li { font-size: 1.05rem; line-height: 1.8; color: hsl(24, 8%, 18%); margin-bottom: 8px; }
.article-body strong { color: var(--fg); font-weight: 600; }
.article-body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--green-dark); }

/* ─── CALLOUT ────────────────────────────────────────────────────────────────── */
.callout { background: var(--green-light); border-left: 4px solid var(--green); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 32px 0; }
.callout p { margin: 0; font-size: 1rem; color: var(--green-dark); }
.callout strong { color: var(--green-dark); }

/* ─── COMPARISON TABLE ───────────────────────────────────────────────────────── */
.comparison-table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 0.95rem; }
.comparison-table th { background: var(--fg); color: white; padding: 12px 16px; text-align: left; font-weight: 600; }
.comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:nth-child(even) td { background: var(--muted); }
.comparison-table .yes { color: var(--green); font-weight: 600; }
.comparison-table .no { color: #e74c3c; }

/* ─── CTA BOX ────────────────────────────────────────────────────────────────── */
.cta-box { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); border-radius: 16px; padding: 40px; text-align: center; margin: 56px 0; }
.cta-box h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: white; margin-bottom: 12px; }
.cta-box p { color: hsl(160, 60%, 88%); margin-bottom: 24px; font-size: 1rem; }
.cta-box a { display: inline-block; background: var(--orange); color: white; padding: 14px 32px; border-radius: 100px; font-weight: 700; font-size: 1rem; text-decoration: none; }
.cta-box a:hover { opacity: 0.9; }

/* ─── ARTICLE TAG COLOR VARIANTS ────────────────────────────────────────────── */
.article-tag.purple { background: hsl(260,60%,94%); color: hsl(260,50%,38%); border-color: hsl(260 50% 38% / 0.2); }
.article-tag.red    { background: hsl(0,70%,94%);   color: hsl(0,60%,38%);   border-color: hsl(0 60% 38% / 0.2); }
.article-tag.orange { background: hsl(38,90%,92%);  color: hsl(38,80%,30%);  border-color: hsl(38 80% 55% / 0.3); }
.article-tag.blue   { background: hsl(200,70%,92%); color: hsl(200,80%,30%); border-color: hsl(200 70% 60% / 0.3); }

/* ─── RELATED ARTICLES ───────────────────────────────────────────────────────── */
.related { border-top: 1px solid var(--border); padding-top: 48px; margin-top: 56px; }
.related h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 24px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.related-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.related-card:hover { box-shadow: 0 4px 20px hsl(24 10% 10% / 0.08); }
.related-card .rtag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-dark); background: var(--green-light); padding: 3px 10px; border-radius: 100px; display: inline-block; margin-bottom: 8px; }
.related-card h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) { .related-grid { grid-template-columns: 1fr; } }