<template>
  <div class="app-layout grid grid-cols-1 min-h-dvh">
    <LayoutTheHeader />
    <div class="reading-layout pb-[var(--player-height)]">
      <aside class="chapter-sidebar hidden lg:block">
        <BookChapterNav />
      </aside>
      <main class="reading-main">
        <slot />
      </main>
    </div>
    <LayoutTheFooter />
  </div>
</template>

<style scoped>
.app-layout {
  grid-template-rows: auto 1fr auto;
}

.reading-layout {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .reading-layout {
    grid-template-columns: var(--sidebar-width) 1fr;
  }
}

.chapter-sidebar {
  position: sticky;
  top: var(--header-height);
  height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  border-right: 1px solid hsl(0 0% 100% / 0.08);
  padding: 1.5rem;
}

.reading-main {
  padding: 2rem 1.5rem;
  max-width: 65ch;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .reading-main {
    padding: 3rem 2rem;
  }
}
</style>
