/* ===========================================================================
   gallery-cinematic.css  --  "MERIDIAN"  (Gallery Theme — Coverflow Edition)
   Art direction for gallery.php only. Namespaced `.gal-` throughout.

   Hero concept: "The 3D Coverflow Centerpiece"
   ─────────────────────────────────────
   A perfectly structured, symmetrical hero on a clean white background.
   Features centered luxury typography above an interactive 3D stack 
   of gallery cards. Cards can be clicked to smoothly shuffle to the center.
   =========================================================================== */

/* ── DESIGN TOKENS ──────────────────────────────────────────────────────── */
.gal {
  --ivory:        #fcfbfa;
  --page:         #ffffff;
  --sand:         #e9e0d2;
  --sand-ink:     #b9ad99;
  --gold:         #ca9e4e;
  --gold-rgb:     202, 158, 78;
  --charcoal:     #111315;
  --charcoal-rgb: 17, 19, 21;
  --ink-2:        #4e565c;
  --hair:         #e6ded0;

  --display-f: "Sora", "Jost", sans-serif;
  --body-f:    "DM Sans", "Inter", sans-serif;

  --gutter:  clamp(20px, 4.5vw, 72px);
  --measure: 1440px;

  --r-box:  20px;
  --r-pill: 999px;

  --shadow-sm:   0 6px 20px -8px  rgba(var(--charcoal-rgb), .12);
  --shadow-hover:0 24px 48px -12px rgba(var(--charcoal-rgb), .2);

  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --e-spring: cubic-bezier(0.24, 1.15, 0.4, 1.06);

  position: relative;
  font-family: var(--body-f);
  color: var(--charcoal);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ── RESET (scoped) ─────────────────────────────────────────────────────── */
.gal :where(*, *::before, *::after) { box-sizing: border-box; }
.gal :where(h1, h2, h3, h4, p, ul, ol, li, figure) { margin: 0; }
.gal :where(ul, ol) { list-style: none; padding: 0; }
.gal img { display: block; max-width: 100%; }
.gal a { text-decoration: none; color: inherit; }


/* ═══════════════════════════════════════════════════════════════════════════
   HERO  --  "The 3D Coverflow"
   ═══════════════════════════════════════════════════════════════════════════ */

.gal-hero {
  position: relative;
  width: 100%;
  background: var(--page); /* Explicitly white matching header */
  padding-top: clamp(30px, 4vw, 50px);
  padding-bottom: clamp(60px, 6vw, 100px);
  text-align: center;
  overflow: hidden;
}
/* Below 992px the site header is position:fixed (70px tall) and leaves no
   in-flow spacer, so the hero must clear it itself or the title hides
   underneath the logo bar. */
@media (max-width: 991px) {
  .gal-hero { padding-top: calc(70px + clamp(20px, 4vw, 40px)); }
}

/* ── Massive Brand Text (Matches Home Page) ── */
.gal-brand-text {
  font-family: var(--display-f);
  font-size: clamp(55px, 11.5vw, 160px);
  font-weight: 800;
  line-height: 0.95;
  color: #1a1a1a;
  letter-spacing: -3px;
  white-space: nowrap;
  padding: 16px 0 14px;
  margin: 0 auto clamp(24px, 4vw, 44px) auto; /* Increased bottom space as requested */
  user-select: none;
  
  /* Entrance animation */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--e-out), transform 0.8s var(--e-out);
}
.gal-brand-text span {
  color: var(--gold);
}

/* Tightly scoped for Gallery & Attractions page hero alignment */
.gal-gallery-page .gal-brand-text,
.gal-attractions-page .gal-brand-text {
  font-size: clamp(48px, 10.5vw, 144px);
  letter-spacing: -2.5px;
}
@media (max-width: 767px) {
  .gal-gallery-page .gal-brand-text,
  .gal-attractions-page .gal-brand-text {
    font-size: clamp(34px, 8.5vw, 54px);
    letter-spacing: -1.5px;
  }
}

/* Two-word titles that are wider than a small phone ("Our Conference",
   "Our Restaurant", "Premium Tariffs") would be clipped at the fixed 55px
   minimum. Opt-in per page; caps at the normal 55px, so it only shrinks
   on screens too narrow to fit the title. */
