/* CarHelpMate v5.5 — canonical hero block.
   Home is the visual source of truth. Forum / Garage / Guides use the same geometry,
   typography, controls and responsive behavior. Do not create per-page hero scales. */

/* OUTER BLOCK — identical on every v5 reference page */
.chm-v5-hero,
.chm-v5-forum-hero{
  position:relative!important;
  min-height:430px!important;
  height:auto!important;
  margin:0 -24px 28px!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr)!important;
  background:#fbfdff!important;
  border:0!important;
  border-bottom:1px solid #e9eff5!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* LEFT COPY */
.chm-v5-hero-copy,
.chm-v5-forum-hero-copy{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
  padding:52px 24px 48px 64px!important;
}

/* KICKER */
.chm-v5-kicker,
.chm-v5-forum-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 14px!important;
  color:#60748b!important;
  font-family:"Manrope","Inter",sans-serif!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
.chm-v5-kicker:before,
.chm-v5-forum-kicker:before{
  content:""!important;
  width:28px!important;
  height:2px!important;
  flex:0 0 28px!important;
  border-radius:999px!important;
  background:#2f91e3!important;
}

/* H1 — fixed canonical rule requested by the user. No clamp. */
body.chm-v5-home-page .chm-v5-hero h1,
body.chm-v5-home-page .chm-v5-forum-hero h1,
body.chm-reference-inner h1{
  max-width:620px!important;
  margin:0!important;
  color:#10223a!important;
  font-size:30px!important;
  line-height:1.12!important;
  font-weight:750!important;
  letter-spacing:-.028em!important;
}

/* LEAD */
.chm-v5-hero-lead,
.chm-v5-forum-lead{
  max-width:585px!important;
  margin:18px 0 0!important;
  color:#53667d!important;
  font-family:"Inter","Golos Text",system-ui,sans-serif!important;
  font-size:16px!important;
  font-weight:400!important;
  line-height:1.65!important;
  letter-spacing:0!important;
}

/* ACTIONS */
.chm-v5-hero-actions,
.chm-v5-forum-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  margin-top:24px!important;
}
.chm-v5-hero-actions .forum-btn,
.chm-v5-forum-actions .forum-btn{
  min-height:46px!important;
  height:46px!important;
  padding:0 21px!important;
  border-radius:12px!important;
  font-family:"Manrope","Inter",sans-serif!important;
  font-size:13px!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:0!important;
}
.chm-v5-hero-actions .forum-btn-primary,
.chm-v5-forum-actions .forum-btn-primary{
  box-shadow:0 12px 24px rgba(12,93,169,.18)!important;
}

/* METRICS — identical rhythm on Home / Forum / Garage / Guides */
.chm-v5-hero-metrics,
.chm-v5-forum-hero-stats{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:24px!important;
  max-width:590px!important;
  margin-top:30px!important;
  padding-top:23px!important;
  border-top:1px solid #e7edf4!important;
}
.chm-v5-hero-metric,
.chm-v5-forum-hero-stat{
  min-width:108px!important;
}
.chm-v5-hero-metric strong,
.chm-v5-forum-hero-stat b{
  display:block!important;
  margin:0!important;
  color:#162c48!important;
  font-family:"Manrope","Inter",sans-serif!important;
  font-size:19px!important;
  font-weight:800!important;
  line-height:1.1!important;
  letter-spacing:0!important;
}
.chm-v5-hero-metric span,
.chm-v5-forum-hero-stat span{
  display:block!important;
  margin-top:5px!important;
  color:#7a899b!important;
  font-family:"Inter","Golos Text",system-ui,sans-serif!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.3!important;
  letter-spacing:0!important;
}

/* RIGHT IMAGE — canonical source.
   Desktop artwork is rendered as one complete image anchored to the right.
   It spans the hero as an absolute visual layer instead of being cropped inside
   the narrow second grid column. This keeps the far-right artwork/text visible. */
.chm-v5-hero-media,
.chm-v5-forum-hero-media{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  min-height:0!important;
  height:auto!important;
  background-color:#fbfdff!important;
  background-image:url("chm-hero-road.webp")!important;
  background-position:right center!important;
  background-size:auto 100%!important;
  background-repeat:no-repeat!important;
}
.chm-v5-hero-media:before,
.chm-v5-forum-hero-media:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,#fbfdff 0%,#fbfdff 31%,rgba(251,253,255,.90) 40%,rgba(251,253,255,.34) 52%,rgba(251,253,255,0) 64%)!important;
  pointer-events:none!important;
}

