/* ==========================================================
   27. INTERIOR PAGE HERO
   Explore Natural Tunnel — Reusable Component

   Shared: ent-page-hero
   Home variation: ent-page-hero--home
   ========================================================== */


/* ----------------------------------------------------------
   01 — HERO SHELL
   ---------------------------------------------------------- */

.ent-page-hero.wp-block-cover {
  position: relative;
  width: 100%;
  max-width: none !important;
  min-height: 680px;
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  overflow: hidden;
  isolation: isolate;
}

/* Full-width Gutenberg breakout */

.entry-content > .ent-page-hero.alignfull,
.wp-block-post-content > .ent-page-hero.alignfull {
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* ----------------------------------------------------------
   02 — BACKGROUND IMAGE
   ---------------------------------------------------------- */

.ent-page-hero .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center center;
}


/* ----------------------------------------------------------
   03 — IMAGE OVERLAY
   ---------------------------------------------------------- */

.ent-page-hero .wp-block-cover__background {
  background: linear-gradient(
    90deg,
    rgba(7, 28, 23, 0.82) 0%,
    rgba(7, 28, 23, 0.56) 38%,
    rgba(7, 28, 23, 0.12) 75%,
    rgba(7, 28, 23, 0.04) 100%
  ) !important;

  opacity: 1 !important;
}


/* ----------------------------------------------------------
   04 — COVER INNER CONTAINER
   ---------------------------------------------------------- */

.ent-page-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ----------------------------------------------------------
   05 — CONTENT GROUP
   ---------------------------------------------------------- */

.ent-page-hero-content {
  width: min(
    calc(100% - (var(--ent-gutter) * 2)),
    var(--ent-container-wide)
  );

  max-width: var(--ent-container-wide) !important;

  margin-inline: auto !important;
  padding: 110px 0 120px !important;

  color: var(--ent-white);
}

.ent-page-hero-content > * {
  margin-block-start: 0 !important;
}


/* ----------------------------------------------------------
   06 — SHARED EYEBROW
   ---------------------------------------------------------- */

.ent-page-hero-eyebrow {
  margin: 0 0 28px !important;

  font-family: var(--ent-font-body);
  font-size: var(--ent-text-xs);
  font-weight: var(--ent-weight-semibold);

  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--ent-white) !important;
}

.ent-page-hero-eyebrow::after {
  content: "";
  display: block;

  width: 32px;
  height: 2px;
  margin-top: 14px;

  background: var(--ent-rust);
}


/* ----------------------------------------------------------
   07 — SHARED HEADLINE
   ---------------------------------------------------------- */

.ent-page-hero-title {
  max-width: 740px;
  margin: 0 0 28px !important;

  font-family: var(--ent-font-display);
  font-size: clamp(4rem, 6.2vw, 6.75rem);
  font-weight: var(--ent-weight-regular);

  line-height: .96;
  letter-spacing: -.035em;

  color: var(--ent-white) !important;
  text-wrap: balance;
}


/* ----------------------------------------------------------
   08 — SHARED INTRODUCTION
   ---------------------------------------------------------- */

.ent-page-hero-intro {
  max-width: 470px;
  margin: 0 !important;

  font-family: var(--ent-font-body);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: var(--ent-weight-regular);

  line-height: 1.7;

  color: rgba(255,255,255,.92) !important;
}


/* ----------------------------------------------------------
   09 — GUTENBERG SPACING
   ---------------------------------------------------------- */

.wp-block-post-content:has(> .ent-page-hero) {
  margin-block-start: 0 !important;
}

.wp-block-post-content > .ent-page-hero:first-child {
  margin-block-start: 0 !important;
}


/* ==========================================================
   27.1 — HOME HERO VARIATION
   A Little Closer to Wonder

   Uses existing Interior Hero pattern.
   No changes to other page heroes.
   ========================================================== */


/* ----------------------------------------------------------
   01 — MODERN BOLD HEADLINE
   ---------------------------------------------------------- */

.ent-page-hero--home .ent-page-hero-title {
  max-width: 900px;

  font-family: var(--ent-font-body) !important;
  font-size: clamp(66px, 8vw, 124px) !important;
  font-weight: 800 !important;

  line-height: .96 !important;
  letter-spacing: -.055em !important;
  text-transform: uppercase;

  color: var(--ent-white) !important;

  margin-bottom: 26px !important;
}


/* ----------------------------------------------------------
   02 — EYEBROW
   Matches current design system
   Supports either existing eyebrow class
   ---------------------------------------------------------- */

.ent-page-hero--home
:is(.ent-eyebrow, .ent-page-hero-eyebrow) {
  display: flex;
  align-items: center;
  gap: 14px;

  width: fit-content;
  margin: 0 0 26px !important;

  font-family: var(--ent-font-body);
  font-size: 12px !important;
  font-weight: 700 !important;

  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: var(--ent-white) !important;
}

