/* /assets/css/blog.css - modern CSProfile blog pages */
:root{
  --bg:#060b14;--panel:rgba(15,22,38,.92);--panel2:rgba(18,27,46,.88);
  --line:rgba(255,255,255,.08);--text:#f4f7ff;--muted:#8f9bb8;--muted2:#b8c0d9;
  --purple:#8b5cf6;--cyan:#38bdf8;--green:#54e38f;--card:#0b1220;--shadow:0 20px 80px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.blog-page{
  margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);min-height:100vh;
  background:radial-gradient(circle at top left,rgba(139,92,246,.14),transparent 28%),radial-gradient(circle at top right,rgba(56,189,248,.08),transparent 30%),var(--bg);
}
body.blog-page a{color:inherit;text-decoration:none}
body.blog-page main{max-width:1180px;margin:0 auto;padding:26px 18px 54px;display:block}
body.blog-page .left{display:none!important}
body.blog-page #center{
  width:100%;max-width:940px;margin:0 auto;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,26,44,.96),rgba(9,14,26,.96));
  border-radius:12px;box-shadow:var(--shadow);padding:26px;
}
body.blog-page section{margin:0 0 24px}
body.blog-page h1{font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:-.04em;margin:8px 0 18px;color:#fff}
body.blog-page h2{font-size:clamp(24px,3vw,34px);line-height:1.14;letter-spacing:-.03em;margin:30px 0 12px;color:#fff}
body.blog-page h3{font-size:22px;margin:24px 0 10px;color:#fff}
body.blog-page h4{font-size:17px;margin:16px 0 8px;color:#fff}
body.blog-page p,body.blog-page li,body.blog-page figcaption{color:var(--muted2);font-size:16px;line-height:1.75}
body.blog-page p{margin:0 0 16px}
body.blog-page ul,body.blog-page ol{padding-left:22px;margin:12px 0 18px}
body.blog-page strong,body.blog-page b{color:#fff}
body.blog-page code{background:rgba(6,11,20,.7);border:1px solid var(--line);border-radius:7px;padding:2px 6px;color:#c4b5fd}
body.blog-page .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px}
body.blog-page .breadcrumb li{font-size:13px;line-height:1.2;color:var(--muted)}
body.blog-page .breadcrumb li:not(:last-child)::after{content:'›';margin-left:8px;color:#5d6a86}
body.blog-page .breadcrumb a{color:#cbd5e1}
body.blog-page .breadcrumb a:hover{color:#fff}
body.blog-page .subtag{margin:0;color:var(--muted);font-size:13px;white-space:nowrap}
body.blog-page .FlexboxRow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
body.blog-page .Row{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;margin:14px 0 22px}
body.blog-page .Row > *{flex:1 1 280px}
body.blog-page .BlogImageMain,
body.blog-page .SideImageFig,
body.blog-page img:not(.brand-mark img):not(.socialicon){
  max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);
  background:rgba(6,11,20,.42);box-shadow:0 14px 40px rgba(0,0,0,.25)
}
body.blog-page .BlogImageMain{display:block;width:100%;margin:18px auto 24px}
body.blog-page figure{margin:0;background:rgba(6,11,20,.35);border:1px solid var(--line);border-radius:10px;padding:12px}
body.blog-page figcaption{font-size:14px;line-height:1.55;margin-top:10px}
body.blog-page .step{display:flex;align-items:center;gap:14px;margin:30px 0 12px}
body.blog-page .StepsBlock{
  width:42px;height:42px;min-width:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--purple),var(--cyan));font-weight:900;color:#fff
}
body.blog-page .step h2{margin:0}
body.blog-page table{width:100%;border-collapse:collapse;margin:18px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:block}
body.blog-page th,body.blog-page td{padding:12px;border-bottom:1px solid var(--line);color:var(--muted2);text-align:left}
body.blog-page th{color:#fff;background:rgba(139,92,246,.12)}
body.blog-page blockquote{margin:20px 0;padding:16px 18px;border-left:3px solid var(--purple);background:rgba(139,92,246,.09);border-radius:10px;color:var(--muted2)}
body.blog-page .button,body.blog-page .Button,body.blog-page a[href*='stickersearch'],body.blog-page a[href*='patchsearch'],body.blog-page a[href*='organize']{
  text-decoration:none
}
body.blog-page #overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;place-items:center;z-index:9999;padding:24px}
body.blog-page #overlay img{max-width:96vw;max-height:92vh;object-fit:contain}
body.blog-page .zoomable{cursor:zoom-in}
body.blog-page .blog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
body.blog-page .blog-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(6,11,20,.38);transition:transform .15s ease,border-color .15s ease}
body.blog-page .blog-card:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.42)}
body.blog-page .blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border:0;border-radius:0;box-shadow:none}
body.blog-page .blog-card div{padding:14px}
body.blog-page .blog-card h2,body.blog-page .blog-card h3{font-size:18px;line-height:1.2;margin:0 0 8px}
body.blog-page .blog-card p{font-size:14px;line-height:1.55;margin:0;color:var(--muted2)}
@media(max-width:900px){
  body.blog-page main{padding:14px 12px 36px}
  body.blog-page #center{padding:18px;border-radius:10px}
  body.blog-page .FlexboxRow{align-items:flex-start}
  body.blog-page .subtag{white-space:normal}
  body.blog-page .blog-card-grid{grid-template-columns:1fr}
}