/* ─────────────────────────────────────────
   ARTICLE.CSS — Shared resource article styles
───────────────────────────────────────── */

.article-hero { position:relative; padding:140px 0 60px; background:var(--cream); border-bottom:1px solid var(--cream-dark); }
.article-hero-inner { max-width:760px; }

.article-breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-light); margin-bottom:20px; }
.article-breadcrumb a { color:var(--sage-dark); text-decoration:none; }
.article-breadcrumb a:hover { text-decoration:underline; }

.article-hero h1 { font-size:clamp(1.8rem,4vw,2.8rem); color:var(--brown); line-height:1.2; margin:12px 0 16px; }

.article-meta { display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--text-light); margin-top:8px; }
.article-meta strong { color:var(--text-mid); font-weight:500; }

/* LAYOUT */
.article-layout { display:grid; grid-template-columns:1fr 300px; gap:60px; max-width:1100px; margin:0 auto; padding:60px 24px 100px; align-items:start; }

/* BODY */
.article-body h2 { font-size:1.5rem; color:var(--brown); margin:40px 0 14px; padding-top:8px; }
.article-body h3 { font-size:1.15rem; color:var(--brown); margin:28px 0 10px; }
.article-body p { font-size:16px; color:var(--text-mid); line-height:1.8; margin-bottom:18px; max-width:640px; }
.article-body ul, .article-body ol { margin:0 0 18px; padding-left:0; display:flex; flex-direction:column; gap:8px; max-width:620px; }
.article-body ul li, .article-body ol li { font-size:15px; color:var(--text-mid); line-height:1.65; padding-left:20px; position:relative; }
.article-body ul li::before { content:'◆'; position:absolute; left:0; color:var(--sage-dark); font-size:7px; top:7px; }
.article-body ol { counter-reset:list-counter; }
.article-body ol li { counter-increment:list-counter; }
.article-body ol li::before { content:counter(list-counter)'.'; position:absolute; left:0; color:var(--sage-dark); font-size:13px; font-weight:500; top:2px; }

.article-callout { background:var(--sage-pale); border-left:3px solid var(--sage-dark); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 24px; margin:28px 0; max-width:640px; }
.article-callout p { font-size:15px; color:var(--brown); margin:0; line-height:1.65; }

.article-warning { background:#FDF6EF; border-left:3px solid var(--brown-pale); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px 24px; margin:28px 0; max-width:640px; }
.article-warning p { font-size:14px; color:var(--text-mid); margin:0; line-height:1.65; }

.article-divider { border:none; border-top:1px solid var(--cream-dark); margin:40px 0; max-width:640px; }

/* SIGN CARDS */
.sign-card { background:var(--white); border:1px solid var(--cream-dark); border-radius:var(--radius); padding:24px 28px; margin-bottom:16px; display:flex; gap:20px; align-items:flex-start; max-width:640px; transition:box-shadow 0.2s; }
.sign-card:hover { box-shadow:var(--shadow-sm); }
.sign-num { font-family:'Lora',serif; font-size:2rem; font-weight:600; color:var(--brown-pale); line-height:1; flex-shrink:0; min-width:36px; }
.sign-content h3 { font-size:1rem; color:var(--brown); margin-bottom:6px; }
.sign-content p { font-size:14px; color:var(--text-mid); line-height:1.65; margin:0; }

/* SIDEBAR */
.article-sidebar { display:flex; flex-direction:column; gap:20px; position:sticky; top:88px; }
.sidebar-card { background:var(--white); border:1px solid var(--cream-dark); border-radius:var(--radius); overflow:hidden; }
.sidebar-card-header { background:var(--sage-dark); padding:16px 20px; }
.sidebar-card-header h4 { font-size:14px; color:var(--white); margin-bottom:2px; }
.sidebar-card-header p { font-size:12px; color:rgba(255,255,255,0.7); }
.sidebar-card-body { padding:20px; display:flex; flex-direction:column; gap:12px; }
.sidebar-card-body p { font-size:13px; color:var(--text-mid); line-height:1.6; margin:0; }
.sidebar-contact { font-size:13px; color:var(--text-mid); display:flex; flex-direction:column; gap:10px; }
.sidebar-contact a { color:var(--sage-dark); font-weight:500; text-decoration:none; display:flex; align-items:center; gap:6px; }
.sidebar-contact a:hover { text-decoration:underline; }

.toc-card { background:var(--cream); border:1px solid var(--cream-dark); border-radius:var(--radius); padding:20px; }
.toc-card h4 { font-size:13px; font-weight:500; color:var(--text-mid); margin-bottom:12px; text-transform:uppercase; letter-spacing:.06em; }
.toc-list { display:flex; flex-direction:column; gap:8px; list-style:none; }
.toc-list a { font-size:13px; color:var(--sage-dark); text-decoration:none; line-height:1.4; }
.toc-list a:hover { text-decoration:underline; }

.related-guides { display:flex; flex-direction:column; gap:10px; }
.related-guide-link { display:flex; flex-direction:column; gap:4px; padding:12px; background:var(--cream); border-radius:var(--radius-sm); border:1px solid var(--cream-dark); text-decoration:none; transition:border-color 0.15s; }
.related-guide-link:hover { border-color:var(--brown-pale); }
.related-guide-link .rtag { font-size:10px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--sage-dark); background:var(--sage-pale); padding:2px 8px; border-radius:999px; width:fit-content; }
.related-guide-link .rtitle { font-size:13px; color:var(--brown); line-height:1.35; font-weight:500; }

/* ARTICLE CTA */
.article-cta { background:var(--brown); padding:64px 0; }
.article-cta-inner { text-align:center; }
.article-cta h2 { font-size:clamp(1.4rem,3vw,2rem); color:var(--white); margin-bottom:10px; }
.article-cta p { font-size:15px; color:rgba(255,255,255,0.7); margin-bottom:28px; max-width:480px; margin-left:auto; margin-right:auto; }
.article-cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* RESPONSIVE */
@media (max-width:900px) { .article-layout { grid-template-columns:1fr; } .article-sidebar { position:static; } }
@media (max-width:600px) { .sign-card { flex-direction:column; gap:8px; } .article-cta-actions { flex-direction:column; align-items:center; } }