/* Greenbeat Combined Site v2 — shared hero standardization
   One geometry/typography system across Home, Story, Locations and Contact. */

/* Desktop/tablet hero shell */
.hero,
.story-hero,
.contact-hero{
  padding:50px 4vw 36px !important;
}

.hero-card,
.story-hero-card{
  display:grid !important;
  grid-template-columns:minmax(0, 0.9fr) minmax(520px, 1.1fr) !important;
  min-height:560px !important;
  height:560px !important;
  border-radius:34px !important;
  background:var(--soft) !important;
  overflow:hidden !important;
}

.hero-copy,
.story-hero-copy{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  padding:62px 54px !important;
}

/* Standardized hero typography */
.hero .eyebrow,
.story-hero .eyebrow,
.contact-hero .eyebrow{
  font-size:12px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  margin:0 0 18px !important;
}

.hero h1,
.story-hero h1,
.contact-hero .hero-copy h1{
  font-size:clamp(50px, 5vw, 76px) !important;
  line-height:.94 !important;
  letter-spacing:-.055em !important;
  text-transform:uppercase !important;
  margin:0 !important;
  max-width:700px !important;
}

.hero p,
.story-hero p,
.contact-hero .hero-copy p{
  font-size:18px !important;
  line-height:1.55 !important;
  color:var(--muted) !important;
  max-width:590px !important;
  margin:24px 0 0 !important;
}

/* Standardized image pane */
.hero-media,
.story-hero-media{
  min-height:560px !important;
  height:560px !important;
  overflow:hidden !important;
}

.hero-media img,
.story-hero-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Mid-size desktop/tablet */
@media(max-width:1100px) and (min-width:761px){
  .hero,
  .story-hero,
  .contact-hero{
    padding:42px 3vw 32px !important;
  }
  .hero-card,
  .story-hero-card{
    grid-template-columns:1fr 1fr !important;
    min-height:500px !important;
    height:500px !important;
  }
  .hero-copy,
  .story-hero-copy{
    padding:46px 38px !important;
  }
  .hero-media,
  .story-hero-media{
    min-height:500px !important;
    height:500px !important;
  }
  .hero h1,
  .story-hero h1,
  .contact-hero .hero-copy h1{
    font-size:clamp(44px, 5vw, 62px) !important;
  }
}

/* Mobile — same image/text proportions on every page */
@media(max-width:760px){
  .hero,
  .story-hero,
  .contact-hero{
    padding:18px 14px 28px !important;
  }
  .hero-card,
  .story-hero-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    height:auto !important;
    border-radius:26px !important;
  }
  .hero-copy,
  .story-hero-copy{
    order:2 !important;
    padding:34px 24px 30px !important;
  }
  .hero-media,
  .story-hero-media{
    order:1 !important;
    min-height:0 !important;
    height:330px !important;
  }
  .hero-media img,
  .story-hero-media img{
    width:100% !important;
    height:330px !important;
    min-height:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
  .hero .eyebrow,
  .story-hero .eyebrow,
  .contact-hero .eyebrow{
    font-size:10px !important;
    margin-bottom:12px !important;
  }
  .hero h1,
  .story-hero h1,
  .contact-hero .hero-copy h1{
    font-size:43px !important;
    line-height:.95 !important;
    max-width:none !important;
  }
  .hero p,
  .story-hero p,
  .contact-hero .hero-copy p{
    font-size:15px !important;
    line-height:1.5 !important;
    margin-top:18px !important;
    max-width:none !important;
  }
}