/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Lavisa Destinations Theme — ATTRACTION MODAL POLISH (3.1.10)
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @file        assets/css/ldt-enhanced-modal-polish.css
 * @package     Lavisa_Destinations_Theme
 * @since       3.1.10  (post-3.1.9 — attraction modal redesign)
 * @depends     ALL prior enhanced CSS (loads after hero-polish at end of chain)
 *
 * Targets the attraction detail modal (sections/single/section-attractions.php
 * lines 181-240 — the popup that appears when clicking an attraction card on
 * a destination page). User reported:
 *
 *   1. Header image area "isn't appearing well" — too tall, abrupt transition
 *      to body content, no visual depth
 *   2. Modal width feels too narrow at 600px — content (badge, title, 4-item
 *      meta row, description, hours, CTA) cramped
 *   3. Whole modal needs enhancement
 *
 * Existing modal CSS (inline <style> in section-attractions.php):
 *
 *   .ldt-attr-modal__content { max-width: 600px; max-height: 85vh; }
 *   .ldt-attr-modal__img     { height: 240px; object-fit: cover; }
 *
 * Changes via cascade override (no partial edit):
 *
 *   • Width: 600px → 760px (more breathing room for desktop)
 *   • Image: 240px → 200px (less dominant) + gradient bottom-fade overlay
 *     using ::after on the image wrapper for visual transition to body
 *   • Border-radius: bigger (1.5rem) for premium feel
 *   • Multi-layer drop shadow for depth
 *   • Category badge: gradient pill with accent shadow
 *   • Title: bigger, bolder
 *   • Meta row: pills with subtle borders
 *   • Description: better line-height + slight indent
 *   • Hours/details rows: brand-blue subtle dividers
 *   • Visit Website button: accent gradient with glow + arrow shift on hover
 *   • Close button: brand-blue tint, accent on hover, rotate 90° animation
 *   • Mobile (≤768px): reverts to compact dimensions
 *   • Reduced motion: all transforms/transitions disabled
 *
 *   PURE CSS LAYER — NO PHP partial is touched.
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════════════
 * 0. Z-INDEX FIX — Sit above WP admin bar (99999) and site sticky headers
 *
 * The original CSS uses `z-index: var(--ldt-z-modal)` which resolves to 400
 * (defined in assets/css/ldt-main.css line 105). That's WAY below:
 *   • WordPress admin bar:        99999
 *   • Site sticky mobile menu:    9999
 *   • Site mega-panel header:     ~250
 *
 * On a logged-in localhost dev environment, the admin bar ends up rendering
 * OVER the modal overlay AND the modal content — clipping the top ~150px of
 * the modal image and making it look "cut off" while the headers remain
 * fully visible (and not darkened by the overlay).
 *
 * Force the modal above everything: 999999 covers all known z-index ceilings
 * including WP admin bar without disrupting tooltips/notifications that
 * might use 9999999+.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal {
    z-index: 999999 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 1. MODAL CONTAINER — flex column so image stays put while body scrolls
 *
 * 3.1.10 used `overflow: hidden` on __content which kept the rounded corners
 * pretty but if the body content was taller than 88vh, the user couldn't
 * see the bottom (CTA cut off) OR they scrolled inside __content and the
 * image scrolled away with everything else (user reported "modal top cut
 * off" — that was the image scrolling out of view because the whole content
 * scrolls together).
 *
 * Fix: __content is a flex column. The image (flex-shrink: 0) holds its
 * 200px. The body becomes the scroll container (overflow-y: auto, flex 1
 * 1 auto) so only the body scrolls when content exceeds viewport. Close
 * button (absolutely positioned to __content) stays at top:16px regardless.
 * Rounded corners preserved via `overflow: hidden` on __content + the image
 * inheriting the top corners, the body inheriting bottom corners.
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__overlay {
    background: rgba(0, 12, 30, 0.68) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

body .ldt-attr-modal__content {
    max-width: 720px !important;
    width: 92vw !important;
    max-height: 80vh !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow:
        0 32px 80px -20px rgba(0, 53, 128, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.50) inset !important;
    background: #ffffff !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 2. IMAGE HEADER — fixed at top, doesn't shrink or scroll
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 160px !important;
}

/* Body — the scrollable area; gets a polished thin scrollbar */
body .ldt-attr-modal__body {
    padding: 20px 28px 22px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    /* Prevent layout shift when scrollbar appears */
    scrollbar-gutter: stable;
    /* Cross-browser scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 53, 128, 0.30) transparent;
}

body .ldt-attr-modal__body::-webkit-scrollbar {
    width: 6px;
}
body .ldt-attr-modal__body::-webkit-scrollbar-thumb {
    background: rgba(0, 53, 128, 0.30);
    border-radius: 3px;
}
body .ldt-attr-modal__body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 53, 128, 0.50);
}
body .ldt-attr-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

/* Subtle gradient at the top of the body where it meets the image — gives a
   visual tuck without depending on the image bottom (which can be any color). */
body .ldt-attr-modal__body::before {
    content: "";
    position: sticky;
    top: 0;
    display: block;
    height: 12px;
    margin: -20px -28px 12px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.00) 100%
    );
    pointer-events: none;
    z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 3. CATEGORY BADGE — gradient pill with accent shadow
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__cat {
    display: inline-block !important;
    padding: 5px 14px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    background: linear-gradient(
        135deg,
        #003580 0%,
        #0057b8 100%
    ) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
    box-shadow:
        0 3px 8px rgba(0, 53, 128, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 4. TITLE — bigger, bolder, tighter tracking
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__name {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.015em !important;
    color: var(--ldt-dark, #1e293b) !important;
    margin: 0 0 12px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 5. META ROW — pill-style indicators with subtle borders
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

body .ldt-attr-modal__meta > * {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 12px !important;
    background: rgba(0, 53, 128, 0.05) !important;
    border: 1px solid rgba(0, 53, 128, 0.10) !important;
    border-radius: 9999px !important;
    color: var(--ldt-gray-700, #334155) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 6. DESCRIPTION — better line-height + readability
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--ldt-gray-700, #334155) !important;
    margin-bottom: 18px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 7. DETAILS ROWS (Hours, etc.) — nicer dividers + brand-blue label
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__details {
    margin-bottom: 18px !important;
    border-top: 1px solid rgba(0, 53, 128, 0.12);
    padding-top: 4px;
}

body .ldt-attr-modal__detail-row {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 53, 128, 0.08) !important;
    font-size: 13.5px !important;
    align-items: center !important;
}

body .ldt-attr-modal__detail-row:last-child {
    border-bottom: none !important;
}

/* Label cell (left) — brand blue, semibold */
body .ldt-attr-modal__detail-row > *:first-child {
    color: var(--ldt-primary, #003580) !important;
    font-weight: 700 !important;
}

/* Value cell (right) — gray-700 */
body .ldt-attr-modal__detail-row > *:last-child {
    color: var(--ldt-gray-700, #334155) !important;
    text-align: right !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 8. VISIT WEBSITE button — accent gradient with glow + arrow shift on hover
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__website {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: linear-gradient(
        135deg,
        #003580 0%,
        #0057b8 100%
    ) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.005em !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    box-shadow:
        0 6px 18px rgba(0, 53, 128, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-attr-modal__website:hover {
        transform: translateY(-2px);
        box-shadow:
            0 12px 28px rgba(0, 53, 128, 0.55),
            0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
        filter: brightness(1.08);
    }

    /* If the button has a trailing arrow icon/character, nudge it */
    body .ldt-attr-modal__website:hover::after,
    body .ldt-attr-modal__website:hover svg {
        transform: translateX(3px);
    }
}

body .ldt-attr-modal__website::after,
body .ldt-attr-modal__website svg {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 9. CLOSE button — brand-blue tint, accent on hover, 90° rotate animation
 * ═══════════════════════════════════════════════════════════════════════════════ */

body .ldt-attr-modal__close {
    width: 38px !important;
    height: 38px !important;
    position: absolute !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--ldt-primary, #003580) !important;
    border: 1px solid rgba(0, 53, 128, 0.16) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.40) inset !important;
    transition:
        background 220ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10 !important;
}

@media (hover: hover) and (pointer: fine) {
    body .ldt-attr-modal__close:hover {
        background: linear-gradient(
            135deg,
            #ff9d1a 0%,
            #ff8c00 100%
        ) !important;
        color: #ffffff !important;
        border-color: transparent !important;
        transform: rotate(90deg);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 10. MOBILE — back to compact dimensions
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    body .ldt-attr-modal__content {
        max-width: 96vw !important;
        max-height: 88vh !important;
        border-radius: 1.25rem !important;
    }

    body .ldt-attr-modal__img {
        height: 150px !important;
        flex-basis: 150px !important;
    }

    body .ldt-attr-modal__body {
        padding: 18px 20px 20px !important;
    }

    body .ldt-attr-modal__body::before {
        margin: -18px -20px 12px;
    }

    body .ldt-attr-modal__name {
        font-size: 20px !important;
    }

    body .ldt-attr-modal__close {
        width: 34px !important;
        height: 34px !important;
        top: 12px !important;
        right: 12px !important;
    }

    body .ldt-attr-modal__website {
        padding: 11px 20px !important;
        font-size: 13.5px !important;
    }

    body .ldt-attr-modal__meta {
        gap: 6px !important;
    }

    body .ldt-attr-modal__meta > * {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * 11. REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    body .ldt-attr-modal__website,
    body .ldt-attr-modal__website::after,
    body .ldt-attr-modal__website svg,
    body .ldt-attr-modal__close {
        transition: none !important;
    }

    body .ldt-attr-modal__website:hover,
    body .ldt-attr-modal__close:hover {
        transform: none !important;
    }

    body .ldt-attr-modal__website:hover::after,
    body .ldt-attr-modal__website:hover svg {
        transform: none !important;
    }
}


/* ─── END OF ldt-enhanced-modal-polish.css ────────────────────────────────── */