/* Sideways Layout - frontend.css
   Full-viewport horizontal layout with fixed header, narrow footer, optional left sidebar.
*/

:root{
  --sw-header-height: 72px;
  --sw-footer-height: 48px;
  --sw-sidebar-width: 72px;
  --sw-accent: linear-gradient(90deg,#7c3aed,#06b6d4);
  --sw-bg: #0f1724;
  --sw-card: #07122a;
  --sw-text: #e6eef6;
  --sw-muted: #9aa4b2;
}

/* Reset context for the block wrapper */
.sideways-layout,
.sideways-layout * { box-sizing: border-box; }

/* Main wrapper (info: the block's outer container can be placed in page and will take viewport) */
.sideways-layout {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--sw-text);
  background: linear-gradient(180deg, #071025 0%, #0f1724 100%);
}

/* Transparent fixed header */
.sideways-layout .sw-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sw-header-height);
  display: flex;
  align-items: center;
  pointer-events: auto;
  z-index: 60;
  background: linear-gradient(180deg, rgba(6,8,15,0.25), rgba(6,8,15,0.05));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* header content */
.sideways-layout .sw-header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
}

/* logo */
.sideways-layout .sw-logo {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  font-size:1.05rem;
}
.sideways-layout .sw-logo::before{
  content: "";
  width:34px;height:34px;border-radius:8px;
  background: var(--sw-accent);
  display:inline-block;
  box-shadow: 0 6px 18px rgba(3,6,23,0.6);
}

/* Floating top navigation (floating/buttons) */
.sideways-layout .sw-floating-nav{
  display:flex;
  gap:.5rem;
  align-items:center;
}
.sideways-layout .sw-floating-nav .sw-nav-btn{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--sw-text);
  padding:.5rem .8rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  transition: transform .18s ease, background .18s ease;
}
.sideways-layout .sw-floating-nav .sw-nav-btn:hover{ transform: translateY(-3px); background: rgba(255,255,255,0.04); }

/* optional left icon sidebar */
.sideways-layout.has-sidebar .sw-sidebar {
  position: fixed;
  left: 12px;
  top: calc(var(--sw-header-height) + 12px);
  bottom: calc(var(--sw-footer-height) + 12px);
  width: var(--sw-sidebar-width);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap:.6rem;
}
.sideways-layout .sw-sidebar .sw-side-btn {
  width:56px;height:56px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.02);
  color:var(--sw-text);
  border:1px solid rgba(255,255,255,0.03);
  cursor:pointer;
  transition: transform .22s ease, box-shadow .18s ease;
}
.sideways-layout .sw-sidebar .sw-side-btn:hover{ transform: translateY(-6px); box-shadow: 0 8px 22px rgba(2,6,23,0.6); }
.sideways-layout .sw-sidebar .sw-side-btn.active{ background: var(--sw-accent); color: white; transform: translateY(-4px); }

/* stage: hosts horizontally scrolled panels */
.sideways-layout .sw-stage {
  position: absolute;
  left: 0;
  top: var(--sw-header-height);
  right: 0;
  bottom: var(--sw-footer-height);
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.06) transparent;
}

/* hide default scrollbar on webkit but keep ability to scroll */
.sideways-layout .sw-stage::-webkit-scrollbar { height: 10px; }
.sideways-layout .sw-stage::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 999px; }

/* panels wrapper is a flex row */
.sideways-layout .sw-panels {
  display:flex;
  height:100%;
  align-items:stretch;
  gap: 0;
}

/* each panel = full viewport width */
.sideways-layout .sw-panel {
  flex: 0 0 100vw;
  height: 100%;
  scroll-snap-align: start;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 48px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-left: 1px solid rgba(255,255,255,0.02);
  transition: transform 420ms cubic-bezier(.2,.9,.22,1), box-shadow .35s ease;
}

/* visually highlight the active panel slightly (JS will toggle .active-panel) */
.sideways-layout .sw-panel.active-panel {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 60px rgba(2,6,23,0.6);
}

/* narrow fixed footer */
.sideways-layout .sw-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sw-footer-height);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 60;
  background: linear-gradient(0deg, rgba(6,8,15,0.4), rgba(6,8,15,0.12));
  border-top: 1px solid rgba(255,255,255,0.03);
  font-size: .95rem;
  color: var(--sw-muted);
}

/* responsive: hide left sidebar on small screens and show bottom dots nav */
@media (max-width: 900px) {
  .sideways-layout.has-sidebar .sw-sidebar { display:none; }
  /* add small bottom dot nav inside footer */
  .sideways-layout .sw-footer .sw-footer-nav { display:flex; gap:.6rem; align-items:center; }
  .sideways-layout .sw-footer .sw-dot { width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,0.06); }
  .sideways-layout .sw-footer .sw-dot.active { background: #fff; box-shadow: 0 6px 18px rgba(3,6,23,0.6); transform: scale(1.2); }
}

/* accessible focus states */
.sideways-layout .sw-floating-nav .sw-nav-btn:focus,
.sideways-layout .sw-side-btn:focus,
.sideways-layout .sw-panel *:focus { outline: 3px solid rgba(124,58,237,0.18); outline-offset:3px; }

/* small helper utilities */
.sw-panel .panel-inner { max-width: 980px; width:100%; color:var(--sw-text); text-align:center; }
.sw-panel h2 { margin:0 0 .6rem; font-size: clamp(20px, 3.6vw, 36px); }
.sw-panel p { color: var(--sw-muted); margin:0; font-size:1rem; line-height:1.6; max-width: 60ch; margin-top:.6rem; }

/* enable pointer cursor for clickable navigation */
.sw-nav-btn, .sw-side-btn, .sw-footer .sw-dot { cursor: pointer; }