/* ========================================
   MOBILE OPTIMIZATION - PROFESSIONAL & MODERN
   ======================================== */

/* Tablet Optimization (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Blog grid - 2 columns on tablet */
    .blogs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }

    .blogs-grid .blog-card img {
        height: 260px !important;
    }

    /* FAQ section */
    .faq-container {
        max-width: 800px;
        margin: 0 auto;
    }
}

/* Mobile-First Touch Improvements */
@media (max-width: 768px) {
    /* Improve tap targets - minimum 44x44px for accessibility */
    a, button, .btn, .listing-card, .property-card, .transaction-card, .blog-card {
        min-height: 44px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Optimize font sizes for mobile readability */
    body {
        font-size: 16px; /* Prevents iOS zoom on input focus */
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Hero Section - Mobile Optimized */
    .hero {
        min-height: 85vh;
        padding: 100px 20px 60px;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .hero-subtitle {
        font-size: clamp(1rem, 4vw, 1.25rem);
        line-height: 1.5;
        margin-bottom: 32px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        padding: 16px 32px;
        font-size: 16px;
    }

    /* Section Spacing - Optimized for mobile */
    section {
        padding: 60px 20px;
    }

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

    .section-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .section-tag {
        font-size: 14px;
        padding: 6px 16px;
    }

    /* Container - Mobile padding */
    .container {
        padding: 0 20px;
        max-width: 100%;
    }

    /* Navigation - Mobile optimized */
    .navbar {
        padding: 16px 20px;
    }

    .logo {
        font-size: 20px;
    }

    /* Hide desktop navigation on mobile */
    .nav-menu {
        display: none !important;
    }

    .nav-links {
        padding: 80px 20px 40px;
    }

    .nav-links a {
        font-size: 24px;
        padding: 16px 0;
    }

    /* Mobile menu optimizations */
    .mobile-menu-overlay {
        height: 60vh !important;
        max-height: 60vh !important;
    }

    .mobile-menu-content {
        grid-template-columns: 1fr !important;
        padding: 100px 30px 50px !important;
        gap: 40px !important;
    }

    .mobile-menu-left {
        justify-content: flex-start !important;
    }

    .mobile-nav-link {
        font-size: clamp(28px, 7vw, 36px) !important;
    }

    /* Hide contact info on phone */
    .mobile-menu-right {
        display: none !important;
    }

    /* Cards Grid - Single column on mobile */
    .listings-grid,
    .properties-grid,
    .transactions-grid,
    .blog-grid,
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Blog grid - consistent image sizing */
    .blogs-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .blogs-grid .blog-card img {
        height: 240px !important;
    }

    /* FAQ - Mobile optimized */
    .faq-item {
        padding: 24px 0 !important;
    }

    .faq-question {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .faq-answer {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .faq-toggle {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0;
    }

    /* Property Cards - Mobile optimized */
    .listing-card,
    .property-card,
    .transaction-card {
        margin-bottom: 0;
    }

    .listing-image-wrapper,
    .property-image-wrapper,
    .transaction-image-wrapper {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }

    .listing-card img,
    .property-card img,
    .transaction-card img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 280px !important;
        max-height: 280px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .listing-info,
    .property-info,
    .transaction-details {
        padding: 20px 16px;
    }

    .listing-title,
    .property-title,
    .transaction-address {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .listing-meta,
    .property-meta,
    .transaction-specs {
        gap: 12px;
        flex-wrap: wrap;
    }

    .meta-item,
    .transaction-spec {
        font-size: 13px;
    }

    .listing-price,
    .property-price,
    .transaction-price {
        font-size: 22px;
        margin-top: 12px;
    }

    /* Stats Section - Mobile layout */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .stat-number {
        font-size: clamp(2rem, 8vw, 3rem);
    }

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

    /* About Section - Mobile */
    .about-content {
        flex-direction: column;
        gap: 32px;
    }

    .about-text,
    .about-image {
        width: 100%;
    }

    .about-text h2 {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
        margin-bottom: 16px;
    }

    .about-text p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    /* CTA Section - Mobile */
    .cta-section {
        padding: 80px 20px;
        min-height: 400px;
    }

    .cta-content {
        padding: 0 20px;
    }

    .cta-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: 24px;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .cta-buttons .btn {
        width: 100%;
        padding: 16px 32px;
    }

    /* Footer - Mobile optimized */
    .footer {
        padding: 60px 20px 40px;
    }

    .footer-top {
        flex-direction: column;
        gap: 40px;
    }

    .footer-logo-section {
        width: 100%;
    }

    .footer-newsletter {
        width: 100%;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 12px;
    }

    .newsletter-input {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .newsletter-btn {
        width: 100%;
        padding: 14px 24px;
    }

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

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

    .footer-credits {
        flex-direction: column;
        gap: 12px;
    }

    /* Contact Form - Mobile */
    .contact-form {
        padding: 32px 20px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px; /* Prevents iOS zoom */
        padding: 14px 16px;
    }

    .btn-submit {
        width: 100%;
        padding: 16px 32px;
        font-size: 16px;
    }

    /* Blog Cards - Mobile */
    .blog-card {
        margin-bottom: 0;
    }

    .blog-image-wrapper {
        height: 220px;
    }

    .blog-content {
        padding: 20px 16px;
    }

    .blog-title {
        font-size: 18px;
        line-height: 1.4;
    }

    .blog-date {
        font-size: 13px;
    }

    /* Solution Cards - Mobile */
    .solution-card {
        height: 280px;
    }

    .solution-card h3 {
        font-size: 22px;
    }

    /* View All Button */
    .btn-view-all {
        padding: 14px 32px;
        font-size: 15px;
    }

    /* Badges - Mobile optimized */
    .listing-badge,
    .property-badge,
    .transaction-status {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Performance Optimizations */
    img {
        will-change: auto;
    }

    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }

    /* Disable parallax on mobile */
    .hero::before {
        transform: none !important;
    }

    /* Optimize hover states for touch */
    .listing-card:hover,
    .property-card:hover,
    .transaction-card:hover,
    .blog-card:hover {
        transform: none;
    }

    .listing-card:active,
    .property-card:active,
    .transaction-card:active,
    .blog-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* Button active states for touch feedback */
    .btn:active,
    .btn-primary:active,
    .btn-secondary:active,
    .cta-button:active {
        transform: scale(0.97);
    }

    /* Improve scrolling performance */
    .listings-grid,
    .properties-grid,
    .transactions-grid,
    .blog-grid {
        -webkit-overflow-scrolling: touch;
    }
}

/* Small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    .hero {
        min-height: 80vh;
        padding: 80px 16px 50px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .container {
        padding: 0 16px;
    }

    section {
        padding: 50px 16px;
    }

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

    .stat-number {
        font-size: 2rem;
    }
}

/* Landscape mode on phones */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: 80px 20px 40px;
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 12px;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .hero-buttons .btn {
        width: auto;
        min-width: 160px;
    }

    .cta-section {
        min-height: 100vh;
    }
}

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
    .listings-grid,
    .properties-grid,
    .transactions-grid,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .solutions-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .section-title {
        font-size: 2.5rem;
    }
}

/* Safe area for notched devices (iPhone X and newer) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .navbar {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-top: max(16px, env(safe-area-inset-top));
    }

    .footer {
        padding-bottom: max(40px, env(safe-area-inset-bottom));
    }
}