/* The Haven Collection | Mobile UX audit fixes
 * Targeted improvements for common mobile issues, without
 * disturbing the existing desktop layout. All rules are guarded
 * by media queries so they only apply at the intended breakpoints.
 */

/* Prevent iOS from zooming into a form when the input font-size
   is below 16px. Applies to all form inputs across the site. */
@media (max-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Ensure touch targets meet the 44x44 minimum recommended by
   Apple and Google for accessibility. */
@media (max-width: 768px) {
    .booking-submit,
    .hero-cta,
    .destination-cta,
    .collection-cta,
    .service-cta,
    .inquiry-submit-btn,
    .aman-reserve-btn,
    .submit-btn,
    .payment-opt {
        min-height: 44px;
    }

    /* Ensure nav links have a real touch target: inline elements
       ignore vertical padding for hit area, so make them
       inline-block with enough padding to reach ~34px tall. */
    .nav-left a,
    .nav-right a,
    .lang-switcher .lang-link {
        display: inline-block;
        padding: 8px 2px;
    }

    .hc-currency-switcher {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* The stacked mobile nav (logo + two link rows) was eating
       ~160px of an 812px screen. Tighten it. */
    .nav {
        gap: 0.25rem;
        padding-top: 0.6rem;
        padding-bottom: 0.5rem;
    }

    .logo-mark {
        height: 18px;
    }
}

/* Nav on very narrow screens (below 480px): allow items to wrap
   or hide non-essential links to prevent overflow. */
@media (max-width: 520px) {
    .nav {
        padding: 1rem;
    }
    /* Hide Journal on the smallest screens; it's still reachable
       from the footer. */
    .nav-left a[href="/blog"] {
        display: none;
    }
}

/* Hero sections often eat too much of the viewport on shorter
   phones. Cap them so the visitor sees the beginning of the
   next section without excessive scrolling. */
@media (max-width: 640px) and (max-height: 800px) {
    .home-hero,
    .concierge-aman-hero,
    .about-aman-hero,
    .contact-aman-hero,
    .aman-hero,
    .blog-hero {
        min-height: 78vh;
    }
}

/* Prevent horizontal scroll caused by any wide inline content on
   narrow screens. */
html, body {
    overflow-x: hidden;
}

/* On mobile, cards inside grids should not have too much padding
   since they take the full width. */
@media (max-width: 480px) {
    .destination-content,
    .collection-content,
    .service-content {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .comparison-cell {
        padding: 1rem 1rem;
        font-size: 0.85rem;
    }

    /* Body font size stays legible on 320-390px devices */
    .concierge-intro-text,
    .story-lead,
    .story-secondary {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* iOS Safari sometimes leaves gaps around fixed elements when the
   URL bar collapses. This kills any accidental horizontal scroll. */
.floating-reserve,
.hc-launcher,
.hc-panel {
    max-width: 100vw;
    box-sizing: border-box;
}

/* Fix Flatpickr calendar overflow on very small phones. */
@media (max-width: 380px) {
    .flatpickr-calendar {
        max-width: calc(100vw - 20px) !important;
    }
    .flatpickr-day {
        max-width: 12.5% !important;
    }
}

/* Make sure the concierge panel does not exceed viewport height
   on very short screens */
@media (max-height: 720px) {
    .hc-panel {
        height: calc(100vh - 32px);
        max-height: calc(100vh - 32px);
    }
}

/* Ensure images inside article prose never overflow their column.
   Card containers (.destination-image, .collection-image,
   .blog-card-image) are excluded on purpose: their imgs must keep
   height:100% to fill the fixed-height card, and height:auto here
   was overriding that and collapsing the card photos. */
.article-body img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* On the destination table, stack cells clearly on mobile */
@media (max-width: 768px) {
    .comparison-row {
        margin-bottom: 0.5rem;
    }
}