#blog{--blog-accent:#ff9933;--blog-gradient:linear-gradient(90deg,#ff9933,#ffcc33);scroll-margin-top:100px;padding:64px 24px}
#blog.blog-blue{--blog-accent:#02adef;--blog-gradient:linear-gradient(90deg,#3366cc,#02adef)}
#blog .container{max-width:1152px;margin:auto;width:100%;padding:0}
#blog .intro{text-align:center;margin-bottom:40px}#blog .intro p{color:var(--blog-accent);max-width:648px;margin:16px auto 0}
#blog .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
#blog .card{display:flex;flex-direction:column;min-width:0;border-radius:14px;background:white;overflow:hidden;box-shadow:0 2px 8px #00000010;transition:transform .2s ease,box-shadow .2s ease}
#blog .category{background:var(--blog-gradient);color:white;padding:10px 16px;font-size:14px;line-height:20px}
#blog .cover{display:block;width:100%;height:192px;object-fit:cover;flex-shrink:0;margin:24px 0 0}
#blog .cover[src$="proxmox-business.jpg"]{object-fit:contain}
#blog .card-body{display:flex;flex-direction:column;flex:1;padding:16px 24px 24px}
#blog .card h2{color:var(--blog-accent);font-size:14px;line-height:21px;font-weight:600;margin:0 0 12px}
#blog .excerpt{font-size:14px;line-height:21px;color:#4a5565;margin:0 0 24px;height:auto;overflow:visible}
#blog .read-more{color:var(--blog-accent);font-size:14px;line-height:21px;margin-top:auto;align-self:flex-start}
#blog .all-articles{text-align:center;margin-top:40px}#blog .primary{display:inline-block;padding:12px 32px;border-radius:4px;background:var(--blog-gradient);color:#fff;font-size:14px}
#blog a:focus-visible{outline:3px solid var(--blog-accent);outline-offset:4px}#blog .read-more:hover{text-decoration:underline}
@media(hover:hover){#blog .card:hover{transform:translateY(-4px);box-shadow:0 4px 16px #00000020}}
#blog .card:focus-within{transform:translateY(-4px)}
@media(max-width:1000px){#blog .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#blog{padding:40px 20px}#blog .cards{grid-template-columns:1fr;gap:24px}}
@media(prefers-reduced-motion:reduce){#blog .card{transition:none}#blog .card:hover,#blog .card:focus-within{transform:none}}

#blog #blog-title{background-image:var(--blog-gradient)!important;color:var(--blog-accent)}