@media (max-width: 575px) {
  .gal-long-title .gal-brand-text {
    font-size: min(55px, 10.8vw);
    letter-spacing: -1.5px;
  }
}

/* 3D Stack Container */
.gal-stack {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: clamp(320px, 55vh, 600px);
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px; /* Crucial for 3D depth effect */
  
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--e-out) 0.3s, transform 1s var(--e-out) 0.3s;
}

/* Individual Card */
.gal-card {
  position: absolute;
  width: clamp(250px, 48vw, 780px);
  height: 100%;
  border-radius: var(--r-box);
  overflow: hidden;
  cursor: pointer;
  background: var(--sand);
  
  /* Initial state (overridden by classes below) */
  opacity: 0;
  transform: translateX(0) scale(0.6) translateZ(-200px);
  z-index: 1;
  
  /* Ultra-smooth, buttery 1.2s cinematic transition */
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease, box-shadow 1.2s ease;
  will-change: transform, opacity;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.gal-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* Prevent image drag */
  transition: transform 0.8s var(--e-smooth);
}
.gal-card.is-center:hover img {
  transform: scale(1.03);
}

/* 3D Positions (Activated when html.gal-on is present) */
html.gal-on .gal-card.is-center {
  z-index: 3;
  transform: translateX(0) scale(1) translateZ(0);
  opacity: 1;
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

html.gal-on .gal-card.is-left {
  z-index: 2;
  /* Push left, scale down, push back in Z space, and rotate slightly towards center */
  transform: translateX(-55%) scale(0.8) translateZ(-100px) rotateY(12deg);
  opacity: 0.5;
}
html.gal-on .gal-card.is-left:hover { opacity: 0.8; }

html.gal-on .gal-card.is-right {
  z-index: 2;
  /* Push right, scale down, push back in Z space, and rotate slightly towards center */
  transform: translateX(55%) scale(0.8) translateZ(-100px) rotateY(-12deg);
  opacity: 0.5;
}
html.gal-on .gal-card.is-right:hover { opacity: 0.8; }

html.gal-on .gal-card.is-hidden {
  z-index: 1;
  transform: translateX(0) scale(0.5) translateZ(-300px);
  opacity: 0;
  pointer-events: none;
}

/* Entrance Triggers */
html.gal-on .gal-brand-text,
html.gal-on .gal-stack {
  opacity: 1;
  transform: translateY(0);
}

/* Hotel highlights — mirrors the facts strip used below the About hero. */
.gal-hero-facts {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: left;
}
.gal-hero-facts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 24px 0;
  border-top: 1px solid var(--hair);
  color: var(--charcoal);
  font-size: .95rem;
  font-weight: 500;
}
.gal-hero-facts li + li {
  padding-left: 24px;
  border-left: 1px solid var(--hair);
}
.gal-hero-facts i {
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), .12);
  color: var(--gold);
  font-size: .95rem;
}

