/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED HERO POLISH (E6)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-hero.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.7  (E6 — Visual Enhancement Roadmap v2)
 * @depends     ldt-tokens-enhanced.css      (E1 — gradients, shadows, glass tokens)
 *              ldt-enhanced-animations.css  (E3 — keyframes: ldt-ken-burns,
 *                                                  ldt-fade-up, ldt-pulse-glow,
 *                                                  ldt-badge-pulse, ldt-float-icon)
 *
 *   Hero polish for ALL hero variants (.ldt-hero--home, --explore, --archive,
 *   --region, --country, --city, --single, --about, --contact, --tool, --guide).
 *   PURE CSS LAYER — no PHP partial is modified. Hooks the existing flat class
 *   system already emitted by sections/heroes/hero-*.php:
 *
 *     .ldt-hero, .ldt-hero--{variant}, .ldt-hero-carousel
 *     .ldt-hero-carousel__stack
 *     .ldt-hero-slide, .ldt-hero-slide.is-active
 *     .ldt-hero-slide__bg, __overlay, __content, __wrap
 *     .ldt-hero-slide__badge, __subtitle, __title, __desc
 *     .ldt-hero-slide__ctas, __btn, __btn--primary, __btn--ghost
 *     .ldt-hero-slide__feature (explore variant)
 *     .ldt-hero-slide__stats, __stat (explore variant)
 *     .ldt-hero-shared, __wrap, __search, __stats, __stat, __stat-num, __stat-lbl
 *     .ldt-hero-carousel__arrows
 *     .ldt-autocomplete--hero (the search bar variant inside .ldt-hero-shared)
 *
 *   SPECIFICITY:
 *     The hero inline `<style>` blocks use plain class selectors (0,1,0)
 *     without ID-prefix scoping. Our `body .selector` (0,1,1) wins cleanly.
 *     For multi-class selectors (e.g., .ldt-hero-slide__btn--primary at 0,2,0),
 *     we use `body` + the selector to land at 0,2,1 — still wins.
 *
 *   KEN-BURNS ON ACTIVE SLIDE:
 *     The active slide gets a subtle `ldt-ken-burns` zoom animation on its
 *     background image. The animation runs while .is-active and resets when
 *     the slide deactivates — gives the hero "subtle motion" without being
 *     distracting.
 *
 *   PARTICLES:
 *     The `.ldt-hero-particles__canvas` element is inserted by ldt-hero-particles.js
 *     as the first child of every `.ldt-hero`. We define its layering rules
 *     here (defensive — JS sets inline styles too).
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. PARTICLE CANVAS — layering rules
 *
 * The canvas is inserted as the FIRST child of `.ldt-hero` so it sits behind
 * .ldt-hero-slide (the actual slides). We give it z-index 2 (between slide
 * background z-index 1 and content z-index 10) so particles drift behind
 * the hero copy but in front of the hero image overlay.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ldt-hero {
    /* Existing inline CSS already sets position:relative + overflow:hidden.
       We rely on that here. */
}

.ldt-hero-particles__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    /* Mix-blend-mode sometimes helps but creates issues with backdrop-filter
       fallbacks; keep it default and let opacity carry the day */
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. SLIDE BACKGROUND — Ken-Burns zoom on the active slide
 *
 * Existing rule: each `.ldt-hero-slide__bg` is a positioned full-cover
 * background-image div. We add subtle zoom-out (1.05 → 1.0) over 8s on the
 * active slide so the imagery feels alive.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide__bg {
    transform-origin: center center;
    will-change: transform;
}

body .ldt-hero-slide.is-active .ldt-hero-slide__bg {
    animation: ldt-ken-burns var(--ldt-duration-ken-burns, 8s) ease-out forwards;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
    body .ldt-hero-slide.is-active .ldt-hero-slide__bg {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. SLIDE OVERLAY — richer vignette gradient
 *
 * Existing rule sets a flat dark overlay with per-slide opacity. We layer a
 * directional gradient that's darker at the bottom (where text sits) and
 * lighter at the top — gives content more contrast without losing imagery.
 * Multi-stop linear gradient, brand-tinted at the bottom edge.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide__overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 53, 128, 0.65) 100%
    );
}

