/* Full-bleed hero & USP styles (child theme)
   - Designed to match front-page hero and single post hero
   - Responsive, mobile-first, accessible
*/
:root{--page-gutter:20px;--content-max:1200px;--hero-vertical:48px}

/* Make the hero section full-bleed */
.hero--full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:calc(var(--hero-vertical)) 0;background:linear-gradient(180deg,rgba(11,18,32,.98),#080c18);color:var(--text, #eaf0ff)}
.hero--full-bleed .wrap.hero-grid{max-width:var(--content-max);display:grid;grid-template-columns:1fr 480px;gap:28px;align-items:center;padding:0 var(--page-gutter);margin:0 auto}

/* Hero left content */
.hero--full-bleed .hero-card{background:transparent;border:none;padding:0}
.hero--full-bleed .hero-kicker{font-weight:700;color:#62d3ff;margin-bottom:8px;font-size:.95rem}
.hero--full-bleed .hero-title{font-size:2.25rem;margin:0 0 12px;color:#ffffff;font-weight:900;line-height:1.05}
.hero--full-bleed .hero-excerpt{color:rgba(234,240,255,.9);margin-bottom:18px;line-height:1.6;max-width:70ch}
.hero--full-bleed .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero--full-bleed .cta-btn{background:linear-gradient(90deg,#62d3ff,#00bfff);color:#021424;padding:10px 18px;border-radius:999px;font-weight:800;text-decoration:none}

/* Hero image column */
.hero--full-bleed .hero-card + .hero-card{display:flex;justify-content:center}
.hero--full-bleed img.wp-image{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6);display:block}

/* USP (section under hero) full-bleed */
.usp--full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:28px 0;background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,.005));color:var(--text)}
.usp--full-bleed .wrap{max-width:var(--content-max);padding:0 var(--page-gutter);margin:0 auto}
.usp--full-bleed .card{background:transparent;padding:10px;border-radius:10px}

/* Responsive tweaks */
@media (max-width: 900px){
  .hero--full-bleed .wrap.hero-grid{grid-template-columns:1fr;gap:14px;padding:0 18px}
  .hero--full-bleed .hero-card + .hero-card{order:-1}
  .hero--full-bleed .hero-title{font-size:1.5rem}
  .hero--full-bleed{padding:22px 0}
}

/* Small helpers */
.hero--full-bleed .lead, .hero--full-bleed .hero-excerpt{font-size:1rem}