/* ════════════════════════════════════════════════════════════════
   LIST PAGE — project-list.html. Requires base.css + project-card.css.
   ════════════════════════════════════════════════════════════════ */

.dg-list-main { max-width: 1520px; margin: 0 auto; padding: 150px 24px 100px; position: relative; z-index: 1 }

.dg-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--text-muted); font-size: 13px; font-weight: 600 }
.dg-breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color .2s }
.dg-breadcrumb a:hover { color: var(--gold-light) }
.dg-breadcrumb span.sep { opacity: .5 }
.dg-breadcrumb span.current { color: var(--gold-light) }

.dg-list-tabs { display: flex; gap: 12px; margin-bottom: 44px; flex-wrap: wrap }
.dg-list-tab { padding: 12px 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text-muted); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease }
.dg-list-tab:hover { color: var(--text-warm) }
.dg-list-tab.active { background: rgba(214, 179, 106, 0.22); border-color: rgba(214, 179, 106, 0.5); color: var(--gold-light) }

.dg-list-state { padding: 80px 24px; text-align: center; color: var(--text-muted); font-size: 15px }
.dg-list-state .spinner { width: 36px; height: 36px; margin: 0 auto 20px; border: 2px solid rgba(255, 255, 255, 0.1); border-top-color: var(--gold); border-radius: 50%; animation: dgSpin .8s linear infinite }

@media (max-width: 768px) {
  .dg-list-main { padding: 110px 16px 70px }
}