/* ============================================
   ModelNexus - Responsive
   Mobile-first breakpoints
   ============================================ */

/* Tablet: <= 1024px */
@media (max-width: 1024px) {
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    .grid-masonry { columns: 3 220px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* Small tablet: <= 768px */
@media (max-width: 768px) {
    :root {
        --nav-height: 56px;
    }

    .container {
        padding: 0 16px;
    }

    .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-models { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
    .grid-masonry { columns: 2 180px; column-gap: 12px; }

    .navbar-nav {
        display: none;
    }

    .navbar-search {
        max-width: none;
    }

    .page-title {
        font-size: 1.4rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* Pricing cards stack */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 400px;
        margin: 0 auto;
    }

    .pricing-card.featured {
        transform: none;
    }

    /* Modal full width on mobile */
    .modal {
        width: 95%;
        max-height: 85vh;
    }

    /* Tabs scroll */
    .tabs {
        padding-bottom: 4px;
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
}

/* Mobile: <= 640px */
@media (max-width: 640px) {
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .grid-models { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .grid-masonry { columns: 2 150px; column-gap: 10px; }

    .model-card-body {
        padding: 10px;
    }

    .model-card-title {
        font-size: 0.85rem;
    }

    .model-card-stats {
        font-size: 0.7rem;
        gap: 8px;
    }

    .model-card-tags {
        display: none;
    }

    .btn-lg {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    /* Stat boxes stack */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stat-box {
        padding: 14px;
    }

    .stat-box-value {
        font-size: 1.2rem;
    }
}

/* Small mobile: <= 400px */
@media (max-width: 400px) {
    .grid-models { grid-template-columns: 1fr; }
    .grid-masonry { columns: 1; }

    .navbar-brand span {
        display: none;
    }
}

/* Large desktop: >= 1280px */
@media (min-width: 1280px) {
    .grid-masonry {
        columns: 6 240px;
    }
}