/* RoboMecs shared Hero Standard V3.2
 * One reusable geometry for every page using a major photographic Hero.
 * The Home page, Solutions Hub and Solution detail pages inherit this file.
 */

:root{
  --rm-hero-lower-bottom:52px;
  --rm-hero-lower-width:760px;
  --rm-hero-lower-reserve:190px;
}

/* Header + Hero equals one visible viewport. */
.hero,
.solution-hero,
.solutions-hub-hero{
  height:calc(100svh - var(--header))!important;
  min-height:0!important;
  max-height:none!important;
}
@supports(height:100dvh){
  .hero,
  .solution-hero,
  .solutions-hub-hero{height:calc(100dvh - var(--header))!important}
}

/* Inner Hero layers inherit the one shared outer height. */
.solution-hero>.container,
.solution-hero-shell,
.solution-hero-media,
.solutions-hub-hero-layout,
.solutions-hub-hero-media{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
}

/* Every Hero uses the same lower-zone coordinate. Copy volume above it cannot
 * move the CTA or key-capability row. */
.hero-copy,
.solution-hero-copy,
.solutions-hub-copy{
  position:relative!important;
  box-sizing:border-box;
  height:100%!important;
  padding-bottom:var(--rm-hero-lower-reserve)!important;
}
.hero-copy,
.solution-hero-copy,
.solutions-hub-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-lower-zone{
  position:absolute!important;
  left:0!important;
  bottom:var(--rm-hero-lower-bottom)!important;
  z-index:6;
  width:min(var(--rm-hero-lower-width),100%)!important;
  margin:0!important;
}
.hero-lower-zone .hero-actions,
.hero-lower-zone .solution-hero-actions{margin-top:0!important}
.hero-lower-zone .hero-proof{margin-top:22px!important}
.hero-lower-zone .solution-hero-points{
  width:100%!important;
  max-width:none!important;
  margin-top:22px!important;
  padding-top:16px!important;
}

/* H1 policy V2.8: every standard Hero title is exactly three visible rows.
 * The font scale is restored to the pre-V2.7 sizes. Line distribution is
 * controlled in markup, not by per-page CSS or title-length font reduction. */
.hero h1,
.solution-hero-copy h1,
.solutions-hub-copy h1{
  max-width:min(1080px,100%)!important;
  overflow-wrap:normal;
  word-break:normal;
}
.rm-hero-title-3lines{
  display:block!important;
  text-wrap:initial!important;
}
.rm-hero-title-line{
  display:block;
  white-space:nowrap;
}
@media(min-width:881px){
  .hero h1{font-size:clamp(4.25rem,6.4vw,6.95rem)!important}
  .solution-hero-copy h1{font-size:clamp(3.2rem,4.55vw,5.55rem)!important}
  .solutions-hub-copy h1{font-size:clamp(4rem,5.7vw,6.8rem)!important}
}

/* Responsive coordinates remain common to every Hero, never page-specific. */
@media(max-width:880px){
  :root{
    --rm-hero-lower-bottom:32px;
    --rm-hero-lower-reserve:170px;
  }
  .hero-lower-zone{width:min(700px,100%)!important}
  .hero-lower-zone .solution-hero-points{margin-top:16px!important;padding-top:12px!important}
}
@media(max-width:560px){
  :root{
    --rm-hero-lower-bottom:20px;
    --rm-hero-lower-reserve:150px;
  }
  .hero-lower-zone .hero-proof,
  .hero-lower-zone .solution-hero-points{margin-top:12px!important;padding-top:10px!important}
}

/* On unusually short desktop windows we reduce secondary copy density, not
 * H1 font size. This protects the fixed lower zone while preserving the title. */
@media(min-width:881px) and (max-height:780px){
  .hero-secondary,
  .solution-hero-secondary,
  .solutions-hub-secondary{display:none!important}
  .hero-description,
  .solution-hero-intro,
  .solutions-hub-copy>p{line-height:1.45}
}

/* V4.0 MOBILE HERO STANDARD
 * On phones, all major Home / Solution / Industry heroes use the compact
 * 560px height already approved on Blog pages. Desktop and tablet rules above
 * remain unchanged.
 */
@media(max-width:760px){
  :root{
    --rm-hero-lower-bottom:18px;
    --rm-hero-lower-reserve:128px;
  }
  .hero,
  .solution-hero,
  .solutions-hub-hero{
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
  }
  .hero-copy,
  .solution-hero-copy,
  .solutions-hub-copy{
    justify-content:flex-start!important;
    padding-top:42px!important;
    padding-bottom:var(--rm-hero-lower-reserve)!important;
  }
  .hero-secondary,
  .solution-hero-secondary,
  .solutions-hub-secondary{display:none!important}
  .hero-lower-zone{bottom:var(--rm-hero-lower-bottom)!important}
  .hero-lower-zone .hero-proof,
  .hero-lower-zone .solution-hero-points{margin-top:10px!important;padding-top:8px!important}
}
@media(max-width:560px){
  .hero-copy,
  .solution-hero-copy,
  .solutions-hub-copy{padding-top:30px!important}
}