/* Single rust rule after text */

.ent-page-hero--home
:is(.ent-eyebrow, .ent-page-hero-eyebrow)::before {
  display: none !important;
}

.ent-page-hero--home
:is(.ent-eyebrow, .ent-page-hero-eyebrow)::after {
  content: "";
  display: block;

  width: 36px;
  height: 3px;
  flex: 0 0 36px;

  margin: 0;
  background: var(--ent-rust);
}


/* ----------------------------------------------------------
   03 — HERO DESCRIPTION
   ---------------------------------------------------------- */

.ent-page-hero--home .ent-page-hero-intro {
  max-width: 500px;

  font-family: var(--ent-font-body);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;

  line-height: 1.55;

  color: rgba(255,255,255,.96) !important;
}


/* ----------------------------------------------------------
   04 — HERO BUTTON
   Same visual language as Events page
   ---------------------------------------------------------- */

.ent-page-hero--home .wp-block-buttons {
  margin-top: 28px !important;
}

.ent-page-hero--home .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  padding: 15px 26px !important;

  background: var(--ent-rust) !important;
  color: var(--ent-white) !important;

  border: 1px solid var(--ent-rust) !important;
  border-radius: var(--ent-radius-sm, 4px) !important;

  font-family: var(--ent-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;

  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;

  transition:
    background-color .2s ease,
    border-color .2s ease;
}

.ent-page-hero--home
.wp-block-button__link:is(:hover, :focus-visible) {
  background: var(--ent-forest) !important;
  border-color: var(--ent-forest) !important;
  color: var(--ent-white) !important;
}


/* ==========================================================
   27.2 — RESPONSIVE HERO STYLES
   ========================================================== */


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

  .ent-page-hero.wp-block-cover {
    min-height: 600px;
  }

  .ent-page-hero-content {
    padding: 90px 0 100px !important;
  }

  .ent-page-hero-title {
    max-width: 580px;
    font-size: clamp(4rem, 8vw, 6rem);
  }

  .ent-page-hero--home .ent-page-hero-title {
    font-size: clamp(62px, 8vw, 90px) !important;
  }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 782px) {

  .ent-page-hero.wp-block-cover {
    min-height: 640px;
  }

  .ent-page-hero .wp-block-cover__background {
    background: linear-gradient(
      180deg,
      rgba(7, 28, 23, .78) 0%,
      rgba(7, 28, 23, .58) 55%,
      rgba(7, 28, 23, .18) 100%
    ) !important;

    opacity: 1 !important;
  }

  .ent-page-hero-content {
    padding: 76px 0 100px !important;
  }

  .ent-page-hero-eyebrow {
    margin-bottom: 24px !important;
  }

  .ent-page-hero-title {
    max-width: 100%;
    margin-bottom: 24px !important;

    font-size: clamp(3.5rem, 11vw, 5rem);
    line-height: .95;
  }

  .ent-page-hero-intro {
    max-width: 340px;
    font-size: 1rem;
    line-height: 1.65;
  }

  /* Homepage variation */

  .ent-page-hero--home .ent-page-hero-title {
    max-width: 100%;
    font-size: clamp(46px, 12vw, 72px) !important;
    line-height: 1 !important;
  }

  .ent-page-hero--home .ent-page-hero-intro {
    max-width: 440px;
    font-size: 16px;
    line-height: 1.6;
  }

  .ent-page-hero--home .wp-block-buttons {
    margin-top: 24px !important;
  }

}


/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width: 480px) {

  .ent-page-hero.wp-block-cover {
    min-height: 600px;
  }

  .ent-page-hero-content {
    padding-top: 64px !important;
    padding-bottom: 80px !important;
  }

  .ent-page-hero-title {
    font-size: clamp(3.25rem, 13vw, 4.25rem);
  }

  .ent-page-hero--home .ent-page-hero-title {
    font-size: clamp(46px, 12vw, 58px) !important;
  }

  .ent-page-hero--home
  :is(.ent-eyebrow, .ent-page-hero-eyebrow) {
    gap: 10px;
    font-size: 11px !important;
  }

  .ent-page-hero--home
  :is(.ent-eyebrow, .ent-page-hero-eyebrow)::after {
    width: 24px;
    flex-basis: 24px;
  }

}


/* ==========================================================
   HOMEPAGE HERO — CINEMATIC ZOOM
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {

  .ent-page-hero--home .wp-block-cover__image-background {
    animation: ent-hero-zoom 12s ease-out both;
    transform-origin: center center;
  }

  @keyframes ent-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
  }

}