/* Standardized Layout Styles */

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4, 1rem);
    padding-right: var(--spacing-4, 1rem);
}

.container-sm {
    max-width: 640px;
}

.container-md {
    max-width: 768px;
}

.container-lg {
    max-width: 1024px;
}

.container-xl {
    max-width: 1280px;
}

.container-fluid {
    max-width: none;
}

/* Section */
.section {
    padding-top: var(--spacing-8, 2rem);
    padding-bottom: var(--spacing-8, 2rem);
}

.section-sm {
    padding-top: var(--spacing-4, 1rem);
    padding-bottom: var(--spacing-4, 1rem);
}

.section-lg {
    padding-top: var(--spacing-16, 4rem);
    padding-bottom: var(--spacing-16, 4rem);
}

.section-xl {
    padding-top: var(--spacing-24, 6rem);
    padding-bottom: var(--spacing-24, 6rem);
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-6, 1.5rem);
}

.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));
}

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

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

.grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Gap Utilities */
.gap-1 {
    gap: var(--spacing-1, 0.25rem);
}

.gap-2 {
    gap: var(--spacing-2, 0.5rem);
}

.gap-3 {
    gap: var(--spacing-3, 0.75rem);
}

.gap-4 {
    gap: var(--spacing-4, 1rem);
}

.gap-5 {
    gap: var(--spacing-5, 1.25rem);
}

.gap-6 {
    gap: var(--spacing-6, 1.5rem);
}

.gap-8 {
    gap: var(--spacing-8, 2rem);
}

.gap-10 {
    gap: var(--spacing-10, 2.5rem);
}

.gap-12 {
    gap: var(--spacing-12, 3rem);
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

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

.flex-row {
    flex-direction: row;
}

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

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

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.flex-1 {
    flex: 1;
}

.flex-auto {
    flex: auto;
}

.flex-initial {
    flex: initial;
}

.flex-none {
    flex: none;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

/* Margin Utilities */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: var(--spacing-1, 0.25rem);
}

.m-2 {
    margin: var(--spacing-2, 0.5rem);
}

.m-3 {
    margin: var(--spacing-3, 0.75rem);
}

.m-4 {
    margin: var(--spacing-4, 1rem);
}

.m-5 {
    margin: var(--spacing-5, 1.25rem);
}

.m-6 {
    margin: var(--spacing-6, 1.5rem);
}

.m-8 {
    margin: var(--spacing-8, 2rem);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--spacing-1, 0.25rem);
}

.mt-2 {
    margin-top: var(--spacing-2, 0.5rem);
}

.mt-3 {
    margin-top: var(--spacing-3, 0.75rem);
}

.mt-4 {
    margin-top: var(--spacing-4, 1rem);
}

.mt-6 {
    margin-top: var(--spacing-6, 1.5rem);
}

.mt-8 {
    margin-top: var(--spacing-8, 2rem);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--spacing-1, 0.25rem);
}

.mb-2 {
    margin-bottom: var(--spacing-2, 0.5rem);
}

.mb-3 {
    margin-bottom: var(--spacing-3, 0.75rem);
}

.mb-4 {
    margin-bottom: var(--spacing-4, 1rem);
}

.mb-6 {
    margin-bottom: var(--spacing-6, 1.5rem);
}

.mb-8 {
    margin-bottom: var(--spacing-8, 2rem);
}

/* Padding Utilities */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: var(--spacing-1, 0.25rem);
}

.p-2 {
    padding: var(--spacing-2, 0.5rem);
}

.p-3 {
    padding: var(--spacing-3, 0.75rem);
}

.p-4 {
    padding: var(--spacing-4, 1rem);
}

.p-5 {
    padding: var(--spacing-5, 1.25rem);
}

.p-6 {
    padding: var(--spacing-6, 1.5rem);
}

.p-8 {
    padding: var(--spacing-8, 2rem);
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-1 {
    padding-left: var(--spacing-1, 0.25rem);
    padding-right: var(--spacing-1, 0.25rem);
}

.px-2 {
    padding-left: var(--spacing-2, 0.5rem);
    padding-right: var(--spacing-2, 0.5rem);
}

.px-3 {
    padding-left: var(--spacing-3, 0.75rem);
    padding-right: var(--spacing-3, 0.75rem);
}

.px-4 {
    padding-left: var(--spacing-4, 1rem);
    padding-right: var(--spacing-4, 1rem);
}

.px-6 {
    padding-left: var(--spacing-6, 1.5rem);
    padding-right: var(--spacing-6, 1.5rem);
}

.px-8 {
    padding-left: var(--spacing-8, 2rem);
    padding-right: var(--spacing-8, 2rem);
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1 {
    padding-top: var(--spacing-1, 0.25rem);
    padding-bottom: var(--spacing-1, 0.25rem);
}

.py-2 {
    padding-top: var(--spacing-2, 0.5rem);
    padding-bottom: var(--spacing-2, 0.5rem);
}

.py-3 {
    padding-top: var(--spacing-3, 0.75rem);
    padding-bottom: var(--spacing-3, 0.75rem);
}

.py-4 {
    padding-top: var(--spacing-4, 1rem);
    padding-bottom: var(--spacing-4, 1rem);
}

.py-6 {
    padding-top: var(--spacing-6, 1.5rem);
    padding-bottom: var(--spacing-6, 1.5rem);
}

.py-8 {
    padding-top: var(--spacing-8, 2rem);
    padding-bottom: var(--spacing-8, 2rem);
}

/* Width and Height Utilities */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.w-screen {
    width: 100vw;
}

.h-full {
    height: 100%;
}

.h-auto {
    height: auto;
}

.h-screen {
    height: 100vh;
}

.min-h-screen {
    min-height: 100vh;
}

/* Position Utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.static {
    position: static;
}

.top-0 {
    top: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Z-index Utilities */
.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-auto {
    z-index: auto;
}

/* Display Utilities */
.block {
    display: block;
}

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

.inline {
    display: inline;
}

.hidden {
    display: none;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* Overflow Utilities */
.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

/* Responsive Layout */
@media (max-width: 1280px) {
    .container {
        max-width: 1024px;
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: 768px;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .grid-cols-5, .grid-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 640px;
    }
    
    .grid-cols-3, .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid-cols-5, .grid-cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .section {
        padding-top: var(--spacing-6, 1.5rem);
        padding-bottom: var(--spacing-6, 1.5rem);
    }
    
    .section-lg {
        padding-top: var(--spacing-8, 2rem);
        padding-bottom: var(--spacing-8, 2rem);
    }
    
    .section-xl {
        padding-top: var(--spacing-12, 3rem);
        padding-bottom: var(--spacing-12, 3rem);
    }
    
    .md\:flex-col {
        flex-direction: column;
    }
    
    .md\:items-start {
        align-items: flex-start;
    }
    
    .md\:w-full {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .container {
        max-width: 100%;
    }
    
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .grid-cols-5, .grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .section {
        padding-top: var(--spacing-4, 1rem);
        padding-bottom: var(--spacing-4, 1rem);
    }
    
    .section-lg {
        padding-top: var(--spacing-6, 1.5rem);
        padding-bottom: var(--spacing-6, 1.5rem);
    }
    
    .section-xl {
        padding-top: var(--spacing-8, 2rem);
        padding-bottom: var(--spacing-8, 2rem);
    }
    
    .sm\:flex-col {
        flex-direction: column;
    }
    
    .sm\:items-center {
        align-items: center;
    }
    
    .sm\:w-full {
        width: 100%;
    }
}