/* Layout Styles - Grid, Flex, Container */
@layer objects {
  .container {
    inline-size: 100%;
    max-inline-size: var(--sccx-container-xl);
    margin-inline: auto;
    padding-inline: var(--sccx-space-m);
  }

  .container-sm {
    max-inline-size: var(--sccx-container-sm);
  }
  .container-md {
    max-inline-size: var(--sccx-container-md);
  }
  .container-lg {
    max-inline-size: var(--sccx-container-lg);
  }
  .container-2xl {
    max-inline-size: var(--sccx-container-2xl);
  }

  .flex {
    display: flex;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
  }

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

  .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-around {
    justify-content: space-around;
  }

  .gap-xs {
    gap: var(--sccx-space-xs);
  }
  .gap-s {
    gap: var(--sccx-space-s);
  }
  .gap-m {
    gap: var(--sccx-space-m);
  }
  .gap-l {
    gap: var(--sccx-space-l);
  }
  .gap-xl {
    gap: var(--sccx-space-xl);
  }

  .grid {
    display: grid;
  }

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

  @media (min-width: 768px) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: start;
  }
  .text-right {
    text-align: end;
  }

  .block {
    display: block;
  }
  .inline-block {
    display: inline-block;
  }
  .hidden {
    display: none;
  }

  .relative {
    position: relative;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .sticky {
    position: sticky;
  }

  .w-full {
    inline-size: 100%;
  }
  .h-full {
    block-size: 100%;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-xs {
    margin-block-start: var(--sccx-space-xs);
  }
  .mt-s {
    margin-block-start: var(--sccx-space-s);
  }
  .mt-m {
    margin-block-start: var(--sccx-space-m);
  }
  .mt-l {
    margin-block-start: var(--sccx-space-l);
  }
  .mt-xl {
    margin-block-start: var(--sccx-space-xl);
  }

  .mb-xs {
    margin-block-end: var(--sccx-space-xs);
  }
  .mb-s {
    margin-block-end: var(--sccx-space-s);
  }
  .mb-m {
    margin-block-end: var(--sccx-space-m);
  }
  .mb-l {
    margin-block-end: var(--sccx-space-l);
  }
  .mb-xl {
    margin-block-end: var(--sccx-space-xl);
  }

  .p-xs {
    padding: var(--sccx-space-xs);
  }
  .p-s {
    padding: var(--sccx-space-s);
  }
  .p-m {
    padding: var(--sccx-space-m);
  }
  .p-l {
    padding: var(--sccx-space-l);
  }
  .p-xl {
    padding: var(--sccx-space-xl);
  }
}