/* ===============================================
   Tour Gallery – Front-end Gallery Styles
   =============================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Inter:wght@300;400;500&display=swap');

.tg-gallery {
  position:relative; width:100%; height:90vh; min-height:520px; max-height:900px;
  overflow:hidden; background:#0a0a0a; font-family:'Inter',sans-serif;
  user-select:none;
}

/* ---- Slides ---- */
.tg-slides { position:absolute; inset:0; }

.tg-slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity .9s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.tg-slide--active { opacity:1; pointer-events:auto; }

.tg-slide-bg {
  position:absolute; inset:-5%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:scale(1.08);
  transition:transform 8s ease-out;
  will-change:transform;
}
.tg-slide--active .tg-slide-bg { transform:scale(1); }

.tg-slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.1) 0%,
    rgba(0,0,0,.05) 40%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.85) 100%
  );
}

/* ---- Slide Content ---- */
.tg-slide-content {
  position:absolute; bottom:130px; left:0; right:0;
  padding:0 80px; color:#fff;
  transform:translateY(20px); opacity:0;
  transition:transform .7s .4s ease, opacity .7s .4s ease;
}
.tg-slide--active .tg-slide-content { transform:translateY(0); opacity:1; }

.tg-slide-location {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:rgba(255,255,255,.7); margin-bottom:10px;
  border:1px solid rgba(255,255,255,.25); padding:4px 12px; border-radius:20px;
  backdrop-filter:blur(8px);
}

.tg-slide-title {
  font-family:'Playfair Display',serif; font-size:clamp(36px,5vw,72px);
  font-weight:900; margin:0 0 14px; line-height:1.05; letter-spacing:-.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}

.tg-slide-desc {
  font-size:15px; font-weight:300; color:rgba(255,255,255,.75);
  max-width:520px; line-height:1.6; margin:0;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}

.tg-slide-counter {
  position:absolute; right:80px; bottom:-8px;
  font-size:13px; color:rgba(255,255,255,.4); font-weight:500;
}
.tg-current { font-size:26px; font-weight:700; color:#fff; vertical-align:middle; }
.tg-sep { margin:0 4px; vertical-align:middle; }
.tg-total { vertical-align:middle; }

/* ---- Nav Arrows ---- */
.tg-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border:1.5px solid rgba(255,255,255,.3);
  border-radius:50%; background:rgba(255,255,255,.08); backdrop-filter:blur(10px);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .25s; z-index:10;
}
.tg-nav svg { width:20px; height:20px; }
.tg-nav--prev { left:24px; }
.tg-nav--next { right:24px; }
.tg-nav:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.6); transform:translateY(-50%) scale(1.08); }

/* ---- Progress Bar ---- */
.tg-progress {
  position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1); z-index:10;
}
.tg-progress-bar {
  height:100%; background:linear-gradient(90deg,#f59e0b,#ec4899);
  width:0; transition:width 5s linear;
}

/* ---- Thumbnail Strip ---- */
.tg-thumbs {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; gap:0; overflow-x:auto; scrollbar-width:none; z-index:10;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);
  padding:16px 80px 20px;
  scroll-behavior:smooth;
}
.tg-thumbs::-webkit-scrollbar { display:none; }

.tg-thumb {
  flex:0 0 80px; height:54px; cursor:pointer; position:relative;
  border-radius:6px; overflow:hidden; transition:all .3s;
  opacity:.55; border:2px solid transparent;
}
.tg-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.tg-thumb-line {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#f59e0b,#ec4899);
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.tg-thumb--active {
  opacity:1; border-color:rgba(245,158,11,.7);
  transform:translateY(-3px);
}
.tg-thumb--active .tg-thumb-line { transform:scaleX(1); }
.tg-thumb:hover:not(.tg-thumb--active) { opacity:.85; }

/* ---- Fullscreen Button ---- */
.tg-fullscreen {
  position:absolute; top:20px; right:20px; z-index:10;
  width:40px; height:40px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25); border-radius:8px;
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.tg-fullscreen svg { width:18px; height:18px; }
.tg-fullscreen:hover { background:rgba(255,255,255,.2); }

/* ---- Responsive ---- */
@media (max-width:768px) {
  .tg-gallery { height:70vh; min-height:400px; }
  .tg-slide-content { padding:0 20px; bottom:110px; }
  .tg-slide-counter { right:20px; }
  .tg-thumbs { padding:12px 16px 16px; gap:6px; }
  .tg-thumb { flex:0 0 60px; height:42px; }
  .tg-nav { width:40px; height:40px; }
  .tg-nav--prev { left:10px; }
  .tg-nav--next { right:10px; }
  .tg-fullscreen { top:10px; right:10px; }
}
@media (max-width:480px) {
  .tg-gallery { height:60vh; min-height:320px; }
  .tg-slide-title { font-size:30px; }
  .tg-slide-content { bottom:96px; }
  .tg-thumbs { padding:8px 10px 12px; }
  .tg-thumb { flex:0 0 48px; height:34px; }
}