/* ============================================================
   PAGE · Blog single  (.single-hero*)
   Auto-split from main.css (Phase 1). Load order fixed in inc/enqueue.php.
   ============================================================ */

/* Blog single — featured image banner hero */
.single-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--sb-blue);}
.single-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.single-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,21,38,.85),rgba(0,21,38,.2));}
.single-hero__inner{position:relative;z-index:2;color:#fff;padding:2.6rem 0;}
.single-hero__inner h1{color:#fff;font-family:var(--font-head);margin:.4rem 0;}
.single-hero__inner .post__cat a{color:var(--sb-lightblue);}
.single-hero__inner .post__meta{color:rgba(255,255,255,.8);}

/* Phase 7 — CPT Hero Editability: optional CTA buttons on the featured-image
   hero (post/case_study). Same white-outline-on-dark treatment as
   .page-hero .button (pages/inner.css) since .single-hero has the same dark
   gradient-overlay context; kept as its own rule so inner.css stays
   untouched. Additive only — .page-hero__actions layout rule already exists
   and is unscoped, so no new layout CSS is needed here. */
.single-hero .button{display:inline-flex;align-items:center;justify-content:center;min-width:160px;padding:10px 15px;line-height:1.6;border:1px solid #fff;border-radius:0;color:#fff;background:transparent;font-size:.875rem;font-weight:400;text-transform:uppercase;letter-spacing:0;cursor:pointer;transition:.4s color,.4s background,.4s border-color;}
.single-hero .button:hover{background:#fff;color:var(--ink);}
.single-hero .button--primary{border-color:var(--green);background:var(--green);}
.single-hero .button--primary:hover{background:transparent;color:#fff;border-color:#fff;}