/* ============================================================
   Dubai Property Lab — Grid System & Breakpoints
   Source: DPL_Design_System_v1.md §2
   ============================================================ */

/* --- Base page grid --- */

.dpl-grid {
    display: grid;
    gap: var(--space-5);
    padding: 0 var(--space-5);
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Page wrapper (nav offset) --- */

.page-body {
    padding-top: 64px; /* nav bar height */
}

/* --- Section spacing --- */

.section {
    padding: var(--space-7) 0;
}

.section + .section {
    padding-top: 0;
}

/* --- KPI grids (known counts, per D7.2) --- */

.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.kpi-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-5);
}

/* --- Card grids --- */

.card-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.card-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

/* --- Responsive breakpoints --- */

/* Tablet: 768–1199px */
@media (max-width: 1199px) {
    .dpl-grid {
        padding: 0 var(--space-4);
        gap: var(--space-4);
    }

    .kpi-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .kpi-grid-6 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

/* Mobile L: 480–767px */
@media (max-width: 767px) {
    .dpl-grid {
        padding: 0 var(--space-4);
        gap: var(--space-4);
    }

    .kpi-grid-4 {
        grid-template-columns: 1fr;
    }

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

    .card-grid-3 {
        grid-template-columns: 1fr;
    }

    .card-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Mobile: < 480px */
@media (max-width: 479px) {
    .dpl-grid {
        padding: 0 var(--space-3);
        gap: var(--space-3);
    }
}

/* --- KPI horizontal scroll (mobile) --- */

.kpi-scroll-mobile {
    display: none;
}

@media (max-width: 767px) {
    .kpi-scroll-mobile {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--space-3);
        padding-bottom: var(--space-2);
    }

    .kpi-scroll-mobile > .kpi-card {
        flex: 0 0 auto;
        width: 280px;
        scroll-snap-align: start;
    }

    .kpi-grid-desktop {
        display: none;
    }
}