:root {
  /* to do ... set this value different for pages based on node type, using body class selectors in the css file. For example, you might want a smaller min-height on interior pages vs the homepage. */
  --hero-min-height: 750px;
  /* --hero-min-height: 790px; */
}

/* Keep trigger rule exactly as you had it */
.block-content-hero_fullscreen button.trigger {
  top: 50px;
}

/* =========================
   Hero Typography Variants
   ========================= */

body.node--type-home-page {
  .hero-content {
    h2 span.main-title {
      font-family: var(--font-title-script);
      font-size: 6rem;
    }
  }
}

body.node--type-the-process,
body.node--type-alpine-basic,
body.node--type-resort,
body.node--type-resort-overview {
  .hero-content {
    h2 span.main-title {
      font-family: var(--font-title-serif);
      font-size: 4rem;
      text-transform: uppercase;
      line-height: 55px;
      max-width: 580px;
    }

    .hero-brand-line p {
      font-style: normal;
      font-family: var(--font-body);
      font-size: var(--body-text-size);
    }
  }

  .hero-content {
    /* h2 span.main-title {
      font-family: var(--font-title-serif);
      font-size: 4rem;
      text-transform: uppercase;
      line-height: 55px;
    } */

    .hero-brand-line p {
      font-style: normal;
      font-family: var(--font-body);
      font-size: var(--body-text-size);
    }
  }


  .hero-content {
    /* h2 span.main-title {
      font-family: var(--font-title-serif);
      font-size: 4rem;
      text-transform: uppercase;
      line-height: 55px;
    } */

    .hero-brand-line p {
      font-style: normal;
      font-family: var(--font-body);
      font-size: var(--body-text-size);
    }
  }
}

/* =========================
   Hero Base Layout
   ========================= */

.hero {
  position: relative;
  height: 100vh;
  min-height: var(--hero-min-height);
  overflow: hidden;
  isolation: isolate;
  /* Required for blend mode */
}

/* Media wrapper */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Responsive image wrapper */
.hero-media picture {
  display: block;
  width: 100vw;
  height: 100vh;
  min-height: var(--hero-min-height);
}

/* Image */
.hero-media img {
  width: 100vw;
  height: 100vh;
  min-height: var(--hero-min-height);
  min-width: 100vw;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================
   Burn Layer (pseudo element)
   ========================= */

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-underlay-color, rgba(0, 0, 0, 0.6));
  mix-blend-mode: var(--hero-blend-mode, multiply);
  pointer-events: none;
}

/* Disable burn layer entirely when blend mode is normal */
.hero--no-burn .hero-media::after {
  content: none;
}

/* .hero-media::after {
  background: var(--hero-underlay-color) !important;
} */

/* Optional node override (kept from your original) */
body.node--type-the-process .hero {
  --hero-blend-mode: overlay;
}

/* =========================
   Gradient Overlay (readability)
   ========================= */

.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 25%,
      rgba(0, 0, 0, 0.20) 45%,
      rgba(0, 0, 0, 0.00) 65%),
    radial-gradient(circle at 85% 15%,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.15) 30%,
      rgba(0, 0, 0, 0.00) 55%);
}


.no-overlay .hero-gradient-overlay {
  display: none;
}

/* =========================
   Content Layer
   ========================= */

.hero-content {
  position: relative;
  z-index: 2;
  height: 100vh;
  min-height: var(--hero-min-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: var(--edgepad);
  padding-right: var(--edgepad);
  padding-bottom: var(--sec-pad);
  color: #ffffff;
}

.hero-content .eyebrow {
  color: var(--alightgold);
}

/* radial darken to highlight text - keep this section separate*/
/* See this class value above  ????? .hero-gradient-overlay */
.hero-content {
  background: radial-gradient(ellipse 110% 75% at 15% 85%,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 30%,
      rgba(0, 0, 0, 0.25) 50%,
      rgba(0, 0, 0, 0.10) 70%,
      rgba(0, 0, 0, 0) 85%);
}

.no-overlay .hero-content {
  background: radial-gradient(ellipse 110% 75% at 15% 85%,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.25) 30%,
      rgba(0, 0, 0, 0.15) 50%,
      rgba(0, 0, 0, 0.10) 70%,
      rgba(0, 0, 0, 0) 85%);
}

/* .no-overlay .hero-content {
  background: transparent;
} */

/* end radial darken to highlight text - keep this section separate*/



/* Typography */

.hero-content h2 {
  margin-bottom: 0;
}

.hero-content h2 span {
  display: block;
}

.hero-content h2 span.main-title {
  font-size: 6rem;
  text-transform: none;
  font-weight: 400;
  letter-spacing: -1px;
  max-width: 962px;
}

.hero-content h2 span.title-sans {
  font-size: 1rem;
}

.hero-content h2>* {
  margin-bottom: 2rem;
}

.field--name-field-brand-line p {
  margin-bottom: 6rem;
  font-family: var(--font-title-serif);
  font-size: 1.2rem;
  max-width: 520px;
  font-style: italic;
}


.block-content-hero_fullscreen .hero-cta {
  margin-top: 2rem;
}

/* =========================
   Responsive Adjustments
   ========================= */

@media (max-width: 1200px) {
  .hero-content h2 span.main-title {
    font-size: 5rem;
  }
}

@media (max-width: 768px) {

  .hero-content {
    background: radial-gradient(ellipse 110% 75% at 15% 85%,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.45) 30%,
        rgba(0, 0, 0, 0.25) 50%,
        rgba(0, 0, 0, 0.10) 70%,
        rgba(0, 0, 0, 0) 85%);
  }

  /* All mobile get some gradient bg */
  .no-overlay .hero-gradient-overlay {
    display: block;
  }

  /* .hero-content {
    background: radial-gradient(ellipse 110% 75% at 15% 85%,
        rgba(48, 14, 159, 0.65) 0%,
        rgba(221, 4, 4, 0.45) 30%,
        rgba(163, 215, 8, 0.25) 50%,
        #f00567f0 70%,
        #078668e8 85%);
  } */

  .hero-content h2 span.main-title {
    font-size: 3.5rem;
  }

  body.node--type-the-process,
  body.node--type-alpine-basic,
  body.node--type-resort,
  body.node--type-resort-overview {
    .hero-content {

      justify-content: center;

      h2 span.main-title {
        font-family: var(--font-title-serif);
        font-size: 2rem;
        text-transform: uppercase;
        line-height: 0.9;
      }

      .field--name-field-brand-line p {
        margin-bottom: 2rem;
      }

    }
  }


  .field--name-field-brand-line p {
    margin-bottom: 2rem;
    ;
  }

}