/**
 * Responsive module layout: Orientation, Track A–C, Track 3D (Privacy), 3E (SecOps), 4F–4H (Applied).
 * Load after style.css. Body: "module-track-page" plus one of
 * orientation-module-page | a–c | d | e | f | g | h | glossary-page.
 */

body.orientation-module-page,
body.a-module-page,
body.b-module-page,
body.c-module-page,
body.d-module-page,
body.e-module-page,
body.f-module-page,
body.g-module-page,
body.h-module-page,
body.glossary-page {
  max-width: 100%;
}

/* Hero: stack on small / tablet; two columns from lg */
body.orientation-module-page .hero-row,
body.a-module-page .hero-row,
body.b-module-page .hero-row,
body.c-module-page .hero-row,
body.d-module-page .hero-row,
body.e-module-page .hero-row,
body.f-module-page .hero-row,
body.g-module-page .hero-row,
body.h-module-page .hero-row,
body.glossary-page .hero-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  body.orientation-module-page .hero-row,
  body.a-module-page .hero-row,
  body.b-module-page .hero-row,
  body.c-module-page .hero-row,
  body.d-module-page .hero-row,
  body.e-module-page .hero-row,
  body.f-module-page .hero-row,
  body.g-module-page .hero-row,
  body.h-module-page .hero-row,
  body.glossary-page .hero-row {
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
  }
}

