/* ============================================================
   Layout
   Grid wrappers, spacing helpers, and structural primitives.
   All values reference tokens from tokens.css.
   ============================================================ */

/* --- Container --------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container[data-size="narrow"] {
  max-width: var(--max-width-content);
}

/* --- Section ----------------------------------------------- */

.section {
  padding-block: var(--space-32);
}

.section[data-spacing="sm"] {
  padding-block: var(--space-16);
}

.section[data-spacing="lg"] {
  padding-block: var(--space-40);
}

/* --- Grid -------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-8);
}

.grid[data-cols="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.grid[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.grid[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}

.grid[data-cols="12"] {
  grid-template-columns: repeat(12, 1fr);
}

/* --- Flex -------------------------------------------------- */

.flex {
  display: flex;
}

.flex[data-align="center"] {
  align-items: center;
}

.flex[data-justify="between"] {
  justify-content: space-between;
}

.flex[data-justify="center"] {
  justify-content: center;
}

.flex[data-direction="column"] {
  flex-direction: column;
}

.flex[data-gap="sm"] {
  gap: var(--space-4);
}

.flex[data-gap="md"] {
  gap: var(--space-8);
}

.flex[data-gap="lg"] {
  gap: var(--space-12);
}

/* --- Page With Sidebar ------------------------------------- */

.page-with-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

.page-content {
  padding: var(--space-8);
}

/* --- Main Content ------------------------------------------ */

.main-content {
  padding-top: var(--header-height);
}

/* --- Content Grid ------------------------------------------ */

.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
}

/* --- Asymmetric Grid --------------------------------------- */

.asymmetric-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-12);
}

/* --- Bento Grid -------------------------------------------- */

.bento-grid {
  display: grid;
  gap: 1px;
  background-color: var(--color-surface-variant);
}

.bento-grid > * {
  background-color: var(--color-surface);
}

/* ============================================================
   Responsive — Desktop-first (max-width breakpoints)
   ============================================================ */

/* --- Tablet / Small Desktop (<= 1023px) -------------------- */

@media (max-width: 1023px) {
  :root {
    --container-padding: 2rem;
  }

  .page-with-sidebar {
    grid-template-columns: 1fr;
  }

  .grid[data-cols="3"],
  .grid[data-cols="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Mobile (<= 767px) ------------------------------------- */

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

  .grid[data-cols="2"],
  .grid[data-cols="3"],
  .grid[data-cols="4"],
  .grid[data-cols="12"] {
    grid-template-columns: 1fr;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}