.blog-category .category-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);column-gap:48px;align-items:center}
.blog-category .category-hero-grid .dc-label{grid-column:1;margin:0 0 12px}
.blog-category .category-hero-grid h1{grid-column:1;margin:0}
.blog-category .category-hero-image{grid-column:2;grid-row:1/5;width:100%;height:280px;object-fit:cover;border-radius:20px}
.blog-category .category-actions{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.blog-category .category-back{font-weight:700;text-underline-offset:4px}
/* Override the white links inherited from dark product banners. */
body.blog-category .category-hero .category-actions a.category-back,
body.blog-category .category-hero .category-actions a.category-back:is(:visited,:hover,:focus-visible,:active){color:#20211f;text-decoration-color:currentColor}
body.blog-category .category-hero .category-actions a.category-back:focus-visible{outline:3px solid #715700;outline-offset:4px;border-radius:3px}
.category-guide-link{margin:12px 0 18px;font-size:16px;line-height:1.5}
.category-guide-link a{font-weight:700;text-underline-offset:4px}
.blog-category .category-intro{grid-column:1}
.blog-category #articles{scroll-margin-top:28px}
@media(max-width:700px){
 .blog-category .category-hero{padding:18px 0 24px}
 .blog-category .category-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:14px}
 .blog-category .category-hero-grid .dc-label{display:none}
 body.blog-category main .category-hero h1{order:1;font-size:32px;line-height:1.12;margin:0}
 .blog-category .category-hero-image{order:2;height:clamp(130px,38vw,175px);border-radius:16px}
 .blog-category .category-actions{order:3;margin:0;gap:12px}
 .blog-category .category-actions .button{min-height:46px;width:100%;justify-content:center}
 .blog-category .category-back{display:block;width:100%;text-align:center;font-size:15px}
 .blog-category .category-hero p.category-intro{order:4;margin:0;font-size:16px;line-height:1.5}
 .blog-category .blog-topic{padding:30px 0 40px}
}
.blog-category .category-hero .dc-crumb{color:#55513e;margin-bottom:22px}
/* Preserve the dedicated Pro banner in full on mobile and desktop. */
.blog-category .category-hero-image[src$="/blog-pro-metiers-hero-3d.webp"]{height:auto;aspect-ratio:3/2;object-fit:contain}