/* ============================================================
   tripreviewall.com — All Blog (listing) page styles
   Per tripreviewall-all-blog-brief.md v2
   ============================================================ */

.blog-page-header { padding: 32px 0 40px; }

/* ---- Pillar strip ---- */
.pillar-band { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 24px 0; margin-bottom: 40px; }
.pillar-eyebrow { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); font-weight: 700; margin-bottom: 16px; }
.pillar-row { display: flex; gap: 16px; overflow-x: auto; }
.pillar-card { flex: 0 0 240px; }
.pillar-card-img { aspect-ratio: 16/9; border-radius: var(--radius-md); background-size: cover; background-position: center; margin-bottom: 8px; }
.pillar-card-title { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-serif); font-weight: 600; font-size: var(--text-h4); gap: 6px; }
.pillar-card-title svg { width: 16px; height: 16px; color: var(--color-cta); flex-shrink: 0; }

/* ---- Layer 1 tabs ---- */
.layer1-tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; }
.layer1-tab { background: none; border: none; padding: 12px 2px; font-weight: 500; font-size: var(--text-body); color: var(--color-text-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.layer1-tab.active { color: var(--color-primary); font-weight: 600; border-bottom-color: var(--color-cta); }

/* ---- Layer 2 filters ---- */
.layer2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0 28px; }
.layer2-select { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: var(--text-meta); background: var(--color-bg-alt); color: var(--color-text-muted); }
.layer2-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- Article card additions (extends .blog-card from style.css) ---- */
.blog-card-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.blog-card-island { font-size: var(--text-meta); color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; }
.blog-card-island svg { width: 12px; height: 12px; }

.load-more-wrap { text-align: center; margin: 40px 0; }

.empty-state { text-align: center; padding: 80px 24px; }
.empty-state svg { width: 48px; height: 48px; color: var(--color-border-strong); margin-bottom: 16px; }
.empty-state h3 { font-size: var(--text-h4); margin: 0 0 8px; }
.empty-state p { color: var(--color-text-muted); margin: 0 0 20px; }