/**
 * Layout Utilities (Mobile-First)
 * BEM-based structural classes.
 */

/* ================= CONTAINER ================= */
.l-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

.l-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}


.l-section {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
}

@media (min-width: 1024px) {
    .l-section--large {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* ================= GRID SYSTEM ================= */
.l-grid {
    display: grid;
    gap: var(--spacing-6);
}

.l-grid--gap-8 { gap: var(--spacing-8); }
.l-grid--gap-10 { gap: var(--spacing-10); }
.l-grid--gap-12 { gap: var(--spacing-12); }

/* Category Grid: 2 columns mobile, 4 tablet, 6 desktop */
.l-grid--categories {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .l-grid--categories {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .l-grid--categories {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--spacing-4);
    }
}

/* Listing Grid: 1 column mobile, 2 tablet, 3 desktop */
.l-grid--listings {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .l-grid--listings {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .l-grid--listings {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-8);
    }
}

/* Neighborhood Grid: 2 columns mobile, 4 desktop */
.l-grid--areas {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .l-grid--areas {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 12-Column Grid System */
.l-grid--12 {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .l-grid--12 {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--spacing-8);
    }
    
    .l-col-1 { grid-column: span 1; }
    .l-col-2 { grid-column: span 2; }
    .l-col-3 { grid-column: span 3; }
    .l-col-4 { grid-column: span 4; }
    .l-col-5 { grid-column: span 5; }
    .l-col-6 { grid-column: span 6; }
    .l-col-7 { grid-column: span 7; }
    .l-col-8 { grid-column: span 8; }
    .l-col-9 { grid-column: span 9; }
    .l-col-10 { grid-column: span 10; }
    .l-col-11 { grid-column: span 11; }
    .l-col-12 { grid-column: span 12; }
}

/* Hybrid Grid for 30/70 Split */
.l-grid--hybrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}

@media (min-width: 1024px) {
    .l-grid--hybrid {
        grid-template-columns: 3fr 7fr;
        gap: var(--spacing-12);
    }
}

/* ================= FLEX ================= */
.l-flex { display: flex; }
.l-flex--center { align-items: center; justify-content: center; }
.l-flex--between { justify-content: space-between; }
.l-flex--column { flex-direction: column; }
.l-flex--wrap { flex-wrap: wrap; }
.l-flex--gap-2 { gap: var(--spacing-2); }
.l-flex--gap-4 { gap: var(--spacing-4); }

/* ================= SPACING ================= */
.u-mb-2 { margin-bottom: var(--spacing-2); }
.u-mb-4 { margin-bottom: var(--spacing-4); }
.u-mb-6 { margin-bottom: var(--spacing-6); }
.u-mb-8 { margin-bottom: var(--spacing-8); }
.u-mb-10 { margin-bottom: var(--spacing-10); }
.u-mb-0 { margin-bottom: 0 !important; }

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

/* Atomic Spacing */
.u-p-2 { padding: var(--spacing-2); }
.u-p-3 { padding: var(--spacing-3); }
.u-p-4 { padding: var(--spacing-4); }
.u-px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.u-py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.u-px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.u-py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }

/* Atomic Borders */
.u-rounded-xl { border-radius: var(--radius-xl); }
.u-rounded-2xl { border-radius: 1rem; }
.u-rounded-full { border-radius: var(--radius-full); }

/* Themes */
.u-bg-low { background-color: var(--color-surface-container-low); }
.u-bg-lowest { background-color: var(--color-surface-container-lowest); }

/* ================= UTILS ================= */
.u-hidden {
    display: none !important;
}

/* ================= TYPOGRAPHY ================= */
.u-tracking-tight { letter-spacing: -0.025em; }
.u-font-bold { font-weight: 700; }
.u-font-extrabold { font-weight: 800; }