/* Layout toggle — switches carousel templates between horizontal slide and vertical stack.
   Default = horizontal carousel (template's existing CSS). body.stack flips to vertical. */

.layout-toggle{
  position:fixed;top:18px;right:138px;z-index:31;
  width:38px;height:38px;border-radius:999px;
  background:rgba(20,20,24,.78);color:#f5f5f0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono','Menlo',ui-monospace,monospace;font-size:14px;
  transition:transform .15s ease, background .15s ease;
  padding:0;
}
.layout-toggle:hover{transform:scale(1.08)}
.layout-toggle .lt-icon{display:inline-block;line-height:1;transition:transform .25s ease}
body.stack .layout-toggle .lt-icon{transform:rotate(90deg)}

/* tiny tooltip on hover */
.layout-toggle::after{
  content:attr(data-tip);
  position:absolute;top:46px;right:0;
  background:rgba(20,20,24,.92);color:#f5f5f0;
  padding:5px 10px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  border:1px solid rgba(255,255,255,.14);
}
.layout-toggle:hover::after{opacity:1}

@media (max-width:520px){
  .layout-toggle{width:32px;height:32px;right:118px;font-size:12px}
  .layout-toggle::after{display:none}
}

/* =====  STACK MODE  =====
   When body has .stack class, override the horizontal carousel layout to vertical scroll. */
html.stack,
body.stack{
  height:auto !important;
  overflow:auto !important;
}
body.stack .carousel,
body.stack #carousel{
  display:block !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  scroll-snap-type:y mandatory !important;
}
body.stack .slide{
  flex:none !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:100vh !important;
  scroll-snap-align:start !important;
  scroll-snap-stop:normal !important;
  overflow:visible !important;
}

/* Hide horizontal-only chrome in stack mode */
body.stack .nav-arrow{display:none !important}
body.stack .swipe-hint{display:none !important}

/* Re-purpose dots into a vertical sidebar in stack mode */
body.stack .nav-dots{
  position:fixed !important;
  right:22px !important;top:50% !important;
  left:auto !important;bottom:auto !important;
  transform:translateY(-50%) !important;
  flex-direction:column !important;
  padding:14px 9px !important;
}
body.stack .nav-dots button{
  width:8px !important;height:8px !important;border-radius:50% !important;
}
body.stack .nav-dots button.active{
  width:8px !important;height:28px !important;border-radius:999px !important;
}

@media (max-width:520px){
  body.stack .nav-dots{
    right:14px !important;
  }
}