/* ZYNGLE — insights index and article. */

.zg-article { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.zg-article__header { max-width: var(--zg-container-reading); margin-inline: auto; text-align: left; }
.zg-article__meta { display: flex; flex-wrap: wrap; gap: var(--zg-3); font-family: var(--zg-font-mono); font-size: var(--zg-text-label); color: var(--zg-text-muted); margin-bottom: var(--zg-6); }
.zg-article__title { margin-bottom: var(--zg-6); }
.zg-article__media { margin-block: var(--zg-12); border-radius: var(--zg-radius-sm); overflow: hidden; border: 1px solid var(--zg-border); }
.zg-article__body { max-width: var(--zg-container-reading); margin-inline: auto; }

.zg-toc { border-left: 1px solid var(--zg-border); padding-left: var(--zg-4); display: grid; gap: var(--zg-2); }
.zg-toc__heading { font-family: var(--zg-font-mono); font-size: var(--zg-text-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--zg-text-muted); }
.zg-toc a { font-size: var(--zg-text-sm); color: var(--zg-text-secondary); }
.zg-toc a:hover { color: var(--zg-text); }

.zg-archive-list { display: grid; gap: 0; border-top: 1px solid var(--zg-border); margin-top: var(--zg-12); }
.zg-archive-item { display: grid; grid-template-columns: 12ch minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--zg-6); padding-block: var(--zg-8); border-bottom: 1px solid var(--zg-border); align-items: baseline; }
.zg-archive-item__date { font-family: var(--zg-font-mono); font-size: var(--zg-text-caption); color: var(--zg-text-muted); }
.zg-archive-item__title { font-family: var(--zg-font-display); font-size: var(--zg-text-h3); font-weight: 500; letter-spacing: -0.02em; transition: color var(--zg-duration-fast) var(--zg-ease); }
.zg-archive-item:hover .zg-archive-item__title { color: var(--zg-accent); }
.zg-archive-item__excerpt { font-size: var(--zg-text-sm); color: var(--zg-text-secondary); }
@media (max-width: 860px) { .zg-archive-item { grid-template-columns: 1fr; gap: var(--zg-2); } }

.zg-pagination { display: flex; gap: var(--zg-2); margin-top: var(--zg-12); font-family: var(--zg-font-mono); font-size: var(--zg-text-caption); }
.zg-pagination .page-numbers { padding: var(--zg-2) var(--zg-3); border: 1px solid var(--zg-border); border-radius: var(--zg-radius-xs); }
.zg-pagination .page-numbers.current { border-color: var(--zg-accent); color: var(--zg-accent); }