/* Blog Archive */
.zz-blog-archive { background-color: var(--background); }
.zz-blog-grid__layout { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-bottom: 4rem; }
/* Asymmetric Bento Grid */
.zz-blog-grid__layout { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    grid-template-rows: auto auto; 
    gap: 2rem; 
    margin-bottom: 4rem; 
}

.zz-blog-grid__featured { 
    grid-column: 1; 
    grid-row: 1; 
}

.zz-blog-grid__sidebar { 
    grid-column: 2; 
    grid-row: 1; 
}

.zz-blog-grid__regular { 
    grid-column: 1 / -1; 
    grid-row: 2; 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 2rem; 
}

@media (max-width: 768px) { 
    .zz-blog-grid__layout { grid-template-columns: 1fr; grid-template-rows: auto; }
    .zz-blog-grid__featured, .zz-blog-grid__sidebar { grid-column: 1; }
    .zz-blog-grid__regular { grid-template-columns: 1fr; }
}

/* Fix overflow issues */
.zz-blog-archive { overflow-x: hidden; }
.zz-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
    display: inline-block; padding: 0.75rem 1.5rem; background-color: var(--surface-container); 
    color: var(--on-surface); text-decoration: none; border-radius: 9999px; 
    font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; 
    border: 1px solid var(--outline-variant); 
}
    background-color: var(--primary-container); color: var(--on-primary-container); 
    transform: translateY(-2px); text-decoration: none; 
}
    background-color: var(--primary); color: var(--on-primary); border-color: var(--primary); 
}

/* CTA Share Banner */
.zz-story-cta { 
    background: linear-gradient(135deg, var(--primary-container), var(--secondary-container)); 
    border-radius: 1.5rem; padding: 3rem 2rem; text-align: left; margin: 3rem 0 4rem; 
}
.zz-story-cta__title { 
    font-size: 2rem; font-weight: 700; color: var(--on-primary-container); margin: 0 0 1rem; 
}
.zz-story-cta__text { 
    font-size: 1.125rem; color: var(--on-primary-container); margin: 0 0 2rem; max-width: 32ch; margin-left: auto; margin-right: auto; 
}
.zz-story-cta__button { 
    display: inline-block; background-color: var(--primary); color: var(--on-primary); 
    padding: 1rem 2rem; border-radius: 9999px; text-decoration: none; font-weight: 600; 
    transition: transform 0.2s ease; 
}
.zz-story-cta__button:hover { transform: translateY(-2px); text-decoration: none; }
}
/* Hero + Pills Side-by-Side */
    padding: 2.5rem 0 1.5rem;  margin-bottom: 3rem; 
    display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; 
}
.zz-category-filter { margin: 0; flex-shrink: 0; }
.zz-category-filter__pills { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
.zz-category-filter__pill { 
    padding: 0.5rem 1rem; background-color: var(--surface-container); color: var(--on-surface); 
    text-decoration: none; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; 
    transition: all 0.2s ease; border: none; box-shadow: 0 1px 3px rgba(29,27,23,0.1); 
}
.zz-category-filter__pill:hover { 
    background-color: var(--primary-container); color: var(--on-primary-container); 
    transform: translateY(-1px); text-decoration: none; box-shadow: 0 2px 6px rgba(29,27,23,0.15); 
}
.zz-category-filter__pill--active { 
    background-color: var(--primary); color: var(--on-primary); 
    box-shadow: 0 2px 8px rgba(96,98,0,0.3); 
}
@media (max-width: 768px) {
    .zz-category-filter__pills { justify-content: flex-start; }
}
/* Hero - Left aligned + side filters */
.zz-blog-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; padding: 2rem 0 1.5rem;  margin-bottom: 3rem; }
.zz-blog-hero__content { text-align: left; }
.zz-blog-hero__title { font-size: 2.5rem; font-weight: 800; line-height: 1.1; color: var(--on-surface); margin: 0 0 1rem; letter-spacing: -0.02em; }
.zz-blog-hero__subtitle { font-size: 1.125rem; line-height: 1.6; color: var(--on-surface-variant); max-width: 42ch; margin: 0; }
.zz-blog-hero__filters { flex-shrink: 0; }
.zz-blog-hero .zz-category-filter { margin: 0; }
@media (max-width: 768px) {
    .zz-blog-hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 0 1rem; }
    .zz-blog-hero__title { font-size: 2rem; }
    .zz-blog-hero__filters { order: -1; }
}