/* =============================================================
   Tour Gallery Pro — gallery.css  v1.3
   DESKTOP (>768px): unified 4-column grid
     - main image  : cols 1-2 / rows 1-2  (2×2 span)
     - right thumbs: 2×2 in cols 3-4
     - preview row : 4 equal columns (same grid unit = same width)
   MOBILE / TABLET (≤768px): CSS-native snap carousel
     - .tgp-carousel shown, grid hidden
   ============================================================= */

/* ---- Reset scope ------------------------------------------ */
.tgp-gallery *,
.tgp-gallery *::before,
.tgp-gallery *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- Gallery root ----------------------------------------- */
.tgp-gallery {
  --tgp-gap:        6px;
  --tgp-radius:     12px;
  --tgp-cols:       4;
  --tgp-accent:     #c0392b;
  --tgp-overlay-bg: rgba(0,0,0,0.55);

  display: flex;
  flex-direction: column;
  gap: var(--tgp-gap);
  width: 100%;
  font-family: inherit;
}

/* ---- Fallback --------------------------------------------- */
.tgp-no-images {
  padding: 1.5rem;
  text-align: center;
  color: #888;
}

/* =============================================================
   DESKTOP GRID  — always visible above 768px
   ============================================================= */
.tgp-hero-block {
  display: grid;
  grid-template-columns: repeat(var(--tgp-cols), 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--tgp-gap);
  /* Row height = height of one right thumb (1:1) so both rows
     together give the main image a 1:1 × 2 = 2:1 tall shape   */
}

/* Main feature image: span 2 cols × 2 rows */
.tgp-hero-main {
  grid-column: 1 / 3;
  grid-row:    1 / 3;
  /* aspect-ratio is set implicitly by the grid row heights,
     but we give a min-height so it never collapses            */
  min-height: 200px;
}

/* Dissolve .tgp-hero-grid into the parent grid */
.tgp-hero-grid {
  display: contents;
}

/* Place each of the 4 right thumbs explicitly */
.tgp-hero-grid .tgp-thumb:nth-child(1) { grid-column: 3; grid-row: 1; }
.tgp-hero-grid .tgp-thumb:nth-child(2) { grid-column: 4; grid-row: 1; }
.tgp-hero-grid .tgp-thumb:nth-child(3) { grid-column: 3; grid-row: 2; }
.tgp-hero-grid .tgp-thumb:nth-child(4) { grid-column: 4; grid-row: 2; }

/* Right thumbs: square aspect so rows are equal height */
.tgp-hero-grid .tgp-thumb {
  aspect-ratio: 1 / 1;
}

/* Preview row — same 4 equal columns as hero */
.tgp-preview-row {
  display: grid;
  grid-template-columns: repeat(var(--tgp-cols), 1fr);
  gap: var(--tgp-gap);
}
.tgp-preview-row .tgp-thumb {
  aspect-ratio: 1 / 0.7
}

/* ---- Shared thumb ----------------------------------------- */
.tgp-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--tgp-radius);
  cursor: pointer;
  background: #e2ddd9;
}
.tgp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, filter 0.25s ease;
  will-change: transform;
}
.tgp-thumb:hover img,
.tgp-thumb:focus-visible img {
  transform: scale(1.05);
  filter: brightness(1.07);
}
.tgp-thumb:focus-visible {
  outline: 3px solid var(--tgp-accent);
  outline-offset: 2px;
}

/* +N overlay */
.tgp-overlay-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tgp-overlay-bg);
  color: #fff;
  font: 700 1.6rem/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.02em;
  border-radius: var(--tgp-radius);
  pointer-events: none;
  transition: background 0.2s ease;
}
.tgp-has-overlay:hover .tgp-overlay-count {
  background: rgba(0,0,0,0.72);
}

/* =============================================================
   CAROUSEL  — hidden on desktop, shown on mobile/tablet
   ============================================================= */

/* Carousel wrapper: hidden by default, JS shows it on mobile */
.tgp-carousel {
  display: none;          /* JS sets display:block when active  */
  position: relative;
  width: 100%;
}

