/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ENHANCED PAGE-HERO POLISH (E8)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-hero-pages.css
 * @package     Lavisa_Destinations_Theme
 * @since       2.9.9  (E8 — Visual Enhancement Roadmap v2)
 * @depends     ldt-tokens-enhanced.css       (E1 — gradients, shadows, glass tokens)
 *              ldt-enhanced-animations.css   (E3 — keyframes: ldt-fade-up, ldt-zoom-in,
 *                                                   ldt-bounce-in, ldt-ken-burns)
 *              ldt-enhanced-hero.css         (E6 — base hero polish, particle layer,
 *                                                   carousel-hero polish)
 *              ldt-enhanced-hero-variants.css (E7 — secondary hero variants polish)
 *
 *   Polishes the page-specific hero variants used by:
 *
 *     hero-single.php    Single destination page (most complex hero in the
 *                        theme — gallery carousel + IATA + tags + Save button +
 *                        dynamic type badge + dual-name display)
 *     hero-guide.php     Travel guide pages (static bg + meta strip with date
 *                        + reading time)
 *
 *   ABOUT THE OTHER E8-SCOPE HEROES:
 *     hero-about.php / hero-contact.php / hero-tool.php all reuse the
 *     `.ldt-hero-carousel` + `.ldt-hero-slide__*` class system already polished
 *     by ldt-enhanced-hero.css (E6). They get the visual treatment automatically
 *     — no new rules needed here.
 *
 *   PARTICLE CANVAS:
 *     Already works on these heroes from E6 (JS targets `.ldt-hero` which
 *     hero-single + hero-guide both have).
 *
 *   SPECIFICITY:
 *     Existing inline styles use plain class selectors (0,1,0). Our `body
 *     .selector` rules at 0,1,1 win cleanly. The save-button polish targets
 *     `.ldt-btn.ldt-hero-single__save` (0,2,0); our `body` prefix lands at
 *     0,2,1 — wins.
 *
 *   ZERO PHP EDITS:
 *     Same approach as E4-E7. The two unique hero PHP files in sections/heroes/
 *     stay byte-identical to baseline.
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. SINGLE DESTINATION HERO — overall layout + overlay
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Overlay — same multi-stop dark → brand-blue gradient as E6/E7 */
body .ldt-hero--single .ldt-hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(0,  0,  0, 0.30) 0%,
        rgba(0,  0,  0, 0.50) 45%,
        rgba(0, 30, 80, 0.78) 100%
    ) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. SINGLE — gallery carousel + ken-burns on active slide
 * ═══════════════════════════════════════════════════════════════════════════════ */

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

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

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


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. SINGLE — content layer (badges + name + tags + actions)
 *
 * Apply a one-shot fade-up reveal stagger on first paint, similar to what
 * E7 does for static hero variants.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero--single .ldt-hero__breadcrumb,
body .ldt-hero-single__badges,
body .ldt-hero-single__name,
body .ldt-hero-single__name-alt,
body .ldt-hero-single__tags,
body .ldt-hero-single__actions {
    animation: ldt-fade-up 700ms var(--ldt-ease-portal, ease) backwards;
}

body .ldt-hero--single .ldt-hero__breadcrumb { animation-delay:  50ms; }
body .ldt-hero-single__badges                 { animation-delay: 130ms; }
body .ldt-hero-single__name                   { animation-delay: 210ms; }
body .ldt-hero-single__name-alt               { animation-delay: 270ms; }
body .ldt-hero-single__tags                   { animation-delay: 330ms; }
body .ldt-hero-single__actions                { animation-delay: 410ms; }

