/* ============================================================
   SECTION: GALLERY PAGE — START
   The Swifty gallery component (gallery-page.html) on v1's dark ground.

   component-common.css:2599-2673 already provides: .gallery-grid as a
   flex-wrap row with gap:24px, the filter button shell, .gallery-card img
   object-fit, the .tab-content / .tab-content.active show-hide, and the ≤768px
   swap to the dropdown + slick carousel. None of that is repeated here.

   What the framework does NOT provide, and what this block exists for:
     1. .gallery-card has no width and no height above 1024px. The grid is a
        flex row with a gap but the cards have no flex-basis, so each <a>
        collapses to its image's intrinsic width — and img{height:100%}
        collapses with no height on the card. This is the big one.
     2. .filter-btn.active has no styling at all, only cursor:pointer on hover.
     3. Nothing styles the video / virtual-tour cards.
   ============================================================ */

/* --- Grid --- */
.gallery-section.new-section .gallery-container {
  position: relative;
  z-index: 2;
}

/* The lvl29 gallery intro sits on the page's primary background, so its body
   copy must remain white rather than following the configurable primary
   contrast class emitted by the shared intro component. */
.page-gl #inner-intro .intro-content .section-content,
.page-gl #inner-intro .intro-content .section-content p,
.page-gl #inner-intro .intro-content .section-content li,
.page-gl #inner-intro .intro-content .section-content a {
  color: #ffffff;
}

.page-gl #inner-intro .inner-hero-title,
.page-gl #inner-intro .intro-heading .section-title,
.page-gl #inner-intro .intro-heading .section-subtitle {
  color: #ffffff;
}

/* 3-up. The 16px subtracted is 2/3 of the framework's 24px gap, which is what
   three columns share between them. */
.gallery-section.new-section .gallery-card {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  /* the thumbnails are all 700x394 — matching that keeps rows flush without
     hardcoding a pixel height */
  aspect-ratio: 700 / 394;
}

.gallery-section.new-section .gallery-card img {
  transition: transform 0.5s ease;
}

.gallery-section.new-section .gallery-card:hover img {
  transform: scale(1.05);
}

/* --- Filter buttons ---
   v1's ct-tabs look: solid white pill with black text, gold with white text
   when active, sitting under a hairline rule. Colour is declared by the
   dynamic classes on the markup (bg-light / text-color-primary /
   bg-secondary-active / text-color-light-active) — the same set the amenities
   tabs use — so the backend can still re-theme it. */
.gallery-section.new-section .filter-categories-wrapper a.filter-btn {
  border-radius: 0;
  font-family: "Playfair Display", Georgia, serif;
  /* v1: ul.ct-tabs > li { font-size: 20px } — 20/18 at the root step */
  font-size: 1.111rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* component-common.css:2620 sets `background: transparent` on these anchors
   with THREE-class specificity, which beats the single-class bg-* utilities in
   dynamic-styles.css. Without the two rules below the pills render transparent
   and their black text disappears into the dark ground.

   These re-assert the SAME two utilities at a specificity that wins. The values
   are copied from dynamic-styles.css (.bg-light #ffffff, .bg-secondary-active
   #9f662d) — that file has no custom properties, only hardcoded hex, so there
   is nothing to reference. If the palette changes there, change it here too. */
.gallery-section.new-section .filter-categories-wrapper a.filter-btn.bg-light {
  background-color: #ffffff;
}

.gallery-section.new-section .filter-categories-wrapper a.filter-btn.bg-secondary-active.active {
  background-color: #9f662d;
}

/* v1: ul.ct-tabs sits under a full-width hairline with generous breathing room */
.gallery-section.new-section .filter-categories {
  padding: 25px 0;
  border-top: 1px solid #ffffff;
}
/* .new-section.gallery-section .filter-categories-dropdown {
        border: 1px solid #000000;
        background-color: #000000;
      } */
/* --- Video and virtual-tour cards --- */
.gallery-section.new-section .vr-tour-container {
  display: flex;
  flex-flow: wrap;
  gap: 24px;
  width: 100%;
  padding: 0;
}

.gallery-section.new-section .single-virtual-tour {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  border: 1px solid;
}

.gallery-section.new-section .vt-img-wrapper {
  position: relative;
  aspect-ratio: 700 / 394;
  overflow: hidden;
}

.gallery-section.new-section .vt-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* play affordance over the video thumbnails only */
/* .gallery-section.new-section .single-gallery-video .vt-img-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
} */

.gallery-section.new-section .single-gallery-video .vt-img-wrapper svg,
.gallery-section.new-section .vt-btns svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  vertical-align: middle;
}

.gallery-section.new-section .vt-info-wrapper {
  padding: 20px;
}

.gallery-section.new-section .vt-title {
  margin: 0 0 15px;
  font-size: 1.111rem;
}

.gallery-section.new-section .vt-btns {
  display: flex;
  flex-flow: wrap;
  gap: 10px;
}

.gallery-section.new-section .vt-btns .btn {
  font-size: 0.778rem;
}

/* component-common.css:2651 pins every .swi in this section to a fixed 20px,
   which is nearly double the button label (0.778rem ≈ 11px) — the icon ended up
   dwarfing the text. em ties it to the button's own size, so it stays in
   proportion at every breakpoint as the root font-size steps down.
   The margin also moves to the left: the icon follows the label here, so the
   framework's margin-right was padding empty space. */
.gallery-section.new-section .vt-btns .btn .swi {
  margin-right: 0;
  margin-left: 6px;
  font-size: 1.15em;
  vertical-align: middle;
}

/* --- v1's dotted decoration behind the grid --- */
.gallery-section.new-section .gallery-tabs-content {
  position: relative;
}

.gallery-section.new-section .gallery-tabs-content::before,
.gallery-section.new-section .gallery-tabs-content::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100px;
  height: 100%;
  max-height: 750px;
  background: url(../images/icons/pattern-dots.svg) no-repeat 50%;
}

.gallery-section.new-section .gallery-tabs-content::before {
  top: 115px;
  left: calc(50% - 150px);
}

.gallery-section.new-section .gallery-tabs-content::after {
  top: calc(50% + 275px);
  left: calc(50% + 150px);
}
/* ============================================================
   SECTION: GALLERY PAGE — END
   ============================================================ */

@media (max-width: 1024px) {
  /* ===== GALLERY PAGE — START =====
     component-common.css:3199 already forces .gallery-card to 50% with
     !important between 769 and 1024, so only the flex-basis and the video /
     tour cards need restating to match. */
  .gallery-section.new-section .gallery-card {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }

  .gallery-section.new-section .single-virtual-tour {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }

  .gallery-section.new-section .gallery-tabs-content::before,
  .gallery-section.new-section .gallery-tabs-content::after {
    display: none;
  }
  /* ===== GALLERY PAGE — END ===== */
}

@media (max-width: 768px) {
  /* ===== GALLERY PAGE — START =====
     One card per view: the framework turns the active pane into a slick
     carousel at this width, so the cards must be full width. */
  .gallery-section.new-section .gallery-card,
  .gallery-section.new-section .single-virtual-tour {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* the framework flips .tab-content.active to display:block here for slick,
     so the tour grid needs its own stacking */
  .gallery-section.new-section .vr-tour-container {
    display: block;
  }

  .gallery-section.new-section .single-virtual-tour {
    margin-bottom: 16px;
  }

  /* chevron-down arrow on the mobile category dropdown */
  .new-section.gallery-section .filter-categories-dropdown select {
    padding-right: 40px;
    background-image: url(../../../../swifty-icons/chevron-down.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px 14px !important;
  }
  /* ===== GALLERY PAGE — END ===== */
}