.blog-container{max-width:none;margin:0 auto;padding:2rem 1rem;position:relative}.blog-hero{max-width:1600px;margin:0 auto 3rem;padding:3rem 2rem;text-align:center}.blog-title{font-size:3.5rem;font-weight:700;margin:0 0 1rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInDown .6s ease}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.blog-intro{font-size:1.25rem;color:#6b7280;max-width:700px;margin:0 auto;line-height:1.8;animation:fadeIn .6s ease .2s backwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.main-container{max-width:1600px;margin:0 auto}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;width:100%}.blog-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 16px #00000014;border:1px solid #e5e7eb;transition:all .4s cubic-bezier(.4,0,.2,1);opacity:0;animation:fadeInUp .6s ease forwards}.blog-card:nth-child(1){animation-delay:.1s}.blog-card:nth-child(2){animation-delay:.2s}.blog-card:nth-child(3){animation-delay:.3s}.blog-card:nth-child(4){animation-delay:.4s}.blog-card:nth-child(5){animation-delay:.5s}.blog-card:nth-child(6){animation-delay:.6s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.blog-card:hover{transform:translateY(-8px);box-shadow:0 12px 32px #667eea40;border-color:#667eea}.blog-card-link{display:block;text-decoration:none;color:inherit}.blog-card-image-wrapper{width:100%;height:240px;overflow:hidden;background:#f3f4f6}.blog-card-image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.blog-card:hover .blog-card-image{transform:scale(1.08)}.blog-card-content{padding:1.5rem;position:relative}.blog-card-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.blog-tag{display:inline-block;padding:.375rem .875rem;font-size:.875rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;transition:all .3s ease}.blog-card:hover .blog-tag{transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.blog-card-title{font-size:1.25rem;font-weight:700;color:#111827;margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease}.blog-card:hover .blog-card-title{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.external-link-icon{position:absolute;top:1.5rem;right:1.5rem;font-size:1.25rem;opacity:.6;transition:all .3s ease}.blog-card:hover .external-link-icon{opacity:1;transform:translateY(-2px)}.sidebar{width:320px;background:#fff;border-radius:16px;padding:1.75rem;box-shadow:0 4px 16px #00000014;border:1px solid #e5e7eb;position:fixed;top:50%;right:2rem;transform:translateY(-50%);max-height:80vh;overflow-y:auto;z-index:100}.sidebar h3{margin-top:0;font-size:1.25rem;font-weight:700;color:#111827;margin-bottom:1rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tag-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.tag-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.875rem 1.25rem;border-radius:8px;transition:background .2s ease;white-space:nowrap;min-height:48px}.tag-item:hover{background:#667eea0d}.tag-item a{color:#111827;text-decoration:none;font-weight:500;font-size:1rem;transition:color .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:.5rem}.tag-item a:hover{color:#667eea}.tag-count{color:#6b7280;font-size:.9rem;font-weight:600;background:#667eea1a;padding:.375rem .75rem;border-radius:12px;flex-shrink:0;margin-left:.75rem;min-width:2.5rem;text-align:center}@media(min-width:1920px){.blog-hero,.main-container{max-width:1800px}.sidebar{right:3rem;width:120px}}@media(max-width:1600px){.blog-hero,.main-container{max-width:1400px}}@media(max-width:1400px){.sidebar{right:1rem;width:300px}}@media(max-width:1200px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem}.sidebar{width:280px}}@media(max-width:1100px){.blog-hero{max-width:100%;padding:2.5rem 1.5rem}.main-container{max-width:100%;padding:0 1rem}.sidebar{position:relative;top:0;right:auto;width:100%;max-width:600px;margin:3rem auto 0;transform:none}.blog-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media(max-width:768px){.blog-container{padding:1rem .75rem}.blog-hero{padding:2rem 1rem;margin-bottom:2rem}.blog-title{font-size:clamp(2rem,6vw,2.5rem)}.blog-intro{font-size:clamp(1rem,3vw,1.1rem);padding:0 1rem}.main-container{max-width:100%;padding:0 .75rem}.blog-grid{grid-template-columns:1fr;gap:1.5rem}.sidebar{position:relative;top:0;right:auto;width:100%;max-width:100%;margin-top:2rem;padding:1.5rem 1.25rem;transform:none}.tag-item{padding:.75rem 1rem}.tag-item a{font-size:.95rem}.blog-card-image-wrapper{height:200px}.blog-card-content{padding:1.25rem}.blog-card-title{font-size:1.15rem}}@media(max-width:480px){.blog-container{padding:.75rem .5rem}.blog-hero{padding:1.5rem .75rem;margin-bottom:1.5rem}.blog-title{font-size:clamp(1.75rem,7vw,2rem);margin-bottom:.75rem}.blog-intro{font-size:clamp(.9rem,3.5vw,1rem);padding:0 .5rem}.main-container{padding:0 .5rem}.blog-grid{gap:1.25rem}.sidebar{padding:1.25rem 1rem;margin-top:1.5rem}.sidebar h3{font-size:1.1rem;margin-bottom:.875rem}.tag-list{gap:.625rem}.tag-item{padding:.625rem .875rem;min-height:44px}.tag-item a{font-size:.9rem}.tag-count{font-size:.85rem;padding:.3rem .625rem;min-width:2.25rem}.blog-card-image-wrapper{height:180px}.blog-card-content{padding:1rem}.blog-card-title{font-size:1.05rem}.blog-tag{font-size:.8rem;padding:.3rem .75rem}}
