:root{
  --cream:#f5f0e8;
  --ink:#181410;
  --muted:#8a8070;
  --accent:#c4844a;
  --accent2:#7a9e8c;
  --border:#e0d8cc;
  --panel:#faf7f2;
  --shadow:rgba(20,14,8,0.22);
  --card-h:340px;
}
/* ── Overlay ── */
/* .overlay{
  position:fixed;inset:0;
  background:rgba(8,5,2,0.80);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
} */
#overlay {
  position:fixed;inset:0;
  background:rgba(8,5,2,0.80);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:20px;
  opacity:0;pointer-events:none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

#overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events:all
}
.popup-panel {
    transform: translateY(40px);
    opacity: 0;
    transition: all 0.4s ease;
}
#overlay.active .popup-panel {
    transform: translateY(0);
    opacity: 1;
}
.slide-image {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.slide-image.active {
    opacity: 1;
}
/* ── Popup Shell ── */
.popup{
  position:relative;
  background:var(--panel);
  border-radius:0;overflow:hidden;
  display:flex;
  box-shadow:0 50px 120px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.04);
  opacity:0;
  transform:scale(0.93) translateY(24px);
  transition:
    opacity 0.45s cubic-bezier(0.22,1,0.36,1),
    transform 0.45s cubic-bezier(0.22,1,0.36,1),
    width 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
    height 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  max-width:94vw;
  max-height:92vh;
  will-change:width,height;
}
.overlay.active .popup{opacity:1;transform:scale(1) translateY(0)}

.popup{flex-direction:row}

/* ── Image Pane ── */
.img-pane{
  position:relative;flex-shrink:0;
  overflow:hidden;
}

.slide-track{position:relative;width:100%;height:100%}

.popup-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    transition: opacity 0.3s ease;
    will-change: opacity;
}
.popup-img.enter-from-right,
.popup-img.enter-from-left { opacity:0; transform:scale(1.04) }
.popup-img.is-active       { opacity:1; transform:scale(1);z-index: 2;
  transition:opacity 0.72s ease, transform 0.72s cubic-bezier(0.25,0.46,0.45,0.94) }
.popup-img.exit-to-left,
.popup-img.exit-to-right   { opacity:0; transform:scale(0.97);
  transition:opacity 0.52s ease, transform 0.52s cubic-bezier(0.25,0.46,0.45,0.94) }

/* Gradient over image */
.img-overlay-grad{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0.18) 0%,transparent 35%,transparent 65%,rgba(0,0,0,0.25) 100%);
}

/* breadcrumb removed */

/* ── Content Pane ── */
.content-pane{
  flex:1;min-width:0;
  overflow-y:auto;overflow-x:hidden;
  position:relative;
  background:var(--panel);
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.content-pane::-webkit-scrollbar{width:3px}
.content-pane::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── Content Slider ── */
.content-slider{
  position:relative;
  width:100%;
}

.content-slide{
  position:absolute;top:0;left:0;width:100%;
  padding:42px 38px 36px;
  opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.5s ease;
  display:flex;flex-direction:column;
  box-sizing:border-box;
}
.content-slide.active{
  position:relative;opacity:1;pointer-events:all;transform:translateY(0);
  min-height:100%;
}
.content-slide.exit-left,
.content-slide.exit-right{transform:translateY(-8px);opacity:0}

.dest-desc-wrap{flex:1}



/* Content internals */
.dest-eyebrow{
  font-family:'Avenir Next','Avenir',sans-serif;
  font-size:0.54rem;letter-spacing:0.24em;text-transform:uppercase;
  color:#c3996b;margin-bottom:10px;font-weight:300;
}
.dest-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  font-weight:300;font-style:normal;
  color:var(--ink);line-height:1.1;
  letter-spacing:-0.01em;margin-bottom:14px;
}
.accent-rule{
  width:28px;height:1px;
  background:#c3996b;
  border-radius:0;margin-bottom:22px;
}
.dest-desc {
  font-size:0.8rem;line-height:1.9;color:#5e5850;
  font-weight:300;margin-bottom:0;
}
.sublocation {
    margin-bottom: 22px;
}
.sublocation p.sub-location {
    padding: 0;
    line-height: normal;
    font-size: 13px;
    color: #5e5850;
    font-weight: 300;
}
.sublocation {
    /* display: flex;
    gap: 9px; */
}
/* Meta */
.meta-grid{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border);
  margin-bottom:28px;
}
.meta-cell{
  padding:15px 0;
  border-bottom:1px solid var(--border);
}
.meta-cell:nth-child(odd){padding-right:16px;border-right:1px solid var(--border)}
.meta-cell:nth-child(even){padding-left:16px}
.meta-label{
  font-size:0.5rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;font-weight:500;
}
.meta-value{font-size:0.78rem;color:var(--ink);font-weight:300;line-height:1.5}

