/* ============================================================
   SECTION: AMENITIES TABS + MASONRY — START
   Ported from live-html-css-lvl29's .amenities-page-gallery. One dark
   section, two tab panes; each pane keeps this theme's two-column
   amenities markup and adds the masonry photo gallery below it.
   The masonry is v1's exact nth-child recipe: two half-width tiles on the
   first row (the gap beside #1 is where the LVL29 watermark sits), thirds
   at 7-9, halves at 10-11, then a uniform third-width grid from 12 on.
   ============================================================ */
/* transparent, not black: the photo band on .inner-page-body-wrapper runs
   behind this section too, exactly as on the live site. A solid background
   here would cut the photo off at the tabs. */
.amenities-page-gallery {
  position: relative;
  padding-bottom: 60px;
  background-color: transparent;
}

/* --- Tabs --- */
.amenities-page-gallery ul.ct-tabs {
  position: relative;
  z-index: 9;
  display: block;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 25px 0;
  border-top: 1px solid;
  text-align: center;
}

.amenities-page-gallery ul.ct-tabs > li {
  display: inline-block;
  width: auto;
  min-width: 120px;
  margin: 5px;
  padding: 9px 15px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.429rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.amenities-page-gallery .ct-tabs-container {
  position: relative;
  width: 1060px;
  max-width: 100%;
  margin: 0 auto;
}

/* panes: collapsed to zero height rather than display:none, so the
   masonry scale-in transition has something to animate from */
.amenities-page-gallery .tab-content {
  position: relative;
  z-index: 9;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.amenities-page-gallery .tab-content.current {
  height: auto;
  opacity: 1;
}

/* dotted pattern decorations behind the panes */
.amenities-page-gallery .ct-tabs-container::before,
.amenities-page-gallery .ct-tabs-container::after {
  content: "";
  display: block;
  position: absolute;
  top: 115px;
  left: calc(50% - 150px);
  width: 100px;
  height: 100%;
  max-height: 750px;
  background: url("../images/icons/pattern-dots.svg") no-repeat 50%;
  transform: translateX(-50%);
}

.amenities-page-gallery .ct-tabs-container::after {
  top: 275px;
  left: calc(50% + 150px);
}

/* --- Feature list --- */

/* DOUBLE BULLET. This list sits inside #community-amenities, which is
   .amenities-section nested inside .amenities-page-gallery — so the framework's
   `.amenities-section .amenities-grid-wrap ul.amenities-grid li { list-style:
   disc }` (component-common.css:1974) applies as well as the ::before dot
   below, and every item drew two markers. The framework selector is (0,3,2),
   so the native marker can only be switched off by matching it: three classes
   plus ul + li, later in the file. Its `padding-left: 20px` on the <ul>
   (:1969) goes with it, so the theme's dot lines up with the copy above
   instead of being pushed in by the marker gutter. */
.amenities-page-gallery .amenities-grid-wrap ul.amenities-grid > li {
  list-style: none;
  /* the same framework rule sets `padding: 0 0 8px 0`, which out-ranks the
     18px gutter below — so the absolutely-placed dot was landing on top of the
     first character. Restored at the winning specificity. */
  padding-left: 18px;
}

.amenities-page-gallery .amenities-grid-wrap ul.amenities-grid {
  padding-left: 0;
}

.amenities-page-gallery ul.amenities-grid {
  padding: 0;
}

.amenities-page-gallery ul.amenities-grid > li {
  position: relative;
  width: 100%;
  padding: 0 0 8px 18px;
  font-weight: 300;
  line-height: 1.5;
}

.amenities-page-gallery ul.amenities-grid > li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

/* --- Masonry gallery --- */
.amenities-page-gallery .amenities-gallery {
  position: relative;
  width: 100%;
  margin: 60px 0;
}

.amenities-page-gallery svg.amnety-svg {
  position: absolute;
  width: 515px;
  max-width: 60%;
  margin-top: 55px;
}

.amenities-page-gallery svg.amnety-svg * {
  fill: hsla(0, 0%, 100%, 0.15);
}

.amenities-page-gallery ul.modular-gallery-ul {
  width: 100%;
  margin: 100px auto 0;
  padding: 0 20px;
  font-size: 0;
}

.amenities-page-gallery ul.modular-gallery-ul li.modular-image-container {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(25% - 30px);
  height: auto;
  min-height: 200px;
  margin: 0 15px 30px;
  background-size: cover;
  background-position: center center;
  transform: scale(0.5);
  transition: all 0.5s ease 0s;
}

.amenities-page-gallery .tab-content.current ul.modular-gallery-ul li.modular-image-container {
  transform: scale(1);
}

.amenities-page-gallery ul.modular-gallery-ul li.modular-image-container a.modular_gallery_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.amenities-page-gallery ul.modular-gallery-ul li.modular-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* first-cycle artistic offsets — the gap beside #1 is the watermark */
.amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(1) {
  float: left;
  width: calc(50% - 30px);
  height: 320px;
  margin-left: calc(50% + 15px);
}

.amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(2) {
  float: left;
  width: calc(50% - 30px);
  height: 320px;
}

.amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(7),
.amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(8),
.amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(9) {
  width: calc(33.33% - 30px);
}

.amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(10),
.amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(11) {
  width: calc(50% - 30px);
  height: 350px;
}

/* from #12 on: clean uniform grid */
.amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(n + 12) {
  float: none;
  width: calc(33.33% - 30px);
  height: 240px;
  margin-left: 15px;
}

.amenities-page-gallery .amenities-gallery ul::after {
  display: table;
  content: " ";
  clear: both;
}

/* --- The two-column pane content, on the dark ground --- */
.amenities-page-gallery .amenities-section {
  padding-top: 0;
  padding-bottom: 0;
}

.amenities-page-gallery .amenities-container {
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
}

.amenities-page-gallery .amenities-container .left-col {
  width: 62%;
}

.amenities-page-gallery .amenities-container .right-col {
  width: 38%;
  padding-left: 60px;
}

/* The feature list is two columns in this narrower right-hand column, so the
   items need room for the bullet — without this the dot sits on top of the
   first character. */
.amenities-page-gallery ul.amenities-grid {
  column-count: 2;
  column-gap: 24px;
}

.amenities-page-gallery ul.amenities-grid > li {
  break-inside: avoid;
  padding-left: 16px;
}

.amenities-page-gallery .img-wrapper img {
  width: 100%;
  height: auto;
}

.amenities-page-gallery .amenities-heading .small-heading {
  display: block;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9f662d;
}

/* the pane markup carries text-color-dark, unreadable on the dark ground */
.amenities-page-gallery .amenities-heading .section-title,
.amenities-page-gallery .amenities-heading .section-subtitle,
.amenities-page-gallery .section-content,
.amenities-page-gallery .section-content p,
.amenities-page-gallery .list-content,
.amenities-page-gallery ul.amenities-grid > li {
  color: #ffffff;
}
/* ============================================================
   SECTION: AMENITIES TABS + MASONRY — END
   ============================================================ */
@media (max-width: 1024px) {
  .amenities-page-gallery .amenities-container .left-col { width: 55%; }
  .amenities-page-gallery .amenities-container .right-col { width: 45%; padding-left: 30px; }
  .amenities-page-gallery .ct-tabs-container::before,
  .amenities-page-gallery .ct-tabs-container::after { display: none; }
}

@media (max-width: 767px) {
  .amenities-page-gallery .amenities-container .left-col,
  .amenities-page-gallery .amenities-container .right-col { width: 100%; padding-left: 0; }
  .amenities-page-gallery .amenities-container .right-col { margin-top: 24px; }
  .amenities-page-gallery ul.amenities-grid { column-count: 1; }
  .amenities-page-gallery .amenities-gallery { margin: 40px 0; }
  .amenities-page-gallery svg.amnety-svg { width: 260px; max-width: 50%; margin-top: 20px; }
  .amenities-page-gallery ul.modular-gallery-ul { margin-top: 60px; padding: 0; }
  .amenities-page-gallery ul.modular-gallery-ul li.modular-image-container,
  .amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(n) {
    float: none;
    width: calc(50% - 16px);
    height: 200px;
    min-height: 0;
    margin: 0 8px 16px;
  }
  .amenities-page-gallery .amenities-gallery ul.modular-gallery-ul li.modular-image-container:nth-child(1) {
    margin-left: calc(50% + 8px);
  }
}