/* =====================================================
   CAMPORA RESPONSIVE SYSTEM
   Breakpoints: 320px, 375px, 390px, 414px, 768px, 1024px, 1280px, 1440px
   ===================================================== */

/* Ultra Wide Screens (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1360px;
    }
}

/* Laptops & Desktops (1024px to 1327px) */
@media (max-width: 1280px) {
    .bento-lg { grid-column: span 2; }
    .bento-md { grid-column: span 1; }
    .bento-cta { grid-column: span 3; }
}

/* Tablets & Small Laptops (769px to 1023px) */
@media (max-width: 1023px) {
    .header {
        height: 68px;
    }

    .mobile-menu {
        top: 68px;
    }

    .hero {
        margin: 80px 16px 32px 16px;
        padding: 60px 20px;
        border-radius: var(--radius-lg);
    }

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

    .bento-lg { grid-column: span 2; }
    .bento-md { grid-column: span 1; }
    .bento-sm { grid-column: span 1; }
    .bento-cta { grid-column: span 2; }

    .steps-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .stats-strip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 24px;
    }

    .stat-strip-item:nth-child(2)::after {
        display: none;
    }

    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .verification-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .cta-grid {
        grid-template-columns: 1fr;
    }

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

/* Mobile & Small Tablets (up to 768px) */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .section-header {
        margin-bottom: 32px;
    }

    .section-header h2 {
        font-size: 26px;
    }

    .hero {
        margin: 76px 12px 24px 12px;
        padding: 48px 16px;
        border-radius: var(--radius-lg);
    }

    .hero-title {
        font-size: 34px;
        line-height: 1.15;
    }

    .hero-description {
        font-size: 15px;
        margin-bottom: 28px;
    }

    /* Stack Search Bar Controls */
    .hero-search-pill {
        flex-direction: column;
        border-radius: var(--radius-lg);
        padding: 16px;
        gap: 14px;
    }

    .search-main-field {
        width: 100%;
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 12px;
    }

    .search-filters-row {
        width: 100%;
        flex-direction: row;
        gap: 8px;
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 12px;
    }

    .search-filters-row .search-item {
        flex: 1;
        border-left: none;
        padding-left: 0;
    }

    .search-filters-row select {
        width: 100%;
        font-size: 13px;
    }

    .hero-search-btn {
        width: 100%;
        padding: 14px;
        border-radius: var(--radius-md);
    }

    /* Stats Strip Mobile */
    .stats-strip {
        padding: 0 0 36px 0;
    }

    .stats-strip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 20px 14px;
    }

    .stat-strip-item::after {
        display: none !important;
    }

    .stat-number {
        font-size: 28px;
    }

    .stat-label {
        font-size: 13px;
    }

    .stat-sub {
        font-size: 11px;
    }

    /* Problem Grid Mobile */
    .problem-section {
        padding: 60px 0;
    }

    .problem-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
    }

    .problem-card {
        padding: 24px 20px;
    }

    .verification-section {
        padding: 60px 0;
    }

    .verification-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
    }

    .verification-card {
        padding: 24px 20px;
    }

    .hero-trust-badges {
        gap: 8px;
    }

    .trust-badge-pill {
        font-size: 11px;
        padding: 6px 12px;
    }

    .city-shortcuts {
        gap: 6px;
    }

    .shortcut-lbl {
        width: 100%;
        margin-bottom: 4px;
    }

    /* Bento Grid Mobile Stacking */
    .bento-section {
        padding: 60px 0;
    }

    .bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
    }

    .bento-lg, .bento-md, .bento-sm, .bento-cta {
        grid-column: span 1;
        min-height: auto;
        padding: 24px 20px;
    }

    .bento-card h3 {
        font-size: 20px;
    }

    .bento-stat-highlight {
        font-size: 26px;
    }

    /* Property Cards Mobile */
    .featured, .cities-section, .universities-section, .testimonials {
        padding: 50px 0;
    }

    .property-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .property-body {
        padding: 18px;
    }

    .property-title {
        font-size: 18px;
    }

    /* Steps Mobile */
    .how-it-works {
        padding: 60px 0;
    }

    .steps-wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
    }

    .step-card {
        padding: 24px 20px;
    }

    .step-num {
        font-size: 36px;
        margin-bottom: 8px;
    }

    /* Why Grid Mobile */
    .why-campora {
        padding: 60px 0;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
    }

    .why-card {
        padding: 24px 20px;
    }

    /* CTA Section Mobile */
    .cta-section {
        padding: 50px 0;
    }

    .cta-card {
        padding: 32px 24px;
        border-radius: var(--radius-lg);
    }

    .cta-card h2 {
        font-size: 24px;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
    }

    /* FAQ Mobile */
    .faq-section {
        padding: 60px 0;
    }

    .faq-wrapper {
        margin-top: 32px;
        gap: 12px;
    }

    .faq-question {
        padding: 16px 18px;
        font-size: 16px;
    }

    .faq-item.active .faq-answer {
        padding: 0 18px 18px 18px;
    }

    /* Final CTA Mobile */
    .final-cta {
        padding: 60px 0;
    }

    .final-cta h2 {
        font-size: 28px;
    }

    .final-btn {
        width: 100%;
        justify-content: center;
    }

    /* Footer Mobile */
    .footer {
        padding: 60px 0 24px 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 40px;
    }

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

    /* Auth Modal Mobile */
    .auth-modal-card {
        padding: 28px 20px;
        border-radius: var(--radius-lg);
    }
}

/* Small Phones (320px to 390px) */
@media (max-width: 390px) {
    .hero-title {
        font-size: 28px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 6px 14px;
    }

    .bento-card {
        padding: 20px 16px;
    }

    .stats-strip-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px 12px;
    }

    .problem-card, .verification-card {
        padding: 20px 16px;
    }

    .auth-modal-card {
        padding: 24px 16px;
    }
}