/* Case-study POST hero (/project/<slug>/) — 2026 design-system treatment, 2026-09-25.
   Markup comes from wj_cs_post_hero() in _inc/publish.php (badges, white/orange split headline,
   date, CTA row). Values are the .wj-wd .hero / .btn rules from wj-webdesign-2026.css.
   Every selector starts .wj-article .wj-art-hero so it out-ranks the inline .wj-art-hero rules each
   post carries AND the site-wide link colours in wj-type-2026.css. Layout (negative margin,
   padding-top, breadcrumb offset) is left to those inline rules + breadcrumb.css.
   The art is --wj-hero-img from wj-hero-2026.css (linked just before this file). */
.wj-article .wj-art-hero{background:center top/cover no-repeat #0b0b0d;background-image:var(--wj-hero-img);border-bottom:3px solid #EF5B00}
.wj-article .wj-art-hero::after{background:radial-gradient(at 50% 45%,rgba(11,11,13,.58) 0%,rgba(11,11,13,.18) 48%,transparent 72%)}
.wj-article .wj-art-hero .wrap{z-index:1;max-width:1140px;padding-bottom:64px}
.wj-article .wj-art-hero .wj-ph-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.wj-article .wj-art-hero .eyebrow,.wj-article .wj-art-hero .wj-ph-rating{display:inline-block;font-family:'Bebas Neue',Impact,sans-serif;font-size:14px;letter-spacing:3px;line-height:1.4;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.15);padding:6px 14px;border-radius:999px;margin:0;text-transform:uppercase;text-decoration:none}
.wj-article .wj-art-hero .wj-ph-rating{color:#fff;border-color:rgba(255,255,255,.28)}
.wj-article .wj-art-hero .wj-ph-rating .stars{color:#F5A623;letter-spacing:1px;margin-right:6px}
.wj-article .wj-art-hero h1{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-synthesis:none;text-transform:uppercase;font-size:clamp(3rem,7vw,6.6rem);line-height:.92;letter-spacing:2px;max-width:1100px;margin:0 auto 24px;color:#fff;text-wrap:balance}
.wj-article .wj-art-hero .wj-ph--long h1{font-size:clamp(2.6rem,5.2vw,5rem);line-height:.95}
.wj-article .wj-art-hero h1 .hl{display:block;color:#EF5B00;text-wrap:balance}
.wj-article .wj-art-hero .meta{font-family:'Bebas Neue',Impact,sans-serif;font-size:22px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 30px}
.wj-article .wj-art-hero .wj-ph-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.wj-article .wj-art-hero .wj-ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'DM Sans',Arial,Helvetica,sans-serif;font-weight:600;font-size:16px;line-height:1.2;padding:15px 32px;white-space:nowrap;text-decoration:none;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);position:relative;z-index:0;border-radius:0}
.wj-article .wj-art-hero .wj-ph-btn--primary{background:linear-gradient(135deg,#EF5B00,#F59E0B);color:#111;font-size:17px;font-weight:700;box-shadow:rgba(239,91,0,.25) 0 4px 22px}
.wj-article .wj-art-hero .wj-ph-btn--primary:hover{filter:brightness(1.06);color:#111}
.wj-article .wj-art-hero .wj-ph-btn--light{background:rgba(255,255,255,.45);color:#fff}
.wj-article .wj-art-hero .wj-ph-btn--light::before{content:"";position:absolute;inset:1.5px;background:#111214;clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);z-index:-1}
.wj-article .wj-art-hero .wj-ph-btn--light:hover{background:#fff;color:#fff}
@media (max-width:640px){
  .wj-article .wj-art-hero h1{font-size:2.9rem}
  .wj-article .wj-art-hero .wj-ph--long h1{font-size:2.3rem}
  .wj-article .wj-art-hero .wrap{padding-bottom:48px}
  .wj-article .wj-art-hero .meta{font-size:18px;margin-bottom:24px}
}