/* Shared generated-image treatment for the three primary inner-page heroes. */
body:is([data-page="about"], [data-page="products"], [data-page="contact"]) .page-hero {
  background-color: #06372B;
  background-repeat: no-repeat;
  background-size: cover;
}

body[data-page="products"] .page-hero {
  background-image:
    linear-gradient(90deg, rgb(3 31 24 / 0.9) 0%, rgb(3 31 24 / 0.68) 38%, rgb(3 31 24 / 0.2) 68%, rgb(3 31 24 / 0.04) 100%),
    url("assets/products-hero-generated.png");
  background-position: center;
}

body[data-page="contact"] .page-hero {
  background-image:
    linear-gradient(90deg, rgb(3 31 24 / 0.9) 0%, rgb(3 31 24 / 0.66) 38%, rgb(3 31 24 / 0.18) 68%, rgb(3 31 24 / 0.03) 100%),
    url("assets/contact-hero-generated.png");
  background-position: center;
}

body:is([data-page="about"], [data-page="products"], [data-page="contact"]) .page-hero::before {
  display: none;
}

body:is([data-page="about"], [data-page="products"], [data-page="contact"]) .page-hero::after {
  height: 3px;
  background: linear-gradient(90deg, transparent, #D5A15F 12%, #D5A15F 88%, transparent);
}

/* Use the Product page's 1240px container as the common left alignment. */
body:is([data-page="about"], [data-page="products"], [data-page="contact"]) .page-hero .section-inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

body[data-page="about"] .page-hero-grid {
  width: min(100%, var(--content-width));
}

body:is([data-page="products"], [data-page="contact"]) .compact-hero .section-inner {
  padding-right: 0;
}

body:is([data-page="products"], [data-page="contact"]) .page-hero .section-inner > * {
  max-width: 760px;
}

body:is([data-page="about"], [data-page="products"], [data-page="contact"]) .page-hero h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, transparent, #D5A15F 28%, #FFF4D9 50%, #D5A15F 72%, transparent);
  box-shadow: 0 0 12px rgb(213 161 95 / 0.48);
}

@media (max-width: 720px) {
  body[data-page="products"] .page-hero,
  body[data-page="contact"] .page-hero {
    background-position: 62% center;
  }

  body:is([data-page="about"], [data-page="products"], [data-page="contact"]) .page-hero h1::after {
    width: 72px;
  }
}