/* ========================================================================
   V4.5 HARD INDUSTRIES HERO CLEAN
   Loaded last by head.php, after site.css / solutions.css / industries.css.
   The audited Automotive hero source image contains NO grid. Any white grid
   is therefore a CSS/DOM decoration and is removed here at the final cascade.
   ======================================================================== */

/* Suppress every decorative pseudo-element inside Industry heroes. This is
 * intentionally strict. The two required pseudo-elements are restored below:
 * 1) photographic navy overlay, 2) red kicker line. */
.industries-hub-hero::before,
.industries-hub-hero::after,
.industries-hub-hero *::before,
.industries-hub-hero *::after,
.industry-hero::before,
.industry-hero::after,
.industry-hero *::before,
.industry-hero *::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  mask:none!important;
  mask-image:none!important;
  -webkit-mask:none!important;
  -webkit-mask-image:none!important;
  opacity:0!important;
  box-shadow:none!important;
}

/* Any legacy grid DOM element is also impossible to display. */
.industries-hub-hero .hero-grid,
.industries-hub-hero .page-hero-grid,
.industries-hub-hero .solutions-hub-grid,
.industries-hub-hero .industries-hub-grid,
.industry-hero .hero-grid,
.industry-hero .page-hero-grid,
.industry-hero .solutions-hub-grid,
.industry-hero .industries-hub-grid{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  background:none!important;
  background-image:none!important;
}

/* Restore ONLY the approved photographic readability overlays. */
.industries-hub-hero .solutions-hub-hero-media::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  opacity:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(0,0,71,.96) 0%,rgba(0,0,71,.86) 30%,rgba(0,0,71,.58) 52%,rgba(0,0,71,.16) 78%,rgba(0,0,71,.08) 100%),
    linear-gradient(0deg,rgba(0,0,71,.48),rgba(0,0,71,.08) 58%,rgba(0,0,71,.24))!important;
}
.industry-hero .solution-hero-media::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  opacity:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(0,0,71,.96) 0%,rgba(0,0,71,.88) 28%,rgba(0,0,71,.63) 48%,rgba(0,0,71,.20) 72%,rgba(0,0,71,.08) 100%),
    linear-gradient(0deg,rgba(0,0,71,.54) 0%,rgba(0,0,71,.10) 48%,rgba(0,0,71,.24) 100%)!important;
}

/* Restore the standard red kicker marker removed by the strict pseudo reset. */
.industries-hub-hero .solution-kicker::before,
.industry-hero .solution-kicker::before{
  content:""!important;
  display:block!important;
  width:34px!important;
  height:3px!important;
  flex:0 0 34px!important;
  opacity:1!important;
  background:var(--red)!important;
}

/* ========================================================================
   V5.10 NON-BLOG MOBILE HERO HEIGHT STANDARD
   User-approved geometry: all major non-Blog Heroes occupy exactly 68% of
   the stable mobile viewport height. Blog Hub/article Heroes are deliberately
   excluded and retain their existing approved design.
   ======================================================================== */
@media(max-width:760px){
  :root{
    --rm-mobile-hero-height:68vh;
    --rm-hero-lower-bottom:14px;
    --rm-hero-lower-reserve:108px;
  }
  @supports(height:1svh){
    :root{--rm-mobile-hero-height:68svh}
  }

  .hero,
  .solution-hero,
  .solutions-hub-hero,
  .service-hero,
  .rm-industry-hero,
  .page-hero{
    width:100%!important;
    height:var(--rm-mobile-hero-height)!important;
    min-height:0!important;
    max-height:var(--rm-mobile-hero-height)!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Force every non-Blog inner Hero layer to inherit the shorter outer Hero.
     This defeats legacy 560/600/680px and full-viewport child rules. */
  .hero-media,
  .hero-inner,
  .solution-hero>.container,
  .solution-hero-shell,
  .solution-hero-media,
  .solutions-hub-hero-layout,
  .solutions-hub-hero-media,
  .service-hero-media,
  .service-hero-overlay,
  .service-hero-inner,
  .rm-industry-hero__media,
  .rm-industry-hero__inner{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
  }

  .hero-copy,
  .solution-hero-copy,
  .solutions-hub-copy,
  .service-hero-copy,
  .rm-industry-hero__copy{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    box-sizing:border-box!important;
    justify-content:flex-start!important;
    padding-top:24px!important;
    padding-bottom:var(--rm-hero-lower-reserve)!important;
  }

  .hero-secondary,
  .solution-hero-secondary,
  .solutions-hub-secondary,
  .rm-industry-hero__secondary{display:none!important}

  .hero-lower-zone{bottom:var(--rm-hero-lower-bottom)!important}
  .service-hero-actions{bottom:var(--rm-hero-lower-bottom)!important}

  /* Preserve full-width photography. Only vertical geometry changes. */
  .hero-media img,
  .hero-media video,
  .solution-hero-media img,
  .solutions-hub-hero-media img,
  .service-hero-media img,
  .rm-industry-hero__media img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
  }
}