/* =====================================================================
   mobile.css -- Mobile UX (P4.1)
   Quiet-luxury mobile-only enhancements:
     1. .mobile-bottom-bar       -- sticky 4-tab navigation (<=767px)
     2. .bottom-sheet            -- re-usable drawer (snap-points)
     3. .overlay-nav (.lx-mobile)-- full-screen drawer polish
     4. .lx-hero__gallery        -- swipable hero gallery (<=900px)
     5. Touch-target safeguards  -- 44x44 hit-area on mobile
   All sizes/colors come from luxury-tokens.css; logical properties
   only (RTL-safe).
   ===================================================================== */

/* ---------- 1. Mobile sticky bottom-bar ------------------------------ */
.mobile-bottom-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 56px;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--color-parchment, #F4F0E8);
    border-block-start: 1px solid var(--color-hairline, rgba(0,0,0,0.08));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 90;
    font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
    box-shadow: 0 -1px 0 rgba(15,20,25,0.04), 0 -4px 12px rgba(15,20,25,0.04);
}
.mobile-bottom-bar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-block-size: 44px;
    min-inline-size: 44px;
    color: var(--color-ink, #14322B);
    text-decoration: none;
    transition: color 200ms var(--ease-quiet, cubic-bezier(.4,0,.2,1));
}
.mobile-bottom-bar__item:hover,
.mobile-bottom-bar__item:focus-visible {
    color: var(--color-emerald-deep, #0E5E48);
    outline: none;
}
.mobile-bottom-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 22px;
    inline-size: 22px;
}
.mobile-bottom-bar__label {
    font-size: 10px;
    letter-spacing: var(--tracking-eyebrow, 0.12em);
    text-transform: uppercase;
    line-height: 1;
    opacity: 0.85;
}
.mobile-bottom-bar__item.is-active {
    color: var(--color-emerald-deep, #0E5E48);
}
.mobile-bottom-bar__item.is-active::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 12px;
    block-size: 2px;
    background: var(--color-emerald-deep, #0E5E48);
}

/* hidden on tablet+ */
@media (min-width: 768px) {
    .mobile-bottom-bar { display: none !important; }
}
@media (max-width: 767px) {
    body { padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 2. Bottom-sheet drawer ----------------------------------- */
.bottom-sheet {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1100;
    background: var(--color-parchment, #F4F0E8);
    color: var(--color-ink, #14322B);
    border-start-start-radius: 18px;
    border-start-end-radius: 18px;
    box-shadow: 0 -10px 40px rgba(15,20,25,0.18);
    transform: translateY(100%);
    transition: transform 320ms var(--ease-luxury, cubic-bezier(.22,1,.36,1));
    max-block-size: 92vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.bottom-sheet[aria-hidden="false"] {
    transform: translateY(0);
}
.bottom-sheet[data-snap="half"] {
    transform: translateY(50%);
}
.bottom-sheet__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,20,25,0);
    z-index: 1099;
    pointer-events: none;
    transition: background 320ms var(--ease-quiet, cubic-bezier(.4,0,.2,1));
}
.bottom-sheet__backdrop.is-visible {
    background: rgba(15,20,25,0.45);
    pointer-events: auto;
}
.bottom-sheet__handle {
    flex: 0 0 auto;
    align-self: center;
    inline-size: 44px;
    block-size: 4px;
    margin-block: 10px 8px;
    background: var(--color-hairline, rgba(0,0,0,0.18));
    border-radius: 999px;
    cursor: grab;
    touch-action: none;
}
.bottom-sheet__handle:active { cursor: grabbing; }
.bottom-sheet__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3, 12px);
    padding-inline: var(--sp-5, 20px);
    padding-block: var(--sp-2, 8px) var(--sp-3, 12px);
    border-block-end: 1px solid var(--color-hairline, rgba(0,0,0,0.08));
}
.bottom-sheet__title {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
    color: var(--color-ink, #14322B);
}
.bottom-sheet__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-ink, #14322B);
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 999px;
}
.bottom-sheet__close:focus-visible {
    outline: 2px solid var(--color-emerald-deep, #0E5E48);
    outline-offset: 2px;
}
.bottom-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--sp-4, 16px) var(--sp-5, 20px) calc(var(--sp-6, 24px) + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.bottom-sheet[aria-hidden="true"] {
    pointer-events: none;
}

@media (min-width: 1025px) {
    .bottom-sheet { display: none !important; }
    .bottom-sheet__backdrop { display: none !important; }
}

/* ---------- 3. Mobile overlay nav (.lx-mobile / .overlay-nav) -------- */
.lx-mobile {
    position: fixed;
    inset-block: 0;
    inset-inline-start: auto;
    inset-inline-end: 0;
    inline-size: min(420px, 100vw);
    background: var(--color-parchment, #F4F0E8);
    color: var(--color-ink, #14322B);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    padding: var(--sp-5, 20px);
    transform: translateX(100%);
    transition: transform 320ms var(--ease-luxury, cubic-bezier(.22,1,.36,1));
    visibility: hidden;
    box-shadow: -16px 0 48px rgba(15,20,25,0.18);
}
[dir="rtl"] .lx-mobile {
    transform: translateX(-100%);
}
.lx-mobile.is-open {
    transform: translateX(0);
    visibility: visible;
}
.lx-mobile[aria-hidden="false"] { visibility: visible; }

.lx-mobile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: var(--sp-4, 16px);
    border-block-end: 1px solid var(--color-hairline, rgba(0,0,0,0.08));
}
.lx-mobile__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-ink, #14322B);
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lx-mobile__nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
    padding-block: var(--sp-5, 20px);
    flex: 1 1 auto;
    overflow-y: auto;
}
.lx-mobile__link {
    font-family: var(--font-display, "Cormorant Garamond", serif);
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.1;
    color: var(--color-ink, #14322B);
    text-decoration: none;
    padding-block: var(--sp-2, 8px);
    min-block-size: 44px;
    transition: color 200ms var(--ease-quiet, cubic-bezier(.4,0,.2,1));
}
.lx-mobile__link:hover,
.lx-mobile__link:focus-visible {
    color: var(--color-emerald-deep, #0E5E48);
    outline: none;
}
.lx-mobile__foot {
    border-block-start: 1px solid var(--color-hairline, rgba(0,0,0,0.08));
    padding-block-start: var(--sp-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
}
.lx-mobile__lang {
    display: flex;
    gap: var(--sp-2, 8px);
}
.lx-mobile__lang-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--color-hairline, rgba(0,0,0,0.18));
    color: var(--color-ink, #14322B);
    padding: 6px 12px;
    min-block-size: 36px;
    font-family: var(--font-sans, system-ui);
    font-size: 12px;
    letter-spacing: var(--tracking-eyebrow, 0.12em);
    text-transform: uppercase;
    cursor: pointer;
}
.lx-mobile__lang-btn.is-active {
    background: var(--color-ink, #14322B);
    color: var(--color-parchment, #F4F0E8);
    border-color: var(--color-ink, #14322B);
}
.lx-mobile__auth {
    display: flex;
    gap: var(--sp-3, 12px);
    flex-wrap: wrap;
}

@media (min-width: 1025px) {
    .lx-mobile { display: none !important; }
}

.overlay-nav { /* compositional alias */ }

body.lx-no-scroll { overflow: hidden; touch-action: none; }

/* ---------- 4. Hero swipable gallery (mobile) ------------------------ */
@media (max-width: 900px) {
    .lx-listing-hero .lx-hero__picture-grid { display: none; }

    .lx-hero__gallery {
        position: relative;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        block-size: 60vh;
        min-block-size: 380px;
        background: var(--color-ink, #14322B);
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .lx-hero__gallery::-webkit-scrollbar { display: none; }
    .lx-hero__gallery { scrollbar-width: none; }

    .lx-hero__slide {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        position: relative;
        block-size: 100%;
    }
    .lx-hero__slide img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        display: block;
    }
    .lx-hero__dots {
        position: absolute;
        inset-inline: 0;
        inset-block-end: var(--sp-3, 12px);
        display: flex;
        justify-content: center;
        gap: 6px;
        z-index: 4;
        pointer-events: none;
    }
    .lx-hero__dots .dot {
        inline-size: 6px;
        block-size: 6px;
        border-radius: 999px;
        background: rgba(244,239,230,0.55);
        transition: inline-size 220ms var(--ease-quiet, cubic-bezier(.4,0,.2,1)),
                    background 220ms var(--ease-quiet, cubic-bezier(.4,0,.2,1));
    }
    .lx-hero__dots .dot.is-active {
        inline-size: 18px;
        background: var(--color-gold, #C9A86A);
    }
}
@media (min-width: 901px) {
    .lx-hero__gallery { display: none; }
}

/* ---------- 5. Touch-target safeguards ------------------------------- */
@media (max-width: 767px) {
    .btn-emerald,
    .btn-ink-outline,
    .btn-ghost,
    .btn-gold,
    .lx-icon-btn,
    .lx-link,
    .sidebar-nav-link,
    .lx-user__item {
        min-block-size: 44px;
        padding-block: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar-nav-link { justify-content: flex-start; }
    .lx-icon-btn { min-inline-size: 44px; }
    .lx-hamburger {
        min-block-size: 44px;
        min-inline-size: 44px;
    }
}