.articles-intro{background-color:rgba(255,255,255,.1);color:#fff;padding:1.5rem;border-radius:16px;margin-bottom:2rem;text-align:left}.articles-intro p{font-size:1rem;line-height:1.6;margin:0}.filter-container{margin-bottom:2rem}.search-bar{width:100%;font-size:1rem;padding:.8rem 1rem}.articles-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:1.5rem;gap:1.5rem}.article-card-link{text-decoration:none;color:inherit;display:flex}.article-card{display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;margin-bottom:0;width:100%}.article-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,.12)}.article-thumbnail{height:180px;margin-bottom:1rem}.article-content{display:flex;flex-direction:column;flex-grow:1}.article-content h3{font-size:1.1rem;margin-bottom:.5rem}.article-content p{font-size:.9rem;color:var(--color-medgray);flex-grow:1;margin-bottom:1rem}.article-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}.tag{background-color:#f4f4f5;color:var(--color-graphite);font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:20px}.no-results-message{text-align:center;color:#fff;padding:2rem;background-color:rgba(255,255,255,.1);border-radius:16px}.article-container{max-width:800px;margin:0 auto}.article-header{text-align:center;margin-bottom:2rem}.article-header h1{color:#fff;font-size:2.5rem;line-height:1.2;margin-bottom:1rem}.article-meta{display:flex;justify-content:center;gap:1.5rem;color:#fff;opacity:.8;font-size:.9rem;margin-bottom:1.5rem}.article-meta span{display:flex;align-items:center;gap:.5rem}.article-header .article-tags{justify-content:center}.article-hero-image{height:400px;margin-bottom:2rem}.article-body{padding:2rem;font-size:1.1rem;line-height:1.7}.article-body h2{font-size:1.75rem;margin-top:2.5rem;margin-bottom:1rem}.article-body p,.article-body ul{margin-bottom:1.5rem}.article-body ul{list-style-type:disc;padding-left:1.5rem}.article-body li{margin-bottom:.75rem}.article-body ol{padding-left:1rem}.article-body ol li,.article-body ol li a{font-size:.9rem;font-style:italic}@media (max-width:1100px){.articles-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:900px){.articles-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.article-header h1{font-size:2rem}.article-hero-image{height:300px}.article-body{padding:1.5rem;font-size:1rem}}@media (max-width:600px){.articles-grid{grid-template-columns:1fr}}