/* ============================================================
   Penny Levine Real Estate Website - Mobile Responsive Styles
   Breakpoints: 1024px (tablet/small desktop), 768px (tablet),
                480px (small phone), 360px (very small phone)
   Prevents horizontal scrolling at all viewport widths.
   ============================================================ */

/* ============================================================
   BASE OVERFLOW PROTECTION
   ============================================================ */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure properties grid never exceeds viewport */
.properties-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
}

/* ============================================================
   TABLET & SMALL DESKTOP (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    /* Typography */
    h1 { font-size: 2.4rem; }
    h2 { font-size: 2rem; }

    /* Section spacing */
    .section {
        padding: 70px 0;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 3rem;
    }

    /* Properties grid - 2 columns */
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Profile section */
    .profile-section {
        grid-template-columns: 280px 1fr;
        gap: 40px;
    }

    /* Contact grid */
    .contact-grid {
        grid-template-columns: 1fr 350px;
        gap: 40px;
    }

    /* Footer grid - 2 columns */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* Approach grid */
    .approach-grid {
        gap: 20px;
    }
}

/* ============================================================
   TABLET (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.3rem; }

    :root {
        --section-padding: 60px;
        --header-height: 70px;
    }

    .container {
        padding: 0 20px;
        max-width: 100%;
    }

    /* ---- MOBILE NAVIGATION ---- */
    .mobile-menu-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        flex-direction: column;
        padding: 30px 20px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow-y: auto;
        z-index: 999;
        border-top: 1px solid var(--border);
    }

    .main-nav.open {
        transform: translateX(0);
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .nav-item a {
        font-size: 1.1rem;
        padding: 16px 20px;
        border-radius: 12px;
    }

    .lang-switch {
        margin: 20px 0 0;
        justify-content: center;
        padding: 14px 24px;
        font-size: 1rem;
    }

    /* ---- HERO ---- */
    .hero {
        min-height: 500px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-content .hero-subtitle {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* ---- STATS BAR ---- */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    /* ---- PROPERTIES ---- */
    .properties-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .property-image {
        height: 220px;
    }

    .property-info h3 {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* ---- TESTIMONIALS ---- */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .testimonial-card {
        padding: 30px;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    /* ---- WELCOME SECTION ---- */
    .welcome-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .welcome-image {
        max-width: 240px;
        margin: 0 auto;
    }

    /* ---- PROFILE PAGE ---- */
    .profile-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .profile-image {
        max-width: 300px;
        margin: 0 auto;
    }

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

    /* ---- CONTACT ---- */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-sidebar {
        order: -1;
    }

    /* ---- FOOTER ---- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    /* ---- SECTION HEADER ---- */
    .section-header {
        margin-bottom: 40px;
    }

    /* ---- QUOTE SECTION ---- */
    .quote-section blockquote {
        font-size: 1.2rem;
    }

    /* ---- PAGE HERO ---- */
    .page-hero {
        padding: 40px 0 30px;
    }

    /* ---- FILTER TABS ---- */
    .filter-tabs {
        gap: 8px;
        flex-wrap: wrap;
    }

    .filter-tab {
        padding: 8px 18px;
        font-size: 0.85rem;
    }

    /* ---- PROPERTY MODAL ---- */
    .property-modal-overlay {
        padding: 16px;
    }

    .property-modal {
        max-width: 100%;
    }

    .modal-slideshow {
        height: 280px;
    }

    .modal-details {
        padding: 24px;
    }

    .modal-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .modal-header h2 {
        font-size: 1.3rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .modal-price {
        font-size: 1.2rem;
    }

    .modal-meta {
        flex-wrap: wrap;
        gap: 12px;
    }

    .modal-meta-left {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ---- PROPERTY FOOTER META ---- */
    .property-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .property-centris {
        font-size: 0.75rem;
    }
}

/* ============================================================
   SMALL PHONE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {

    /* Typography */
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.5rem; }

    :root {
        --section-padding: 40px;
    }

    .container {
        padding: 0 16px;
        max-width: 100%;
    }

    /* Hero */
    .hero {
        min-height: 450px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .hero-content .hero-subtitle {
        font-size: 0.85rem;
    }

    /* Stats */
    .stat-number {
        font-size: 2.2rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    /* Property cards */
    .property-image {
        height: 200px;
    }

    .property-info {
        padding: 16px;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 24px;
    }

    .testimonial-card::before {
        font-size: 4rem;
    }

    /* Buttons */
    .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    /* Form */
    .form-control {
        padding: 12px 14px;
    }

    /* Contact sidebar */
    .contact-sidebar {
        padding: 24px;
    }

    /* Footer */
    .footer-main {
        padding: 40px 0 30px;
    }

    /* Logo */
    .logo img {
        height: 45px;
    }

    /* Modal - tighter */
    .property-modal-overlay {
        padding: 12px 8px;
    }

    .modal-details {
        padding: 20px 16px;
    }

    .modal-slideshow {
        height: 240px;
    }

    .modal-header h2 {
        font-size: 1.2rem;
    }

    .modal-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Slideshow controls */
    .slideshow-btn {
        width: 36px;
        height: 36px;
    }

    /* Property ribbon + price tags */
    .property-ribbon {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    .property-price {
        padding: 5px 10px;
        font-size: 0.85rem;
    }
}

/* ============================================================
   VERY SMALL PHONE (max-width: 360px)
   ============================================================ */
@media (max-width: 360px) {

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }

    :root {
        --section-padding: 32px;
    }

    .container {
        padding: 0 12px;
        max-width: 100%;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 1.5rem;
    }

    .hero-content .hero-subtitle {
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    .hero-buttons .btn {
        max-width: 260px;
        font-size: 0.85rem;
    }

    /* Modal - minimal */
    .property-modal-overlay {
        padding: 8px 4px;
    }

    .modal-details {
        padding: 16px 12px;
    }

    .modal-slideshow {
        height: 200px;
    }

    .modal-header h2 {
        font-size: 1.1rem;
    }

    /* Compact property cards */
    .property-info {
        padding: 12px;
    }

    .property-info h3 {
        font-size: 1rem;
    }

    .property-meta {
        font-size: 0.8rem;
    }

    /* Compact footer */
    .footer-main {
        padding: 32px 0 24px;
    }

    /* Smaller buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}