/* =========================================================
public_html/zomniverse/Styles/modes/learn-layout.css
   Job: layout & structure only
   Applies ONLY to learn.php
========================================================= */

/* =========================================================
   LEARN MODE — EXECUTION ENTRY NEUTRALIZATION
========================================================= */

#workspace-canvas[data-mode="learn"] {
  padding-top: 0;
}

header.execution-entry {
  margin: 0;
  padding: 0;
}

#workspace-canvas {
    /* margin: 0; */
    padding: 0;
}

/* -----------------------------------------
   Canvas layout (ANCHOR)
----------------------------------------- */

.learn-canvas {
  position: relative;
  display: grid;

  /* Header row + content row */
  grid-template-rows: auto 1fr;

  /* Sidebar | Content | Section Nav */
  grid-template-columns: 260px 1fr 220px;

  min-height: 100svh;
  overflow: hidden;
}

/* -----------------------------------------
   Learn Header (layout only)
----------------------------------------- */

.learn-header {
  grid-column: 1 / -1;
  grid-row: 1;

  position: relative;
  top: var(--nav-height);
  z-index: 20;

  padding: 20px 32px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.learn-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.learn-header p {
  margin: 0;
  font-size: 14px;
}

/* -----------------------------------------
   Sidebar
----------------------------------------- */

.learn-sidebar {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    /* padding: 18px 14px; */
    border-right: 1px solid transparent;
}

/* -----------------------------------------
   Learn list
----------------------------------------- */

.learn-list {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.learn-pill {
    padding: 0px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

/* -----------------------------------------
   Workspace
----------------------------------------- */

.learn-workspace {
    /* margin-top: var(--nav-height); */
    grid-column: 2;
    grid-row: 2;
    overflow: auto;
}

/* =========================================================
   (OPTIONAL) COLLAPSE SUPPORT — FUTURE
   Keep structure but DO NOT wire yet
========================================================= */

.learn-collapse-toggle {
  position: absolute;
  top: 50%;
  left: calc(260px - 16px);
  transform: translateY(-50%);
  width: 24px;
}

/* =========================================================
   RESPONSIVE — MOBILE (STRUCTURE)
========================================================= */

@media (max-width: 900px) {

  .learn-canvas {
    grid-template-columns: 220px 1fr;
    height: calc(100svh - var(--nav-height));
  }

  .learn-header {
    padding: 16px;
  }

  .learn-sidebar {
    padding: 12px 10px;
  }

  .learn-pill {
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .learn-workspace {
/*     padding: 16px; */
    overflow: auto;
    overscroll-behavior: auto;
  }
}

/* =========================================================
   TRANSITIONS (SAFE, NON-BEHAVIORAL)
========================================================= */

.learn-canvas {
  transition: grid-template-columns 320ms cubic-bezier(.22,.61,.36,1);
}

.learn-pill {
  transform: translateZ(0);
}
.learn-canvas {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100svh;
  overflow: hidden;
}

/* Sidebar */
.learn-sidebar {
    position: relative;
    /* margin-top: var(--nav-height); */
    padding: 0px 14px;
}

/* Workspace */
.learn-workspace {
    /* padding: 20px; */
    /* padding-top: cal(var(--nav-height) + 20px); */
    /* height: calc(100svh); */
    overflow: auto;
}

/* Collapse mechanics */
.learn-collapse-toggle {
  position: absolute;
  top: 50%;
  left: calc(260px - 16px);
  transform: translateY(-50%);
  width: 24px;
  height: 48px;
  cursor: pointer;
  z-index: 40;
}

/* Collapsed state */
.learn-canvas.is-collapsed {
  grid-template-columns: 32px 1fr;
}

.learn-canvas.is-collapsed .learn-list {
  display: none;
}

.learn-canvas.is-collapsed .learn-collapse-toggle {
  left: 0;
}

.learn-canvas.is-collapsed .chevron {
  transform: rotate(180deg);
}
/* =========================================================
   LEARN — COLLAPSED STATE (CHEVRON ROTATION)
========================================================= */

.learn-canvas.is-collapsed .chevron {
  transform: rotate(180deg);
}
.learn-collapse-toggle:hover .chevron {
  transform: rotate(90deg);
}



@media (max-width: 900px) {

  .learn-canvas {
    grid-template-columns: 220px 1fr;
  }

}
/*
This keeps things clean and avoids cognitive overload on small screens.
*/
@media (max-width: 1100px) {
  .learn-canvas {
    grid-template-columns: 260px 1fr;
  }

}
.learn-canvas {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.learn-sidebar,
.learn-workspace,
.learn-section-nav {
  min-height: 0;
}
/*BEST RULE THAT FIXED THE VIEWPORT LOCK ISSUE */
body.app-mode[data-mode="learn"] #workspace-canvas {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
/* =========================================================
   LEARN — VIEWPORT LOCK FINAL OVERRIDE
   Desktop + Mobile
   Keep this at the very end of learn-layout.css
========================================================= */

body.app-mode[data-mode="learn"] {
  overflow: hidden;
}

body.app-mode[data-mode="learn"] #workspace-canvas {
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
}

body.app-mode[data-mode="learn"] .learn-canvas {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

body.app-mode[data-mode="learn"] .learn-sidebar,
body.app-mode[data-mode="learn"] .learn-workspace,
body.app-mode[data-mode="learn"] .learn-section-nav {
  min-height: 0;
  max-height: 100%;
}

body.app-mode[data-mode="learn"] .learn-sidebar,
body.app-mode[data-mode="learn"] .learn-workspace {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

body.app-mode[data-mode="learn"] .learn-section-nav {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* =========================================================
   MOBILE — KEEP LEFT NAV ALIVE
========================================================= */

@media (max-width: 1100px) {
  body.app-mode[data-mode="learn"] .learn-canvas {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;

    /* grid-template-columns: 260px minmax(0, 1fr); */
  }

  body.app-mode[data-mode="learn"] .learn-sidebar {
    display: block;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body.app-mode[data-mode="learn"] .learn-canvas:not(.is-collapsed) .learn-list {
    display: flex;
  }

  body.app-mode[data-mode="learn"] .learn-canvas.is-collapsed .learn-list {
    display: none;
  }

  body.app-mode[data-mode="learn"] .learn-workspace {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
}

@media (max-width: 900px) {
  body.app-mode[data-mode="learn"] .learn-canvas:not(.is-collapsed) {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body.app-mode[data-mode="learn"] .learn-canvas.is-collapsed {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  body.app-mode[data-mode="learn"] .learn-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    left: calc(220px - 16px);
    z-index: 80;
  }

  body.app-mode[data-mode="learn"] .learn-canvas.is-collapsed .learn-collapse-toggle {
    left: 0;
  }
}