/* GLASS NOTE / BADGE */
.chm-v5-hero-note,
.chm-v5-forum-hero-badge{
  position:absolute!important;
  right:34px!important;
  bottom:28px!important;
  width:255px!important;
  min-width:0!important;
  padding:15px 17px!important;
  border:1px solid rgba(255,255,255,.76)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.80)!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:0 12px 30px rgba(32,56,80,.12)!important;
  color:#6b7b8e!important;
  font-family:"Inter","Golos Text",system-ui,sans-serif!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.45!important;
}
.chm-v5-hero-note b,
.chm-v5-forum-hero-badge b{
  display:block!important;
  margin:0!important;
  color:#173454!important;
  font-family:"Manrope","Inter",sans-serif!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.35!important;
}
.chm-v5-hero-note span,
.chm-v5-forum-hero-badge span{
  display:block!important;
  margin-top:4px!important;
  color:#6b7b8e!important;
  font-family:"Inter","Golos Text",system-ui,sans-serif!important;
  font-size:12px!important;
  line-height:1.45!important;
}

/* TABLET — same behavior for every page */
@media(max-width:900px){
  .chm-v5-hero,
  .chm-v5-forum-hero{
    margin-left:-16px!important;
    margin-right:-16px!important;
    grid-template-columns:1fr!important;
    min-height:600px!important;
    background:#fbfdff!important;
  }
  .chm-v5-hero-copy,
  .chm-v5-forum-hero-copy{
    padding:40px 30px 270px!important;
  }
  .chm-v5-hero-media,
  .chm-v5-forum-hero-media{
    position:absolute!important;
    top:auto!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:310px!important;
    min-height:0!important;
    background-position:center!important;
    background-size:cover!important;
  }
  .chm-v5-hero-media:before,
  .chm-v5-forum-hero-media:before{
    background:linear-gradient(180deg,#fbfdff 0%,rgba(251,253,255,.72) 12%,rgba(251,253,255,0) 42%)!important;
  }
  .chm-v5-hero-note,
  .chm-v5-forum-hero-badge{
    right:22px!important;
    bottom:20px!important;
  }
}

/* MOBILE — fixed H1 remains 30px by design */
@media(max-width:680px){
  .chm-v5-hero,
  .chm-v5-forum-hero{
    margin-left:-12px!important;
    margin-right:-12px!important;
    margin-bottom:16px!important;
    min-height:575px!important;
  }
  .chm-v5-hero-copy,
  .chm-v5-forum-hero-copy{
    padding:28px 18px 250px!important;
  }
  .chm-v5-kicker,
  .chm-v5-forum-kicker{
    font-size:10px!important;
    letter-spacing:.12em!important;
  }
  body.chm-v5-home-page .chm-v5-hero h1,
  body.chm-v5-home-page .chm-v5-forum-hero h1,
  body.chm-reference-inner h1{
    font-size:30px!important;
    line-height:1.12!important;
    font-weight:750!important;
    letter-spacing:-.028em!important;
  }
  .chm-v5-hero-lead,
  .chm-v5-forum-lead{
    margin-top:14px!important;
    font-size:14px!important;
    line-height:1.55!important;
  }
  .chm-v5-hero-actions,
  .chm-v5-forum-actions{
    margin-top:18px!important;
  }
  .chm-v5-hero-actions .forum-btn,
  .chm-v5-forum-actions .forum-btn{
    min-height:43px!important;
    height:43px!important;
    padding:0 16px!important;
    font-size:12px!important;
  }
  .chm-v5-hero-metrics,
  .chm-v5-forum-hero-stats{
    gap:16px!important;
    margin-top:20px!important;
    padding-top:17px!important;
  }
  .chm-v5-hero-metric,
  .chm-v5-forum-hero-stat{
    min-width:86px!important;
  }
  .chm-v5-hero-metric strong,
  .chm-v5-forum-hero-stat b{font-size:17px!important}
  .chm-v5-hero-metric span,
  .chm-v5-forum-hero-stat span{font-size:11px!important}
  .chm-v5-hero-media,
  .chm-v5-forum-hero-media{height:270px!important}
  .chm-v5-hero-note,
  .chm-v5-forum-hero-badge{display:none!important}
}