@media (max-width: 991px) {
  .gal-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-hero-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .gal-stack { height: 350px; perspective: 800px; }
  .gal-card { width: 70vw; }
  .gal-hero-facts li { gap: 12px; padding-right: 12px; font-size: .85rem; }
  .gal-hero-facts li + li { padding-left: 16px; }
  .gal-hero-facts li:nth-child(3) { padding-left: 0; }
  .gal-hero-facts i { flex-basis: 34px; width: 34px; height: 34px; font-size: .8rem; }
  
  /* Less aggressive 3D push on mobile so it fits */
  html.gal-on .gal-card.is-left {
    transform: translateX(-40%) scale(0.85) translateZ(-80px) rotateY(10deg);
  }
  html.gal-on .gal-card.is-right {
    transform: translateX(40%) scale(0.85) translateZ(-80px) rotateY(-10deg);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTION ROOM  — Sticky Sidebar & Masonry Grid
   ═══════════════════════════════════════════════════════════════════════════ */
.gal-collection {
  position: relative;
  isolation: isolate;
  padding: clamp(60px, 8vw, 120px) 0;
  background: var(--page);
}

.gal-collection-inner {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: clamp(280px, 25vw, 360px) 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

/* ── Sticky Sidebar ── */
.gal-collection-sidebar {
  position: sticky;
  top: 120px; /* Offset from header */
  height: max-content;
  max-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

.gal-eyebrow {
  display: block;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.gal-sidebar-title {
  font-family: var(--display-f);
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 200;
  line-height: 1.05;
  color: var(--charcoal);
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.gal-sidebar-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
}

.gal-sidebar-desc {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* ── Vertical Filter Dock ── */
.gal-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--hair);
  padding-top: 32px;
  margin-bottom: 40px;
}

.gal-filter-btn {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--body-f);
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s var(--e-smooth);
}

.gal-filter-btn:hover {
  background: rgba(var(--gold-rgb), 0.05);
  transform: translateX(6px);
  color: var(--gold);
}

.gal-filter-btn.is-active {
  background: var(--charcoal);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(var(--charcoal-rgb), 0.3);
}

.gal-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.15);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  transition: all 0.3s ease;
}
.gal-filter-btn.is-active .gal-filter-count {
  background: rgba(255,255,255, 0.2);
  color: #fff;
}

/* ── Sidebar Footer ── */
.gal-sidebar-footer {
  border-top: 1px solid var(--hair);
  padding-top: 32px;
}
.gal-total {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.gal-total strong {
  font-family: var(--display-f);
  font-size: 4rem;
  font-weight: 800;
  line-height: 0.8;
  color: var(--charcoal);
  letter-spacing: -0.05em;
}
.gal-total span {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Mobile Fallbacks ── */
@media (max-width: 991px) {
  .gal-collection-inner {
    /* minmax(0, ...) so the one-row filter scroller can't stretch the
       column (and the intro copy with it) past the screen edge. */
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .gal-collection-sidebar {
    min-width: 0;
    position: relative;
    top: 0;
    height: auto;
    max-height: none;
  }
  .gal-filters {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .gal-filter-btn {
    flex: 1 1 auto;
    justify-content: center;
    gap: 12px;
  }
  .gal-filter-btn:hover {
    transform: translateY(-2px);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY GRID (Idea 1: Cinematic Vertical Scroll)
   ═══════════════════════════════════════════════════════════════════════════ */
.gal-collection-grid-wrap {
  width: 100%;
}

.gal-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 80px); /* Massive, luxurious breathing room between photos */
  padding-bottom: 80px;
  counter-reset: gal-frame;
}

/* ── Card (Massive Cinematic Frame) ── */
.gal-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* True cinematic wide crop */
  border-radius: 4px; /* Sleek, sharp edge */
  overflow: hidden;
  cursor: pointer;
  background: var(--charcoal);
  box-shadow: 0 20px 50px -15px rgba(var(--charcoal-rgb), 0.2);
  
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--e-out), transform 0.8s var(--e-out), box-shadow 0.6s ease;
  will-change: transform, opacity;
  counter-increment: gal-frame;
  display: block;
}

.gal-item.is-visible { opacity: 1; transform: translateY(0); }

.gal-item:hover {
  z-index: 3;
  box-shadow: 0 40px 80px -15px rgba(var(--charcoal-rgb), 0.4);
}

/* Hide the counter circle completely to avoid confusion */
.gal-item::before { display: none; }

.gal-item-img {
  width: 100%; 
  height: 100%; 
  display: block;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.6s ease;
}
/* Subtle, extremely slow cinematic zoom */
.gal-item:hover .gal-item-img { 
  transform: scale(1.05); 
  filter: brightness(0.85);
}

/* ── Hover Overlay & Gold Dot ── */
.gal-item-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Very subtle bottom gradient just to ensure title readability */
  background: linear-gradient(
    to top,
    rgba(var(--charcoal-rgb), 0.6) 0%,
    transparent 20%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 40px);
  pointer-events: none; /* Let clicks pass through to the anchor */
}

/* Elegant Title at the bottom */
.gal-item-tag {
  align-self: flex-start;
  background: transparent;
  color: #fff;
  font-family: var(--display-f);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gal-item:hover .gal-item-tag { 
  transform: translateY(0); 
  opacity: 1;
}

/* ── The Clickable Area ── */
.gal-item-view {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  pointer-events: all;
}
.gal-item-view span,
.gal-item-view i {
  display: none !important;
}

/* Create the Custom Mouse Cursor Dot */
.gal-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: clamp(100px, 12vw, 140px);
  height: clamp(100px, 12vw, 140px);
  background-color: var(--gold, #cca360);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--body-f);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
  margin-top: calc(clamp(100px, 12vw, 140px) / -2);
  margin-left: calc(clamp(100px, 12vw, 140px) / -2);
}

.gal-cursor-dot.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Ensure hidden items are actually hidden */
.gal-item.is-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE POLISH
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .gal-item {
    aspect-ratio: 4 / 3; /* Taller on mobile since width is constrained */
  }
  .gal-collection-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .gal-collection-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0 0;
    border-top: 1px solid var(--hair);
    border-left: 0;
  }
  .gal-collection-summary > p { max-width: 28ch; margin-top: 0; }
  .gal-filter-dock { top: 76px; align-items: flex-start; }
  .gal-filter-label { padding-top: 15px; }
  .gal-filters { justify-content: flex-start; }
  .gal-item { grid-column: span 6; height: clamp(260px, 46vw, 410px); }
  .gal-item--feat { grid-column: span 12; }
}

@media (max-width: 575px) {
  .gal-item {
    aspect-ratio: 1 / 1; /* Square on very small phones to maximize height */
  }
  .gal-collection { padding-top: 68px; }
  .gal-collection-mark { top: 40px; font-size: 9rem; }
  .gal-collection-intro { padding-bottom: 40px; }
  .gal-collection-copy h2 { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .gal-collection-copy > p { margin-top: 20px; }
  .gal-collection-summary { align-items: flex-end; }
  .gal-collection-total { gap: 12px; }
  .gal-collection-total strong { font-size: 4.25rem; }
  .gal-collection-summary > p { max-width: 15ch; font-size: .76rem; }
  .gal-filter-dock {
    position: relative;
    top: auto;
    width: calc(100% - 32px);
    min-height: 0;
    margin-bottom: 28px;
    padding: 8px;
    border-radius: 18px;
  }
  .gal-filter-label { display: none; }
  .gal-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 0 0 3px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .gal-filters::-webkit-scrollbar { display: none; }
  .gal-filter-btn { white-space: nowrap; flex-shrink: 0; }
  .gal-grid { gap: 16px; }
  .gal-item,
  .gal-item--feat {
    grid-column: span 12;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .gal-item:hover { transform: translateY(-3px); }
}

@media (hover: none) {
  .gal-item-overlay { opacity: .58; }
  .gal-item-tag,
  .gal-item-view { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.gal-on .gal-collection-intro,
  .gal-item,
  .gal-item-img,
  .gal-item-overlay,
  .gal-item-tag,
  .gal-item-view,
  .gal-filter-btn {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  html.gal-on .gal-collection-intro,
  html.gal-on .gal-collection-intro.is-visible,
  .gal-item,
  .gal-item.is-visible {
    opacity: 1;
    transform: none;
  }
  .gal-item:hover .gal-item-img { transform: none; }
}
@keyframes bkFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes bkPanelRise {
  from { opacity: 0; transform: scale(0.94) translateY(30px); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0);   }
}
@keyframes bkSlideInRight {
  from { opacity: 0; transform: translateX(2%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bkSlideInLeft {
  from { opacity: 0; transform: translateX(-2%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Full-screen overlay shell ──────────────────────────────────── */
#bk-frame-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#bk-frame-overlay.bk-active,
#bk-frame-overlay.bk-closing { pointer-events: all; }

/* ── Rich cinematic backdrop — deep radial spotlight ───────────── */
#bk-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%,
      rgba(25, 25, 30, 0.85) 0%,
      rgba(3, 3, 5, 0.98)   100%);
  opacity: 0;
  transition: opacity 0.55s ease;
}
#bk-frame-overlay.bk-active  #bk-backdrop { opacity: 1; }
#bk-frame-overlay.bk-closing #bk-backdrop { opacity: 0; transition-duration: 0.4s; }

/* ── Outer frame — clean white panel ──────────────────────── */
#bk-frame-outer {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 3px;

  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.18),
    0 40px 80px -10px rgba(0, 0, 0, 0.5),
    0 80px 140px -20px rgba(0, 0, 0, 0.35);

  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s ease;
  transform: scale(0.94) translateY(28px);
  filter: blur(6px);
}
#bk-frame-overlay.bk-active #bk-frame-outer {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}
#bk-frame-overlay.bk-closing #bk-frame-outer {
  opacity: 0;
  transform: scale(0.97) translateY(16px);
  filter: blur(4px);
  transition-duration: 0.4s;
}

/* ── Thin top accent line ──────────────────────────────── */
#bk-frame-outer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 35%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0.22) 50%,
    rgba(0, 0, 0, 0.12) 70%,
    transparent
  );
}

/* ── Matte board — bright white ──────────────────────────── */
#bk-frame-matte {
  position: relative;
  background: #ffffff;
  padding: 14px 14px 0 14px;
}

/* ── The photo — portrait orientation ────────────────────────── */
#bk-frame-inner {
  position: relative;
  width: min(36vw, 420px);
  aspect-ratio: 3 / 4;         
  max-height: 72vh;            
  overflow: hidden;
}

#bk-frame-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Vignette burned onto photo edges */
#bk-frame-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
}

