/* Mobile-first responsive overrides for units.blade.php */

/* Mobile styles (default) */
section.py-5 {
    padding: 2rem 1rem !important; /* Reduced padding for better balance on small screens */
}

.section-heading {
    font-size: 1.5rem; /* Smaller heading on mobile */
}

.search-filter-container {
    margin-bottom: 1rem;
}

.filter-buttons {
    display: block; /* Stack filter buttons vertically on mobile */
}

.filter-btn {
    width: 100%; /* Full width buttons on mobile */
    margin-bottom: 0.5rem;
    display: block;
}

#units-container.row {
    display: block; /* Force cards to stack vertically on mobile */
}

#units-container .card {
    width: 100%; /* Ensure cards take full width on mobile */
    margin-bottom: 1rem;
}

/* Modal responsiveness */
.custom-modal {
    width: 95%; /* Near full width on mobile */
    max-width: none;
}

.custom-modal-body {
    padding: 1rem;
}

/* Tablet and larger (768px and up) */
@media (min-width: 768px) {
    section.py-5 {
        padding: 3rem 2rem !important; /* Restore padding for larger screens */
    }

    .section-heading {
        font-size: 2rem; /* Larger heading on tablet+ */
    }

    .filter-buttons {
        display: flex; /* Horizontal layout for filter buttons */
        flex-wrap: wrap;
        justify-content: center;
    }

    .filter-btn {
        width: auto; /* Auto width on larger screens */
        margin: 0 0.5rem 0.5rem 0;
        display: inline-block;
    }

    #units-container.row {
        display: flex; /* Restore flex layout for multi-column grid */
        flex-wrap: wrap;
    }

    #units-container .card {
        width: auto; /* Auto width for grid items */
        margin-bottom: 0;
    }

    /* Modal responsiveness */
    .custom-modal {
        width: 80%; /* Smaller width on larger screens */
        max-width: 600px;
    }

    .custom-modal-body {
        padding: 1.5rem;
    }
}

/* Desktop and larger (1024px and up) - optional additional adjustments */
@media (min-width: 1024px) {
    section.py-5 {
        padding: 5rem 2rem !important; /* Full padding on desktop */
    }

    .custom-modal {
        width: 70%;
        max-width: 700px;
    }
}