/* =============================================================
 * listings/css/mobile.css — Mobile responsiveness overrides
 *
 * Loaded via components/page_head.php on every listings page so
 * these rules apply across the whole listings site (homepage,
 * available-homes, find-your-home, property detail, contact,
 * residents, about, legal pages).
 *
 * Every rule is scoped behind @media (max-width: 768px) /
 * (max-width: 480px) so the desktop layout is never affected.
 * Many rules use !important because per-page CSS (property-
 * details.css etc.) loads AFTER this file in property.php and
 * would otherwise win the cascade.
 *
 * Sections:
 *   1. Property-detail modal (pd-modal-*) — fixes from screenshot
 *   2. Property-detail page (pd-*)
 *   3. Header / nav / footer
 *   4. Hero / search / homepage
 *   5. Forms (16px font, 44px tap targets, stacked grids)
 *   6. Cards / grids (property, unit, residents, about)
 *   7. Showing widget
 *   8. CTA / banners
 * ============================================================= */

@media (max-width: 768px) {

    /* Kill any horizontal page scroll on phones. */
    html, body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    /* ===========================================================
     * 1. PROPERTY-DETAIL MODAL — the unit detail card
     *    (pd-modal-overlay → pd-modal → body grid)
     * Fixes from screenshot: Contact button cut off, arrows
     * stealing viewport space, stat icons clipping behind X.
     * =========================================================== */

    /* Overlay — full bleed on phone, no padding/gap so the modal
       fills the whole screen (the prev/next arrows reposition to
       absolute corners below). */
    .pd-modal-overlay {
        padding: 0 !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    .pd-modal {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        flex: 1 1 100% !important;
        overflow-y: auto !important;
    }

    .pd-modal-body {
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    /* Image area trimmed aggressively + thumbnails hidden so the
       primary view (image, title, price, specs, actions) fits in
       one viewport without scrolling. */
    .pd-modal-images {
        max-height: 170px !important;
        padding: 0.5rem !important;
        background: #f3f4f6 !important;
    }
    .pd-modal-details {
        padding: 0.875rem 0.875rem 0 !important;
        overflow-y: auto !important;
        padding-bottom: 110px !important; /* room for sticky action bar */
    }
    .pd-modal-main-img img { height: 150px !important; max-height: 150px !important; }
    .pd-modal-thumbs { display: none !important; }
    .pd-modal-img-arrow {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }

    /* Modal close (X) — pull off the right edge a bit so it doesn't
       sit on top of the modal-spec icon for "Sq Ft". */
    .pd-modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
        z-index: 20 !important;
    }
    /* Add top padding to the details column so the close button has
       a clear corner of its own. */
    .pd-modal-details > .pd-modal-header,
    .pd-modal-details > .pd-modal-title {
        padding-right: 48px;
    }

    /* Prev/Next nav arrows — hide entirely on mobile. They navigate
       between units; on a phone it's better to close the modal and
       tap a different card. Frees up ~80px of viewport. */
    .pd-modal-nav { display: none !important; }

    /* Spec grid — 5 specs needs to wrap nicely. 3-col first row,
       then 2-col second row. */
    .pd-modal-specs {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
        padding: 0.6rem !important;
        margin-bottom: 0.75rem !important;
    }
    .pd-modal-spec i { font-size: 1rem !important; }
    .pd-modal-spec-val { font-size: 0.95rem !important; }
    .pd-modal-spec-label { font-size: 0.68rem !important; }

    /* Title + badge row — keep on one line, allow shrinking. */
    .pd-modal-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .pd-modal-title { font-size: 1.1rem !important; line-height: 1.25 !important; }
    .pd-modal-badge { font-size: 0.7rem !important; padding: 0.18rem 0.5rem !important; }
    .pd-modal-price { font-size: 1.3rem !important; }

    /* Description / Amenities / Showing widget — collapse into
       tap-to-expand accordions on mobile so the primary view fits
       above the fold. The property-details inline script (added in
       property.php) toggles .pd-mobile-collapsed → .pd-mobile-open
       on each section. By default each section header shows with a
       chevron, the body is hidden. */
    .pd-modal-desc,
    .pd-modal-amenities,
    .pd-modal-details .sw-section {
        margin-top: 0.6rem;
    }
    .pd-modal-desc h4,
    .pd-modal-amenities h4 {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin: 0 !important;
        padding: 10px 0 !important;
        font-size: 0.95rem !important;
        border-bottom: 1px solid #f1f5f9;
        position: relative;
    }
    .pd-modal-desc h4::after,
    .pd-modal-amenities h4::after {
        content: "\f078"; /* chevron-down */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.75rem;
        color: #9ca3af;
        margin-left: 8px;
        transition: transform 0.2s ease;
    }
    .pd-modal-desc.pd-mobile-open h4::after,
    .pd-modal-amenities.pd-mobile-open h4::after {
        transform: rotate(180deg);
    }
    .pd-modal-desc.pd-mobile-collapsed > p,
    .pd-modal-amenities.pd-mobile-collapsed > ul {
        display: none !important;
    }
    .pd-modal-desc.pd-mobile-open > p,
    .pd-modal-amenities.pd-mobile-open > ul {
        display: block !important;
        padding: 10px 0 4px !important;
        animation: pdSectionIn 0.18s ease-out;
    }
    @keyframes pdSectionIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .pd-modal-desc p { font-size: 0.85rem !important; line-height: 1.5 !important; }
    .pd-modal-amenities ul {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    .pd-modal-amenities li { font-size: 0.85rem !important; }

    /* The inline Showing widget inside the modal — same accordion
       treatment. Its outer wrapper is .sw-section.sw-section-modal,
       internal header is .sw-header / .sw-title. */
    .pd-modal-details .sw-section {
        margin-top: 0.6rem;
        padding: 0 !important;
        background: transparent !important;
    }
    .pd-modal-details .sw-section .sw-card {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .pd-modal-details .sw-section .sw-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 10px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #f1f5f9;
    }
    .pd-modal-details .sw-section .sw-header::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.75rem;
        color: #9ca3af;
        margin-left: 8px;
        transition: transform 0.2s ease;
    }
    .pd-modal-details .sw-section.pd-mobile-open .sw-header::after {
        transform: rotate(180deg);
    }
    .pd-modal-details .sw-section.pd-mobile-collapsed > .sw-card > *:not(.sw-header) {
        display: none !important;
    }
    .pd-modal-details .sw-section .sw-title { font-size: 0.95rem !important; margin: 0 !important; }
    .pd-modal-details .sw-section .sw-subtitle { display: none !important; }
    .pd-modal-details .sw-section .sw-header-icon { display: none !important; }

    /* ACTION BUTTONS — sticky at the bottom of the modal so the
       primary CTAs ("Apply for Community", "Contact") are always
       visible without scrolling. 2-column grid:
         row 1: Apply for Community (full width, primary CTA)
         row 2: Financing + Contact + Share
       (or row 2: Contact + Share if Financing not present). */
    .pd-modal-actions {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        padding: 10px 0.875rem !important;
        margin: 0 !important;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb !important;
        z-index: 5;
        /* Cancel any negative bleed from the parent's padding-right */
        margin-left: -0.875rem !important;
        margin-right: -0.875rem !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .pd-modal-action-primary {
        grid-column: 1 / -1 !important;   /* full-width on top row */
    }
    .pd-modal-action-btn {
        font-size: 0.8rem !important;
        padding: 0.65rem 0.4rem !important;
        min-height: 42px;
        line-height: 1.1 !important;
    }
    .pd-modal-action-btn i { font-size: 0.85rem; }
    .pd-modal-share {
        padding: 0.55rem !important;
        min-height: 42px;
    }

    /* Contact overlay — full-width inside the modal on phone. */
    .pd-contact-overlay {
        padding: 1.25rem !important;
    }
    .pd-contact-overlay h3 { font-size: 1.15rem !important; }

    /* Financing modal — full-screen too. */
    .pd-financing-overlay .pd-financing-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 1.25rem !important;
        overflow-y: auto !important;
    }
    .pd-financing-header h2 { font-size: 1.25rem !important; }
    .pd-bank-grid {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    /* Lightbox — already full-screen but tighten arrow size. */
    .pd-lightbox-arrow { width: 40px !important; height: 40px !important; }

    /* ===========================================================
     * 2. PROPERTY-DETAIL PAGE (the page behind the modal)
     * =========================================================== */

    .pd-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .pd-hero-title { font-size: 1.5rem !important; line-height: 1.2 !important; }
    .pd-hero-desc { font-size: 0.9rem !important; }
    .pd-hero-slide img { height: 200px !important; }
    .pd-hero-tags { flex-wrap: wrap !important; gap: 0.4rem !important; }

    .pd-units-grid {
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important;
    }
    .pd-available-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .pd-available-header h2 { font-size: 1.25rem !important; }
    .pd-filter-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 0.4rem !important;
        scrollbar-width: none;
    }
    .pd-filter-tabs::-webkit-scrollbar { display: none; }
    .pd-filter-tab {
        white-space: nowrap !important;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .pd-section-title { font-size: 1.25rem !important; }
    .pd-about-text { font-size: 0.92rem !important; }

    .pd-quick-contact-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .pd-qc-item {
        font-size: 0.92rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    .pd-contact-form-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .pd-contact-card { padding: 1.25rem !important; }
    .pd-contact-card h3 { font-size: 1.15rem !important; }
    .pd-contact-sub { font-size: 0.85rem !important; }
    .pd-form-disclaimer { font-size: 0.75rem !important; }

    .pd-breadcrumb {
        font-size: 0.78rem !important;
        flex-wrap: wrap;
    }
    .pd-breadcrumb .sep { margin: 0 0.3rem; }

    .pd-cta h2 { font-size: 1.4rem !important; }
    .pd-cta p { font-size: 0.92rem !important; }
    .pd-cta-btn {
        font-size: 0.92rem !important;
        padding: 0.75rem 1.5rem !important;
    }

    .pd-map-wrap iframe {
        height: 280px !important;
    }
    .pd-attractions-list {
        grid-template-columns: 1fr !important;
    }

    /* ===========================================================
     * 3. HEADER / NAV / FOOTER
     * =========================================================== */

    .listings-header .navbar { padding: 0.5rem 0 !important; }
    .logo-img { max-height: 36px !important; }
    .logo-name { font-size: 1.05rem !important; }
    .logo-subtitle { font-size: 0.7rem !important; }

    /* Mobile menu — already styled via responsive.css; just ensure
       it's a slide-in feel with backdrop-ish full-width. */
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 50;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        padding: 0.75rem 1rem !important;
    }
    .mobile-menu-toggle {
        font-size: 1.4rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    .mobile-nav-link {
        padding: 0.85rem 0 !important;
        font-size: 1rem !important;
        border-bottom: 1px solid #f1f5f9;
    }
    .mobile-nav-link:last-child { border-bottom: 0; }

    /* Portal-selector modal — full-width on phone. */
    .portal-modal-overlay .portal-modal,
    .portal-modal {
        max-width: calc(100vw - 24px) !important;
        margin: 12px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        text-align: left;
    }
    .footer .mailing-list-form {
        flex-direction: column !important;
    }
    .mailing-input, .mailing-submit { width: 100% !important; }

    /* ===========================================================
     * 4. HERO / SEARCH (homepage, find-your-home, available-homes)
     * =========================================================== */

    .hero, .hero-section {
        padding: 1.5rem 1rem !important;
        min-height: auto !important;
    }
    .hero-title { font-size: 1.875rem !important; line-height: 1.15 !important; }
    .hero-subtitle { font-size: 1rem !important; }
    .search-pill, .hero-search {
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        border-radius: 12px !important;
    }
    .state-dropdown, .search-btn,
    .search-pill input, .search-pill select {
        width: 100% !important;
        min-height: 44px !important;
    }

    /* Section headings */
    .section-header { flex-direction: column !important; gap: 0.75rem !important; }
    .section-header h2 { font-size: 1.5rem !important; }

    /* ===========================================================
     * 5. FORMS — 16px font, 44px tap targets, stacked grids
     * =========================================================== */

    .pd-form-input,
    input[type="text"]:not(.no-mobile-fix),
    input[type="email"]:not(.no-mobile-fix),
    input[type="tel"]:not(.no-mobile-fix),
    input[type="search"]:not(.no-mobile-fix),
    input[type="number"]:not(.no-mobile-fix),
    select:not(.no-mobile-fix),
    textarea:not(.no-mobile-fix) {
        font-size: 16px !important;
        min-height: 44px;
    }
    textarea, textarea.pd-form-input { min-height: 96px !important; }

    .pd-form-group label,
    .form-group label,
    label {
        font-size: 0.85rem;
    }

    /* Submit buttons full-width on phone. */
    .pd-form-submit,
    .form-submit,
    .submit-btn {
        width: 100%;
        min-height: 48px;
        font-size: 1rem !important;
    }

    /* ===========================================================
     * 6. CARDS / GRIDS
     * =========================================================== */

    /* Property/unit/community card grids — 1-column. */
    .properties-grid,
    .units-grid,
    .communities-grid,
    .results-grid,
    .residents-grid,
    .find-results-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Individual cards: tighten padding, ensure images fit. */
    .property-card,
    .unit-card,
    .community-card,
    .resident-card {
        border-radius: 12px !important;
    }
    .property-card img,
    .unit-card img,
    .community-card img {
        max-width: 100% !important;
        height: auto !important;
    }
    .property-name { font-size: 1.05rem !important; }

    /* About-us / residents page layouts */
    .about-grid, .residents-content-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Find-your-home — sidebar filters above results. */
    .fyh-layout {
        grid-template-columns: 1fr !important;
    }
    .fyh-sidebar {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        border-radius: 12px;
        margin-bottom: 1rem;
    }
    .fyh-results { width: 100% !important; }

    /* Available-homes map view — stack map + list. */
    .ah-layout, .available-homes-layout {
        grid-template-columns: 1fr !important;
    }
    .ah-map-wrap, .available-homes-map {
        height: 280px !important;
        margin-bottom: 1rem;
    }

    /* ===========================================================
     * 7. CTA / BANNERS / LEGAL PAGES
     * =========================================================== */

    .cta-section, .pd-cta { padding: 1.75rem 1rem !important; }
    .cta-content h2, .cta-section h2 { font-size: 1.5rem !important; }
    .cta-btn { width: auto; padding: 0.75rem 1.5rem !important; }

    .legal-content, .legal-page-content {
        padding: 1.25rem 0 !important;
    }
    .legal-content h1, .legal-page h1 { font-size: 1.5rem !important; }
    .legal-content h2, .legal-page h2 { font-size: 1.2rem !important; }
    .legal-content p, .legal-page p { font-size: 0.92rem !important; }

    /* Contact page form */
    .contact-form-section { padding: 1.25rem !important; }
    .contact-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Buttons — generally min 40px tap target. */
    .btn,
    .pd-apply-btn,
    .btn-login,
    .btn-contact {
        min-height: 40px;
        font-size: 0.9rem;
    }
    .pd-apply-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .pd-apply-row .pd-apply-btn { width: 100%; text-align: center; }
}

/* ===========================================================
 * Tier 2 — very narrow phones (<480px), iPhone SE / compact
 * =========================================================== */
@media (max-width: 480px) {

    /* Modal — tighter padding, smaller spec values */
    .pd-modal-images { padding: 0.75rem !important; }
    .pd-modal-details { padding: 0.875rem !important; }
    .pd-modal-main-img img { height: 180px !important; }
    .pd-modal-spec-val { font-size: 0.85rem !important; }
    .pd-modal-spec-label { font-size: 0.62rem !important; }
    .pd-modal-action-btn { font-size: 0.78rem !important; padding: 0.6rem 0.4rem !important; }
    .pd-modal-title { font-size: 1rem !important; }
    .pd-modal-price { font-size: 1.15rem !important; }

    .pd-hero-title { font-size: 1.3rem !important; }
    .pd-section-title { font-size: 1.1rem !important; }
    .hero-title { font-size: 1.6rem !important; }
    .section-header h2 { font-size: 1.3rem !important; }
    .pd-cta h2 { font-size: 1.2rem !important; }

    .navbar-actions { gap: 0.4rem !important; }
    .btn-login, .btn-contact {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.82rem !important;
    }

    /* Hide the desktop login/contact buttons in the navbar at this
       width — the hamburger menu has the same links and we need
       the horizontal room for the logo. */
    .navbar-actions { display: none !important; }
}

/* ===========================================================
 * Touch-input refinement — don't leave links stuck in :hover
 * after a tap on coarse pointer devices.
 * =========================================================== */
@media (max-width: 768px) and (hover: none) {
    .pd-modal-action-btn:hover,
    .pd-modal-nav:hover,
    .btn:hover { transform: none !important; }
    .pd-apply-btn:hover { background: var(--primary-color); }
}