/* Responsive Styles for Prop-360 */

/* ============================================
   MOBILE DEVICES (320px - 767px)
   ============================================ */

@media (max-width: 767px) {

    /* Typography */
    .display-1 {
        font-size: 2.5rem;
    }

    .display-2 {
        font-size: 2.25rem;
    }

    .display-3 {
        font-size: 2rem;
    }

    .display-4 {
        font-size: 1.75rem;
    }

    .display-5 {
        font-size: 1.5rem;
    }

    /* Header */
    .top-bar {
        font-size: 12px;
    }

    .navbar-brand img {
        max-height: 40px;
    }

    /* Hero Section */
    .hero-section {
        padding: 2rem 0 !important;
    }

    .search-form {
        padding: 1rem !important;
    }

    /* Property Cards */
    .property-card .card-img-top {
        height: 180px;
    }

    /* Stats */
    .stat-card h2 {
        font-size: 2rem;
    }

    /* Footer */
    .footer .col-md-3,
    .footer .col-md-6 {
        margin-bottom: 2rem;
    }
}

/* ============================================
   TABLET DEVICES (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    .property-card .card-img-top {
        height: 200px;
    }
}

/* ============================================
   DESKTOP DEVICES (1024px+)
   ============================================ */

@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
}