/* =============================================================================
   INSIGHT EDITORIAL DARK — Layout System
   Ohio School Insight
   =============================================================================
   Grid system, page scaffolding, sidebar layout, section spacing, and
   responsive breakpoints. Import after tokens.css and base.css.

   Breakpoints:
     sm:  640px  — small tablets / large phones (landscape)
     md:  768px  — tablets
     lg:  1024px — small laptops, sidebar threshold
     xl:  1280px — desktop (container max)
     2xl: 1536px — wide desktop
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Container
   Centered content wrapper with consistent horizontal padding.
   ----------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);  /* 80rem / 1280px */
  margin-inline: auto;
  padding-inline: var(--space-8);   /* 2rem / 32px horizontal padding */
}

/* Narrow container for article / editorial content */
.container-narrow {
  width: 100%;
  max-width: 52rem;   /* 832px — comfortable reading measure */
  margin-inline: auto;
  padding-inline: var(--space-8);
}

/* Wide container — full bleed minus safe margin */
.container-wide {
  width: 100%;
  max-width: 96rem;   /* 1536px */
  margin-inline: auto;
  padding-inline: var(--space-8);
}

@media (max-width: 640px) {
  .container,
  .container-narrow,
  .container-wide {
    padding-inline: var(--space-4);  /* Tighter padding on mobile */
  }
}


/* -----------------------------------------------------------------------------
   12-Column Grid
   Standard CSS grid used for flexible column layouts.
   ----------------------------------------------------------------------------- */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
}

/* Responsive collapse — stacks to single column on mobile */
@media (max-width: 768px) {
  .grid-12 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Span utilities — use on children of .grid-12 */
.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

@media (max-width: 768px) {
  /* All spans collapse to full width on mobile */
  [class^="col-span-"],
  [class*=" col-span-"] {
    grid-column: span 12;
  }
}


/* -----------------------------------------------------------------------------
   Two-Column Grid shortcuts
   ----------------------------------------------------------------------------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}


/* -----------------------------------------------------------------------------
   Sidebar Layout
   Primary application shell: fixed sidebar + scrolling main content.
   The sidebar disappears below the lg breakpoint (1024px) where the
   mobile bottom navigation takes over.
   ----------------------------------------------------------------------------- */

.layout-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Sidebar panel */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;

  background-color: var(--surface-container-low);
  padding: var(--space-6);

  /* Thin scrollbar consistent with global theme */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--surface-container-highest);

  /* Prevent sidebar from shrinking on small grid contexts */
  flex-shrink: 0;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: var(--surface-container-highest);
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: var(--radius-full);
}

/* Main content area */
.main-content {
  overflow-y: auto;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--background);
}

/* Sidebar hidden below lg breakpoint */
@media (max-width: 1023px) {
  .layout-sidebar {
    /* Collapse to single-column — sidebar moves off-canvas */
    grid-template-columns: 1fr;
    grid-template-areas: 'main';
  }

  .sidebar {
    display: none;
  }

  .main-content {
    grid-area: main;
    /* Reserve space for mobile bottom nav */
    padding-bottom: var(--mobile-nav-h);
  }
}


/* -----------------------------------------------------------------------------
   Top Navigation Bar
   Fixed header, glassmorphism treatment.
   ----------------------------------------------------------------------------- */

.top-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  /* Tonal bottom separator — no hard border */
  box-shadow: 0 1px 0 rgba(69, 70, 77, 0.3);
}

/* Bottom mobile navigation */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-h);
  z-index: var(--z-sticky);

  display: none;  /* Shown only on mobile via media query */
  align-items: center;
  justify-content: space-around;

  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 -1px 0 rgba(69, 70, 77, 0.3);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 1023px) {
  .mobile-nav {
    display: flex;
  }
}


/* -----------------------------------------------------------------------------
   Sections
   Sections are differentiated by tonal background shifts — no border dividers.
   ----------------------------------------------------------------------------- */

section {
  padding: var(--space-20) var(--space-8);  /* 5rem / 2rem */
}

/* Alternate section — tonal shift from --background to container-low */
.section-alt {
  background-color: var(--surface-container-low);
}

/* Deep section — for hero or full-bleed feature panels */
.section-deep {
  background-color: var(--surface-container-lowest);
}

/* Contained section — bg surface for card-like inset feel */
.section-surface {
  background-color: var(--surface);
}

/* Section header pattern: overline + heading + lead */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header .overline {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--primary);
  margin-bottom: var(--space-3);
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header .lead {
  max-width: 48rem;
}

@media (max-width: 768px) {
  section {
    padding: var(--space-12) var(--space-4);
  }

  .section-header {
    margin-bottom: var(--space-8);
  }
}


/* -----------------------------------------------------------------------------
   Hero Layout
   ----------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--surface-container-lowest);
  padding: var(--space-20) var(--space-8);
}

/* Radial glow orb — decorative background accent */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(
    circle at center,
    rgba(60, 221, 199, 0.08) 0%,
    rgba(60, 221, 199, 0.03) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: var(--z-below);
}

.hero-content {
  position: relative;
  z-index: var(--z-base);
  max-width: 56rem;
}


/* -----------------------------------------------------------------------------
   Dashboard Layout
   Stat row + chart grid common pattern.
   ----------------------------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (max-width: 1024px) {
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

/* Chart grid — two wide charts or one full-width */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

@media (max-width: 1024px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

/* Full-bleed chart row */
.chart-full {
  margin-bottom: var(--space-6);
}


/* -----------------------------------------------------------------------------
   Filter Bar
   Horizontal filter row above data tables and search results.
   ----------------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
  .filter-bar {
    gap: var(--space-2);
  }
}


/* -----------------------------------------------------------------------------
   Page Header
   Used on inner pages (district detail, comparisons, etc.)
   ----------------------------------------------------------------------------- */

.page-header {
  background-color: var(--surface-container-low);
  padding: var(--space-8) var(--space-8) var(--space-6);
  margin-bottom: 0;
}

.page-header .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: 600;
}

.page-header .breadcrumb a {
  color: var(--on-surface-variant);
  transition: color var(--duration-fast) var(--ease-editorial);
}

.page-header .breadcrumb a:hover {
  color: var(--primary);
}

.page-header .breadcrumb-separator {
  color: var(--outline);
  font-size: 0.6rem;
}


/* -----------------------------------------------------------------------------
   Content Divider (Tonal — no border)
   Adds a 1-unit tonal gap between content blocks without visible lines.
   ----------------------------------------------------------------------------- */

.tonal-divider {
  height: var(--space-1);
  background: linear-gradient(
    90deg,
    transparent,
    var(--outline-variant),
    transparent
  );
  opacity: 0.3;
  margin: var(--space-8) 0;
}


/* -----------------------------------------------------------------------------
   Flex Utilities (layout helpers)
   ----------------------------------------------------------------------------- */

.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.gap-1          { gap: var(--space-1); }
.gap-2          { gap: var(--space-2); }
.gap-3          { gap: var(--space-3); }
.gap-4          { gap: var(--space-4); }
.gap-6          { gap: var(--space-6); }
.gap-8          { gap: var(--space-8); }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1 1 0%; }
.shrink-0       { flex-shrink: 0; }


/* -----------------------------------------------------------------------------
   Spacing Utilities (margin/padding)
   ----------------------------------------------------------------------------- */

.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }
.px-4  { padding-inline: var(--space-4); }
.px-6  { padding-inline: var(--space-6); }
.py-4  { padding-block: var(--space-4); }
.py-6  { padding-block: var(--space-6); }