.articles-section{background-color:var(--color-background-default)}.articles-search-wrapper{max-width:100%;margin:0 auto var(--spacing-6) auto;justify-content:center;display:flex}.articles-search-form{width:100%;max-width:800px}.articles-search-field-container{align-items:center;width:100%;display:flex;position:relative}.articles-search-icon{right:var(--spacing-4);color:var(--color-text-muted);pointer-events:none;flex-shrink:0;position:absolute}.articles-search-input{width:100%;padding:var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-10);padding-right:var(--spacing-10);background-color:var(--color-neutral-50);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--color-text-primary);transition:all var(--transition-fast);outline:none;box-shadow:0 2px 4px #00000005}.articles-search-input:hover{border-color:var(--color-primary-500)}.articles-search-input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #9913251f}.articles-search-input::placeholder{color:var(--color-text-muted);font-weight:var(--font-weight-light)}.articles-search-clear-btn{left:var(--spacing-4);color:var(--color-text-muted);font-size:var(--font-size-sm);cursor:pointer;padding:var(--spacing-1);border-radius:var(--radius-sm);transition:color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute}.articles-search-clear-btn:hover{color:var(--color-primary-500)}.infinite-scroll-sentinel{height:20px;margin-top:var(--spacing-8);width:100%}.articles-section .filter-buttons{justify-content:center;align-items:center;gap:var(--spacing-3);margin-bottom:var(--spacing-9);padding-bottom:var(--spacing-2);-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;display:flex;overflow-x:auto}.articles-section .filter-buttons::-webkit-scrollbar{display:none}.articles-section .filter-btn{white-space:nowrap;padding:var(--spacing-2) var(--spacing-5);background-color:var(--color-secondary-500);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.articles-section .filter-btn:hover{border-color:var(--color-primary-500);color:var(--color-primary-500)}.articles-section .filter-btn.active{background-color:var(--color-primary-500);color:var(--text-white);border-color:var(--color-primary-500)}@media (max-width:767px){.articles-section .filter-buttons{justify-content:flex-start}}.article-card{flex-direction:column;height:100%;padding:0;display:flex}.article-cover{background-color:var(--color-secondary-500);border-bottom:var(--border-width-default) solid var(--color-border-default);height:200px;position:relative;overflow:hidden}.article-cover-link{cursor:pointer;width:100%;height:100%;display:block}.article-img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-normal)}.article-card:hover .article-img{transform:scale(1.05)}.article-category{top:var(--spacing-4);right:var(--spacing-4);background:var(--color-primary-500);color:var(--text-white);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-sm);position:absolute}.article-content{padding:var(--spacing-6);flex-direction:column;flex:1;display:flex}.article-content-skeleton{gap:var(--spacing-3)}.skeleton-line-meta{border-radius:var(--radius-sm);width:40%;height:16px}.skeleton-line-title{border-radius:var(--radius-sm);width:85%;height:24px}.skeleton-line-body{border-radius:var(--radius-sm);width:100%;height:40px}.articles-empty-message{text-align:center;padding:var(--spacing-7);color:var(--color-text-secondary)}.article-meta{align-items:center;gap:var(--spacing-2);font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--spacing-3);display:flex}.article-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--spacing-3);line-height:1.4}.article-title-link{color:var(--color-text-primary);transition:color var(--transition-fast);text-decoration:none}.article-title-link:hover{color:var(--color-primary-500)}.article-snippet{font-size:var(--font-size-xs);font-weight:var(--font-weight-light);color:var(--color-text-primary);margin-bottom:var(--spacing-5);flex:1;line-height:1.6}.article-read-more{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-primary-500);align-items:center;gap:var(--spacing-1);transition:gap var(--transition-fast);display:inline-flex}.article-read-more:hover{gap:var(--spacing-2)}.articles-pagination{justify-content:center;align-items:center;gap:var(--spacing-3);margin-top:var(--spacing-10);padding-top:var(--spacing-6);border-top:var(--border-width-default) solid var(--color-border-default);flex-wrap:wrap;display:flex}.pagination-btn{align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);background-color:var(--color-neutral-50);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);display:inline-flex}.pagination-btn:hover:not(:disabled){border-color:var(--color-primary-500);color:var(--color-primary-500)}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-numbers{align-items:center;gap:var(--spacing-2);display:flex}.pagination-number{min-width:38px;height:38px;padding:0 var(--spacing-2);background-color:var(--color-neutral-50);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.pagination-number:hover:not(.active):not(:disabled){border-color:var(--color-primary-500);color:var(--color-primary-500)}.pagination-number.active{background-color:var(--color-primary-500);color:var(--text-white);border-color:var(--color-primary-500);cursor:default}.pagination-number:disabled{cursor:not-allowed}