#bk-frame-img.bk-img-enter-right { animation: bkSlideInRight 0.45s cubic-bezier(0.22,1,0.36,1); }
#bk-frame-img.bk-img-enter-left  { animation: bkSlideInLeft  0.45s cubic-bezier(0.22,1,0.36,1); }

/* ── Caption strip ─────────────────────────────────────── */
#bk-frame-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 6px 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 12px;
  gap: 12px;
}

#bk-frame-caption::before {
  content: '—';
  color: rgba(0, 0, 0, 0.18);
  font-size: 0.75rem;
  flex-shrink: 0;
}

#bk-frame-title {
  color: rgba(20, 15, 10, 0.82);
  font-family: var(--display-f), 'Georgia', serif;
  font-size: 0.78rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 3px;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}

#bk-frame-counter {
  color: rgba(0, 0, 0, 0.25);
  font-family: var(--body-f), sans-serif;
  font-size: 0.68rem;
  letter-spacing: 3px;
  flex-shrink: 0;
}

/* ── Close button ─────────────────────────────────────────────── */
#bk-frame-close {
  position: fixed;
  top: 24px; right: 26px;
  z-index: 100001;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.3s ease;
}
#bk-frame-close:hover {
  background: rgba(195,158,80,0.1);
  border-color: rgba(195,158,80,0.4);
  transform: rotate(90deg);
}
#bk-frame-close svg {
  width: 14px; height: 14px;
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1.5; fill: none;
  stroke-linecap: round;
}

