/*The MARKUP is the Swifty component so the backend can generate it, but the
   DESIGN is the one this theme already had: the photo is a full-bleed backdrop
   anchored to the top of .inner-page-body-wrapper, running behind the intro and
   fading to black — NOT a self-contained banner band with a title plate.

   That means the section is taken out of the flow (position: absolute) so the
   intro sits over it, exactly as the old .page-hero-bg div did. The gradients
   below are the same two the .page-hero-bg block uses further down; keep them
   in step if either is ever changed.

   component-common.css supplies only the ≤767px swap between .desktop-bg and
   .mob-bg (lines 3739 / 3746). Everything else is missing from the framework
   and is written here.
   ============================================================ */
.inner-page-body-wrapper .inner-hero-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* a fixed 56vw band anchored to the top of the wrapper — it does not belong
     to the intro and does not shrink with the copy */
  height: 56vw;
  overflow: hidden;
  z-index: 0;
}

.inner-hero-section .inner-hero-container {
  height: 100%;
  padding: 0;
}

.inner-hero-section .inner-hero-img,
.inner-hero-section .image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.inner-hero-section .inner-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The framework only sets .mob-bg { display: block } INSIDE its 767 block
   (component-common.css:3746) — nothing hides it above that. Without this base
   rule both banners stack on desktop. */
.inner-hero-section .mob-bg {
  display: none;
}

/* Keep the backend hero title visible above the image overlays. */
.inner-page-body-wrapper .inner-hero-section .inner-hero-content {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 40px;
  text-align: center;
}

.inner-page-body-wrapper .inner-hero-section .inner-hero-title {
  max-width: 960px;
 }

/* bottom fade over the lower 60% only, so the top of the photo stays clean */
.inner-page-body-wrapper:not(.page-gl) .inner-hero-section::before,
.page-gl .inner-hero-section > .lvl-shade-before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, #000000 80%);
}

/* large radial vignette; this is what makes the photo read as emerging from
   black. A plain linear fade alone looks flat. */
.inner-page-body-wrapper:not(.page-gl) .inner-hero-section::after,
.page-gl .inner-hero-section > .lvl-shade-after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: calc(50% - 225px);
  left: 50%;
  width: 120%;
  height: 100vw;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    #000000 0,
    rgba(0, 0, 0, 0.25) 100%
  );
  transform: translate(-50%, -50%);
  opacity: 0.85;
}
/* ============================================================
   SECTION: INNER HERO BANNER — END
   ============================================================ */

.inner-page-body-wrapper {
  position: relative;
  overflow: hidden;
}

.inner-page-body-wrapper .inner-intro,
.inner-page-body-wrapper .amenities-page-gallery {
  position: relative;
  z-index: 2;
}
/* Amenities intro sits over the shared hero photo. */
.inner-page-body-wrapper .intro-type-1 {
  position: relative;
  z-index: 5;
  background: transparent;
  padding-top: 180px;
  padding-bottom: 90px;
}

.inner-page-body-wrapper .intro-type-1 .left-col {
  display: none;
}

.inner-page-body-wrapper .intro-type-1 .intro-container {
  display: block;
}

.inner-page-body-wrapper .intro-type-1 .right-col {
  width: 100%;
}

.inner-page-body-wrapper .intro-type-1 .content-wrapper {
  width: 100%;
  max-width: 665px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.inner-page-body-wrapper .intro-type-1 .intro-heading .section-title {
  margin: 0 0 25px;
}

.inner-page-body-wrapper .intro-type-1 .intro-heading .section-subtitle {
  margin: 0 0 15px;
  line-height: 1.64;
}

.inner-page-body-wrapper .intro-type-1 .intro-content .section-content a {
  color: #b98a52;
  text-decoration: underline;
}

.inner-page-body-wrapper .intro-type-1 .section-buttons {
  justify-content: center;
  margin-top: 25px;
}

@media screen and (max-width: 767px) {
  .inner-page-body-wrapper .intro-type-1 {
    padding-top: 120px;
    padding-bottom: 60px;
  }
}


/* Amenities banner title is intentionally rendered before the intro H2. */
/* .inner-page-body-wrapper .inner-intro .inner-hero-title {
  margin: 0 0 20px;
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 1.15;
  text-shadow: none;
} */