/**
 * Villa ONLY VIEW — Mobile Enhancements
 * ==============================================
 * Loaded after includes/styles.php so every rule wins on the cascade
 * when it shares specificity. Scope: user-facing pages (index, content,
 * contact, legal, etc.) that include the shared header/footer.
 *
 * Breakpoints (mobile-first overrides):
 *   ≤ 1024px  — tablet & below
 *   ≤ 768px   — phones (primary mobile breakpoint)
 *   ≤ 480px   — small phones (iPhone SE, etc.)
 *
 * Notes:
 *   - Uses attribute selectors ([class$="-grid"]) to catch the dozens
 *     of `*-grid` / `*-card` variations used across pages without
 *     touching each page's inline <style> block.
 *   - 16px base font on inputs prevents iOS Safari's zoom-on-focus.
 *   - 44px minimum touch targets follow WCAG 2.5.5.
 */

/* ==================================================================
   1. iOS safe-area + overflow guardrails
   ================================================================== */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

html, body { overflow-x: hidden; }

img { max-width: 100%; height: auto; }
video, iframe { max-width: 100%; }

/* Make any wide table scroll horizontally instead of breaking layout */
table { max-width: 100%; }

/* ==================================================================
   2. Tablet & below (≤ 1024px)
   ================================================================== */
