.articles-page{width: 100%;min-height: 70vh;overflow: hidden}.articles-hero{background: var(--white);padding: 4rem 2rem 1.5rem;text-align: center}.hero-content h1{font-size: 2.5rem;font-weight: 700;color: var(--black);margin-bottom: 1rem}.hero-content p{font-size: 1.1rem;max-width: 600px;margin: 0 auto;color: #666;line-height: 1.6}.articles-section{padding: 1.5rem 0 4rem}.section-container{max-width: 1200px;margin: 0 auto;padding: 0 1rem}.filter-bar{display: flex;flex-wrap: wrap;gap: 1rem;margin-bottom: 2rem;padding-bottom: 1.5rem;border-bottom: 1px solid var(--border-light)}.filter-group{display: flex;flex-direction: column;gap: 0.25rem;text-align: left}.filter-group label{font-size: var(--fs-tiny);font-weight: 500;color: var(--gray)}.filter-select{height: 42px;padding: 0 2.25rem 0 0.9rem;border: 1px solid var(--border);border-radius: var(--radius-md);background-color: var(--white);font-size: 0.95rem;font-family: inherit;color: var(--black);cursor: pointer;min-width: 180px;-webkit-appearance: none;-moz-appearance: none;appearance: none;accent-color: var(--orange);-webkit-tap-highlight-color: transparent;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 13px}.filter-select:focus,.filter-select:focus-visible,.filter-select:active{outline: none;box-shadow: none;border-color: var(--border)}.articles-grid{display: grid;grid-template-columns: 1fr;gap: 2rem}.article-card{position: relative;background-color: var(--white);border-radius: var(--radius-lg);overflow: hidden;border: 1px solid var(--border-light);box-shadow: 0 2px 8px var(--shadow-sm);transition: all var(--transition-base);display: flex;flex-direction: column}.article-card:hover{border-color: var(--border);box-shadow: 0 4px 16px var(--shadow-md)}.article-image{position: relative;width: 100%;padding-top: 56.25%;overflow: hidden;background-color: var(--border-light)}.article-image img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;transition: transform var(--transition-base)}.article-card:hover .article-image img{transform: none}.placeholder-image{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg,var(--light-bg) 0%,var(--border) 100%);font-size: 4rem}.category-badge{position: absolute;top: 12px;left: 12px;background-color: var(--primary);color: var(--white);padding: 0.25rem 0.75rem;border-radius: var(--radius-full);font-size: var(--fs-tiny);font-weight: 600;text-transform: capitalize;z-index: 1;box-shadow: 0 2px 8px var(--shadow-md)}.article-content{padding: 1.5rem;flex-grow: 1;display: flex;flex-direction: column}.article-title{font-size: 1.5rem;font-weight: 700;line-height: 1.3;margin-bottom: 0.6rem}.article-title a{color: var(--black);text-decoration: none;transition: color var(--transition-base)}.article-title a:hover{color: var(--primary)}.article-title a::after{content: '';position: absolute;inset: 0;z-index: 1}.article-excerpt{color: var(--gray);font-size: 0.92rem;line-height: 1.6;margin-bottom: 1.25rem;display: -webkit-box;-webkit-line-clamp: 5;line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden}.article-meta{display: flex;flex-direction: column;align-items: flex-start;gap: 0.5rem;margin-bottom: var(--space-lg);padding-top: var(--space-md);border-top: 1px solid var(--border);font-size: var(--fs-small)}.meta-left,.meta-right{display: flex;align-items: center;gap: 1.25rem;flex-wrap: wrap}.author,.date{color: var(--gray)}.separator{color: var(--gray-lighter)}.likes,.views{display: flex;align-items: center;gap: 0.4rem;color: var(--gray)}.likes .icon-small,.views .icon-small{margin-top: -1px}.heart,.eye{font-size: 1.1rem}a.read-more{display: inline-flex;align-items: center;justify-content: center;gap: var(--space-sm);padding: 0.7rem 2.2rem;background: var(--primary);color: var(--white) !important;text-decoration: none;border-radius: var(--radius-md);font-weight: 600;font-size: 0.9rem;transition: all var(--transition-base);align-self: center;margin: auto 0 1.25rem;border: 2px solid transparent;position: relative;z-index: 2}a.read-more:hover{background: var(--secondary);color: var(--white) !important;transform: translateY(-2px)}.article-stats{position: absolute;bottom: 12px;right: 12px;z-index: 1;display: flex;align-items: center;gap: 0.85rem;padding: 0.3rem 0.7rem;background: rgba(0,0,0,0.55);border-radius: var(--radius-full);color: #fff;font-size: 0.8rem;font-weight: 600}.article-stats .likes,.article-stats .views{color: #fff}.article-byline{display: flex;align-items: center;justify-content: space-between;gap: 0.75rem;padding-top: 0.85rem;border-top: 1px solid var(--border-light);font-size: 0.78rem;font-weight: 400;color: var(--gray)}.article-byline .author{font-weight: 400;color: var(--gray);text-align: right}.no-articles{text-align: center;padding: 3rem 2rem;background: var(--white);border-radius: var(--radius-lg);border: 2px solid transparent;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='14' ry='14' stroke='%23e0e0e0' stroke-width='3' stroke-dasharray='6%2C7' stroke-linecap='square'/%3E%3C/svg%3E");background-origin: border-box;background-clip: border-box;background-size: 100% 100%;background-repeat: no-repeat;margin: 1rem 0}.no-articles-icon{width: 52px;height: 52px;margin: 0 auto 1rem;color: var(--gray);opacity: 0.4}.no-articles-icon svg{width: 100%;height: 100%;stroke: currentColor}.no-articles h3{font-size: 1rem;font-weight: 600;color: var(--black);margin-bottom: 0.4rem}.no-articles p{font-size: 0.8rem;color: var(--gray);margin: 0;line-height: 1.6}@media screen and (max-width: 479px){.articles-hero{padding: 2.5rem 0.75rem 1.25rem}.hero-content h1{font-size: 1.75rem;line-height: 1.2}.hero-content p{font-size: 0.95rem}}@media screen and (min-width: 480px) and (max-width: 768px){.hero-content h1{font-size: 2rem}}@media screen and (min-width: 769px){.articles-grid{grid-template-columns: repeat(2,1fr);gap: 2.5rem}.articles-hero{padding: 4.5rem 2rem 1.75rem}.article-meta{flex-direction: row;justify-content: space-between;align-items: center;gap: 0.75rem}}@media screen and (min-width: 1025px){.articles-grid{grid-template-columns: repeat(3,1fr);gap: 3rem}.articles-section{padding: 1.75rem 0 5rem}.hero-content h1{font-size: 3rem}.hero-content p{font-size: 1.2rem}}