/* =========================
   Inner Hero Section
========================= */
section.inner-hero-section {
  --first-inner-hero-bg: var(--first-inner-amenities-hero-bg);
  height: 600px;
  min-height: 600px;
  margin: 0;
  padding: 100px 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  position: relative;
  background: #000;
  font-family: var(--first-font-body);
  font-size: 18px;
  line-height: 20.7px;
}

section#gallery-hero.inner-hero-section {
  --first-inner-hero-bg: var(--first-gallery-hero-bg);
}

section.inner-hero-section::before,
.inner-hero-after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* "The First · Oklahoma City" seal, straddling the bottom edge of every inner
   hero on the right, as on the live site. The hero sets no z-index, so this
   z-index keeps the lower half above the section that follows. */
section.inner-hero-section::before {
  display: block;
  width: 18vw;
  height: 18vw;
  right: 7%;
  bottom: 0;
  z-index: 3;
  background: url("/wp-content/themes/first-v2/assets/images/image-ghost.svg") center center / contain no-repeat;
  transform: translateY(50%);
}

.inner-hero-after  {
    z-index: 1;
  bottom: 0;
    width: 100%;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  /* background: linear-gradient(0deg, var(--first-primary) 0%, rgba(0, 0, 0, 0) 50%); */
}

section.inner-hero-section .inner-hero-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

section.inner-hero-section .inner-hero-img,
section.inner-hero-section .inner-hero-img .image-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--first-inner-hero-bg) center center / cover no-repeat;
}

section.inner-hero-section .inner-hero-img {
  z-index: 0;
}

section.inner-hero-section .inner-hero-img .slick-list,
section.inner-hero-section .inner-hero-img .slick-track,
section.inner-hero-section .inner-hero-img .slick-slide {
  height: 100%;
}

section.inner-hero-section .inner-hero-img .slick-dots {
  display: none !important;
}

section.inner-hero-section .inner-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.4;
}

section.inner-hero-section .inner-hero-img .mob-bg {
  display: none;
}

section.inner-hero-section .inner-hero-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
}

section.inner-hero-section .inner-hero-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}

section.inner-hero-section .text-wrap {
  width: 100%;
  display: flow-root;
}

section.inner-hero-section .text-overlay {
  display: none;
}

section.inner-hero-section .inner-hero-title {
  margin: 55px 0 0;
  padding: 0 0 40px;
  position: relative;
  font-size: 59px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
}

section.inner-hero-section .inner-hero-title::after {
  content: "";
  width: 130px;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-bottom: 4px solid var(--secondary-color);
  transform: translateX(-50%);
}

/* =========================
   Inner Intro Section
========================= */
section.inner-intro-section {
  min-height: 801px;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  background: var(--first-white);
  color: #000;
  font-family: var(--first-font-body);
  font-size: 18px;
  line-height: 20.7px;
}

section.inner-intro-section .inner-intro-pattern {
  width: 50%;
  max-width: none;
  height: 100%;
  padding: 115px 60px 29px 0;
  top: 0;
  right: auto;
  left: 0;
  background: transparent;
}

section.inner-intro-section .inner-intro-pattern::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: none;
  display: none;
}

section.inner-intro-section .inner-intro-pattern .inner-intro-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

section.inner-intro-section .inner-intro-container {
  max-width: 1280px;
  padding: 0 15px;
}

section.inner-intro-section .inner-intro-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

section.inner-intro-section .intro-heading-wrap,
section.inner-intro-section .intro-content-wrap {
  grid-column: 2;
}

section.inner-intro-section .intro-heading-wrap {
  padding-top: 115px;
}

section.inner-intro-section .section-title {
  margin: 0 0 35px;
  /* color: var(--base-color); */
  font-family: "Playfair Display", Helvetica, Arial, sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 0;
  letter-spacing: 0;
  text-align: left;
}

section.inner-intro-section .section-title::after {
  content: none;
  display: block;
  white-space: pre-line;
  font-size: 38px;
  line-height: 45.6px;
}

section.inner-intro-section .section-subtitle,
section.inner-intro-section .section-buttons {
  display: none;
}

section.inner-intro-section .section-content,
section.inner-intro-section .section-content p {
  margin: 0;
  color: #000;
  font-family: var(--first-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0;
  text-align: left;
}

section.inner-intro-section .section-content p::after {
  content: none;
  content: "At The First, history and elegance is infused into every detail, every amenity, and every piece of art. Oil drilling, the banking industry, and even the history of Oklahoma are all woven into the fabric of our building, captured in stone, metal, and murals. Explore our gallery below for a closer look at the awe-inspiring finishes and historical details that set our apartments in Oklahoma City above the rest. Once you\2019 ve seen the beauty of The First, contact us to schedule a tour.\201D";
  display: block;
  font-size: 16px;
  line-height: 32px;
}

/* Inner hero seal — keep it legible as the viewport narrows. */
@media screen and (max-width: 992px) {
  section.inner-hero-section::before {
    width: 26vw;
    height: 26vw;
    right: 5%;
  }
}

@media screen and (max-width: 767px) {
  section.inner-hero-section::before {
    width: 34vw;
    height: 34vw;
    right: 4%;
  }
}