/* ── Prev / Next navigation ───────────────────────────────────── */
.bk-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  z-index: 100001;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 2.2rem; line-height: 1;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s ease;
}
.bk-nav:hover {
  background: rgba(195,158,80,0.08);
  border-color: rgba(195,158,80,0.4);
  color: rgba(195,158,80,1);
}
#bk-nav-prev { left: 20px; }
#bk-nav-next { right: 20px; }


/* ---- bakkhali: tablet ---- */
@media (max-width: 1279px) {
  .tl-view-copy > div { grid-column: 1 / 8; }
  .tl-view-card { width: clamp(96px, 13vw, 140px); }
  .tl-view-card:nth-child(2) { bottom: -24px; }
  .tl-view-card:nth-child(4) { bottom: -20px; }
}

/* ---- bakkhali: mobile -- postcards become a swipe strip, still tilted ---- */
@media (max-width: 767px) {
  .tl-view-pano { height: 46vh; }
  .tl-view-copy { margin-top: var(--s6); }
  .tl-view-copy > div { grid-column: 1 / -1; }
  .tl-view-postcards {
    position: static;
    display: flex;
    align-items: flex-start;
    gap: var(--s5);
    margin-top: var(--s7);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tl-view-postcards::-webkit-scrollbar { display: none; }
  .tl-view-card {
    position: static;
    flex: 0 0 auto;
    width: 34vw;
    transform: none !important;
  }
  .tl-view-card:nth-child(even) { margin-top: var(--s5); }
}