@import url("shared.css");
@import url("../global-v3.css");

/* Blog refresh: brand-safe contrast, editorial rhythm and restrained claymorphism */
.blog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 34px;padding:18px 22px;border:1px solid rgba(6,182,212,.16);border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(240,249,255,.82));box-shadow:8px 8px 22px rgba(15,23,42,.08),-6px -6px 18px rgba(255,255,255,.75)}
.blog-toolbar p{display:flex;flex-direction:column;gap:4px;color:#0f172a}.blog-toolbar p strong{font-family:var(--font-heading);font-size:16px}.blog-toolbar p span{font-size:13px;color:#475569}
.blog-filters{display:flex;gap:8px;flex-wrap:wrap}.filter-btn{min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(6,182,212,.2);background:#fff;color:#334155;font:600 12px var(--font-body);cursor:pointer}.filter-btn.active,.filter-btn:hover{background:#0891b2;color:#fff;border-color:#0891b2}
.blog-card-page{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,249,252,.9));border:1px solid rgba(14,116,144,.12);box-shadow:10px 10px 24px rgba(15,23,42,.09),-7px -7px 18px rgba(255,255,255,.8)}
.blog-card-page .blog-img{height:225px}.blog-card-page .blog-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(2,6,23,.3));pointer-events:none}.blog-card-page .blog-body{padding:24px 26px 28px}.blog-card-page .blog-body h3{color:#0f172a;line-height:1.25}.blog-card-page .blog-body p{color:#475569}.blog-card-page .blog-link{color:#0e7490}
.blog-post-inner{max-width:1120px;margin:0 auto;padding:148px 0 70px}.blog-post-inner h1{max-width:900px;margin:12px auto 0;text-align:center;font:700 clamp(2.2rem,5vw,4.5rem)/1.05 var(--font-heading);color:#f8fafc;letter-spacing:-.04em}.blog-post-hero{height:clamp(260px,40vw,520px);margin:34px auto 28px;max-width:1000px;border-radius:28px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 24px 60px rgba(0,0,0,.35);border:1px solid rgba(6,182,212,.22)}
.blog-post-content{max-width:780px;background:rgba(5,5,16,.78);border:1px solid rgba(6,182,212,.12);border-radius:24px;padding:34px 42px;box-shadow:0 18px 50px rgba(0,0,0,.18)}.blog-post-content p{color:#cbd5e1}.blog-post-content h2{color:#f8fafc}.blog-post-content h3{color:#67e8f9}.blog-post-content strong{color:#f8fafc}
@media(max-width:700px){.blog-toolbar{align-items:flex-start;flex-direction:column}.blog-post-inner{padding:120px 16px 50px}.blog-post-content{padding:24px 20px}.blog-post-inner h1{font-size:2.45rem}.blog-post-hero{height:230px;border-radius:20px}}
.blog-reading-layout{display:grid;grid-template-columns:minmax(0,780px) 290px;gap:30px;align-items:start;max-width:1120px;margin:0 auto}.blog-reading-layout .blog-post-content{margin:0;max-width:none}.blog-sidebar{position:sticky;top:110px;display:grid;gap:16px}.sidebar-card{padding:20px;border-radius:20px;background:rgba(255,255,255,.94);border:1px solid rgba(6,182,212,.14);box-shadow:8px 8px 20px rgba(15,23,42,.08);color:#0f172a}.sidebar-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#0e7490;font-weight:800}.sidebar-card h2{font:700 20px/1.15 var(--font-heading);margin:8px 0 16px}.sidebar-post{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #e2e8f0;color:#334155;text-decoration:none;font-size:12px;font-weight:700}.sidebar-post img{width:54px;height:42px;object-fit:cover;border-radius:8px}.sidebar-tags{display:flex;flex-wrap:wrap;gap:7px}.sidebar-tags a{padding:7px 10px;border-radius:999px;background:#ecfeff;color:#0e7490;font-size:11px;text-decoration:none;font-weight:700}.sidebar-cta{background:linear-gradient(145deg,#082f49,#0e7490);color:#fff}.sidebar-cta h2{color:#fff}.sidebar-cta p{color:#dbeafe;font-size:13px;line-height:1.6;margin-bottom:14px}.theme-toggle{margin-left:12px;min-height:40px;padding:7px 12px;border-radius:999px;border:1px solid rgba(6,182,212,.28);background:rgba(255,255,255,.1);color:inherit;font:600 12px var(--font-body);cursor:pointer}.theme-toggle:hover{background:var(--cyan);color:#fff}.blog-card-page,.blog-card{transition:transform .3s ease,box-shadow .3s ease}@media(max-width:900px){.blog-reading-layout{grid-template-columns:1fr}.blog-sidebar{position:static;grid-template-columns:repeat(3,1fr)}.sidebar-card{padding:16px}}@media(max-width:650px){.blog-sidebar{grid-template-columns:1fr}.theme-toggle span{display:none}}