/* Variant: hero-home gets a slightly darker bottom for the search bar contrast */
body .ldt-hero--home .ldt-hero-slide__overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 30, 80, 0.75) 100%
    );
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. HERO BADGE — gradient pill + continuous glow pulse
 *
 * Existing rule sets a flat orange `var(--ldt-accent)` background with one-time
 * shadow. We swap to the accent gradient and add a continuous pulsing shadow
 * that breathes — matches the portal's "limited time / featured" badge feel.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide__badge span {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    box-shadow: var(--ldt-shadow-offer,
                0 4px 15px rgba(255, 140, 0, 0.40));
    animation: ldt-badge-glow 2.6s ease-in-out infinite;
}

/* Slight pulse — scales by 1.03 + shadow brightens, then settles */
@keyframes ldt-badge-glow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 140, 0, 0.40);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 6px 22px rgba(255, 140, 0, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-hero-slide__badge span {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. HERO SUBTITLE — gradient text fill on the uppercase orange line
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide__subtitle {
    background: linear-gradient(
        90deg,
        var(--ldt-accent, #ff8c00) 0%,
        #ffaa33 50%,
        var(--ldt-accent, #ff8c00) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ldt-accent, #ff8c00);  /* fallback */
    animation: ldt-subtitle-shine 4s ease-in-out infinite;
}

/* Shine — slowly slides the gradient across so the text catches light */
@keyframes ldt-subtitle-shine {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-hero-slide__subtitle {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. HERO TITLE — chiseled depth + optional gradient mask
 *
 * Existing rule: white title with `0 2px 10px rgba(0,0,0,0.25)` shadow.
 * We layer a deeper composite shadow that adds a subtle brand-blue glow plus
 * a soft white inner highlight on top — gives the title more "weight" on the
 * dark hero imagery without being heavy-handed.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide__title {
    text-shadow:
        0  2px 10px rgba(0,   0,   0, 0.35),
        0  6px 24px rgba(0,  20,  60, 0.45),
        0  0   40px rgba(0,  87, 184, 0.20);
    letter-spacing: -0.01em;
}

/* Variant: gradient-fill title — apply via .ldt-hero-slide__title--gradient
   if a section author wants the brand blue→accent gradient on the title.
   Not active by default — opt-in only. */
body .ldt-hero-slide__title.ldt-hero-slide__title--gradient,
body .ldt-hero-slide__title.is-gradient {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.92) 50%,
        var(--ldt-accent, #ff8c00) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. HERO DESCRIPTION — slight text-shadow for legibility
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide__desc {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. HERO CTA BUTTONS — accent gradient primary + glass-light ghost
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide__btn {
    transition:
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease),
        filter 250ms var(--ldt-ease-portal, ease),
        background-color 250ms var(--ldt-ease-portal, ease);
}

/* Primary CTA — accent gradient + brand-tinted shadow */
body .ldt-hero-slide__btn--primary {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    box-shadow: var(--ldt-shadow-accent,
                0 10px 30px rgba(255, 140, 0, 0.30));
    border: none;
    border-radius: var(--ldt-radius-input, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.01em;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-slide__btn--primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(255, 140, 0, 0.45);
        filter: brightness(1.06);
    }
}

body .ldt-hero-slide__btn--primary:focus-visible {
    outline: none;
    box-shadow:
        var(--ldt-shadow-accent, 0 10px 30px rgba(255, 140, 0, 0.30)),
        var(--ldt-ring-focus-accent, 0 0 0 3px rgba(255, 140, 0, 0.35));
}

/* Ghost CTA — glass-light treatment */
body .ldt-hero-slide__btn--ghost {
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.40);
    color: #ffffff;
    border-radius: var(--ldt-radius-input, 0.75rem);
    font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-slide__btn--ghost:hover {
        background: rgba(255, 255, 255, 0.20);
        border-color: rgba(255, 255, 255, 0.65);
        transform: translateY(-2px);
    }
}

body .ldt-hero-slide__btn--ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.50);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. SHARED HERO STATS — gradient numbers + accent underline on hover
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-shared__stat-num {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.92) 50%,
        var(--ldt-accent, #ff8c00) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    /* fallback color preserved in case bg-clip:text doesn't apply */
    color: #ffffff;
}

body .ldt-hero-shared__stat {
    position: relative;
    padding-bottom: 6px;
}

body .ldt-hero-shared__stat::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--ldt-accent, #ff8c00);
    transition: width 350ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-shared__stat:hover::after {
        width: 36px;
    }
}

[dir="rtl"] body .ldt-hero-shared__stat::after,
.ldt-rtl body .ldt-hero-shared__stat::after {
    left: auto;
    right: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. SHARED HERO SEARCH — glass-strong wrapper + brand-tinted shadow
 *
 * The search component renders as `.ldt-autocomplete.ldt-autocomplete--hero`.
 * We polish the hero variant specifically: stronger glass surface, brand-
 * tinted shadow, accent-orange focus ring on the input.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-shared__search .ldt-autocomplete--hero {
    /* The wrap itself — adds padding + glass surface */
    background: var(--ldt-glass-light-strong, rgba(255, 255, 255, 0.92));
    -webkit-backdrop-filter: blur(var(--ldt-glass-blur-strong, 32px)) saturate(var(--ldt-glass-saturate, 180%));
            backdrop-filter: blur(var(--ldt-glass-blur-strong, 32px)) saturate(var(--ldt-glass-saturate, 180%));
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--ldt-radius-feature, 1.875rem);
    padding: 8px;
    box-shadow:
        0 25px 70px -15px rgba(0, 53, 128, 0.45),
        0 0 0 1px rgba(0, 53, 128, 0.04);
    transition:
        box-shadow 350ms var(--ldt-ease-portal, ease),
        border-color 350ms var(--ldt-ease-portal, ease);
}

body .ldt-hero-shared__search .ldt-autocomplete--hero:focus-within {
    border-color: rgba(255, 140, 0, 0.55);
    box-shadow:
        0 25px 70px -15px rgba(0, 53, 128, 0.55),
        0 0 0 4px rgba(255, 140, 0, 0.20);
}

/* Inner input — readable on the glass surface */
body .ldt-hero-shared__search .ldt-autocomplete--hero .ldt-autocomplete__input {
    background: transparent;
    border: none;
    border-radius: var(--ldt-radius-feature, 1.875rem);
    color: var(--ldt-dark, #1e293b);
    font-weight: 500;
}

body .ldt-hero-shared__search .ldt-autocomplete--hero .ldt-autocomplete__input::placeholder {
    color: var(--ldt-gray-500, #94a3b8);
}

body .ldt-hero-shared__search .ldt-autocomplete--hero .ldt-autocomplete__input:focus {
    outline: none;
}

/* Search icon — brand color, accent on focus */
body .ldt-hero-shared__search .ldt-autocomplete--hero .ldt-autocomplete__icon {
    color: var(--ldt-primary-light, #0057b8);
    transition: color 200ms var(--ldt-ease-portal, ease);
}

body .ldt-hero-shared__search .ldt-autocomplete--hero:focus-within .ldt-autocomplete__icon {
    color: var(--ldt-accent, #ff8c00);
}

/* Popular chips below input */
body .ldt-hero-shared__search .ldt-autocomplete--hero .ldt-autocomplete__popular {
    margin-top: 8px;
    padding: 0 14px;
}

body .ldt-hero-shared__search .ldt-autocomplete--hero .ldt-autocomplete__popular-label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}

body .ldt-hero-shared__search .ldt-autocomplete--hero .ldt-autocomplete__popular a {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
    transition: color 200ms var(--ldt-ease-portal, ease);
}

body .ldt-hero-shared__search .ldt-autocomplete--hero .ldt-autocomplete__popular a:hover {
    color: var(--ldt-accent, #ff8c00);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 11. CAROUSEL ARROWS — glass-dark circles with accent on hover
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-carousel__arrows button,
body .ldt-hero-carousel__arrows .ldt-hero-arrow {
    background: var(--ldt-glass-dark, rgba(15, 23, 42, 0.55));
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transition:
        background-color 250ms var(--ldt-ease-portal, ease),
        border-color 250ms var(--ldt-ease-portal, ease),
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-carousel__arrows button:hover,
    body .ldt-hero-carousel__arrows .ldt-hero-arrow:hover {
        background: var(--ldt-gradient-accent,
                    linear-gradient(135deg, #ff8c00, #e07a00));
        border-color: transparent;
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(255, 140, 0, 0.40);
    }
}

/* Carousel dots — gradient on active dot */
body .ldt-hero-carousel__dots button.is-active,
body .ldt-hero-carousel__dots .is-active {
    background: var(--ldt-gradient-accent,
                linear-gradient(90deg, #ff8c00, #e07a00));
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.50);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 12. EXPLORE-VARIANT FEATURE CARD + STATS
 *
 * hero-explore.php emits .ldt-hero-slide__feature (a featured destination card
 * inside the slide content) and .ldt-hero-slide__stats (a small stats row).
 * Polish: glass-light feature card, accent price tag, gradient stat numbers.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide__feature {
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.20));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--ldt-radius-card, 1.25rem);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}

body .ldt-hero-slide__feature-name {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

body .ldt-hero-slide__feature-tag {
    color: var(--ldt-accent, #ff8c00);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}

body .ldt-hero-slide__feature-price {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00, #e07a00));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ldt-accent, #ff8c00);  /* fallback */
    font-weight: 800;
}

body .ldt-hero-slide__stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

body .ldt-hero-slide__stat {
    color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 13. CONTENT REVEAL — slide content fades up on activation
 *
 * When a slide becomes .is-active, its title/subtitle/desc/CTAs fade up in
 * sequence. Adds a sense of motion without competing with the ken-burns bg.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-slide.is-active .ldt-hero-slide__subtitle,
body .ldt-hero-slide.is-active .ldt-hero-slide__title,
body .ldt-hero-slide.is-active .ldt-hero-slide__desc,
body .ldt-hero-slide.is-active .ldt-hero-slide__ctas,
body .ldt-hero-slide.is-active .ldt-hero-slide__feature {
    animation: ldt-fade-up 700ms var(--ldt-ease-portal, ease) backwards;
}

body .ldt-hero-slide.is-active .ldt-hero-slide__subtitle { animation-delay:  80ms; }
body .ldt-hero-slide.is-active .ldt-hero-slide__title    { animation-delay: 160ms; }
body .ldt-hero-slide.is-active .ldt-hero-slide__desc     { animation-delay: 240ms; }
body .ldt-hero-slide.is-active .ldt-hero-slide__ctas     { animation-delay: 360ms; }
body .ldt-hero-slide.is-active .ldt-hero-slide__feature  { animation-delay: 280ms; }

/* Badge gets its own animation already (ldt-badge-glow). The first-paint
   appearance gets a one-shot zoom-in on the active slide. */
body .ldt-hero-slide.is-active .ldt-hero-slide__badge {
    animation: ldt-zoom-in 600ms var(--ldt-ease-portal, ease) backwards;
    animation-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-hero-slide.is-active .ldt-hero-slide__subtitle,
    body .ldt-hero-slide.is-active .ldt-hero-slide__title,
    body .ldt-hero-slide.is-active .ldt-hero-slide__desc,
    body .ldt-hero-slide.is-active .ldt-hero-slide__ctas,
    body .ldt-hero-slide.is-active .ldt-hero-slide__feature,
    body .ldt-hero-slide.is-active .ldt-hero-slide__badge {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 14. RESPONSIVE — tone polish on mobile
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Particles hidden on mobile (JS doesn't render them at <768px). The CSS
       below is defensive — if any particles survived, hide them. */
    .ldt-hero-particles__canvas {
        display: none;
    }

    /* Lighter ken-burns on mobile to save GPU cycles */
    body .ldt-hero-slide.is-active .ldt-hero-slide__bg {
        animation-duration: 12s;
    }

    /* Search wrapper less aggressive shadow on mobile */
    body .ldt-hero-shared__search .ldt-autocomplete--hero {
        box-shadow:
            0 12px 30px -10px rgba(0, 53, 128, 0.40),
            0 0 0 1px rgba(0, 53, 128, 0.04);
        border-radius: var(--ldt-radius-input, 0.75rem);
        padding: 6px;
    }

    /* CTA buttons stack normally — no visual change needed beyond existing */
}


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