/* =========================================================
   Variables
========================================================= */
:root{
  --bg:#ffffff;
  --muted:#f5f6f7;
  --ink:#1e1f24;
  --link:#0b6bff;
  --ring:rgba(0,0,0,.08);
  --card:#ffffff;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
  --gutter:clamp(16px,3vw,32px);
  --maxw:1600px;
  --accent:#ff6817;

  /* Bubble sizing (map overlay) */
  --bubbleW: 28vw;
  --bubbleH: 26vh;

  --grad-aqua-outer:   linear-gradient(92.83deg, #70f1ff 0%, #32bccb 100%);
  --grad-aqua-inner:   linear-gradient(#70f1ff 0%, #32bccb 100%);
  --grad-orange-outer: linear-gradient(92.83deg, #ff975b 0%, #ff6817 100%);
  --grad-orange-inner: linear-gradient(#ff975b 0%, #ff6817 100%);
}

/* =========================================================
   Base
========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.45;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); clip-path: inset(50%);
  white-space:nowrap; border:0;
}

/* =========================================================
   Header
========================================================= */
#header-bar{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid var(--ring);
}
.header-wrap{ max-width:var(--maxw); margin:0 auto; padding:.6rem var(--gutter); }
.header-inner{ display:flex; align-items:center; justify-content:center; gap:12px; }
.brand{ display:flex; align-items:center; }
#textlogo{ height:34px; width:auto; border-radius:6px; }
#testimonial-bar{
  font-size:14px; color:#444; text-align:center;
  padding:.35rem 0 .55rem 0; min-height:50px; font-style:italic;
}

/* =========================================================
   Hero
========================================================= */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--ring);
  background:#0b0e13; color:#fff;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
}
.hero-inner{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(28px,5vw,44px) var(--gutter);
}
.vis-eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-weight:700; opacity:.9; }
.vis-lead{ font-size:clamp(.95rem,1.4vw,1.1rem); max-width:72ch; color:#eef2f6; }
.vis-dests{ margin-top:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.vis-logo{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:8px 12px; cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.vis-logo:hover{ transform: translateY(-1px); background:rgba(255,255,255,.14); }
.vis-logo[aria-pressed="true"]{ outline:3px solid var(--accent); }
.vis-logo img{ width:60px; height:60px; border-radius:50%; object-fit:cover; }

/* =========================================================
   Buttons band
========================================================= */
.vis-band{ background:var(--muted); border-top:1px solid var(--ring); border-bottom:1px solid var(--ring); }
.vis-band-inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(16px,3vw,22px) var(--gutter); }
.vis-buttons{ display:none; gap:8px; flex-wrap:wrap; }
.vis-buttons.show{ display:flex; }

.vis-btn{
  position:relative; display:inline-block;
  padding:12px 15px; color:#fff; background:transparent; border:0;
  border-radius:80px; font:600 14px/1 Inter,system-ui,sans-serif;
  cursor:pointer; user-select:none; z-index:0; isolation:isolate;
}
.vis-btn::before,.vis-btn::after{
  content:""; position:absolute; inset:0; border-radius:80px; transition:all .12s ease;
}
.vis-btn::before{ z-index:-2; background-image: var(--grad-aqua-outer); }
.vis-btn::after { z-index:-1; inset:4px; background-image: var(--grad-aqua-inner); }
.vis-btn:hover:not(:disabled)::before{ background-image: var(--grad-orange-outer); }
.vis-btn:hover:not(:disabled)::after { background-image: var(--grad-orange-inner); }
.vis-btn:active:not(:disabled)::before{
  background-image: linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)), var(--grad-orange-outer);
}
.vis-btn:active:not(:disabled)::after{ background-image: var(--grad-orange-inner); inset:4px; }
.vis-btn[aria-pressed="true"]::before,
.vis-btn.active::before{ background-image: var(--grad-orange-outer); }
.vis-btn[aria-pressed="true"]::after,
.vis-btn.active::after { background-image: var(--grad-orange-inner); }
.vis-btn:disabled{ opacity:.35; cursor:default; }