body.orientation-module-page .mod-hero,
body.a-module-page .mod-hero,
body.b-module-page .mod-hero,
body.c-module-page .mod-hero,
body.d-module-page .mod-hero,
body.e-module-page .mod-hero,
body.f-module-page .mod-hero,
body.g-module-page .mod-hero,
body.h-module-page .mod-hero,
body.glossary-page .mod-hero {
  padding-left: 0;
  padding-right: 0;
}
body.orientation-module-page .hero-wrap,
body.a-module-page .hero-wrap,
body.b-module-page .hero-wrap,
body.c-module-page .hero-wrap,
body.d-module-page .hero-wrap,
body.e-module-page .hero-wrap,
body.f-module-page .hero-wrap,
body.g-module-page .hero-wrap,
body.h-module-page .hero-wrap,
body.glossary-page .hero-wrap {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
@media (min-width: 640px) {
  body.orientation-module-page .hero-wrap,
  body.a-module-page .hero-wrap,
  body.b-module-page .hero-wrap,
  body.c-module-page .hero-wrap,
  body.d-module-page .hero-wrap,
  body.e-module-page .hero-wrap,
  body.f-module-page .hero-wrap,
  body.g-module-page .hero-wrap,
  body.h-module-page .hero-wrap,
  body.glossary-page .hero-wrap {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
@media (min-width: 1024px) {
  body.orientation-module-page .hero-wrap,
  body.a-module-page .hero-wrap,
  body.b-module-page .hero-wrap,
  body.c-module-page .hero-wrap,
  body.d-module-page .hero-wrap,
  body.e-module-page .hero-wrap,
  body.f-module-page .hero-wrap,
  body.g-module-page .hero-wrap,
  body.h-module-page .hero-wrap,
  body.glossary-page .hero-wrap {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Override global .page-body grid from style.css */
body.module-track-page.orientation-module-page .page-body,
body.module-track-page.a-module-page .page-body,
body.module-track-page.b-module-page .page-body,
body.module-track-page.c-module-page .page-body,
body.module-track-page.d-module-page .page-body,
body.module-track-page.e-module-page .page-body,
body.module-track-page.f-module-page .page-body,
body.module-track-page.g-module-page .page-body,
body.module-track-page.h-module-page .page-body,
body.module-track-page.glossary-page .page-body,
body.orientation-module-page .page-body,
body.a-module-page .page-body,
body.b-module-page .page-body,
body.c-module-page .page-body,
body.d-module-page .page-body,
body.e-module-page .page-body,
body.f-module-page .page-body,
body.g-module-page .page-body,
body.h-module-page .page-body,
body.glossary-page .page-body {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  grid-template-columns: unset !important;
  gap: 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
@media (min-width: 640px) {
  body.orientation-module-page .page-body,
  body.a-module-page .page-body,
  body.b-module-page .page-body,
  body.c-module-page .page-body,
  body.d-module-page .page-body,
  body.e-module-page .page-body,
  body.f-module-page .page-body,
  body.g-module-page .page-body,
  body.h-module-page .page-body,
  body.glossary-page .page-body {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 2rem !important;
  }
}
@media (min-width: 1024px) {
  body.orientation-module-page .page-body,
  body.a-module-page .page-body,
  body.b-module-page .page-body,
  body.c-module-page .page-body,
  body.d-module-page .page-body,
  body.e-module-page .page-body,
  body.f-module-page .page-body,
  body.g-module-page .page-body,
  body.h-module-page .page-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 3rem 2rem 5rem !important;
  }
  /* Glossary uses column layout (jump strip + .glossary-main-columns); same padding as other module pages */
  body.glossary-page .page-body.glossary-page-body {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 3rem 2rem 5rem !important;
  }
}

/* Glossary: A–Z strip spans full width above sidebar + article; sticky under top nav */
body.glossary-page .page-body.glossary-page-body {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

body.glossary-page .glossary-main-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 1023px) {
  body.glossary-page .glossary-main-columns {
    flex-direction: column;
    gap: 0;
  }
}

body.glossary-page .glossary-jump-strip {
  position: sticky;
  top: 60px;
  z-index: 35;
  width: 100%;
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 10px 0 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

body.glossary-page .glossary-jump-strip .alpha-bar {
  margin-bottom: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  min-width: 0;
  /* Keep label + A–Z on one line; scroll horizontally on small screens */
}

body.glossary-page .glossary-jump-strip .alpha-link {
  flex-shrink: 0;
}

/* Desktop: sidebar clears sticky A–Z strip + top nav */
@media (min-width: 1024px) {
  body.glossary-page .sidebar {
    top: 130px;
  }
}

/* Mobile: only the letter strip is sticky; keep “open full list” button in normal flow */
@media (max-width: 1023px) {
  body.glossary-page .orientation-mobile-toc {
    position: static;
    top: auto;
    z-index: auto;
    margin: 0 0 1rem;
    padding: 0;
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

body.orientation-module-page .content,
body.a-module-page .content,
body.b-module-page .content,
body.c-module-page .content,
body.d-module-page .content,
body.e-module-page .content,
body.f-module-page .content,
body.g-module-page .content,
body.h-module-page .content,
body.glossary-page .content {
  flex: 1 1 0%;
  min-width: 0;
  overflow-x: clip;
  position: relative;
  z-index: 0;
}

/* Desktop: sticky TOC — fixed column width, scroll inside panel */
@media (min-width: 1024px) {
  body.orientation-module-page .sidebar,
  body.a-module-page .sidebar,
  body.b-module-page .sidebar,
  body.c-module-page .sidebar,
  body.d-module-page .sidebar,
  body.e-module-page .sidebar,
  body.f-module-page .sidebar,
  body.g-module-page .sidebar,
  body.h-module-page .sidebar,
  body.glossary-page .sidebar {
    position: sticky;
    top: 80px;
    z-index: 20;
    flex: 0 0 240px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    min-height: 0;
    align-self: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0 14px 0px;
    -webkit-overflow-scrolling: touch;
  }
  body.orientation-module-page .orientation-sidebar-mobile-head,
  body.a-module-page .orientation-sidebar-mobile-head,
  body.b-module-page .orientation-sidebar-mobile-head,
  body.c-module-page .orientation-sidebar-mobile-head,
  body.d-module-page .orientation-sidebar-mobile-head,
  body.e-module-page .orientation-sidebar-mobile-head,
  body.f-module-page .orientation-sidebar-mobile-head,
  body.g-module-page .orientation-sidebar-mobile-head,
  body.h-module-page .orientation-sidebar-mobile-head,
  body.glossary-page .orientation-sidebar-mobile-head {
    display: none !important;
  }
  body.orientation-module-page .orientation-mobile-toc,
  body.a-module-page .orientation-mobile-toc,
  body.b-module-page .orientation-mobile-toc,
  body.c-module-page .orientation-mobile-toc,
  body.d-module-page .orientation-mobile-toc,
  body.e-module-page .orientation-mobile-toc,
  body.f-module-page .orientation-mobile-toc,
  body.g-module-page .orientation-mobile-toc,
  body.h-module-page .orientation-mobile-toc,
  body.glossary-page .orientation-mobile-toc {
    display: none !important;
  }
}

/* Mobile / tablet: slide-in sidebar */
@media (max-width: 1023px) {
  body.orientation-module-page .sidebar,
  body.a-module-page .sidebar,
  body.b-module-page .sidebar,
  body.c-module-page .sidebar,
  body.d-module-page .sidebar,
  body.e-module-page .sidebar,
  body.f-module-page .sidebar,
  body.g-module-page .sidebar,
  body.h-module-page .sidebar,
  body.glossary-page .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(18rem, calc(100vw - 0.75rem));
    max-width: 20rem;
    z-index: 230;
    padding: 12px 12px 24px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
    background: var(--white);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.12);
    overflow-y: auto;
    height: 100vh;
    height: 100dvh;
  }
  body.orientation-module-page .sidebar.sidebar-open,
  body.a-module-page .sidebar.sidebar-open,
  body.b-module-page .sidebar.sidebar-open,
  body.c-module-page .sidebar.sidebar-open,
  body.d-module-page .sidebar.sidebar-open,
  body.e-module-page .sidebar.sidebar-open,
  body.f-module-page .sidebar.sidebar-open,
  body.g-module-page .sidebar.sidebar-open,
  body.h-module-page .sidebar.sidebar-open,
  body.glossary-page .sidebar.sidebar-open {
    transform: translateX(0);
  }
}

body.orientation-module-page .orientation-mobile-toc,
body.a-module-page .orientation-mobile-toc,
body.b-module-page .orientation-mobile-toc,
body.c-module-page .orientation-mobile-toc,
body.d-module-page .orientation-mobile-toc,
body.e-module-page .orientation-mobile-toc,
body.f-module-page .orientation-mobile-toc,
body.g-module-page .orientation-mobile-toc,
body.h-module-page .orientation-mobile-toc,
body.glossary-page .orientation-mobile-toc {
  position: sticky;
  top: 60px;
  z-index: 90;
  margin: 0 0 16px;
  padding: 8px 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/*
 * style.css @media (max-width: 900px) sets body.module-track-page .page-body to a 1-column grid
 * and body.module-track-page .sidebar { position: static }. Keep flex + off-canvas TOC for module pages.
 */
@media (max-width: 900px) {
  body.module-track-page.orientation-module-page .page-body,
  body.module-track-page.a-module-page .page-body,
  body.module-track-page.b-module-page .page-body,
  body.module-track-page.c-module-page .page-body,
  body.module-track-page.d-module-page .page-body,
  body.module-track-page.e-module-page .page-body,
  body.module-track-page.f-module-page .page-body,
  body.module-track-page.g-module-page .page-body,
  body.module-track-page.h-module-page .page-body,
  body.module-track-page.glossary-page .page-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
  }
  body.module-track-page.orientation-module-page .sidebar,
  body.module-track-page.a-module-page .sidebar,
  body.module-track-page.b-module-page .sidebar,
  body.module-track-page.c-module-page .sidebar,
  body.module-track-page.d-module-page .sidebar,
  body.module-track-page.e-module-page .sidebar,
  body.module-track-page.f-module-page .sidebar,
  body.module-track-page.g-module-page .sidebar,
  body.module-track-page.h-module-page .sidebar,
  body.module-track-page.glossary-page .sidebar {
    position: fixed !important;
  }
}

@media print {
  #orientationNavBackdrop,
  #orientationNavPanel,
  #orientationSidebarBackdrop,
  .orientation-mobile-toc,
  .orientation-sidebar-mobile-head,
  .glossary-jump-strip {
    display: none !important;
  }
}

/* Wide tables: scroll horizontally inside the content column on narrow viewports */
body.module-track-page .table-overflow-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}