@media (prefers-reduced-motion: reduce) {
    body .ldt-hero--single .ldt-hero__breadcrumb,
    body .ldt-hero-single__badges,
    body .ldt-hero-single__name,
    body .ldt-hero-single__name-alt,
    body .ldt-hero-single__tags,
    body .ldt-hero-single__actions {
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. SINGLE — type badge + IATA badge polish
 *
 * The type badge gets its background-color injected inline by PHP (per-type
 * dynamic color). We add border, shadow, uppercase, weight polish on top.
 * The IATA badge becomes a glass-light pill with monospace styling.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-single__badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body .ldt-hero-single__type-badge {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.20);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body .ldt-hero-single__iata {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.18)) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: var(--ldt-radius-chip, 0.5rem);
    color: #ffffff;
    font-family: var(--ldt-font-mono, 'JetBrains Mono', 'Courier New', monospace);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. SINGLE — destination name + alt name polish
 * ═══════════════════════════════════════════════════════════════════════════════ */

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

/* Alt name (e.g. native script "ประเทศไทย" under "Thailand") — italic + softer */
body .ldt-hero-single__name-alt {
    color: rgba(255, 255, 255, 0.80);
    font-style: italic;
    font-weight: 400;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
    margin-top: -2px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. SINGLE — tag pills (interest categories)
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body .ldt-hero-single__tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--ldt-glass-light, rgba(255, 255, 255, 0.16)) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--ldt-radius-pill, 9999px);
    color: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition:
        background-color 250ms var(--ldt-ease-portal, ease),
        transform 250ms var(--ldt-ease-portal, ease),
        color 250ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-single__tag:hover {
        background: rgba(255, 140, 0, 0.30) !important;
        color: #ffffff;
        transform: translateY(-1px);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. SINGLE — actions row (Book Now CTA + Save button)
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-single__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Book Now CTA — the .ldt-btn--accent class already exists in components.
   We polish the in-hero appearance with brand-tinted shadow + hover lift. */
body .ldt-hero-single__actions .ldt-btn--accent {
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%)) !important;
    box-shadow: var(--ldt-shadow-accent,
                0 10px 30px rgba(255, 140, 0, 0.30));
    transition:
        transform 250ms var(--ldt-ease-portal, ease),
        box-shadow 250ms var(--ldt-ease-portal, ease),
        filter 250ms var(--ldt-ease-portal, ease);
}

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

/* Save button — glass-light treatment with heart icon */
body .ldt-hero-single__save.ldt-btn--white {
    background: rgba(255, 255, 255, 0.16) !important;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.40) !important;
    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);
}