/* =========================================================
   Main layout band + Grid
========================================================= */
.vis-main{ background:#fff; }
.vis-main-inner{ max-width:var(--maxw); margin:0 auto; padding:10px; overflow:visible; }

.vis-grid{
  display:grid; gap:8px; grid-template-columns:1fr;
  align-content:start; overflow:visible;
}
@media (min-width:900px){
  .vis-grid{ grid-template-columns: 15% 70% 15%; }
}

/* Panels */
.vis-panel{
  background:#fff; border:1px solid var(--ring); border-radius:12px;
  padding:12px; box-shadow:var(--shadow);
  overflow:visible; /* allow inner content to grow (story, etc.) */
  min-height:320px;
}

/* Side panels scroll neatly */
#vis-left, #vis-right{ overflow:auto; }

/* Titles & small text */
.vis-title-sm{ font-weight:800; margin-bottom:6px; }
.vis-subtle{ font-size:.9rem; color:#6b7280; }

/* Smooth layout transitions */
.vis-grid, .vis-panel, #vis-map, #vis-html{
  transition: transform .18s ease, height .18s ease, border-radius .18s ease;
}

/* =========================================================
   Center column: Map, HTML reader, Story
========================================================= */
#vis-center{
  display:flex; flex-direction:column; overflow:visible;
}
#vis-map{
  flex:0 0 auto;
  width:100%;
  height:min(72vh, 720px); /* desktop baseline; mobile handled below */
  border-radius:10px;
}
#vis-html{
  display:none; /* shown when single-panel reading view is active */
  width:100%; border-radius:10px;
}
#vis-story{
  flex:0 0 auto;
  padding:12px 16px; max-width:100%; overflow:visible;
}

/* Single-panel reading view (app_html) */
.vis-grid.single{ grid-template-columns: 1fr; }
.vis-grid.single #vis-center{ grid-column: 1 / -1; }
.vis-grid.single .vis-panel,
.vis-grid.single #vis-html{
  max-height:none !important;
  height:auto !important;
}
.vis-grid.single #vis-left, 
.vis-grid.single #vis-right{ display:none !important; }
.vis-grid.single #vis-story{ display:none; } /* hide story in single-panel mode */

/* Mobile map minimums */
@media (max-width: 899px){
  #vis-center { min-height:60vh; }
  #vis-map    { min-height:60vh; }
}

@media (min-width: 900px){
  /* Fix Filters (left) and Index (right) to the map’s height */
  #vis-left,
  #vis-right{
    height: calc(var(--map-h) + 25px);
    overflow: auto;
    align-self: start;      /* don't stretch when center gets taller */
  }

  /* Center can grow as needed with story content */
  #vis-center{
    align-self: stretch;    /* default; keeps full column width */
  }
}

/* =========================================================
   Mobile slide-in panels (Filters / Index)
   (activated when JS adds .mobile-slide to .vis-grid)
========================================================= */
@media (max-width: 900px){
  .vis-grid{ position:relative; }

  .vis-grid.mobile-slide{
    --side-w: 40vw;
    --map-h: 60vh;
    --tab-top: calc(var(--map-h) * 0.66);
  }

  /* Map full-bleed on mobile */
  .vis-main-inner{ padding-left:0; padding-right:0; }
  #vis-center.vis-panel{ padding:0; border:0; border-radius:0; }
  #vis-map{ width:100vw; max-width:100vw; border-radius:0; height:var(--map-h, 60vh); }

  /* Trays sized/positioned like the map */
  #vis-left, #vis-right{
    position: absolute;
    top: var(--map-top, calc(50% - (var(--map-h, 60vh) / 2))); /* ← anchor to map top */
    width: var(--side-w, 40vw);
    height: var(--map-h, 60vh);
    overflow:auto; background:#fff; border-radius:14px;
    box-shadow:0 12px 32px rgba(0,0,0,0.18);
    z-index:20; transition:transform 220ms ease;
    display:none;
  }
  #vis-left { left:0;  transform:translateX(calc(-1 * (var(--side-w, 40vw) + 12px))); }
  #vis-right{ right:0; transform:translateX(calc(var(--side-w, 40vw) + 12px)); }
  .vis-grid.open-left  #vis-left { transform:translateX(0); display:block; }
  .vis-grid.open-right #vis-right{ transform:translateX(0); display:block; }

  /* Vertical “tabs” */
  .mob-tab{
    position:absolute; z-index:25; display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:90px; background:rgba(255,255,255,0.96);
    border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,0.18);
    cursor:pointer; user-select:none;
    font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    letter-spacing:.06em; text-transform:uppercase;
  }
  .mob-tab span{ transform:rotate(-90deg); }
  .mob-tab.left  { left:0;  top: calc((var(--tab-top, calc(var(--map-h, 60vh) * 0.66))) - 240px); }
  .mob-tab.right { right:0; top: calc((var(--tab-top, calc(var(--map-h, 60vh) * 0.66))) - 240px); }
  .vis-grid.open-left  .mob-tab.left  { left: calc(var(--side-w, 40vw) + 2px); }
  .vis-grid.open-right .mob-tab.right { right: calc(var(--side-w, 40vw) + 2px); }

  /* Avoid 1px horizontal scrollbars on some phones */
  body{ overflow-x:hidden; }
}

