<template>
  <div class="min-h-screen bg-stone-800 flex relative">
    <!-- Background image at top - full page width -->
    <div
      class="absolute inset-x-0 pointer-events-none z-0"
      style="
        background-image: url(&quot;/background-dither.png&quot;);
        background-size: 100% auto;
        background-position: top center;
        background-repeat: no-repeat;
        mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 1) 0%,
          rgba(0, 0, 0, 0) 100%
        );
      "
    />

    <!-- Main Content Column - Left -->
    <div class="flex-1 overflow-y-auto relative z-[5]">
      <div class="p-8 md:p-12 lg:p-16 max-w-4xl relative">
        <slot />
      </div>
      <AppFooter />
    </div>

    <!-- Navigation Column - Right -->
    <AppNavigation class="relative z-20" />
  </div>
</template>
