/* ── Archive header ────────────────────────────── */
.archive-header {
  margin-bottom:  var(--space-xl);
  padding-bottom: var(--space-l);
  border-bottom:  2px solid var(--color-border);
}
.archive-title       { font-size: var(--font-size-xxl); margin-bottom: var(--space-xs); }
.archive-description { color: var(--color-muted); }

/* ── Loop item base ─────────────────────────────── */
.loop-item__thumbnail img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: var(--radius-m);
  transition:    opacity .2s;
}
.loop-item__thumbnail a:hover img { opacity: .85; }

.loop-item__title {
  font-size:     var(--font-size-lg);
  margin-bottom: var(--space-xs);
  line-height:   var(--line-height-heading);
}
.loop-item__title a        { color: var(--color-text); }
.loop-item__title a:hover  { color: var(--color-primary); text-decoration: none; }

.loop-item__meta {
  font-size:   var(--font-size-sm);
  color:       var(--color-muted);
  margin-bottom: var(--space-s);
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-s);
  align-items: center;
}
.loop-item__meta .sep    { color: var(--color-border); }
.loop-item__meta a       { color: var(--color-muted); }
.loop-item__meta a:hover { color: var(--color-primary); }

.loop-item__excerpt { color: var(--color-secondary); font-size: var(--font-size-base); }
.loop-item__excerpt p:last-child { margin-bottom: 0; }

.loop-item__more {
  display:    inline-block;
  margin-top: var(--space-s);
  font-size:  var(--font-size-sm);
  font-weight:600;
  color:      var(--color-primary);
}

.loop-item__tags { margin-top: var(--space-s); font-size: var(--font-size-sm); }
.loop-item__tags a { color: var(--color-muted); margin-right: var(--space-xs); }

/* ── Card Grid ──────────────────────────────────── */
.loop--card-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-l);
}
@media (min-width: 600px) {
  .loop--card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .loop--card-grid { grid-template-columns: repeat(var(--loop-columns, 3), 1fr); }
}
.loop--card-grid .loop-item {
  background:     var(--color-bg);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-m);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}
.loop--card-grid .loop-item__thumbnail {
  aspect-ratio: 16/9;
  overflow:     hidden;
}
.loop--card-grid .loop-item__thumbnail img { border-radius: 0; }
.loop--card-grid .loop-item__body {
  padding:        var(--space-l);
  flex:           1;
  display:        flex;
  flex-direction: column;
}
.loop--card-grid .loop-item__excerpt { flex: 1; }

/* ── List ───────────────────────────────────────── */
.loop--list { display: flex; flex-direction: column; gap: var(--space-l); }
.loop--list .loop-item {
  display:        flex;
  gap:            var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom:  1px solid var(--color-border);
}
.loop--list .loop-item:last-child { border-bottom: none; }
.loop--list .loop-item__thumbnail {
  flex-shrink:   0;
  width:         120px;
  height:        90px;
  overflow:      hidden;
  border-radius: var(--radius-s);
}
.loop--list .loop-item__thumbnail img { border-radius: 0; }
.loop--list .loop-item__body  { flex: 1; min-width: 0; }
.loop--list .loop-item__title { font-size: var(--font-size-md); }

@media (max-width: 480px) {
  .loop--list .loop-item { flex-direction: column; }
  .loop--list .loop-item__thumbnail { width: 100%; height: 180px; }
}

/* ── Classic Blog ───────────────────────────────── */
.loop--classic { display: flex; flex-direction: column; }
.loop--classic .loop-item {
  padding-bottom: var(--space-xl);
  margin-bottom:  var(--space-xl);
  border-bottom:  1px solid var(--color-border);
}
.loop--classic .loop-item:last-child { border-bottom: none; margin-bottom: 0; }
.loop--classic .loop-item__thumbnail {
  aspect-ratio:  16/6;
  overflow:      hidden;
  border-radius: var(--radius-m);
  margin-bottom: var(--space-l);
}
.loop--classic .loop-item__thumbnail img { border-radius: 0; }
.loop--classic .loop-item__title   { font-size: var(--font-size-xxl); }
.loop--classic .loop-item__excerpt { font-size: var(--font-size-md); }

/* ── Masonry (CSS columns — no JS) ─────────────── */
.loop--masonry {
  columns:    1;
  column-gap: var(--space-l);
}
@media (min-width: 600px)  { .loop--masonry { columns: 2; } }
@media (min-width: 1024px) { .loop--masonry { columns: var(--loop-columns, 3); } }

.loop--masonry .loop-item {
  break-inside:  avoid;
  margin-bottom: var(--space-l);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow:      hidden;
}
.loop--masonry .loop-item__thumbnail img { border-radius: 0; }
.loop--masonry .loop-item__body { padding: var(--space-m); }

/* ── No results ─────────────────────────────────── */
.no-results, .error-404 { padding: var(--space-xl) 0; }
.no-results .page-title,
.error-404 .page-title { font-size: var(--font-size-xl); margin-bottom: var(--space-m); }
.no-results .page-content,
.error-404 .page-content { color: var(--color-muted); }