/* =========================================================
   Filters / Sidebar
========================================================= */
/* One checkbox per line in Filters */
.vis-checkbox{
  display: flex;        /* keeps checkbox + icon + text on one line */
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: .95rem;
  width: 100%;          /* makes the label take the full row */
}
.vis-checkbox .legend-icon{
  width:13px; height:13px; object-fit:contain; display:inline-block;
}

.sb-header{ color:#111; font-weight:700; margin:6px 0 6px; }
.sb-empty{ color:#6b7280; font-style:italic; }
.sb-item{
  display:block; color:var(--link); padding:2px 0; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-item:hover{ text-decoration:underline; }
.sb-item.active{ font-weight:800; }

/* Select control */
.vis-select{
  width:100%; padding:.5rem .6rem;
  border:1px solid var(--ring); border-radius:10px; background:#fff;
  font:inherit;
}

/* =========================================================
   Map Overlay Bubble (InfoOverlay)
========================================================= */
.map-bubble{
  position:absolute; transform:translate(-50%, -100%);
  z-index:2; pointer-events:auto;
}
.map-bubble .card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--ring);
  border-radius:8px; box-shadow:var(--shadow); overflow:hidden;
  width:  clamp(300px, var(--bubbleW), 600px);
  height: clamp(300px, var(--bubbleH), 600px);
}
.map-bubble .card > header{
  position:relative; flex:0 0 auto; padding:.2rem .2rem; border-bottom:none;
}
.map-bubble .card .title{ display:none; }
.map-bubble .card .close{
  position:absolute; top:6px; right:15px;
  width:24px; height:24px; border-radius:8px;
  border:1px solid var(--ring); background:#fff; color:#333;
  font-size:18px; line-height:24px; cursor:pointer;
}
.map-bubble .card .close:hover{ background:#f7f7f7; }
.map-bubble .card .body{
  flex:1 1 auto; min-height:0; overflow:auto; padding:0 10px 10px;
}
.map-bubble .pointer{
  width:16px; height:16px; position:absolute; left:50%; bottom:-8px;
  transform:translateX(-50%) rotate(45deg); background:var(--card); z-index:-100;
}

/* Tabs inside bubble */
.tabbar-folder{ padding:0 10px; margin:0; }
.tabbar-folder ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:3px; align-items:flex-end;
}
.tabbar-folder li{
  position:relative; background:#eef1f5; border:1px solid var(--ring);
  border-bottom:none; padding:8px 12px;
  border-top-left-radius:10px; border-top-right-radius:10px;
  color:#3a3d46; cursor:pointer; user-select:none; transform:translateY(1px);
}
.tabbar-folder li:not(.active){ opacity:.75; }
.tabbar-folder li:hover{ background:#e9edf3; }
.tabbar-folder li.active{
  background:#fff; color:#111; z-index:2; box-shadow:0 -1px 0 #fff inset;
}
.tabbar-folder a{ color:inherit; text-decoration:none; display:block; font-weight:600; font-size:13px; }
.tabpanes{ border-top:1px solid var(--ring); margin-top:-1px; padding:10px 0 4px 0; }
.tabpanel{ display:none; max-height:none; overflow:visible; padding:4px 2px 8px 2px; }
.tabpanel.active{ display:block; }

/* Bubble content primitives */
.row{ padding:6px 2px; }
.row.center{ text-align:center; }
.row.right{ text-align:right; }
.kv{
  display:grid; gap:6px 10px; grid-template-columns:30% 70%;
  align-items:start; padding:6px 2px;
}
.kv .k{ font-weight:700; text-align:right; color:#2f3137; }
.kv .v{ color:#111; word-break:break-word; }

/* Media inside bubble */
.tabpanel img{
  max-width:100%; height:auto; border-radius:10px; border:1px solid var(--ring);
}
.tabpanel iframe{
  width:100%; max-width:480px; height:260px; border:0;
  border-radius:10px; box-shadow:var(--shadow);
  display:block; margin:6px auto;
}

/* =========================================================
   Footer
========================================================= */
footer{
  border-top:1px solid var(--ring); padding:28px 0 36px;
  color:#555; background:#fff; margin-top:28px;
}
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; gap:10px;
}
@media (min-width:860px){ .footer-inner{ grid-template-columns:1fr auto; } }
.foot-nav{ display:flex; gap:14px; flex-wrap:wrap; }
.small{ font-size:12px; color:#777; }