/* =========================================
   GALLERY (Desktop mosaic + Mobile mosaic)
   - Desktop: your original float/mosaic layouts
   - Mobile: same mosaic pattern via CSS Grid (no nth-of-type)
   ========================================= */

/* ---------- container sizing ---------- */
.gallery-c__container{display:block;margin:0 auto;width:1300px}
@media (max-width:1380px){.gallery-c__container{width:1100px}}
@media (max-width:1180px){.gallery-c__container{width:900px}}
@media (max-width:980px){.gallery-c__container{width:760px}}
@media (max-width:808px){.gallery-c__container{width:100%}}

/* ---------- core gallery structure ---------- */
.gallery-c{position:relative}
.gallery-c__row{margin-bottom:20px}
.gallery-c__row:last-child{margin-bottom:0}
.gallery-c__list{position:relative}
.gallery-c__list:after{content:"";display:table;clear:both}

.gallery-c__item{
  background-color:rgba(0,0,0,.05);
  background-position:50%;
  background-size:cover;
  float:left;
  overflow:hidden;
  position:relative;
}
.gallery-c__link{position:absolute;left:0;top:0;width:100%;height:100%}
.gallery-c__image{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- DESKTOP LAYOUTS used in your HTML ---------- */
/* Row 1: big left + two stacked right (main-3) */
.gallery-c__item--main-3-1{width:63%;padding-bottom:45%;margin-right:20px}
.gallery-c__item--main-3-2,.gallery-c__item--main-3-3{width:calc(37% - 20px);padding-bottom:21.7%}
.gallery-c__item--main-3-2{margin-bottom:20px}

/* Row 2: 4-up mosaic (main-4) */
.gallery-c__item--main-4-1,.gallery-c__item--main-4-2{
  width:calc(25% - 15px);padding-bottom:23.9%;margin-right:20px
}
.gallery-c__item--main-4-3{
  width:calc(50% - 10px);padding-bottom:23.8%;
  position:absolute;left:0;bottom:0;margin-top:20px
}
.gallery-c__item--main-4-4{
  width:calc(50% - 10px);padding-bottom:49.25%;float:right
}

/* Row 3: two small left + big right (tertiary-3) */
.gallery-c__item--tertiary-3-1,.gallery-c__item--tertiary-3-2{
  width:calc(37% - 20px);padding-bottom:21.7%
}
.gallery-c__item--tertiary-3-1{margin-bottom:20px}
.gallery-c__item--tertiary-3-2{position:absolute;left:0;bottom:0}
.gallery-c__item--tertiary-3-3{width:63%;padding-bottom:45%;float:right;margin-left:20px}

/* (Optional tertiary 4-up row if used) */
.gallery-c__item--tertiary-4-1{float:left;width:calc(50% - 10px);padding-bottom:49.25%}
.gallery-c__item--tertiary-4-2,.gallery-c__item--tertiary-4-3{
  float:right;width:calc(25% - 15px);padding-bottom:23.9%;margin-right:20px
}
.gallery-c__item--tertiary-4-2{margin-right:0}
.gallery-c__item--tertiary-4-4{
  position:absolute;right:0;bottom:0;width:calc(50% - 10px);padding-bottom:23.8%;margin-top:20px
}

/* ---------- desktop tweak breakpoints ---------- */
@media (max-width:1380px){
  .gallery-c__item--main-3-2,.gallery-c__item--main-3-3{padding-bottom:21.6%}
  .gallery-c__item--tertiary-3-1,.gallery-c__item--tertiary-3-2{padding-bottom:21.6%}
  .gallery-c__item--tertiary-4-4{padding-bottom:23.6%}
}
@media (max-width:1180px){
  .gallery-c__item--main-4-3{padding-bottom:23.2%}
  .gallery-c__item--tertiary-3-1,.gallery-c__item--tertiary-3-2{padding-bottom:21.39%}
  .gallery-c__item--tertiary-4-4{padding-bottom:23.1%}
}
@media (max-width:980px){
  .gallery-c__item--tertiary-4-4{padding-bottom:22.8%}
}

/* ---------- Mobile side padding (keep a tiny gutter) ---------- */
@media (max-width:992px){
  #gallery .gallery-c__container,
  #gallery .gallery-c__row,
  #gallery .gallery-c__list{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }
}

/* ---------- Gallery tabs ---------- */
.gallery-tabs{
  display:flex;
  justify-content:center;
  gap:.75rem;
  margin:0 auto 1.25rem;
}
.gallery-tabs .nav-link{
  background:#b1a198;
  color:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:1px !important;
  padding:.70rem 1.25rem;
  font-weight:550;
  line-height:1.2;
  box-shadow:none;
}
.gallery-tabs .nav-link:hover{background:#e1cfc4;color:#222}
.gallery-tabs .nav-link.active,
.gallery-tabs .nav-link[aria-selected="true"]{
  background:#81604c !important;
  color:#fff !important;
  border-color:transparent;
}
@media (max-width:480px){.gallery-tabs{flex-wrap:wrap}}
@media (max-width:768px){
  .gallery-tabs .nav-link{
    padding:.60rem .5rem !important;
    font-weight:500 !important;
    font-size:15px;
  }
}

/* ---------- Fancybox / overlay handling ---------- */
html.fancybox-active .gallery-tabs,
html.fancybox-active nav.navbar,
html.fancybox-active #navOverlay,
html.fancybox-active .progress-wrap{display:none !important}
.fancybox__container{z-index:10950 !important}

/* ---------- Tabs: keep hidden panes from affecting layout ---------- */
.gallery .tab-content > .tab-pane:not(.active){
  display:none !important;
  height:0 !important;
  overflow:hidden !important;
}
.gallery .tab-content > .tab-pane.active{
  display:block !important;
  height:auto;
  overflow:visible;
}

/* ---------- Matterport responsive wrapper ---------- */
.mp-embed{
  position:relative;
  width:100%;
  max-width:1100px;
  margin-inline:auto;
  aspect-ratio:16 / 9;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.mp-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
#tour .mp-embed{
  position:relative;
  width:100%;
  max-width:1100px;
  margin-inline:auto;
  aspect-ratio:16 / 9;
}
#tour .mp-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  border-radius:8px;
}
.mp-embed{height:auto;padding:0}

/* =========================================
   MOBILE GALLERY (match your screenshot)
   - 3-up rows stay 3-up
   - .gallery-c__row--4up rows become 4-up
   - if a row only has 2 items, it becomes 2-up
   - all tiles same shape (no spanning)
   ========================================= */
@media (max-width: 808px){

  /* kill the desktop float/absolute mosaic behavior on phones */
  #gallery .gallery-c__item{
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    overflow: hidden !important;
  }

  /* default: every row is a 3-column grid (like your screenshot) */
  #gallery .gallery-c__row > .gallery-c__list{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* rows marked 4up become 4 columns */
  #gallery .gallery-c__row--4up > .gallery-c__list{
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* if the row only has 2 tiles (like 48-49), make it 2 columns */
  #gallery .gallery-c__row > .gallery-c__list:not(:has(.gallery-c__item:nth-child(3))){
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* consistent tile shape (matches screenshot: landscape rectangles) */
  #gallery .gallery-c__row .gallery-c__item{
    aspect-ratio: 4 / 3 !important;
  }

  /* make the image fill the tile */
  #gallery .gallery-c__link{
    position: absolute !important;
    inset: 0 !important;
  }
  #gallery .gallery-c__image{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* very narrow phones */
@media (max-width: 380px){
  #gallery .gallery-c__row > .gallery-c__list{ gap: 10px !important; }
}