.blog-page{padding:var(--space-3xl) 0 var(--space-4xl);min-height:60vh}.blog-header{margin-bottom:var(--space-2xl)}.blog-header h1{font-size:var(--text-3xl);font-weight:var(--weight-medium);margin-bottom:var(--space-lg)}.blog-header__subtitle{font-size:var(--text-base);color:var(--color-text-secondary)}.blog-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-2xl)}.blog-tag{display:inline-flex;align-items:center;padding:6px 16px;font-size:var(--text-sm);font-weight:var(--weight-medium);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);background:var(--color-bg-card);transition:all var(--transition-fast)}.blog-tag:hover{border-color:var(--color-accent);color:var(--color-accent)}.blog-tag--active{background:var(--color-accent-gradient);color:var(--color-accent-contrast);border-color:var(--color-accent)}.blog-tag--active:hover{color:var(--color-accent-contrast)}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}.blog-grid .blog-card:first-child{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:0}.blog-grid .blog-card:first-child .blog-card__image{border-radius:var(--radius-md) 0 0 var(--radius-md);aspect-ratio:auto;height:100%}.blog-grid .blog-card:first-child .blog-card__image img{height:100%;object-fit:cover}.blog-grid .blog-card:first-child .blog-card__content{display:flex;flex-direction:column;justify-content:center;padding:var(--space-xl) var(--space-2xl)}.blog-grid .blog-card:first-child .blog-card__title{font-size:var(--text-2xl)}.blog-grid .blog-card:first-child .blog-card__excerpt{-webkit-line-clamp:4}.blog-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.blog-card:hover{border-color:var(--color-border-light);box-shadow:0 4px 20px #0000000f}.blog-card__image{display:block;aspect-ratio:16 / 9;overflow:hidden;background:var(--color-bg-secondary)}.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.blog-card:hover .blog-card__image img{transform:scale(1.03)}.blog-card__content{padding:var(--space-lg)}.blog-card__meta{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);font-size:var(--text-sm);color:var(--color-text-muted)}.blog-card__date{font-size:var(--text-sm);color:var(--color-text-muted)}.blog-card__meta-sep{color:var(--color-border)}.blog-card__reading-time{font-size:var(--text-sm);color:var(--color-text-muted)}.blog-card__tag{display:inline-block;font-size:var(--text-xs);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent);background:var(--color-accent-subtle);padding:2px 8px;border-radius:var(--radius-full)}.blog-card__title{font-size:var(--text-lg);font-weight:var(--weight-medium);line-height:1.35;margin-bottom:var(--space-sm)}.blog-card__title a{transition:color var(--transition-fast)}.blog-card__title a:hover{color:var(--color-accent)}.blog-card__excerpt{font-size:var(--text-sm);line-height:1.65;color:var(--color-text-secondary);margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.blog-card__read-more{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-accent);transition:gap var(--transition-fast)}.blog-card__read-more:hover{gap:10px}.blog-card__read-more svg{width:14px;height:14px;color:var(--color-accent)}.blog-page .empty-state{background:var(--color-bg-secondary);border-radius:var(--radius-lg);border:1px dashed var(--color-border)}.blog-page .empty-state__icon{margin-bottom:var(--space-lg);color:var(--color-text-muted)}.blog-article{padding:var(--space-3xl) 0 var(--space-4xl);min-height:60vh}.blog-article__back{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-xl);transition:color var(--transition-fast)}.blog-article__back:hover{color:var(--color-text-primary)}.blog-article__back svg{width:16px;height:16px}.blog-article__header{max-width:720px;margin:0 auto var(--space-xl);text-align:center}.blog-article__meta{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-lg);font-size:var(--text-sm);color:var(--color-text-muted)}.blog-article__header h1{font-size:clamp(1.75rem,4vw,var(--text-4xl));font-weight:var(--weight-medium);line-height:1.2;margin-bottom:var(--space-md)}.blog-article__excerpt{font-size:var(--text-lg);line-height:1.65;color:var(--color-text-secondary);max-width:600px;margin:0 auto}.blog-article__hero{margin:0 auto var(--space-2xl);max-width:960px;border-radius:var(--radius-lg);overflow:hidden}.blog-article__hero img{width:100%;height:auto;display:block}.blog-article__body{max-width:720px;margin:0 auto}.blog-article__body h2{font-size:var(--text-2xl);font-weight:var(--weight-medium);margin:var(--space-2xl) 0 var(--space-md);color:var(--color-text-primary)}.blog-article__body h3{font-size:var(--text-xl);font-weight:var(--weight-medium);margin:var(--space-xl) 0 var(--space-md);color:var(--color-text-primary)}.blog-article__body h4{font-size:var(--text-lg);font-weight:var(--weight-medium);margin:var(--space-xl) 0 var(--space-sm);color:var(--color-text-primary)}.blog-article__body p{font-size:var(--text-base);line-height:1.8;margin-bottom:var(--space-lg);color:var(--color-text-secondary)}.blog-article__body p:last-child{margin-bottom:0}.blog-article__body ul,.blog-article__body ol{font-size:var(--text-base);line-height:1.8;margin-bottom:var(--space-lg);padding-left:var(--space-xl);color:var(--color-text-secondary);list-style:disc}.blog-article__body ol{list-style:decimal}.blog-article__body li{margin-bottom:var(--space-xs)}.blog-article__body blockquote{border-left:3px solid var(--color-accent);padding:var(--space-md) var(--space-lg);margin:var(--space-xl) 0;background:var(--color-bg-secondary);border-radius:0 var(--radius-md) var(--radius-md) 0}.blog-article__body blockquote p{font-style:italic;color:var(--color-text-primary);margin-bottom:0}.blog-article__body a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;transition:opacity var(--transition-fast)}.blog-article__body a:hover{opacity:.7}.blog-article__body strong{font-weight:var(--weight-medium);color:var(--color-text-primary)}.blog-article__body img{border-radius:var(--radius-md);margin:var(--space-xl) 0}.blog-article__body table{width:100%;border-collapse:collapse;margin:var(--space-xl) 0;font-size:var(--text-sm)}.blog-article__body th,.blog-article__body td{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);text-align:left}.blog-article__body th{background:var(--color-bg-secondary);font-weight:var(--weight-medium);color:var(--color-text-primary)}.blog-article__body td{color:var(--color-text-secondary)}.blog-share{max-width:720px;margin:var(--space-2xl) auto 0;display:flex;align-items:center;gap:var(--space-md)}.blog-share__label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted)}.blog-share__buttons{display:flex;gap:var(--space-sm)}.blog-share__btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-secondary);background:none;cursor:pointer;transition:all var(--transition-fast)}.blog-share__btn:hover{color:var(--color-accent);border-color:var(--color-accent);background:var(--color-accent-subtle)}.blog-related{max-width:960px;margin:var(--space-3xl) auto 0}.blog-related__title{font-size:var(--text-xl);font-weight:var(--weight-medium);margin-bottom:var(--space-xl)}.blog-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}.blog-article__divider{border:none;border-top:1px solid var(--color-border);max-width:720px;margin:var(--space-2xl) auto}.blog-article__footer{max-width:960px;margin:var(--space-2xl) auto 0;padding-top:var(--space-xl);border-top:1px solid var(--color-border)}.blog-article__footer-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-accent);transition:gap var(--transition-fast)}.blog-article__footer-link:hover{gap:10px}.blog-article__footer-link svg{width:16px;height:16px;color:var(--color-accent)}.blog-page .pagination-container{margin-top:var(--space-2xl);display:flex;justify-content:center}.blog-page .pagination{display:flex;align-items:center;gap:var(--space-xs);list-style:none}.blog-page .pagination-item{display:flex}.blog-page .pagination-link{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);background:var(--color-bg-card);font-size:var(--text-sm);font-family:var(--font-mono);transition:all var(--transition-fast)}.blog-page .pagination-item.active .pagination-link{background:var(--color-accent-gradient);color:var(--color-accent-contrast);border-color:var(--color-accent)}.blog-page .pagination-item:not(.active):not(.disabled) .pagination-link:hover{border-color:var(--color-accent)}.blog-page .pagination-item.disabled .pagination-link{opacity:.3;cursor:not-allowed}@media(max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}.blog-grid .blog-card:first-child{grid-column:1 / -1}.blog-related__grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.blog-page{padding:var(--space-lg) 0 var(--space-2xl)}.blog-header{margin-bottom:var(--space-xl)}.blog-header h1{font-size:var(--text-2xl)}.blog-grid{grid-template-columns:1fr;gap:var(--space-lg)}.blog-grid .blog-card:first-child{grid-template-columns:1fr}.blog-grid .blog-card:first-child .blog-card__image{border-radius:var(--radius-md) var(--radius-md) 0 0;aspect-ratio:16 / 9}.blog-grid .blog-card:first-child .blog-card__content{padding:var(--space-lg)}.blog-grid .blog-card:first-child .blog-card__title{font-size:var(--text-lg)}.blog-article{padding:var(--space-md) 0 var(--space-2xl)}.blog-article__header{text-align:left}.blog-article__meta{justify-content:flex-start}.blog-article__header h1{font-size:var(--text-2xl)}.blog-article__excerpt{font-size:var(--text-base)}.blog-article__hero{border-radius:var(--radius-md)}.blog-article__body h2{font-size:var(--text-xl)}.blog-article__body h3{font-size:var(--text-lg)}.blog-related__grid{grid-template-columns:1fr}}@media(max-width:480px){.blog-card__content{padding:var(--space-md)}}