@media (max-width: 1024px) {
    /* Generous section rhythm shrinks on tablet */
    section { padding: 3.5rem 1.75rem; }

    /* Two-up hardcoded grids become single column when content is dense */
    .contact-grid,
    .booking-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ==================================================================
   3. Phone (≤ 768px) — main mobile pass
   ================================================================== */
@media (max-width: 768px) {

    /* --- Typography & rhythm --- */
    body { font-size: 15.5px; }

    h1 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h3 { font-size: clamp(1.2rem, 4.8vw, 1.5rem); }

    section {
        padding: 2.75rem 1.25rem;
    }

    .section-header { margin-bottom: 2rem; }

    /* --- Nav polish --- */
    .nav {
        padding: 0.6rem 1rem !important;
    }
    .nav.scrolled {
        padding: 0.5rem 1rem !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        background: rgba(255, 255, 255, 0.92) !important;
    }
    .logo {
        font-size: 1.05rem;
        letter-spacing: 0.18em;
    }
    .lang-toggle {
        padding: 0.45rem 0.75rem;
        font-size: 0.8rem;
    }
    /* Nav right cluster: tighten gap */
    .nav > div:last-child { gap: 0.5rem !important; }

    /* --- Mobile drawer polish --- */
    .mobile-menu {
        padding: 5rem 1.5rem 2rem;
        justify-content: center;
        gap: 0.25rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-menu::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(1200px 600px at 20% -10%, rgba(201,169,98,0.18), transparent 60%),
            radial-gradient(900px 500px at 110% 110%, rgba(212,185,120,0.14), transparent 55%);
        pointer-events: none;
    }
    .mobile-menu a {
        font-size: 1.35rem;
        padding: 0.85rem 1rem;
        width: 100%;
        max-width: 420px;
        text-align: center;
        border-radius: 10px;
        letter-spacing: 0.02em;
        transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
        position: relative;
        z-index: 1;
    }
    .mobile-menu a:active {
        background: rgba(255,255,255,0.08);
        transform: scale(0.98);
    }
    .mobile-menu a.mobile-cta {
        margin-top: 0.75rem;
        background: var(--gold);
        color: var(--white);
        font-family: var(--font-body);
        font-size: 0.85rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        padding: 1rem 1.5rem;
        border-radius: 999px;
        box-shadow: 0 10px 30px rgba(201,169,98,0.35);
    }
    .mobile-menu a.mobile-cta:active {
        background: var(--gold-dark);
    }
    .mobile-menu-close {
        top: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Staggered entrance for menu items */
    .mobile-menu.open > a {
        animation: mm-slide-in 0.45s cubic-bezier(.2,.7,.2,1) both;
    }
    .mobile-menu.open > a:nth-child(2) { animation-delay: 0.04s; }
    .mobile-menu.open > a:nth-child(3) { animation-delay: 0.08s; }
    .mobile-menu.open > a:nth-child(4) { animation-delay: 0.12s; }
    .mobile-menu.open > a:nth-child(5) { animation-delay: 0.16s; }
    .mobile-menu.open > a:nth-child(6) { animation-delay: 0.20s; }
    .mobile-menu.open > a:nth-child(7) { animation-delay: 0.24s; }
    @keyframes mm-slide-in {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Hero sizing ---
       Keep the homepage hero full-bleed on mobile (100dvh stays impactful).
       Sub-page heros (contact-hero, legal-hero, faq-hero, etc.) are usually
       sized at 50–60vh with a tall `min-height` — cap those on small screens
       so content starts sooner. */
    .hero-content { padding: 0 0.25rem; }

    [class$="-hero"],
    [class*="-hero "] {
        min-height: 48vh !important;
        min-height: 48dvh !important;
        height: auto !important;
        padding-top: 5.5rem;
        padding-bottom: 2rem;
    }
    [class$="-hero"] h1,
    [class*="-hero "] h1 {
        font-size: clamp(1.85rem, 7vw, 2.5rem);
    }
    [class$="-hero"] p,
    [class*="-hero "] p {
        font-size: 0.95rem;
    }

    /* --- Generic grid collapse (catches *-grid across ~30 pages) --- */
    [class$="-grid"],
    [class*="-grid "] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    /* Preserve calendar (7-col weekday grid) + footer's own responsive rules */
    .qb-weekdays,
    .qb-days,
    .calendar-grid,
    .cal-days,
    [class*="calendar"] [class*="grid"],
    .footer-grid {
        grid-template-columns: revert !important;
        gap: revert !important;
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem 1rem !important;
    }

    /* --- Cards: softer padding, subtler elevation --- */
    .card,
    [class$="-card"],
    [class*="-card "] {
        padding: 1.25rem;
        border-radius: 14px;
    }

    /* --- Forms: touch-friendly sizing + no iOS zoom --- */
    .form-row { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .form-group input,
    .form-group select,
    .form-group textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 48px;
        padding: 0.85rem 1rem;
        border-radius: 10px;
    }
    textarea { min-height: 120px; }

    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .nav-cta,
    [class*="-btn"],
    [class*="btn-"] {
        min-height: 44px;
    }
    .btn-primary,
    .btn-secondary {
        padding: 0.85rem 1.5rem;
        font-size: 0.85rem;
    }

    /* Inputs the full width of their container */
    .form-group { margin-bottom: 1.1rem; }

    /* --- Footer: tighter rhythm, gold divider --- */
    .footer {
        padding: 2.25rem 1.25rem 1.5rem !important;
    }
    .footer-col:first-child {
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(201,169,98,0.25);
        margin-bottom: 0.5rem !important;
    }
    .footer-col h4 {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        margin-bottom: 0.6rem;
    }
    .footer-col ul a { font-size: 0.85rem; }
    .footer-logo { font-size: 1.25rem; }
    .footer-bottom { padding-top: 1rem; }
    .footer-bottom p { font-size: 0.75rem; }

    /* --- Floating buttons: stack & stay clear of iOS home bar --- */
    .whatsapp-fab,
    .fab-whatsapp {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
    }
    .whatsapp-fab svg,
    .fab-whatsapp svg { width: 24px; height: 24px; }

    .back-to-top {
        right: 16px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
    }

    /* --- Cookie banner: comfortable spacing above safe area --- */
    .cookie-banner {
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    }
    .cookie-content { gap: 0.85rem; }
    .cookie-buttons { width: 100%; justify-content: center; }
    .cookie-accept,
    .cookie-more {
        flex: 1;
        min-height: 44px;
        text-align: center;
    }

    /* --- Related links strip: scrollable horizontal on mobile --- */
    .related-links,
    .related-pages {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        padding-bottom: 0.25rem;
    }
    .related-links > *,
    .related-pages > * {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }

    /* --- Prevent aggressive zoom on tap for interactive elements --- */
    a, button, .btn, .lang-toggle, .menu-toggle {
        -webkit-tap-highlight-color: rgba(201, 169, 98, 0.2);
        touch-action: manipulation;
    }
}

/* ==================================================================
   4. Small phones (≤ 480px) — iPhone SE, older Android
   ================================================================== */
@media (max-width: 480px) {
    section { padding: 2.25rem 1rem; }

    [class$="-hero"],
    [class*="-hero "] {
        min-height: 44vh !important;
        min-height: 44dvh !important;
    }
    .hero h1 { font-size: 1.85rem; }
    .hero p  { font-size: 0.95rem; padding: 0 0.5rem; }

    .logo { font-size: 0.95rem; letter-spacing: 0.14em; }

    /* Footer collapses to single column below 420px only */
    .footer-grid { gap: 1.25rem 0.75rem !important; }

    .card,
    [class$="-card"],
    [class*="-card "] {
        padding: 1rem;
    }

    /* Buttons expand to sensible width on very small screens */
    .btn-primary,
    .btn-secondary,
    .nav-cta {
        width: auto;
        max-width: 100%;
    }

    /* Ensure back-to-top doesn't collide with FAB */
    .back-to-top {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 380px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .footer-col:first-child { text-align: center; }
}

/* ==================================================================
   5. Landscape phone — hero needs more breathing room
   ================================================================== */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 900px) {
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: 4.5rem;
    }
    .mobile-menu {
        justify-content: center;
        padding-top: 3.5rem;
    }
    .mobile-menu a { font-size: 1.1rem; padding: 0.55rem 1rem; }
}

/* ==================================================================
   6. Reduced motion — respect the OS toggle
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu.open > a,
    .fade-in,
    .fade-in-left,
    .fade-in-right {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}