/**
 * DealerHub Vehicles Pro - Grid System
 * Custom responsive grid without Tailwind dependency
 */

/* ========================================
   GRID CONTAINER
   ======================================== */

.dh-grid {
    display: grid;
    gap: var(--dh-grid-gap, 24px);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ========================================
   RESPONSIVE GRID COLUMNS
   ======================================== */

/* Mobile (default) */
.dh-grid {
    grid-template-columns: repeat(var(--dh-grid-columns-mobile, 1), 1fr);
}

/* Tablet and up */
@media (min-width: 768px) {
    .dh-grid {
        grid-template-columns: repeat(var(--dh-grid-columns-tablet, 2), 1fr);
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .dh-grid {
        grid-template-columns: repeat(var(--dh-grid-columns-desktop, 3), 1fr);
    }
}

/* ========================================
   GRID ITEM
   ======================================== */

.dh-grid-item {
    position: relative;
    width: 100%;
    min-width: 0; /* Prevent overflow */
}

/* ========================================
   CONTAINER UTILITIES
   ======================================== */

.dh-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--dh-spacing-lg, 24px);
    padding-right: var(--dh-spacing-lg, 24px);
}

.dh-container-fluid {
    width: 100%;
    padding-left: var(--dh-spacing-lg, 24px);
    padding-right: var(--dh-spacing-lg, 24px);
}

/* ========================================
   WORDPRESS THEME COMPATIBILITY
   ======================================== */

/* Reset common WordPress theme styles that interfere with grid */
.dealerhub-vehicles-container,
.dealerhub-vehicles-container * {
    box-sizing: border-box !important;
}

/* Prevent theme column styles from affecting our grid */
.dh-grid .dh-grid-item {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Override common theme container constraints */
.dealerhub-vehicles-container {
    max-width: none !important;
    width: 100% !important;
}

/* Ensure grid works within theme content areas */
.entry-content .dh-grid,
.post-content .dh-grid,
.page-content .dh-grid,
article .dh-grid {
    display: grid !important;
    gap: var(--dh-grid-gap, 24px) !important;
}

/* ========================================
   SPECIFIC COLUMN CLASSES (OVERRIDE)
   ======================================== */

/* Allow manual column specification */
.dh-grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.dh-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.dh-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.dh-grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (min-width: 768px) {
    .dh-grid-cols-md-1 { grid-template-columns: repeat(1, 1fr) !important; }
    .dh-grid-cols-md-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .dh-grid-cols-md-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .dh-grid-cols-md-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (min-width: 1024px) {
    .dh-grid-cols-lg-1 { grid-template-columns: repeat(1, 1fr) !important; }
    .dh-grid-cols-lg-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .dh-grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .dh-grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ========================================
   GAP UTILITIES
   ======================================== */

.dh-gap-sm { gap: var(--dh-spacing-sm, 8px) !important; }
.dh-gap-md { gap: var(--dh-spacing-md, 16px) !important; }
.dh-gap-lg { gap: var(--dh-spacing-lg, 24px) !important; }
.dh-gap-xl { gap: var(--dh-spacing-xl, 32px) !important; }

/* ========================================
   FLEXBOX UTILITIES (for buttons, etc.)
   ======================================== */

.dh-flex {
    display: flex;
}

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

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

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

.dh-items-start {
    align-items: flex-start;
}

.dh-items-end {
    align-items: flex-end;
}

.dh-justify-center {
    justify-content: center;
}

.dh-justify-between {
    justify-content: space-between;
}

.dh-justify-start {
    justify-content: flex-start;
}

.dh-justify-end {
    justify-content: flex-end;
}

.dh-gap-2 { gap: 8px; }
.dh-gap-3 { gap: 12px; }
.dh-gap-4 { gap: 16px; }
.dh-gap-6 { gap: 24px; }

/* ========================================
   RESPONSIVE VISIBILITY
   ======================================== */

.dh-hidden {
    display: none !important;
}

@media (max-width: 767px) {
    .dh-hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .dh-hidden-tablet {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .dh-hidden-desktop {
        display: none !important;
    }
}