/* =========================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   Core Grid System
   ---------------------------------------------------------
   Purpose:
   - Responsive CSS Grid utilities
   - Marketplace result layouts
   - Card/list layouts
   - Sidebar + content layouts
   - Dashboard-like public layouts
   - No fake/demo/sample marketplace data
   - No JavaScript
   - No API/database logic
   ========================================================= */


/* =========================================================
   1. GRID ROOT
   ========================================================= */

.grid {
    display: grid;
    width: 100%;
    min-width: 0;
}


/* Prevent grid children from causing horizontal overflow */
.grid > * {
    min-width: 0;
}


/* =========================================================
   2. GRID GAP
   ========================================================= */

.grid-gap-none {
    gap: 0;
}

.grid-gap-xs {
    gap: var(--space-1, 0.25rem);
}

.grid-gap-sm {
    gap: var(--space-2, 0.5rem);
}

.grid-gap-md {
    gap: var(--space-4, 1rem);
}

.grid-gap-lg {
    gap: var(--space-6, 1.5rem);
}

.grid-gap-xl {
    gap: var(--space-8, 2rem);
}

.grid-gap-2xl {
    gap: var(--space-10, 2.5rem);
}


/* Row / column specific gaps */

.grid-row-gap-xs {
    row-gap: var(--space-1, 0.25rem);
}

.grid-row-gap-sm {
    row-gap: var(--space-2, 0.5rem);
}

.grid-row-gap-md {
    row-gap: var(--space-4, 1rem);
}

.grid-row-gap-lg {
    row-gap: var(--space-6, 1.5rem);
}

.grid-row-gap-xl {
    row-gap: var(--space-8, 2rem);
}

.grid-column-gap-xs {
    column-gap: var(--space-1, 0.25rem);
}

.grid-column-gap-sm {
    column-gap: var(--space-2, 0.5rem);
}

.grid-column-gap-md {
    column-gap: var(--space-4, 1rem);
}

.grid-column-gap-lg {
    column-gap: var(--space-6, 1.5rem);
}

.grid-column-gap-xl {
    column-gap: var(--space-8, 2rem);
}


/* =========================================================
   3. STANDARD COLUMN GRIDS
   ========================================================= */

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

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

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

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

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

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

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

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

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

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

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

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


/* =========================================================
   4. AUTO-FIT MARKETPLACE GRIDS
   ---------------------------------------------------------
   Useful for:
   - Business cards
   - Vendor cards
   - Product cards
   - Service cards
   - Category cards
   ========================================================= */

.grid-auto-xs {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 10rem), 1fr)
        );
}

.grid-auto-sm {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 12rem), 1fr)
        );
}

.grid-auto-md {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 15rem), 1fr)
        );
}

.grid-auto-lg {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 18rem), 1fr)
        );
}

.grid-auto-xl {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 22rem), 1fr)
        );
}


/* =========================================================
   5. AUTO-FILL MARKETPLACE GRIDS
   ========================================================= */

.grid-fill-xs {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(min(100%, 10rem), 1fr)
        );
}

.grid-fill-sm {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(min(100%, 12rem), 1fr)
        );
}

.grid-fill-md {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(min(100%, 15rem), 1fr)
        );
}

.grid-fill-lg {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(min(100%, 18rem), 1fr)
        );
}


/* =========================================================
   6. COMMON MARKETPLACE LAYOUTS
   ========================================================= */

/* Search results / cards */

.marketplace-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 17rem), 1fr)
        );
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* Business / vendor listing */

.business-grid,
.vendor-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 18rem), 1fr)
        );
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* Services */

.service-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 16rem), 1fr)
        );
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* Products */

.product-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 15rem), 1fr)
        );
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* Categories */

.category-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 12rem), 1fr)
        );
    gap: var(--space-4, 1rem);
    width: 100%;
    min-width: 0;
}


/* Offers / pricing */

.offer-grid,
.pricing-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 16rem), 1fr)
        );
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   7. SIDEBAR + CONTENT
   ========================================================= */

.grid-sidebar {
    display: grid;
    grid-template-columns:
        minmax(14rem, 20rem)
        minmax(0, 1fr);
    gap: var(--space-6, 1.5rem);
    width: 100%;
    min-width: 0;
}

