/* Amenities page intro — image beside content, as in FirstOKC amenities.html. */
/* Community and resident amenities — full-width photo, inset details and lists. */
.first-v2-amenities .amenities-section {
  position: relative;
  padding: 0 0 70px;
  color: #000;
}
.first-v2-amenities .amenities-container {
  display: block;
  max-width: none;
  padding: 0;
}
.first-v2-amenities .amenities-section .left-col {
  position: relative;
  width: 100%;
  height: max(35vw, 319px);
  padding: 0;
  overflow: hidden;
}
.first-v2-amenities .amenities-section .left-col::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(0deg, var(--first-secondary), transparent);
}
.first-v2-amenities #resident-amenities .left-col::after {
  background: linear-gradient(0deg, var(--base-color), transparent);
}
.first-v2-amenities .amenities-section .img-wrapper {
  position: static;
  width: 100%;
  height: 100%;
  max-height: none;
}
.first-v2-amenities .amenities-section .img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.first-v2-amenities .amenities-section .right-col {
  width: 100%;
  padding: 0;
}
.first-v2-amenities .amenities-section .content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: calc(100% - 112px);
  margin: auto;
  padding: 60px 54px;
  background: #f0f0f0;
}
.first-v2-amenities .amenities-section .section-title {
  position: absolute;
  left: max(95px, calc((100% - 1250px) / 2));
  top: max(35vw, 319px);
  width: calc(100% - 190px);
  transform: translateY(calc(-100% - 55px));
  margin: 0;
  font: 700 38px/1.2 var(--font-heading);
  color: var(--first-on-secondary);
}
.first-v2-amenities #resident-amenities .section-title {
  color: var(--first-on-primary);
}
.first-v2-amenities .amenities-section .small-heading {
  display: block;
  margin-bottom: 20px;
  font: 700 20px/1.5 var(--font-heading);
}
.first-v2-amenities .amenities-section .section-subtitle {
  margin: 20px 0 30px;
  color: var(--first-secondary-ink);
  font: 600 18px/1.5 var(--first-font-body);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.first-v2-amenities .amenities-section .section-content {
  font: 16px/1.8 var(--first-font-body);
  margin-bottom: 30px;
}
.first-v2-amenities .amenities-section ul.amenities-grid {
  display: block;
  columns: 2;
  column-gap: 25px;
  padding: 0;
  margin: 0;
}
/* component-common.css:1977 sets list-style: disc at (0,3,2); this needs the
   extra classes to outrank it, or the default marker shows beside the
   .bullet-span circle. */
.first-v2-amenities .amenities-section .amenities-grid-wrap ul.amenities-grid li.single-amenity {
  list-style: none;
  position: relative;
  /* thefirstokc.com .amenities-box li.single-amenity */
  padding: 15px 30px;
}

/* thefirstokc.com .amenities-box .amenities-grid li.single-amenity:after */
.first-v2-amenities .amenities-section li.single-amenity .bullet-span {
  top: 20px;
  left: 5px;
  margin-top: 0;
}

.first-v2-amenities .amenities-section li.single-amenity {
  break-inside: avoid;
  width: 100%;
  margin: 0;
  border-top: 1px solid currentColor;
  font: 700 13px/1.6 var(--font-heading);
  letter-spacing: 0.27px;
  text-transform: uppercase;
}
.first-v2-amenities .amenities-section.full-width-section .section-title {
  position: static;
  width: auto;
  transform: none;
  color: #000;
  margin-bottom: 30px;
}
/* Optional shared sections retain their dashboard visibility. */
.first-v2-amenities .faq-section {
  max-width: 1250px;
  margin: auto;
  padding: 60px 24px;
}
/* Responsive amenities page layout. */
@media (max-width: 992px) {
  .first-v2-amenities .amenities-section .content-wrapper {
    grid-template-columns: 1fr;
    max-width: calc(100% - 40px);
    padding: 40px 30px;
  }
  .first-v2-amenities .amenities-section .section-title {
    left: 30px;
    width: calc(100% - 60px);
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .first-v2-amenities #amenities-hero {
    height: 450px;
  }
  .first-v2-amenities #amenities-hero .inner-hero-title {
    font-size: 38px;
  }
  .first-v2-amenities #amenities-hero .desktop-bg {
    display: none;
  }
  .first-v2-amenities #amenities-hero .mob-bg {
    display: block;
  }
  .first-v2-amenities .amenities-section ul.amenities-grid {
    columns: 1;
  }
  .first-v2-amenities .amenities-section .content-wrapper {
    max-width: calc(100% - 30px);
    padding: 30px 24px;
  }
}