/* Thumbnails */
.more-section{margin-top:auto;padding-top:20px}
.more-label, .sublocation strong{
  font-family:'Avenir Next','Avenir',sans-serif;
  font-size:0.54rem;letter-spacing: .22em;text-transform:uppercase;
  color:#c3996b;margin-bottom:12px;font-weight:300;

}
.sublocation strong {
    line-height: 16px;
    display: block;
    margin: 0;
}
.more-label strong{color:#c3996b;font-weight:300}
.thumbs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
/* Hide anything beyond the 6th thumb — show a "+N more" badge on the 6th */
.thumb{
  aspect-ratio:3/2;height:auto;border-radius:0;overflow:hidden;
  cursor:pointer;position:relative;
  border:none;
  transition:transform 0.3s,box-shadow 0.3s;
}
.thumb:nth-child(n+7){display:none}
.thumb.overflow-badge img{filter:brightness(0.38)}
.thumb.overflow-badge::after{
  content:attr(data-overflow);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Avenir Next','Avenir',sans-serif;
  font-size:0.9rem;font-weight:300;letter-spacing:0.1em;
  color:#fff;pointer-events:none;
}
.thumb:hover{transform:translateY(-3px);box-shadow:0 10px 22px var(--shadow)}
.thumb.is-active::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:rgba(0,0,0,0.65);pointer-events:none;
  transition:background 0.3s;
}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.thumb:hover img{transform:scale(1.1)}
.thumb-label{display:none}

/* ── Close Button ── */
.close-btn{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;
  background:rgba(255,255,255,0.13);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.85);font-size:0.8rem;
  z-index:30;
  transition:background 0.22s,transform 0.22s;
}
.close-btn:hover{background:rgba(255,255,255,0.28);transform:scale(1.1) rotate(90deg)}

/* close sits over content pane */
.close-btn{
  background:rgba(30,26,20,0.55);
  border-color:rgba(200,180,150,0.2);
  color:rgba(220,200,170,0.8);
}
.close-btn:hover{background:rgba(30,26,20,0.8);transform:scale(1.1) rotate(90deg)}

.popup {
  display: flex;
  transition: width 0.6s ease, height 0.6s ease;
}

.img-pane {
  position: relative;
  overflow: hidden;
}

.single-mode .thumb-wrapper,
.single-mode .more-section {
    display: none !important;
}

/* Loader full cover */
.popup-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: opacity .3s ease;
}

.popup-loader.hide {
    opacity: 0;
    pointer-events: none;
}

/* Spinner */
.loader-spinner {
    width: 45px;
    height: 45px;
    border: 4px solid #ddd;
    border-top: 4px solid #c3996b; /* your brand color */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


#popup {
    transition: width 0.35s ease, height 0.35s ease;
}

#imgPane {
    transition: width 0.35s ease;
}

#contentSlider {
    transition: width 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}

#imgPane img {
    transition: transform 0.45s ease;
    will-change: transform;
}
.popup-img {
    transition: opacity 0.25s ease;
}



/* @media (max-width: 992px) {

  .popup {
    flex-direction: column;
    width: 100% !important;
    height: auto !important;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
  }

  .img-pane {
    width: 100% !important;
    height: 300px !important;
    flex-shrink: 0;
  }

  .popup-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .content-pane,
  .content-slider {
    width: 100% !important;
    height: auto !important;
  }

  .content-slide {
    position: relative;
    padding: 24px 20px;
  }
} */

@media (max-width: 991px) {

  #popup.mobile-layout {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  #popup.mobile-layout #imgPane img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}