.blog-hero{background:linear-gradient(135deg,var(--primary-950)0%,var(--primary-900)50%,var(--primary-800)100%);padding:var(--space-24)0 var(--space-12);position:relative;overflow:hidden}.blog-hero:before{content:"";pointer-events:none;background:radial-gradient(circle at 100% 0,#eab3081a 0%,#0000 50%);position:absolute;inset:0}.blog-hero-content{z-index:1;text-align:center;max-width:700px;margin:0 auto;position:relative}.blog-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,var(--text-5xl));color:var(--white);margin-bottom:var(--space-4);letter-spacing:var(--tracking-tight);font-weight:400;line-height:var(--leading-tight)}.blog-subtitle{font-size:var(--text-lg);color:var(--primary-200);line-height:var(--leading-relaxed);max-width:600px;margin:0 auto}.blog-listing-section{background:var(--white);padding:var(--space-16)0 var(--space-24)}.blog-search-container{max-width:800px;margin:0 auto var(--space-8);position:relative}.blog-search-input{width:100%;padding:var(--space-4)var(--space-6);font-family:var(--font-primary);font-size:var(--text-base);color:var(--gray-900);background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius-lg);transition:all var(--transition-base);outline:none}.blog-search-input::placeholder{color:var(--gray-500)}.blog-search-input:focus{border-color:var(--accent-500);box-shadow:0 0 0 3px #eab3081a}.blog-search-clear{right:var(--space-4);background:var(--gray-200);border-radius:var(--radius-full);width:28px;height:28px;color:var(--gray-600);cursor:pointer;transition:all var(--transition-base);font-size:var(--text-sm);border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.blog-search-clear:hover{background:var(--gray-300);color:var(--gray-900)}.blog-categories{gap:var(--space-3);max-width:800px;margin:0 auto var(--space-6);flex-wrap:wrap;justify-content:center;display:flex}.blog-category-pill{padding:var(--space-2)var(--space-5);background:var(--gray-100);color:var(--gray-700);font-size:var(--text-sm);border:1px solid var(--gray-300);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);text-transform:capitalize;align-items:center;font-weight:500;display:inline-flex}.blog-category-pill:hover{background:var(--gray-200);border-color:var(--gray-400);color:var(--gray-900)}.blog-category-pill.active{background:linear-gradient(135deg,var(--accent-500),var(--accent-400));color:var(--primary-900);border-color:var(--accent-500);font-weight:600;box-shadow:0 2px 8px #eab30840}.blog-results-count{text-align:center;font-size:var(--text-sm);color:var(--gray-600);margin:0 auto var(--space-10);max-width:800px}.blog-list{flex-direction:column;max-width:900px;margin:0 auto;display:flex}.blog-list-item{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-5)var(--space-6);border-bottom:1px solid var(--gray-200);transition:all var(--transition-base);cursor:pointer;text-decoration:none;display:flex}.blog-list-item:hover{background:var(--gray-50);padding-left:var(--space-8);border-bottom-color:var(--accent-400)}.blog-list-item:hover .blog-list-title{color:var(--accent-600)}.blog-list-item-content{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.blog-list-category{width:fit-content;padding:2px var(--space-3);background:var(--accent-100);color:var(--accent-800);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wider);border-radius:var(--radius-md);align-items:center;font-weight:600;display:inline-flex}.blog-list-title{font-family:var(--font-primary);font-size:var(--text-xl);color:var(--primary-900);font-weight:600;line-height:var(--leading-snug);transition:color var(--transition-base);margin:0}.blog-list-meta{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--gray-600);white-space:nowrap;display:flex}.blog-list-separator{color:var(--gray-400)}.blog-list-date,.blog-list-read-time{font-weight:500}.blog-no-results{max-width:600px;margin:var(--space-16)auto;text-align:center;padding:var(--space-12)var(--space-6)}.blog-no-results p{font-size:var(--text-lg);color:var(--gray-600);margin-bottom:var(--space-6)}.blog-reset-filters{padding:var(--space-3)var(--space-6);background:var(--primary-900);color:var(--white);font-size:var(--text-base);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-transform:uppercase;letter-spacing:var(--tracking-wide);border:none;justify-content:center;align-items:center;font-weight:600;display:inline-flex}.blog-reset-filters:hover{background:var(--primary-800);box-shadow:var(--shadow-lg);transform:translateY(-1px)}@media (min-width:768px){.blog-hero{padding:var(--space-32)0 var(--space-16)}.blog-listing-section{padding:var(--space-20)0 var(--space-32)}.blog-list-title{font-size:var(--text-2xl)}}@media (max-width:767px){.blog-hero{padding:var(--space-12)0 var(--space-10)}.blog-title{font-size:var(--text-3xl)}.blog-subtitle{font-size:var(--text-base)}.blog-listing-section{padding:var(--space-12)0 var(--space-16)}.blog-search-input{padding:var(--space-3)var(--space-5);font-size:var(--text-sm)}.blog-categories{justify-content:flex-start}.blog-category-pill{font-size:var(--text-xs);padding:var(--space-2)var(--space-4)}.blog-list-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);flex-direction:column}.blog-list-item:hover{padding-left:var(--space-5)}.blog-list-title{font-size:var(--text-lg)}.blog-list-meta{font-size:var(--text-xs)}.blog-no-results{padding:var(--space-8)var(--space-4)}.blog-no-results p{font-size:var(--text-base)}}@media (min-width:768px) and (max-width:1023px){.blog-list{max-width:800px}.blog-list-item{gap:var(--space-5)}.blog-list-title{font-size:var(--text-xl)}}@media (min-width:1024px){.blog-list{max-width:1000px}.blog-search-container,.blog-categories,.blog-results-count{max-width:900px}}.blog-search-input:focus-visible,.blog-category-pill:focus-visible,.blog-list-item:focus-visible,.blog-reset-filters:focus-visible,.blog-search-clear:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.blog-list-item{animation:.3s ease-out fadeIn}@media (prefers-reduced-motion:reduce){.blog-list-item,.blog-search-input,.blog-category-pill,.blog-list-item:hover{transition:none;animation:none}}