/* ============================================================
   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;
}

/* 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;
  }
  /* ===== GALLERY PAGE — END ===== */
}