.grid-content-sidebar {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(14rem, 20rem);
    gap: var(--space-6, 1.5rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   8. THREE-PANEL LAYOUT
   ========================================================= */

.grid-three-panel {
    display: grid;
    grid-template-columns:
        minmax(12rem, 18rem)
        minmax(0, 1fr)
        minmax(12rem, 18rem);
    gap: var(--space-6, 1.5rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   9. MAIN + TWO SIDEBARS
   ========================================================= */

.grid-main-with-sidebars {
    display: grid;
    grid-template-columns:
        minmax(12rem, 18rem)
        minmax(0, 1fr)
        minmax(12rem, 18rem);
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   10. DETAIL PAGE LAYOUT
   ========================================================= */

.detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(16rem, 24rem);
    gap: var(--space-8, 2rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   11. IMAGE + CONTENT
   ========================================================= */

.grid-media-content {
    display: grid;
    grid-template-columns:
        minmax(10rem, 18rem)
        minmax(0, 1fr);
    gap: var(--space-5, 1.25rem);
    align-items: start;
    width: 100%;
    min-width: 0;
}

.grid-content-media {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(10rem, 18rem);
    gap: var(--space-5, 1.25rem);
    align-items: start;
    width: 100%;
    min-width: 0;
}


/* =========================================================
   12. EQUAL HEIGHT CARD GRID
   ========================================================= */

.grid-equal > * {
    height: 100%;
}

.grid-equal > * > * {
    height: 100%;
}


/* =========================================================
   13. ALIGNMENT
   ========================================================= */

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

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

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

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

.grid-justify-start {
    justify-items: start;
}

.grid-justify-center {
    justify-items: center;
}

.grid-justify-end {
    justify-items: end;
}

.grid-justify-stretch {
    justify-items: stretch;
}


/* =========================================================
   14. CONTENT ALIGNMENT
   ========================================================= */

.grid-content-start {
    align-content: start;
}

.grid-content-center {
    align-content: center;
}

.grid-content-end {
    align-content: end;
}

.grid-content-stretch {
    align-content: stretch;
}

.grid-content-space-between {
    align-content: space-between;
}


/* =========================================================
   15. COLUMN SPAN
   ========================================================= */

.grid-col-auto {
    grid-column: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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


/* =========================================================
   16. ROW SPAN
   ========================================================= */

.grid-row-auto {
    grid-row: auto;
}

.grid-row-full {
    grid-row: 1 / -1;
}

.grid-row-span-2 {
    grid-row: span 2;
}

.grid-row-span-3 {
    grid-row: span 3;
}

.grid-row-span-4 {
    grid-row: span 4;
}


/* =========================================================
   17. DASHBOARD / INFORMATION GRID
   ========================================================= */

.info-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 13rem), 1fr)
        );
    gap: var(--space-4, 1rem);
    width: 100%;
    min-width: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 12rem), 1fr)
        );
    gap: var(--space-4, 1rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   18. FORM / ACTION GRID
   ========================================================= */

.form-grid {
    display: grid;
    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        );
    gap: var(--space-4, 1rem);
    width: 100%;
    min-width: 0;
}

.form-grid > * {
    min-width: 0;
}

.form-grid-full {
    grid-column: 1 / -1;
}


/* =========================================================
   19. TWO COLUMN FORM
   ========================================================= */

.form-grid-2 {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: var(--space-4, 1rem);
    width: 100%;
}


/* =========================================================
   20. INLINE ACTION GRID
   ========================================================= */

.action-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 9rem), max-content)
        );
    gap: var(--space-3, 0.75rem);
    align-items: center;
}


/* =========================================================
   21. COMPARISON GRID
   ========================================================= */

.compare-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 14rem), 1fr)
        );
    gap: var(--space-4, 1rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   22. QUOTE / OFFER GRID
   ========================================================= */

.quote-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 17rem), 1fr)
        );
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   23. GALLERY GRID
   ========================================================= */

