/* =========================================
   SHARED PUBLIC LAYOUT CONTAINER
   Used by: public header inner, catalog page,
   footer inner, and all standard public pages.
   Homepage hero may remain full-width.
   ========================================= */
html {
  scroll-padding-top: 90px;
}

:target,
[id],
main[tabindex="-1"],
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 90px;
}

.pub-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 1024px) {
  .pub-container {
    padding-inline: 20px;
  }
}

@media (max-width: 768px) {
  .pub-container {
    padding-inline: 16px;
  }
}

@media (max-width: 430px) {
  .pub-container {
    padding-inline: 12px;
  }
}

.public-page-main {
  padding-top: 32px;
  padding-bottom: 36px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .public-page-main {
    padding-bottom: 28px !important;
  }
}

.public-footer {
  margin-top: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  box-sizing: border-box;
}

.public-footer__inner {
  gap: 4px !important;
}

@media (max-width: 768px) {
  .public-footer {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .public-footer__inner {
    gap: 6px !important;
  }
}

/* Application Layout */
.app-container {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--right-panel-width);
  grid-template-rows: var(--header-height) 1fr auto; /* auto is for mini-player */
  grid-template-areas:
    "sidebar header right-panel"
    "sidebar main right-panel"
    "mini-player mini-player mini-player";
  min-height: 100vh;
}

/* Sidebar */
.app-sidebar {
  grid-area: sidebar;
  background-color: var(--color-surface-1);
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: var(--mini-player-height); /* Leave space for player */
  width: var(--sidebar-width);
  z-index: 40;
  overflow-y: auto;
}

/* Header */
.app-header {
  grid-area: header;
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-xl);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Main Content */
.app-main {
  grid-area: main;
  padding: var(--space-xl);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Right Panel */
.app-right-panel {
  grid-area: right-panel;
  background-color: var(--color-surface-1);
  border-left: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: var(--mini-player-height);
  width: var(--right-panel-width);
  z-index: 40;
  overflow-y: auto;
}

/* Mini Player */
.app-mini-player {
  grid-area: mini-player;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mini-player-height);
  background-color: var(--color-surface-1);
  border-top: 1px solid var(--color-border-subtle);
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 0 var(--space-xl);
}

/* Mobile Bottom Nav (Hidden on Desktop) */
.app-bottom-nav {
  display: none;
}

/* =========================================
   CATALOG LAYOUT
   ========================================= */
.catalog-container {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
}

.catalog-sidebar {
  width: 280px;
  flex-shrink: 0;
  /* No sticky, no max-height, no overflow-y — page is the only scroll container */
}

.catalog-content {
  flex: 1;
  min-width: 0;
}

/* =========================================
   RESPONSIVE LAYOUT (MOBILE FIRST LOGIC APPLIED TO BREAKPOINTS)
   ========================================= */

/* Tablet & Smaller Desktop: Hide Right Panel */
@media (max-width: 1279px) {
  .app-container {
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar main"
      "mini-player mini-player";
  }
  
  .app-right-panel {
    display: none !important;
  }
}



/* =========================================
   SPRINT 9 RESPONSIVE HARDENING
   ========================================= */
.app-container,
.app-main,
.catalog-container,
.catalog-content {
  min-width: 0;
  max-width: 100%;
}

.catalog-container {
  width: 100%;
}

/* Grid columns defined in catalog.css — no override here */

@media (max-width: 1023px) {
  .app-container {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(64px + var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .app-sidebar,
  .app-right-panel {
    display: none !important;
  }

  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: 0 var(--space-md);
    background-color: var(--color-surface-1);
    border-bottom: 1px solid var(--color-border-subtle);
    z-index: 50;
  }

  .app-main {
    margin-top: 60px;
    padding: var(--space-md);
    width: 100%;
    box-sizing: border-box;
  }

  .app-mini-player {
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    height: 64px;
    padding: 0 var(--space-md);
  }

  .app-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background-color: var(--color-surface-1);
    border-top: 1px solid var(--color-border-subtle);
    z-index: 60;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .catalog-container {
    flex-direction: column;
    gap: var(--space-md);
  }

  .catalog-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    max-height: 100vh;
    background-color: var(--color-surface-1);
    z-index: 100;
    padding: max(var(--space-lg), env(safe-area-inset-top, 0px)) max(var(--space-lg), env(safe-area-inset-right, 0px)) max(var(--space-lg), env(safe-area-inset-bottom, 0px)) max(var(--space-lg), env(safe-area-inset-left, 0px));
    overflow-y: auto;
  }

  .catalog-sidebar.active {
    display: block;
  }
}

@media (max-width: 430px) {
  .app-main {
    padding: var(--space-sm);
  }

  .app-header,
  .app-mini-player {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}
@media (max-width: 430px) {
  .page-membership {
    padding: var(--space-xl) 16px !important;
  }
}