/*
 * Layout
 * Container, grid, sections, and structural components
 */

@layer modules {
  /* Container */
  .container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--main-padding);
  }

  :where(body.full main) .container {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--block-space);
  }

  .container--md {
    max-width: var(--content-width-md);
  }

  .container--prose {
    max-width: var(--content-width-prose);
  }

  .container--sm {
    max-width: var(--content-width-sm);
  }

  .container--xs {
    max-width: var(--content-width-xs);
  }

  .container--xxs {
    max-width: var(--content-width-xxs);
  }

  /* Section spacing */
  .section {
    padding-block: calc(var(--block-space) * 4);
  }

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

  .section--lg {
    padding-block: calc(var(--block-space) * 5);
  }

  .section--xl {
    padding-block: calc(var(--block-space) * 6);
  }


  .section--2xl {
    padding-block: calc(var(--block-space) * 8);
  }

  /* Grids */
  .grid {
    display: grid;
    gap: var(--block-space-double);
  }

  .grid--cols-2 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid--cols-3 {
    grid-template-columns: repeat(1, 1fr);
  }

  .grid--cols-4 {
    grid-template-columns: repeat(1, 1fr);
  }

  @media (min-width: 640px) {
    .grid--cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols-3 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid--cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1280px) {
    .grid--cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .grid--cols-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Horizontal scroll on mobile, regular grid on desktop */
  .grid--scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    & > * {
      flex: 0 0 75%;
      scroll-snap-align: start;
    }
  }

  @media (min-width: 640px) {
    .grid--scroll {
      display: grid;
      overflow-x: visible;
      scroll-snap-type: none;

      & > * {
        flex: none;
      }
    }
  }

  /* Grid gap variants */
  .grid--gap-sm {
    gap: var(--block-space);
  }

  .grid--gap-lg {
    gap: calc(var(--block-space) * 3);
  }

  /* Stack (vertical spacing) */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .stack--sm {
    gap: var(--block-space-half);
  }

  .stack--lg {
    gap: var(--block-space-double);
  }

  .stack--xl {
    gap: calc(var(--block-space) * 3);
  }

  /* Cluster (horizontal group) */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
    align-items: center;
  }

  .cluster--sm {
    gap: var(--block-space-half);
  }

  .cluster--lg {
    gap: var(--block-space-double);
  }

  .cluster--nowrap {
    flex-wrap: nowrap;
  }

  /* Sidebar layout */
  .with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-double);
  }

  .with-sidebar > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 60%;
  }

  .with-sidebar > :last-child {
    flex-basis: var(--sidebar-width);
    flex-grow: 1;
  }

  /* Split layout (two equal columns on desktop) */
  .split {
    display: grid;
    gap: var(--block-space-double);
  }

  @media (min-width: 1280px) {
    .split {
      grid-template-columns: 1fr 1fr;
      gap: calc(var(--block-space) * 3);
      align-items: start;
    }
  }

  /* Center content */
  .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Sticky positioning */
  .sticky-top {
    position: sticky;
    top: var(--block-space-double);
  }

  /* Aspect ratio containers */
  .aspect-square {
    aspect-ratio: 1 / 1;
  }

  /* Full layout (sidebar + main content) */
  body.full {
    display: grid;
    grid-template-columns: 16rem 1fr;
    min-block-size: 100dvh;
    transition: grid-template-columns 250ms var(--ease-out-expo);

    @media (max-width: 639px) {
      grid-template-columns: 1fr;
      transition: none;
    }
  }

  body.full > main {
    min-width: 0;
  }

  body.full:has(.admin-sidebar__toggle:checked) {
    @media (min-width: 640px) {
      grid-template-columns: 0fr 1fr;
    }
  }

  /* Admin-density overrides */
  body.full .grid {
    gap: var(--block-space);
  }

  /* Admin page header — consistent header for list pages */
  .admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block-end: var(--block-space);

    @media (max-width: 639px) {
      flex-direction: column;
      gap: var(--block-space-quarter);
    }
  }
}