.blog-post-page{background:var(--gray-50);min-height:100vh;padding:120px 0 80px}.blog-post-page .container{max-width:800px}.blog-post-header{text-align:center;margin-bottom:40px}.blog-post-header .blog-category{background:var(--gradient);color:var(--white);text-transform:uppercase;letter-spacing:.5px;border-radius:50px;margin-bottom:24px;padding:8px 20px;font-size:13px;font-weight:600;display:inline-block}.blog-post-header h1{color:var(--dark);letter-spacing:-1px;margin-bottom:24px;font-size:42px;font-weight:800;line-height:1.2}.blog-post-meta{justify-content:center;align-items:center;gap:24px;display:flex}.blog-post-meta .blog-date,.blog-post-meta .blog-read-time{color:var(--gray-500);align-items:center;gap:8px;font-size:15px;display:flex}.blog-post-image{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);margin-bottom:48px;overflow:hidden}.blog-post-image img{object-fit:cover;width:100%;height:400px}.blog-post-content{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:40px;padding:48px 56px}.blog-post-content h2{color:var(--dark);border-top:1px solid var(--gray-200);margin-top:48px;margin-bottom:20px;padding-top:24px;font-size:28px;font-weight:700}.blog-post-content h2:first-child{border-top:none;margin-top:0;padding-top:0}.blog-post-content h3{color:var(--dark);margin-top:32px;margin-bottom:16px;font-size:20px;font-weight:600}.blog-post-content p{color:var(--gray-700);margin-bottom:20px;font-size:17px;line-height:1.8}.blog-post-content ul,.blog-post-content ol{margin-bottom:24px;margin-left:24px}.blog-post-content li{color:var(--gray-700);margin-bottom:10px;font-size:17px;line-height:1.8}.blog-post-content strong{color:var(--dark);font-weight:600}.blog-post-content code{background:var(--gray-100);color:var(--primary);border-radius:4px;padding:4px 8px;font-family:SF Mono,Monaco,monospace;font-size:14px}.blog-post-content pre{background:var(--gray-900);color:var(--gray-100);border-radius:var(--radius-md);margin-bottom:24px;padding:20px 24px;overflow-x:auto}.blog-post-content pre code{color:inherit;background:0 0;padding:0}.blog-post-content table{border-collapse:collapse;width:100%;margin-bottom:24px;font-size:15px}.blog-post-content th,.blog-post-content td{text-align:left;border-bottom:1px solid var(--gray-200);padding:12px 16px}.blog-post-content th{background:var(--gray-50);color:var(--dark);font-weight:600}.blog-post-content td{color:var(--gray-700)}.blog-post-content hr{background:var(--gray-200);border:none;height:1px;margin:40px 0}.blog-post-cta{background:var(--gradient);border-radius:var(--radius-xl);text-align:center;margin-bottom:32px;padding:48px}.blog-post-cta h3{color:var(--white);margin-bottom:16px;font-size:28px;font-weight:700}.blog-post-cta p{color:#ffffffe6;max-width:500px;margin-bottom:28px;margin-left:auto;margin-right:auto;font-size:18px}.blog-post-cta .btn{background:var(--white);color:var(--primary);box-shadow:var(--shadow-lg)}.blog-post-cta .btn:hover{transform:translateY(-2px)}.blog-post-share{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);justify-content:center;align-items:center;gap:16px;padding:24px;display:flex}.blog-post-share span{color:var(--dark);font-weight:600}.share-buttons{gap:12px;display:flex}.share-btn{background:var(--gray-100);color:var(--gray-700);border-radius:var(--radius);padding:10px 20px;font-size:14px;font-weight:500;transition:all .2s}.share-btn:hover{background:var(--primary);color:var(--white)}@media (max-width:768px){.blog-post-page{padding:100px 0 60px}.blog-post-header h1{font-size:28px}.blog-post-meta{flex-direction:column;gap:12px}.blog-post-image img{height:250px}.blog-post-content{padding:32px 24px}.blog-post-content h2{font-size:22px}.blog-post-content h3{font-size:18px}.blog-post-content p,.blog-post-content li{font-size:16px}.blog-post-content table{font-size:13px}.blog-post-content th,.blog-post-content td{padding:8px 10px}.blog-post-cta{padding:32px 24px}.blog-post-cta h3{font-size:22px}.blog-post-cta p{font-size:16px}.blog-post-share{flex-direction:column;gap:12px}.share-buttons{flex-wrap:wrap;justify-content:center}}
