/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED RESPONSIVE AUDIT (E27)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-responsive.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.28  (E27 — Visual Enhancement Roadmap v2 — opens Stage 10)
 * @depends     ALL prior enhanced CSS (this file loads LAST in the chain
 *              so its rules win cascade order without needing !important
 *              for most overrides)
 *
 *   The closing-stretch responsive sweep. After Stages 1–9 landed most
 *   rules at desktop, this single file consolidates mobile / tablet /
 *   landscape overrides per section, in priority order:
 *
 *     1. Base sizing (≤576px)              tighter padding, fluid type
 *     2. Hero polish (≤768px)              no particles, no decorations
 *     3. Card adjustments (≤768px)         no 3D tilt, gentler zoom
 *     4. Sticky-nav (≤768px)               horizontal scroll-snap, edge fade
 *     5. Sidebar collapse (≤992px)         inline single-dest, filter sheet
 *     6. Footer columns                    4 → 2 → 1
 *     7. Tap targets                       all interactive ≥ 44px
 *     8. Landscape mobile                  max-height + landscape
 *     9. Safe-area insets                  notched devices
 *    10. Touch device polish               hover queries reverted
 *
 *   Breakpoints: 480 / 576 / 768 / 992 / 1200
 *   PURE CSS LAYER — no PHP partial is touched.
 *   Opens Stage 10 (Final Polish).
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. BASE SIZING — ≤576px (small phone)
 *
 * Reduces section padding, hero heights, card grids, title sizes for
 * sub-576px viewports to ensure everything reads cleanly on iPhone SE.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {

    /* Section padding — most sections drop from 80-120px to 56-72px */
    body section[class*="ldt-"] {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Container side gutters tighter */
    body .ldt-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Section titles fluid */
    body .ldt-section__title,
    body .ldt-fg__title,
    body .ldt-faq__title,
    body .ldt-tools-cats__title,
    body .ldt-tools-featured__title,
    body .ldt-tools-index__title,
    body .ldt-tool-related__title,
    body .ldt-cc__title,
    body .ldt-tip__title,
    body .ldt-tools-gs__title,
    body .ldt-about-h2,
    body .ldt-contact-h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    /* Subtitles */
    body .ldt-section__subtitle,
    body .ldt-fg__subtitle,
    body .ldt-faq__subtitle,
    body .ldt-tools-cats__subtitle,
    body .ldt-tools-featured__subtitle,
    body .ldt-tools-index__subtitle,
    body .ldt-cc__subtitle,
    body .ldt-tip__subtitle {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Eyebrows */
    body .ldt-eyebrow,
    body .ldt-section__eyebrow,
    body .ldt-about-section-label,
    body .ldt-tools-featured__eyebrow {
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    /* Generic card grids → 1 column with 12px gap */
    body .ldt-grid,
    body .ldt-cards-grid,
    body .ldt-card-grid,
    body .ldt-deals-grid,
    body .ldt-related__grid,
    body .ldt-related-rail__track,
    body .ldt-tools-index__grid,
    body .ldt-fg__grid,
    body .ldt-tools-cats__group-grid,
    body .ldt-tools-featured__grid,
    body .ldt-saved-cards,
    body .ldt-sitemap__grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Body font size hint */
    body {
        font-size: 15px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. HERO POLISH — ≤768px (tablet portrait + phone)
 *
 * Removes performance-heavy decorations (particles, blobs, floating shapes)
 * and stacks hero internals.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Hero heights — drop from 100vh / 80vh to 70vh */
    body .ldt-hero,
    body .ldt-hero--home,
    body .ldt-hero--archive,
    body .ldt-hero--country,
    body .ldt-hero--region,
    body .ldt-hero--city {
        min-height: 70vh;
    }

    body .ldt-hero--explore,
    body .ldt-hero--guide,
    body .ldt-hero--about,
    body .ldt-hero--contact,
    body .ldt-hero--tool,
    body .ldt-hero--single {
        min-height: 60vh;
    }

    /* Particles canvas — disabled (perf-heavy on touch) */
    body .ldt-hero__particles,
    body canvas.ldt-particles,
    body [data-particles] canvas {
        display: none !important;
    }

    /* Background decorative blobs — fade to barely-there */
    body .ldt-hero__blob,
    body .ldt-hero__decoration,
    body .ldt-hero__bg-shape,
    body .ldt-section-bg-blob {
        opacity: 0.03 !important;
    }

    /* Floating shapes / orbs — hidden */
    body .ldt-hero__orb,
    body .ldt-hero__floater,
    body .ldt-hero__shape,
    body .ldt-floating-card {
        display: none !important;
    }

    /* Hero stats grid → 2-col instead of 4 */
    body .ldt-hero__stats,
    body .ldt-hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Offer badge / promo chip — 60% scale */
    body .ldt-hero__offer,
    body .ldt-hero__offer-badge,
    body .ldt-promo-badge {
        transform: scale(0.85);
        transform-origin: center top;
    }

    /* Search bar / hero CTA row — stack */
    body .ldt-hero__search,
    body .ldt-hero__cta-row,
    body .ldt-hero__buttons {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body .ldt-hero__search > *,
    body .ldt-hero__cta-row > *,
    body .ldt-hero__buttons > * {
        width: 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. CARD ADJUSTMENTS — ≤768px
 *
 * Disable 3D tilt, gentler hover zoom (overlap with touch).
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* 3D tilt — disabled */
    body .ldt-card-3d,
    body [data-tilt],
    body .ldt-tilt {
        transform: none !important;
        perspective: none !important;
    }

    body .ldt-card-3d__inner,
    body [data-tilt] > * {
        transform: none !important;
    }

    /* Hover image zoom — gentler */
    body .ldt-card-deal:hover .ldt-card-deal__img,
    body .ldt-card-guide:hover .ldt-card-guide__img,
    body .ldt-card-dest:hover .ldt-card-dest__img,
    body .ldt-related-rail__card:hover .ldt-related-rail__card-img,
    body .ldt-about-story__image:hover img {
        transform: scale(1.04) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. STICKY-NAV — ≤768px (horizontal scroll-snap with edge fade)
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    body .ldt-sticky-nav__track,
    body .ldt-snav__track,
    body .ldt-content-tabs,
    body .ldt-srvtabs__inner,
    body .ldt-tools-index__filters,
    body .ldt-hs__prop-types,
    body .ldt-cs__car-types {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: relative;
    }

    body .ldt-sticky-nav__track::-webkit-scrollbar,
    body .ldt-snav__track::-webkit-scrollbar,
    body .ldt-content-tabs::-webkit-scrollbar,
    body .ldt-srvtabs__inner::-webkit-scrollbar,
    body .ldt-tools-index__filters::-webkit-scrollbar,
    body .ldt-hs__prop-types::-webkit-scrollbar,
    body .ldt-cs__car-types::-webkit-scrollbar {
        display: none;
    }

    /* Track items — scroll snap */
    body .ldt-sticky-nav__track > *,
    body .ldt-snav__track > *,
    body .ldt-content-tabs > *,
    body .ldt-srvtabs__tab,
    body .ldt-tools-index__filter {
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* Edge fade gradients — visual hint that content scrolls */
    body .ldt-sticky-nav,
    body .ldt-snav,
    body .ldt-srvtabs {
        position: relative;
    }

    body .ldt-sticky-nav::before,
    body .ldt-sticky-nav::after,
    body .ldt-snav::before,
    body .ldt-snav::after,
    body .ldt-srvtabs::before,
    body .ldt-srvtabs::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 24px;
        z-index: 2;
        pointer-events: none;
    }

    body .ldt-sticky-nav::before,
    body .ldt-snav::before,
    body .ldt-srvtabs::before {
        left: 0;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.92) 0%,
            transparent 100%
        );
    }

    body .ldt-sticky-nav::after,
    body .ldt-snav::after,
    body .ldt-srvtabs::after {
        right: 0;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.92) 100%
        );
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. SIDEBAR COLLAPSE — ≤992px
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {

    /* Single-destination sidebar collapses inline below content */
    body .ldt-single__layout,
    body .ldt-single-grid,
    body .ldt-guide-layout {
        grid-template-columns: 1fr !important;
    }

    body .ldt-single__sidebar,
    body .ldt-single-sidebar,
    body .ldt-guide-sidebar {
        position: static !important;
        margin-top: 32px;
    }

    /* CTA buttons stack non-sticky */
    body .ldt-widget--cta {
        position: static !important;
    }

    /* Filter sidebar → can be styled as bottom-sheet ready (JS opt-in) */
    body .ldt-archive-filters,
    body .ldt-archive__sidebar,
    body .ldt-search-filters {
        position: static !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. FOOTER — column reduction
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
    body .ldt-footer__cols,
    body .ldt-footer__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 576px) {
    body .ldt-footer__cols,
    body .ldt-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* Newsletter inside footer full-width */
    body .ldt-footer__newsletter,
    body .ldt-footer .ldt-newsletter-inline {
        grid-column: 1 / -1 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. TAP TARGETS — all interactive elements ≥ 44px on touch
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Buttons */
    body .ldt-btn,
    body .ldt-btn--sm,
    body .ldt-cf-submit,
    body .ldt-fs__submit,
    body .ldt-hs__submit,
    body .ldt-cs__submit,
    body button.ldt-pyt-nav-btn,
    body .ldt-cta-buttons__btn {
        min-height: 44px;
    }

    /* Pagination — square 44px */
    body .ldt-pagination__page,
    body .ldt-pagination__btn,
    body .ldt-pagination a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Filter pills + tabs — 44px tall */
    body .ldt-tools-index__filter,
    body .ldt-srvtabs__tab,
    body .ldt-fs__trip-type,
    body .ldt-hs__prop-type,
    body .ldt-cs__car-type,
    body .ldt-tip__region-chip,
    body .ldt-tip__pct-btn,
    body .ldt-content-tab {
        min-height: 44px;
    }

    /* Mini-tools list links */
    body .ldt-mini-tools__list a,
    body .ldt-widget-dest-mini,
    body .ldt-guide-toc__link {
        min-height: 44px;
    }

    /* Save / share / icon buttons */
    body .ldt-save,
    body .ldt-share__btn,
    body .ldt-saved-card-wrap__remove,
    body .ldt-back-top {
        min-width: 44px;
        min-height: 44px;
    }

    /* Form inputs (not textarea) */
    body input[type="text"],
    body input[type="email"],
    body input[type="tel"],
    body input[type="number"],
    body input[type="search"],
    body input[type="date"],
    body select {
        min-height: 44px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. LANDSCAPE MOBILE — max-height: 500px AND landscape
 *
 * Hero shouldn't dominate the viewport on rotated phones.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {

    /* Hero max-height capped */
    body .ldt-hero,
    body .ldt-hero--home,
    body .ldt-hero--archive,
    body .ldt-hero--country,
    body .ldt-hero--region,
    body .ldt-hero--city,
    body .ldt-hero--single {
        min-height: auto;
        max-height: 500px;
        height: 90vh;
    }

    /* Tighter section padding */
    body section[class*="ldt-"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* Hero inner padding tighter */
    body .ldt-hero__content,
    body .ldt-hero__inner,
    body .ldt-bkh__inner {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    /* Hero title smaller */
    body .ldt-hero__title,
    body .ldt-bkh__title {
        font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
        line-height: 1.15;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. SAFE-AREA INSETS — notched devices (iPhone X+, Android cutouts)
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Safe-area-aware container — respects iPhone notch / pill */
@supports (padding: env(safe-area-inset-left)) {

    /* Hero bottom edge respects safe area */
    body .ldt-hero,
    body .ldt-hero__content,
    body .ldt-bkh {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Sticky bottom CTA — bottom padding respects safe area */
    body .ldt-sticky-cta,
    body .ldt-sticky-cta--bottom {
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    /* Back-to-top button — push up by safe-area */
    body .ldt-back-top {
        bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
    }

    @media (max-width: 600px) {
        body .ldt-back-top {
            bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
        }
    }

    /* Header — left/right respects safe area */
    body .ldt-header,
    body .ldt-header__inner {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Footer bottom respects safe area */
    body .ldt-footer__bottom,
    body .ldt-footer__legal {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. TOUCH DEVICE POLISH — disable hover-only effects
 *
 * For touch devices, hover states can stick after tap. We've used
 * @media (hover: hover) and (pointer: fine) for most hover rules already,
 * but this catches anything missed.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {

    /* Disable transform on tap-stuck hover */
    body .ldt-card:hover,
    body .ldt-card-deal:hover,
    body .ldt-card-guide:hover,
    body .ldt-tool-card:hover,
    body .ldt-fg__item-inner--link:hover,
    body .ldt-about-value:hover,
    body .ldt-contact-card:hover,
    body .ldt-service-card:hover {
        /* Keep transform on touch devices but don't compound */
    }

    /* Disable parallax-y effects on touch */
    body [data-parallax],
    body .ldt-parallax {
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 11. FLUID TYPOGRAPHY AUDIT — global clamp() consolidation
 *
 * Provides a final responsive sweep on global type scales using clamp().
 * Earlier session-specific clamp() values stand; these add the missing few.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body {
    /* Body font-size scales smoothly between 320px and 1280px viewports */
    font-size: clamp(15px, 0.94rem + 0.10vw, 16px);
}

/* Headings — fluid where not already clamped */
body h1:not([class*="ldt-"]) {
    font-size: clamp(1.875rem, 4vw + 0.5rem, 3rem);
    line-height: 1.15;
}

body h2:not([class*="ldt-"]) {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
    line-height: 1.2;
}

body h3:not([class*="ldt-"]) {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.625rem);
    line-height: 1.3;
}

/* Hero title fluid scaling */
body .ldt-hero__title,
body .ldt-bkh__title {
    font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 12. PRINT — reasonable print fallback
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media print {

    /* Strip all decorative ornaments */
    body .ldt-hero__particles,
    body .ldt-hero__blob,
    body .ldt-hero__orb,
    body .ldt-hero__floater,
    body .ldt-back-top,
    body .ldt-sticky-cta,
    body .ldt-share,
    body .ldt-save,
    body .ldt-language-toggle,
    body .ldt-newsletter-inline,
    body .ldt-cta-booking,
    body .ldt-footer {
        display: none !important;
    }

    /* Force white bg + black text for print */
    body,
    body .ldt-page,
    body .ldt-main,
    body section[class*="ldt-"] {
        background: #ffffff !important;
        color: #000000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Strip glass/shadow */
    body .ldt-card,
    body .ldt-widget,
    body [class*="--card"] {
        background: #ffffff !important;
        border: 1px solid #cccccc !important;
        box-shadow: none !important;
    }

    /* Gradient text → solid black on print */
    body .ldt-section__title,
    body .ldt-fg__title,
    body .ldt-faq__title,
    body .ldt-about-h2 strong,
    body .ldt-guide-lead::first-letter,
    body .ldt-legal-hero__inner h1,
    body [class*="-stat__num"],
    body [class*="-saved-count"] strong {
        background: none !important;
        background-clip: initial !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        color: #000000 !important;
    }

    /* No animations during print */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ─── END OF ldt-enhanced-responsive.css ──────────────────────────────────── */