/* omega-grid.css
 * Responsive grid, layout, section, gallery, and masonry system for Omega AI Web Builder
 */

/* ========== CONTAINER SYSTEM ========== */

.omega-container {
    width: 100%;
    max-width: var(--omega-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--omega-space-4);
    padding-right: var(--omega-space-4);
}

/* ========== GRID SYSTEM ========== */

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

.omega-grid-1 { grid-template-columns: repeat(1, 1fr); }
.omega-grid-2 { grid-template-columns: repeat(2, 1fr); }
.omega-grid-3 { grid-template-columns: repeat(3, 1fr); }
.omega-grid-4 { grid-template-columns: repeat(4, 1fr); }
.omega-grid-5 { grid-template-columns: repeat(5, 1fr); }
.omega-grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Auto-fit responsive grid */
.omega-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--omega-space-6);
}

/* Gap utilities */
.omega-gap-2 { gap: var(--omega-space-2); }
.omega-gap-4 { gap: var(--omega-space-4); }
.omega-gap-6 { gap: var(--omega-space-6); }
.omega-gap-8 { gap: var(--omega-space-8); }
.omega-gap-10 { gap: var(--omega-space-10); }

/* ========== FLEX GRID (ROW WRAP) ========== */

.omega-flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--omega-space-6);
}

.omega-flex-grid > * {
    flex: 1 1 calc(33.333% - var(--omega-space-6));
}

@media (max-width: 960px) {
    .omega-flex-grid > * {
        flex: 1 1 calc(50% - var(--omega-space-6));
    }
}

@media (max-width: 640px) {
    .omega-flex-grid > * {
        flex: 1 1 100%;
    }
}

/* ========== SECTION GRID (used by components) ========== */

.omega-grid-list {
    display: grid;
    gap: var(--omega-space-6);
}

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

@media (max-width: 960px) {
    .omega-grid-list--cols-3,
    .omega-grid-list--cols-4,
    .omega-grid-list--cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .omega-grid-list--cols-2,
    .omega-grid-list--cols-3,
    .omega-grid-list--cols-4,
    .omega-grid-list--cols-5 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ========== SPLIT LAYOUTS (50/50, 60/40, 40/60) ========== */

.omega-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--omega-space-10);
    align-items: center;
}

.omega-split-60-40 {
    grid-template-columns: 3fr 2fr;
}

.omega-split-40-60 {
    grid-template-columns: 2fr 3fr;
}

@media (max-width: 960px) {
    .omega-split,
    .omega-split-60-40,
    .omega-split-40-60 {
        grid-template-columns: 1fr;
    }
}

/* ========== MASONRY GRID ========== */

.omega-masonry-grid {
    column-count: 3;
    column-gap: var(--omega-space-6);
}

.omega-masonry-item {
    break-inside: avoid;
    margin-bottom: var(--omega-space-6);
}

@media (max-width: 960px) {
    .omega-masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .omega-masonry-grid {
        column-count: 1;
    }
}

/* ========== GALLERY GRID ========== */

.omega-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--omega-space-4);
}

.omega-gallery-item img {
    width: 100%;
    height: auto;
    border-radius: var(--omega-radius-md);
    display: block;
}

/* ========== INLINE GALLERY ========== */

.omega-inline-gallery {
    display: flex;
    gap: var(--omega-space-4);
    overflow-x: auto;
    padding-bottom: var(--omega-space-2);
}

.omega-inline-gallery img {
    height: 140px;
    border-radius: var(--omega-radius-md);
    flex-shrink: 0;
}

/* ========== TIMELINE GRID ========== */

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

.omega-timeline-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: var(--omega-space-4);
    align-items: start;
}

.omega-timeline-number {
    width: 48px;
    height: 48px;
    border-radius: var(--omega-radius-full);
    background-color: var(--omega-color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

@media (max-width: 640px) {
    .omega-timeline-step {
        grid-template-columns: 1fr;
    }

    .omega-timeline-number {
        margin-bottom: var(--omega-space-2);
    }
}

/* ========== LOGO GRID ========== */

.omega-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--omega-space-6);
    align-items: center;
}

.omega-logo-row {
    display: flex;
    gap: var(--omega-space-6);
    flex-wrap: wrap;
    justify-content: center;
}

.omega-logo-item img {
    max-height: 48px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.omega-logo-item img:hover {
    opacity: 1;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

@media (max-width: 1200px) {
    .omega-container {
        max-width: 960px;
    }
}

@media (max-width: 960px) {
    .omega-container {
        max-width: 720px;
    }
}

@media (max-width: 640px) {
    .omega-container {
        max-width: 100%;
    }
}