/* Layout Utilities for Ultra Creation Production Website */

/* ============================================
   Container Fix - Match header/footer width
   ============================================ */

.container {
    max-width: 80rem !important; /* 1280px - same as max-w-7xl */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* ============================================
   Grid System
   ============================================ */

/* Base Grid */
/* Note: gap is controlled by Tailwind classes (gap-0, gap-4, etc.) */

/* Fixed Column Grids */
.grid-1 {
    grid-template-columns: 1fr;
}

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

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

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

/* Auto-fit Grid (Responsive by default) */
.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Balanced Grid - Handles unbalanced item counts gracefully */
.grid-balanced {
    display: grid;
    gap: var(--space-8, 2rem);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    justify-items: center;
}

/* Center last row if incomplete (for 3-column grids with 4 items) */
.grid-balanced-3 {
    display: grid;
    gap: var(--space-8, 2rem);
    grid-template-columns: repeat(3, 1fr);
}

/* When there's 1 item in the last row of a 3-column grid, center it */
.grid-balanced-3 > *:nth-last-child(1):nth-child(3n + 1) {
    grid-column: 2 / 3;
}

/* When there are 2 items in the last row of a 3-column grid, center them */
.grid-balanced-3 > *:nth-last-child(2):nth-child(3n + 2),
.grid-balanced-3 > *:nth-last-child(1):nth-child(3n + 2) {
    grid-column: span 1;
}

.grid-balanced-3 > *:nth-last-child(2):nth-child(3n + 2) {
    grid-column-start: 1;
}

/* Alternative: Use 2x2 layout for 4 items */
.grid-adaptive {
    display: grid;
    gap: var(--space-8, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Responsive Grid Adjustments */
@media (max-width: 767px) {
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-balanced-3 {
        grid-template-columns: 1fr;
    }
    
    /* Reset centering on mobile */
    .grid-balanced-3 > * {
        grid-column: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-balanced-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Reset centering on tablet */
    .grid-balanced-3 > * {
        grid-column: auto !important;
    }
}

/* ============================================
   Flexbox Utilities
   ============================================ */

.flex {
    display: flex;
    gap: var(--space-4, 1rem);
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

/* ============================================
   Stack (Vertical Spacing)
   ============================================ */

.stack > * + * {
    margin-top: var(--space-4, 1rem);
}

.stack-sm > * + * {
    margin-top: var(--space-2, 0.5rem);
}

.stack-lg > * + * {
    margin-top: var(--space-6, 1.5rem);
}

/* ============================================
   Section Spacing
   ============================================ */

.section {
    padding: var(--space-16, 5rem) 0;
}

.section-sm {
    padding: var(--space-8, 2.5rem) 0;
}

.section-lg {
    padding: var(--space-16, 8rem) 0;
}

@media (min-width: 768px) {
    .section {
        padding: var(--space-16, 6rem) 0;
    }
    
    .section-lg {
        padding: var(--space-16, 10rem) 0;
    }
}

/* ============================================
   Gap Utilities
   ============================================ */

.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1, 0.25rem); }
.gap-2 { gap: var(--space-2, 0.5rem); }
.gap-3 { gap: var(--space-3, 0.75rem); }
.gap-4 { gap: var(--space-4, 1rem); }
.gap-6 { gap: var(--space-6, 1.5rem); }
.gap-8 { gap: var(--space-8, 2rem); }

/* ============================================
   Grid Item Spanning
   ============================================ */

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-full {
    grid-column: 1 / -1;
}