/* Scroll track */
.tgp-carousel-track {
  display: flex;
  gap: 10px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Right padding = peek amount so last slide isn't flush edge */
  padding-right: calc(18% + 10px);
}
.tgp-carousel-track::-webkit-scrollbar { display: none; }

/* Each slide: 82% wide → ~18% of next image peeks */
.tgp-carousel-slide {
  flex: 0 0 82%;
  scroll-snap-align: start;
  border-radius: var(--tgp-radius);
  overflow: hidden;
  background: #e2ddd9;
  cursor: pointer;
  position: relative;
}
.tgp-carousel-slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Prev / Next arrows */
.tgp-car-prev,
.tgp-car-next {
  position: absolute;
  top: calc(50% - 18px);   /* vertically centred on image, not dots */
  z-index: 10;
  background: rgba(255,255,255,0.88);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: opacity 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.tgp-car-prev { left: 6px; }
.tgp-car-next { right: 6px; }
.tgp-car-prev:hover,
.tgp-car-next:hover { background: #fff; }

/* Dot indicators */
.tgp-car-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0 2px;
  flex-wrap: wrap;
}
.tgp-car-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.tgp-car-dot--active {
  background: var(--tgp-accent);
  transform: scale(1.35);
}
/* Shrink dots when there are many images */
.tgp-car-dots:has(.tgp-car-dot:nth-child(10)) .tgp-car-dot {
  width: 5px;
  height: 5px;
}

/* =============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================= */

/* ---- Tablet (769px – 1024px): grid still visible, tighter -- */
@media (max-width: 1024px) and (min-width: 769px) {
  .tgp-gallery {
    --tgp-gap: 5px;
    --tgp-radius: 10px;
  }
}

/* ---- Mobile / Tablet ≤768px: switch to carousel ------------ */
@media (max-width: 768px) {

  /* Hide grid */
  .tgp-hero-block,
  .tgp-preview-row {
    display: none !important;
  }

  /* Show carousel (JS also sets display:block, belt-and-braces) */
  .tgp-carousel {
    display: block;
  }

  .tgp-gallery {
    --tgp-gap: 5px;
    --tgp-radius: 10px;
  }
}

/* ---- Small mobile ≤480px ----------------------------------- */
@media (max-width: 480px) {
  .tgp-gallery {
    --tgp-gap: 4px;
    --tgp-radius: 8px;
  }

  .tgp-carousel-slide {
    flex: 0 0 86%;
  }
  .tgp-carousel-track {
    padding-right: calc(14% + 8px);
  }
  .tgp-carousel-slide img {
    aspect-ratio: 3 / 2.2;
  }
}

/* =============================================================
   LIGHTBOX
   ============================================================= */
.tgp-lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 99998;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tgp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.tgp-lightbox[hidden],
.tgp-lb-backdrop[hidden] { display: none; }

.tgp-lb-stage {
  max-width: min(92vw, 1100px);
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tgp-lb-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  transition: opacity 0.2s ease;
}
.tgp-lb-img.tgp-lb-loading { opacity: 0.3; }

.tgp-lb-caption {
  margin-top: 0.75rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  text-align: center;
  min-height: 1.2em;
}
.tgp-lb-counter {
  margin-top: 0.4rem;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  letter-spacing: 0.06em;
}
.tgp-lb-prev,
.tgp-lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tgp-lb-prev { left: 1.25rem; }
.tgp-lb-next { right: 1.25rem; }
.tgp-lb-prev:hover,
.tgp-lb-next:hover { background: rgba(255,255,255,0.28); }

.tgp-lb-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tgp-lb-close:hover {
  background: rgba(255,255,255,0.28);
  transform: rotate(90deg);
}
.tgp-lb-prev:focus-visible,
.tgp-lb-next:focus-visible,
.tgp-lb-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .tgp-thumb img,
  .tgp-lb-img,
  .tgp-lb-close,
  .tgp-carousel-slide img { transition: none; }
}