/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — CARD HOVER POLISH (3.1.19)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-card-hover-polish.css
 * @package     Lavisa_Destinations_Theme
 * @since       3.1.19
 * @depends     ALL prior enhanced CSS
 *
 * User reported card hover transitions across the site felt too fast/snappy
 * — wanted a more luxurious, premium-product feel.
 *
 * Audit of current durations:
 *
 *   .ldt-card            → 0.3s ease           (from --ldt-transition)
 *   .ldt-deal            → 0.22s var(--ldt-ease-out)
 *   .ldt-attraction-card → ~0.25s
 *   .ldt-deal-card       → 0.15s, 0.15s        (single-page deals)
 *   .ldt-service-card    → 0.32s cubic-bezier  (from 3.1.18)
 *
 * 220-320ms is "snappy" / "reactive". 500ms + a smooth ease-out curve
 * (cubic-bezier(0.22, 1, 0.36, 1) — material standard "ease-out-expo")
 * gives the impression of weight + intentionality on hover. Premium
 * travel sites (Booking.com, Airbnb, hotels.com) all sit in the 400-600ms
 * range for card hover.
 *
 * Override pattern: target each card class with the `body` prefix for
 * cascade specificity. Override the `transition` property (not `transition-
 * duration` alone, because the original transition lists multiple
 * properties separately and we want one unified curve).
 *
 * PURE CSS LAYER — no PHP touched, no other CSS edited.
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. UNIVERSAL CARD TRANSITION — 500ms, smooth ease-out-expo
 *
 * Targets all known card variants in the theme. Each gets the same
 * duration + curve so cards hover consistently across the site.
 * Properties chosen to cover transform + shadow + border + opacity since
 * different card types animate different combinations.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-card,
body .ldt-deal,
body .ldt-deal-card,
body .ldt-attraction-card,
body .ldt-service-card,
body .ldt-shopping-card,
body .ldt-dining-card,
body .ldt-nightlife-card,
body .ldt-trip-card,
body .ldt-hotel-card,
body .ldt-destination-card {
    transition:
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
        background 500ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. CARD INTERNAL ELEMENTS — match the parent's pace
 *
 * Some cards animate child elements on parent hover (e.g. icon scale,
 * arrow shift, image zoom). Slow those too so the whole hover feels
 * unified rather than disjointed (parent slow + children fast looks
 * uncoordinated).
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-card *,
body .ldt-deal *,
body .ldt-deal-card *,
body .ldt-attraction-card *,
body .ldt-service-card *,
body .ldt-shopping-card *,
body .ldt-dining-card *,
body .ldt-nightlife-card *,
body .ldt-trip-card *,
body .ldt-hotel-card *,
body .ldt-destination-card * {
    transition-duration: 500ms !important;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* But NOT for elements that have their own deliberate transition rules
 * we don't want to slow (close buttons, modal CTAs, focus rings, etc.)
 * — those scope themselves. */
body .ldt-card .ldt-attr-modal__close,
body .ldt-deal-modal__close,
body .ldt-deal-modal__cta,
body .ldt-deal-modal__cta-arrow,
body .ldt-attr-modal__close,
body .ldt-attr-modal__website,
body .wld-mkt-popup-close,
body .wld-mkt-popup-cta {
    transition-duration: revert !important;
    transition-timing-function: revert !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. NESTED IMAGE ZOOM ON HOVER (a common premium pattern)
 *
 * If any card has a nested .ldt-deal__img / .ldt-attraction-card__img
 * etc., add a subtle slow zoom to give the hover even more depth.
 * Only adds the transition; only triggers if the card itself uses
 * transform on its image. No-op for cards that don't.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-deal__img,
body .ldt-attraction-card__img,
body .ldt-shopping-card__img,
body .ldt-dining-card__img,
body .ldt-hotel-card__img,
body .ldt-destination-card__img {
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    body .ldt-card,
    body .ldt-deal,
    body .ldt-deal-card,
    body .ldt-attraction-card,
    body .ldt-service-card,
    body .ldt-shopping-card,
    body .ldt-dining-card,
    body .ldt-nightlife-card,
    body .ldt-trip-card,
    body .ldt-hotel-card,
    body .ldt-destination-card,
    body .ldt-card *,
    body .ldt-deal *,
    body .ldt-deal-card *,
    body .ldt-attraction-card *,
    body .ldt-service-card *,
    body .ldt-shopping-card *,
    body .ldt-dining-card *,
    body .ldt-nightlife-card *,
    body .ldt-trip-card *,
    body .ldt-hotel-card *,
    body .ldt-destination-card *,
    body .ldt-deal__img,
    body .ldt-attraction-card__img,
    body .ldt-shopping-card__img,
    body .ldt-dining-card__img,
    body .ldt-hotel-card__img,
    body .ldt-destination-card__img {
        transition: none !important;
    }
}


/* ─── END OF ldt-enhanced-card-hover-polish.css ───────────────────────────── */