/* Zyra World — Article (blog post) page. Reuses tokens.css + styles.css system. */

.article-main { padding: 24px 0 80px; }
@media (min-width: 1024px) { .article-main { padding: 32px 0 120px; } }

/* breadcrumb */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-2); margin-bottom: 24px; }
.crumbs a:hover { color: var(--ink-2); }
.crumbs .cur { color: var(--ink); }
@media (min-width: 1024px) { .crumbs { margin-bottom: 32px; } }

/* ===== Hero ===== */
.art-hero { display: flex; flex-direction: column; gap: 24px; margin-bottom: 56px; }
@media (min-width: 1024px) { .art-hero { flex-direction: row; gap: 16px; margin-bottom: 120px; } }
.art-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.art-badge { align-self: flex-start; padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--ink); }
.art-hero-text h1 { font-size: clamp(26px, 4vw, 32px); font-weight: 500; line-height: 1.25; color: var(--ink); }
.byline { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.byline .author { display: flex; align-items: center; gap: 12px; }
.byline .author img { width: 40px; height: 40px; border-radius: 50%; }
.byline .name { font-size: 14px; font-weight: 500; color: var(--ink); }
.byline .meta { font-size: 14px; color: var(--muted); }
.art-hero-img { flex: 1; min-width: 0; }
.art-hero-img img { width: 100%; height: auto; aspect-ratio: 672 / 311; object-fit: cover; border-radius: var(--r-xl); }

/* ===== Body: sidebar + article ===== */
.art-body { display: flex; flex-direction: column; gap: 40px; margin-bottom: 56px; }
@media (min-width: 1024px) { .art-body { flex-direction: row; align-items: flex-start; gap: 40px; margin-bottom: 120px; } }

.art-side { display: flex; flex-direction: column; gap: 40px; order: 2; }
.art-content { order: 1; }
@media (min-width: 1024px) {
  .art-side { width: 328px; flex: none; position: sticky; top: 88px; order: 0; }
  .art-content { order: 0; }
}

.toc { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; }
.toc h4 { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 16px; }
.toc-list { display: flex; gap: 16px; }
.toc-bar { width: 4px; flex: none; border-radius: 2px; background: var(--cta-bg); position: relative; overflow: hidden; }
.toc-fill { position: absolute; top: 0; left: 0; width: 4px; height: 22px; border-radius: 2px; background: var(--green); transition: height .15s ease; }
.toc-items { display: flex; flex-direction: column; gap: 16px; }
.toc-items a { font-size: 12px; color: var(--muted); transition: color .15s ease; }
.toc-items a.on { font-weight: 500; color: #181a1f; }
.toc-items a:hover { color: #181a1f; }

.share { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.share > span { font-size: 16px; color: var(--ink); }
.share .icons { display: flex; gap: 8px; }
.share .icons img { width: 24px; height: 24px; }

.art-cta { position: relative; overflow: hidden; background: #cbf2dc; border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 40px; }
.art-cta .t { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.art-cta .d { font-size: 14px; color: var(--muted); max-width: 230px; }
.art-cta .btn { align-self: flex-start; position: relative; z-index: 2; }
.art-cta .hand { position: absolute; right: 0; bottom: 0; width: 104px; height: 104px; pointer-events: none; }

/* ===== Article content ===== */
.art-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.art-content h2 { font-size: 24px; font-weight: 500; color: var(--ink); }
.art-content p { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--muted); }
.callout { background: #eff6ff; border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.callout h3 { font-size: 16px; font-weight: 700; color: var(--ink); }
.art-list { display: flex; flex-direction: column; gap: 12px; }
.art-list li { list-style: none; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 400; color: var(--ink); }
.art-list .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.figure { display: flex; flex-direction: column; gap: 16px; }
.figure img { width: 100%; height: auto; aspect-ratio: 992 / 400; object-fit: cover; border-radius: var(--r-lg); }
.figure figcaption { font-size: 14px; color: var(--muted); }

/* ===== Related ===== */
.related h2 { font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 32px; }
.art-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .art-cards { grid-template-columns: repeat(3, 1fr); } }
.art-card img { width: 100%; height: auto; aspect-ratio: 443 / 277; object-fit: cover; border-radius: var(--r-lg); margin-bottom: 16px; }
.art-card .cmeta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.art-card h3 { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.art-card .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.art-card .tag { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--ink); }
.art-card:hover h3 { color: var(--green-hover); }