body .ldt-hero-single__save.ldt-btn--white svg {
    transition:
        fill 300ms var(--ldt-ease-portal, ease),
        stroke 300ms var(--ldt-ease-portal, ease),
        transform 300ms var(--ldt-ease-portal, ease);
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-single__save.ldt-btn--white:hover {
        background: rgba(255, 255, 255, 0.28) !important;
        border-color: rgba(255, 255, 255, 0.65) !important;
        transform: translateY(-2px);
    }

    body .ldt-hero-single__save.ldt-btn--white:hover svg {
        stroke: var(--ldt-accent, #ff8c00);
        transform: scale(1.1);
    }
}

/* Saved state — heart filled with accent color */
body .ldt-hero-single__save.is-saved svg,
body .ldt-hero-single__save[aria-pressed="true"] svg {
    fill: var(--ldt-accent, #ff8c00);
    stroke: var(--ldt-accent, #ff8c00);
    animation: ldt-bounce-in 600ms var(--ldt-ease-portal, ease);
}

body .ldt-hero-single__save.is-saved,
body .ldt-hero-single__save[aria-pressed="true"] {
    background: rgba(255, 140, 0, 0.18) !important;
    border-color: rgba(255, 140, 0, 0.55) !important;
}

body .ldt-hero-single__save.is-saved .ldt-hero-single__save-text::before,
body .ldt-hero-single__save[aria-pressed="true"] .ldt-hero-single__save-text::before {
    content: "Saved";
}

body .ldt-hero-single__save.is-saved .ldt-hero-single__save-text,
body .ldt-hero-single__save[aria-pressed="true"] .ldt-hero-single__save-text {
    /* The PHP-injected label says "Save"; once .is-saved is added we display
       "Saved" instead via the ::before content trick above and hide the
       original text. Fallback-safe — if JS doesn't add the class, the text
       stays as "Save". */
    font-size: 0;
    line-height: 0;
}

body .ldt-hero-single__save.is-saved .ldt-hero-single__save-text::before,
body .ldt-hero-single__save[aria-pressed="true"] .ldt-hero-single__save-text::before {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ldt-accent, #ff8c00);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    body .ldt-hero-single__save.is-saved svg,
    body .ldt-hero-single__save[aria-pressed="true"] svg {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. SINGLE — gallery dots
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-hero-single__dots {
    display: flex;
    gap: 8px;
}

body .ldt-hero-single__dot {
    background: rgba(255, 255, 255, 0.32);
    border: none;
    transition:
        background-color 250ms var(--ldt-ease-portal, ease),
        transform 250ms var(--ldt-ease-portal, ease),
        width 350ms var(--ldt-ease-portal, ease);
}

body .ldt-hero-single__dot--active {
    background: var(--ldt-gradient-accent,
                linear-gradient(90deg, #ff8c00, #e07a00)) !important;
    box-shadow: 0 0 8px rgba(255, 140, 0, 0.50);
    /* Active dot — wider pill (existing rule may set this; we ensure it) */
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-hero-single__dot:hover {
        background: rgba(255, 255, 255, 0.55);
        transform: scale(1.1);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. GUIDE HERO — overlay + reveal stagger
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Overlay — same multi-stop pattern as archive/region from E7 */
body .ldt-hero--guide .ldt-hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 30, 80, 0.72) 100%
    ) !important;
}

/* Reveal stagger — guide is a static hero, run on first paint */
body .ldt-hero--guide .ldt-hero__breadcrumb,
body .ldt-hero-guide__badge,
body .ldt-hero-guide__title,
body .ldt-hero-guide__type,
body .ldt-hero-guide__meta {
    animation: ldt-fade-up 700ms var(--ldt-ease-portal, ease) backwards;
}

body .ldt-hero--guide .ldt-hero__breadcrumb { animation-delay:  50ms; }
body .ldt-hero-guide__badge                 { animation: ldt-zoom-in 600ms var(--ldt-ease-portal, ease) 130ms backwards; }
body .ldt-hero-guide__title                 { animation-delay: 210ms; }
body .ldt-hero-guide__type                  { animation-delay: 290ms; }
body .ldt-hero-guide__meta                  { animation-delay: 370ms; }

@media (prefers-reduced-motion: reduce) {
    body .ldt-hero--guide .ldt-hero__breadcrumb,
    body .ldt-hero-guide__badge,
    body .ldt-hero-guide__title,
    body .ldt-hero-guide__type,
    body .ldt-hero-guide__meta {
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. GUIDE HERO — badge + title + type + meta polish
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Guide badge — uppercase pill with icon, accent gradient */
body .ldt-hero-guide__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ldt-gradient-accent,
                linear-gradient(135deg, #ff8c00 0%, #e07a00 100%));
    color: #ffffff;
    border-radius: var(--ldt-radius-pill, 9999px);
    box-shadow: var(--ldt-shadow-offer, 0 4px 15px rgba(255, 140, 0, 0.40));
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body .ldt-hero-guide__badge svg {
    flex-shrink: 0;
}

/* Guide title — chiseled */
body .ldt-hero-guide__title {
    text-shadow:
        0  2px 10px rgba(0,   0,   0, 0.40),
        0  6px 24px rgba(0,  20,  60, 0.45),
        0  0   40px rgba(0,  87, 184, 0.20);
    letter-spacing: -0.01em;
}

/* Type badge — keeps PHP-injected dynamic background-color, adds polish */
body .ldt-hero-guide__type {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.20);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Meta strip — flex row with gap */
body .ldt-hero-guide__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

/* Meta item — soft white text + icon */
body .ldt-hero-guide__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}

body .ldt-hero-guide__meta-item svg {
    color: var(--ldt-accent, #ff8c00);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 11. RESPONSIVE — tighter spacing on mobile
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Single — actions wrap to a column on tight screens; gap stays */
    body .ldt-hero-single__actions {
        gap: 10px;
    }

    /* Tags + IATA — smaller padding for mobile */
    body .ldt-hero-single__tag {
        padding: 4px 10px;
        font-size: 11px;
    }

    body .ldt-hero-single__iata {
        padding: 3px 8px;
        font-size: 11px;
    }

    /* Guide — badge/title/meta tighter */
    body .ldt-hero-guide__badge {
        padding: 6px 12px;
        font-size: 11px;
    }

    body .ldt-hero-guide__meta {
        gap: 14px;
    }

    body .ldt-hero-guide__meta-item {
        font-size: 12px;
    }
}


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