/**
 * Mobile UX Enhancements v1.0.6 (Apr 2026 — is-home: no #app horizontal inset; hero owns safe-area)
 * Safe area, touch targets, contrast, reduced motion.
 * Foundation scroll/overflow: overflow-scroll-unified.css; scroll-padding: layout-base.css.
 * Nota: stato :active su .btn guest è SSOT in button-system-unified.css (evitare duplicati qui).
 */

/* ============================================
   BODY TYPOGRAPHY - 16px mobile (readability, no zoom, conversion)
   ============================================ */
@media (max-width: 767.98px) {
  body:is(.guest-layout, .owner-area, .user-area, .admin-area) {
    font-size: var(--font-size-body-mobile);
  }
}

/* ============================================
   SAFE AREA - Inset orizzontale su schermi con notch (guest / contenuto principale)
   ============================================ */
@media (max-width: 767.98px) {
  @supports (padding: env(safe-area-inset-left)) {
    body.guest-layout #app {
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
    }

    /* Homepage: full-bleed hero applies horizontal safe-area on the section (guest-home.css),
       not on #app — avoids white side gutters while keeping content off the notch. */
    body.guest-layout.is-home #app {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

/* ============================================
   FOOTER MOBILE - Tap targets 44px, compact layout
   ============================================ */
@media (max-width: 767.98px) {
    .home-footer .footer-cta .cta-buttons .btn,
    .home-footer .footer-main .footer-links a,
    .home-footer .footer-main .social-icon,
    .home-footer .support-float .support-btn {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        padding: var(--spacing-2-5) var(--spacing-4);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .home-footer .footer-main .footer-links li {
        margin-bottom: var(--spacing-1);
    }
    .home-footer .footer-column {
        text-align: center;
    }
    .home-footer .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-1);
    }
}

/* ============================================
   HERO + SEARCH - Mobile clamp, no squeeze
   ============================================ */
@media (max-width: 767.98px) {
    .hero--full-bleed .hero__title--minimal,
    .hero--full-bleed__title {
        font-size: clamp(1.375rem, 5.5vw, 2rem);
        line-height: var(--line-height-tight, 1.25);
    }

    .hero--full-bleed__search-wrap,
    .hero--full-bleed__content {
        min-width: 0;
    }
}

/* Category tabs mobile: canonical in components/navigation-tabs.css (token-based touch target + padding) */

/* ============================================
   MODAL CLOSE BUTTON - 44px touch target (WCAG 2.5.5)
   ============================================ */
@media (max-width: 767.98px) {
    body.guest-layout .modal .btn-close {
        min-width: var(--touch-target-min, 44px);
        min-height: var(--touch-target-min, 44px);
        padding: var(--spacing-2, 0.5rem);
        margin: calc(var(--spacing-1, 0.25rem) * -1) calc(var(--spacing-1, 0.25rem) * -1) 0 0;
        background-size: 1rem 1rem;
    }
}

/* ============================================
   FEATURED / MORE LISTINGS - Spacing, first card emphasis
   ============================================ */
@media (max-width: 767.98px) {
    .guest-listings-grid,
    .discover-listings-grid {
        gap: var(--spacing-4, 1rem);
    }

    #discover-section .section-heading,
    .featured-section .section-heading {
        margin-bottom: var(--spacing-4, 1rem);
    }
}

/* Card listing CTA tap targets: components/listing-card.css */

/* ============================================
   READ MORE / COLLAPSE - Smooth, reduced motion
   ============================================ */
.listing-detail__description-toggle,
.read-more-trigger {
    min-height: var(--touch-target-min);
    padding: var(--spacing-2) var(--spacing-3);
    display: inline-flex;
    align-items: center;
}
@media (prefers-reduced-motion: reduce) {
    .listing-detail__description [data-collapse],
    .read-more-content {
        transition: none;
    }

    .guest-layout .hero--full-bleed__bg {
        transition: none;
    }
}

/* ============================================
   SEARCH FIELDS MOBILE - 44px, 16px font (no zoom)
   ============================================ */
@media (max-width: 767.98px) {
    .search-field .search-input,
    .search-field select.search-input {
        font-size: 16px;
        min-height: var(--touch-target-min);
    }
}

/* ============================================
   SEARCH OVERLAY - Full screen on mobile (optional)
   ============================================ */
@media (max-width: 767.98px) {
    .search-overlay-mobile.active {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: var(--color-white);
        overflow-y: auto;
        padding: max(var(--spacing-4), env(safe-area-inset-top)) var(--spacing-4) max(var(--spacing-4), env(safe-area-inset-bottom));
    }
}

/* ============================================
   AUTH MODAL - Full screen mobile, 16px input, 44px CTA
   ============================================ */
@media (max-width: 767.98px) {
    .auth-modal-container .form-control,
    .auth-modal-container input[type="email"],
    .auth-modal-container input[type="password"],
    .auth-modal-container input[type="text"] {
        font-size: 16px;
        min-height: var(--touch-target-min);
    }
}

/* .navbar-toggler / .card--listing :active: componenti dedicati | .btn guest :active: button-system-unified.css */

/* ============================================
   GUEST MAIN NAVBAR — collapsed menu scroll + group labels (Apr 2026)
   ============================================ */
@media (max-width: 767.98px) {
    #mainNavbar .guest-nav-group {
        list-style: none;
    }

    #mainNavbar .ce-nav-category-split__link.nav-link {
        min-height: var(--touch-target-min, 2.75rem);
        display: inline-flex;
        align-items: center;
    }
}

/* ============================================
   CONTRAST - Prices & badges on dark/light
   ============================================ */
.price-amount,
.mobile-cta__price-amount,
.listing-detail__price-from {
    color: var(--text-primary);
    font-weight: 700;
}
/* .card--listing__badge: components/listing-card.css (senza priorità forzata) */

/* ============================================
   RECAP MODAL - Scroll body, sticky footer + safe area
   ============================================ */
@media (max-width: 767.98px) {
    #bookingRecapModal .booking-recap__footer {
        flex-shrink: 0;
        padding-bottom: max(var(--spacing-3), env(safe-area-inset-bottom));
    }
}