.gallery-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 10rem), 1fr)
        );
    gap: var(--space-3, 0.75rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   24. MAP + RESULTS
   ========================================================= */

.map-results-grid {
    display: grid;
    grid-template-columns:
        minmax(18rem, 0.85fr)
        minmax(0, 1.15fr);
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   25. SEARCH RESULT PAGE
   ========================================================= */

.search-results-grid {
    display: grid;
    grid-template-columns:
        minmax(13rem, 18rem)
        minmax(0, 1fr);
    gap: var(--space-6, 1.5rem);
    width: 100%;
    min-width: 0;
}


/* Result cards area */

.search-results-list {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 18rem), 1fr)
        );
    gap: var(--space-5, 1.25rem);
    width: 100%;
    min-width: 0;
}


/* =========================================================
   26. LIST MODE
   ========================================================= */

.grid-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4, 1rem);
    width: 100%;
}


/* =========================================================
   27. STACKED GRID
   ========================================================= */

.grid-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4, 1rem);
    width: 100%;
}


/* =========================================================
   28. NO WRAP / OVERFLOW SAFE
   ========================================================= */

.grid-no-wrap {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.grid-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.grid-scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-block: contain;
    scrollbar-width: thin;
}


/* =========================================================
   29. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12 {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid-sidebar,
    .grid-content-sidebar,
    .grid-three-panel,
    .grid-main-with-sidebars,
    .detail-grid,
    .grid-media-content,
    .grid-content-media,
    .map-results-grid,
    .search-results-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-grid,
    .form-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid-col-span-2,
    .grid-col-span-3,
    .grid-col-span-4,
    .grid-col-span-5,
    .grid-col-span-6,
    .grid-col-span-7,
    .grid-col-span-8,
    .grid-col-span-9,
    .grid-col-span-10,
    .grid-col-span-11,
    .grid-col-span-12 {
        grid-column: 1 / -1;
    }

    .grid-row-span-2,
    .grid-row-span-3,
    .grid-row-span-4 {
        grid-row: auto;
    }
}


/* =========================================================
   30. RESPONSIVE — TABLET
   ========================================================= */

@media (min-width: 576px) and (max-width: 767.98px) {

    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .grid-three-panel,
    .grid-main-with-sidebars {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .grid-three-panel > :first-child,
    .grid-three-panel > :last-child,
    .grid-main-with-sidebars > :first-child,
    .grid-main-with-sidebars > :last-child {
        grid-column: 1 / -1;
    }

    .grid-sidebar,
    .grid-content-sidebar,
    .detail-grid,
    .grid-media-content,
    .grid-content-media,
    .map-results-grid,
    .search-results-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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


/* =========================================================
   31. RESPONSIVE — DESKTOP
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12 {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .grid-three-panel,
    .grid-main-with-sidebars {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .grid-three-panel > :last-child,
    .grid-main-with-sidebars > :last-child {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   32. RESPONSIVE — LARGE DESKTOP
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12 {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}


/* =========================================================
   33. RESPONSIVE — WIDE DESKTOP
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12 {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }
}


/* =========================================================
   34. RESPONSIVE — EXTRA LARGE
   ========================================================= */

@media (min-width: 1400px) {

    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12 {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }
}


/* =========================================================
   35. RTL SUPPORT
   ========================================================= */

[dir="rtl"] .grid-sidebar,
[dir="rtl"] .grid-content-sidebar,
[dir="rtl"] .grid-media-content,
[dir="rtl"] .grid-content-media,
[dir="rtl"] .detail-grid,
[dir="rtl"] .map-results-grid,
[dir="rtl"] .search-results-grid {
    direction: rtl;
}


/* =========================================================
   36. REDUCED MOTION
   ---------------------------------------------------------
   Grid itself has no animation.
   This prevents scroll behavior from becoming animated
   when accessibility settings request reduced motion.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .grid-scroll-x,
    .grid-scroll-y,
    .grid-no-wrap {
        scroll-behavior: auto;
    }
}


/* =========================================================
   37. PRINT
   ========================================================= */

@media print {

    .grid,
    .marketplace-grid,
    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid,
    .category-grid,
    .offer-grid,
    .pricing-grid,
    .info-grid,
    .stats-grid,
    .compare-grid,
    .quote-grid,
    .gallery-grid {
        gap: 0.75rem;
    }

    .grid-scroll-x,
    .grid-scroll-y,
    .grid-no-wrap {
        overflow: visible;
    }
}